淘宝怎么建立自己的网站,个人网站推广方法,wordpress 小组插件,青岛响应式网站建设项目场景#xff1a;
将已有的Web网页接入到原生App。
涉及到一些网页回退、webviewController执行时机报错1710000001、位置定位数据获取、拉起呼叫页面、系统分享能力使用等。 问题描述
我们在选项卡组件中#xff0c;在每个TabContent内容页中使用web组件加载网页。 在…项目场景
将已有的Web网页接入到原生App。
涉及到一些网页回退、webviewController执行时机报错1710000001、位置定位数据获取、拉起呼叫页面、系统分享能力使用等。 问题描述
我们在选项卡组件中在每个TabContent内容页中使用web组件加载网页。 在最开始接入操作时出现了Web组件加载某个页面出现白屏、页面显示不出来。
解决方案
经过对问题定位发现需要设置是否开启文档对象模型存储接口DOM Storage API权限默认未开启。
Web({ src: this.webSrc, controller: this.webviewController }).domStorageAccess(true);问题描述
每个TabContent内容页中使用web组件加载的网页会涉及到一些页面的返回。如果是用户点击返回网页端会进行回退操作若用户使用侧滑返回网页端无法检测会直接退出应用。
解决方案
为了解决这个问题我查阅到了有关侧滑返回或点击返回按钮时触发的自定义组件生命周期onBackPress仅Entry装饰的自定义组件生效
Entry
Component
struct IndexComponent {State textColor: Color Color.Black;onBackPress() {this.textColor Color.Red;console.info(IndexComponent onBackPress);}build() {Column() {Text(Hello World).fontColor(this.textColor).fontSize(30).margin(30)}.width(100%)}
}返回true表示页面自己处理返回逻辑不进行页面路由返回false表示使用默认的路由返回逻辑不设置返回值按照false处理。 重点在每个TabContent内容页加载的Entry页面里使用onBackPress是不生效的。我们只能在Tab所在的Entry页面里使用onBackPress才会生效。 为了控制TabContent中的Web页面回退我们需要在Tab所在的页面里创建webviewController并将它传递给子组件。
父组件示例代码
import { Page1, Page2 } from ./Page1Entry
Component
struct demo {//controller创建Provide webcontroller1: webview.WebviewController new webview.WebviewController();Provide webcontroller2: webview.WebviewController new webview.WebviewController();//返回逻辑onBackPress() {if (this.webcontroller1.accessStep(-1)) {this.webcontroller1.backward()// 执行用户自定义返回逻辑return true;} else if (this.webcontroller2.accessStep(-1)) {this.webcontroller2.backward();// 执行用户自定义返回逻辑return true;} else {//执行系统默认返回逻辑返回上一个page页return false;}}build() {Tabs(){TabContent(){Page1()}.tabBar(示例一)TabContent(){Page2()}.tabBar(示例二)}}
}子组件示例代码
import { webview } from kit.ArkWebEntry
Component
export struct Page1/2 {Consume webcontroller1/2:webview.WebviewControllerbuild() {RelativeContainer() {Web({src:https://www.baidu.com,controller:this.webcontroller1/2}).domStorageAccess(true)}.height(100%).width(100%)}
}问题描述
因为每个Web页面的控制器是由父组件传入的我们在使用时可能会出现710000001的报错经查阅论坛发现该报错原因是Web组件还未创建我们的WebviewController控制器先执行了。 高发于在emitter中调用WebviewController控制器尽量避免在emitter中使用若必须使用参照下面的解决方案 解决方案
解决这个问题我并没有发现可以统一解决各种情况的方法。以下有多种解决方法
[1] 在web组件的生命周期onPageEnd中使用控制器[2]在onControllerAttached()这一回调方法中使用控制器[3]在onDisAppear中使用控制器
问题描述
我们在一些场景下可能会需要用户的具体位置以下是关于用户授权和逆地址编码转化获取地址位置描述的方案总结。
解决方案
获取用户位置授权onClickGetLocation async () {//首次权限请求if (this.step 0) {const steps await abilityAccessCtrl.createAtManager().requestPermissionsFromUser(getContext(),[ohos.permission.LOCATION, ohos.permission.APPROXIMATELY_LOCATION])this.step}// 二次请求用户同意权限await this.checkPermissions()//获取当前位置let Location await geoLocationManager.getCurrentLocation();await this.locationChange(Location)return JSON.stringify(this.returnInfor)}若用户拒绝定位权限二次拉起async checkPermissions() {let grantStatus1: boolean await WebUtils.checkPermissionGrant(ohos.permission.LOCATION) abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED; // 获取精确定位权限状态let grantStatus2: boolean await WebUtils.checkPermissionGrant(ohos.permission.APPROXIMATELY_LOCATION) abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED; // 获取模糊定位权限状态// 精确定位权限只能跟模糊定位权限一起申请或者已经有模糊定位权限才能申请精确定位权限if (!grantStatus2 !grantStatus1) {// 用户拒绝二次拉起弹窗let atManager: abilityAccessCtrl.AtManager abilityAccessCtrl.createAtManager();let context: Context getContext(this) as common.UIAbilityContext;await atManager.requestPermissionsFromUser(context,[ohos.permission.LOCATION, ohos.permission.APPROXIMATELY_LOCATION])await atManager.requestPermissionOnSetting(context, [ohos.permission.APPROXIMATELY_LOCATION]).then((data: ArrayabilityAccessCtrl.GrantStatus) {console.info(data: JSON.stringify(data));}).catch((err: BusinessError) {console.error(data: JSON.stringify(err));});} else {// 已经授权可以继续访问目标操作return}}/** * 定位回调 *///获取用户位置信息private async locationChange(location: geoLocationManager.Location) {if (location) {let reverseGeocodeRequest: geoLocationManager.ReverseGeoCodeRequest {latitude: location.latitude, // 表示纬度信息正值表示北纬负值表示南纬。取值范围为-90到90。仅支持WGS84坐标系。longitude: location.longitude, // 表示经度信息正值表示东经负值表是西经。取值范围为-180到180。仅支持WGS84坐标系。// 指定返回位置信息的最大个数。取值范围为大于等于0推荐该值小于10。默认值是1。maxItems: 1};// 逆地址编码转化获取地址位置描述let data await geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest);if (data) {if (data[0].locality ! undefined) {let res data[0] as DeatilPositionViewPagelet placeName res.placeNamelet countryName res.countryNamelet provience placeName.slice(0, placeName.indexOf(省) 1)let city placeName.slice(placeName.indexOf(省) 1, placeName.indexOf(市) 1)let area placeName.slice(placeName.indexOf(市) 1, placeName.indexOf(区) 1)let deatil placeName.slice(placeName.indexOf(区) 1)let address ${countryName} ${provience} ${city} ${area} ${deatil}this.returnInfor {address: address,longitude: res.longitude,latitude: res.latitude}}}}};运行使用代码块
Entry
Component
export struct Page1 {State returnInfor: returnDeatilPosition {address: ,longitude: 0,latitude: 0}//判断是否为首次请求step 0//写入上面三个方法build() {RelativeContainer() {Button(this.returnInfor).onclick(async(){await this.onClickGetLocation()})}.height(100%).width(100%)}
}问题描述
我们在一些场景下可能会需要拉起用户的拨号界面以下是关于拉起拨号的方案总结。 值得注意的是如果这里是混合开发需要的功能我们可以把该方法写在.onLoadIntercept((event) {})这个方法里面。具体相关使用自行查阅官方文档较为简单不做赘述。 解决方案
import { call, observer } from kit.TelephonyKit;
import { BusinessError } from kit.BasicServicesKit;// 调用查询能力接口Entry
Component
struct callphone {build() {Text(1111).onClick((){let isSupport call.hasVoiceCapability();if (isSupport) {// 如果设备支持呼叫能力则继续跳转到拨号界面并显示拨号的号码call.makeCall(4009609206, (err: BusinessError) {});}})}
}问题描述
我们在一些场景下可能会需要用到系统分享能力以下是关于系统分享的方案总结。
解决方案
async share(ctx: Context, url: string, title: string) {let shareData: systemShare.SharedData new systemShare.SharedData({utd: uniformTypeDescriptor.UniformDataType.HYPERLINK,content: url,title: title,description: 分享此链接,});
