【HarmonyOS】纯血鸿蒙真实项目开辟---履历总结贴

项目场景：

将已有的Web网页接入到原生App。
涉及到一些网页回退、webviewController实行时机报错1710000001、位置定位数据获取、拉起呼叫页面、系统分享本领使用等。

---

题目描述

• 我们在选项卡组件中，在每个TabContent内容页中使用web组件加载网页。
  在最开始接入操作时，出现了Web组件加载某个页面，出现白屏、页面显示不出来。
  

办理方案：

颠末对题目定位，发现需要设置是否开启文档对象模子存储接口（DOM Storage API）权限，默认未开启。

1. Web({ src: this.webSrc, controller: this.webviewController })
2.   .domStorageAccess(true);

复制代码

题目描述

• 每个TabContent内容页中使用web组件加载的网页，会涉及到一些页面的返回。如果是用户点击返回，网页端会举行回退操作，若用户使用侧滑返回网页端无法检测，会直接退出应用。
  

办理方案：

为了办理这个题目，我查阅到了有关侧滑返回或点击返回按钮时触发的自定义组件生命周期onBackPress（仅@Entry装饰的自定义组件生效）

1. @Entry
2. @Component
3. struct IndexComponent {
4.   @State textColor: Color = Color.Black;
6.   onBackPress() {
7.     this.textColor = Color.Red;
8.     console.info('IndexComponent onBackPress');
9.   }
11.   build() {
12.     Column() {
13.       Text('Hello World')
14.         .fontColor(this.textColor)
15.         .fontSize(30)
16.         .margin(30)
17.     }.width('100%')
18.   }
19. }

复制代码

  返回true表示页面自己处理返回逻辑，不举行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理。
  重点：在每个TabContent内容页加载的@Entry页面里，使用onBackPress是不生效的。我们只能在Tab所在的@Entry页面里，使用onBackPress才会生效。
为了控制TabContent中的Web页面回退，我们需要在Tab所在的页面里创建webviewController并将它通报给子组件。

1. 父组件示例代码：
2. import { Page1, Page2 } from './Page1'
4. @Entry
5. @Component
6. struct demo {
7.   //controller创建
8.   @Provide webcontroller1: webview.WebviewController = new webview.WebviewController();
9.   @Provide webcontroller2: webview.WebviewController = new webview.WebviewController();
10.   //返回逻辑
11.   onBackPress() {
12.     if (this.webcontroller1.accessStep(-1)) {
13.       this.webcontroller1.backward()
14.       // 执行用户自定义返回逻辑
15.       return true;
16.     } else if (this.webcontroller2.accessStep(-1)) {
17.       this.webcontroller2.backward();
18.       // 执行用户自定义返回逻辑
19.       return true;
20.     }  else {
21.       //执行系统默认返回逻辑，返回上一个page页
22.       return false;
23.     }
24.   }
26.   build() {
27.     Tabs(){
28.       TabContent(){
29.         Page1()
30.       }.tabBar('示例一')
31.       TabContent(){
32.         Page2()
33.       }.tabBar('示例二')
34.     }
35.   }
36. }

复制代码

1. 子组件示例代码：
2. import { webview } from '@kit.ArkWeb'
4. @Entry
5. @Component
6. export struct Page1/2 {
7. @Consume webcontroller1/2:webview.WebviewController
9. build() {
10.    RelativeContainer() {
11.      Web({src:'https://www.baidu.com',controller:this.webcontroller1/2})
12.        .domStorageAccess(true)
13.    }
14.    .height('100%')
15.    .width('100%')
16. }
17. }

复制代码

题目描述

• 因为每个Web页面的控制器是由父组件传入的，我们在使用时可能会出现710000001的报错，经查阅论坛发现，该报错缘故原由是Web组件还未创建，我们的WebviewController控制器先实行了。
  

   高发于在emitter中调用WebviewController控制器，只管避免在emitter中使用，若必须使用参照下面的办理方案
  办理方案：

办理这个题目，我并没有发现可以同一办理各种情况的方法。以下有多种办理方法：

• [1] 在web组件的生命周期onPageEnd中使用控制器
  
• [2]在onControllerAttached()这一回调方法中使用控制器
  
• [3]在onDisAppear中使用控制器
  

题目描述

• 我们在一些场景下可能会需要用户的具体位置，以下是关于用户授权和逆地址编码转化，获取地址位置描述的方案总结。
  

办理方案：

1. 获取用户位置授权
2.   onClickGetLocation = async () => {
3.     //首次权限请求
4.     if (this.step == 0) {
5.       const steps = await abilityAccessCtrl.createAtManager()
6.         .requestPermissionsFromUser(getContext(),
7.           ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
8.       this.step++
9.     }
10.     // 二次请求用户同意权限
11.     await this.checkPermissions()
12.     //获取当前位置
13.     let Location = await geoLocationManager.getCurrentLocation();
14.     await this.locationChange(Location)
16.     return JSON.stringify(this.returnInfor)
17.   }

复制代码

1. 若用户拒绝定位权限二次拉起
2.   async checkPermissions() {
3.     let grantStatus1: boolean = await WebUtils.checkPermissionGrant('ohos.permission.LOCATION') ===
4.     abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED; // 获取精确定位权限状态
5.     let grantStatus2: boolean = await WebUtils.checkPermissionGrant('ohos.permission.APPROXIMATELY_LOCATION') ===
6.     abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED; // 获取模糊定位权限状态
7.     // 精确定位权限只能跟模糊定位权限一起申请，或者已经有模糊定位权限才能申请精确定位权限
8.     if (!grantStatus2 && !grantStatus1) {
9.       // 用户拒绝二次拉起弹窗
10.       let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
11.       let context: Context = getContext(this) as common.UIAbilityContext;
13.       await atManager.requestPermissionsFromUser(context,
14.         ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
15.       await atManager.requestPermissionOnSetting(context, ['ohos.permission.APPROXIMATELY_LOCATION'])
16.         .then((data: Array<abilityAccessCtrl.GrantStatus>) => {
17.           console.info('data:' + JSON.stringify(data));
18.         })
19.         .catch((err: BusinessError) => {
20.           console.error('data:' + JSON.stringify(err));
21.         });
22.     } else {
23.       // 已经授权，可以继续访问目标操作
24.       return
25.     }
26.   }

复制代码

1. /** * 定位回调 */
2.   //获取用户位置信息
3.   private async locationChange(location: geoLocationManager.Location) {
4.     if (location) {
5.       let reverseGeocodeRequest: geoLocationManager.ReverseGeoCodeRequest = {
6.         'latitude': location.latitude, // 表示纬度信息，正值表示北纬，负值表示南纬。取值范围为-90到90。仅支持WGS84坐标系。
7.         'longitude': location.longitude, // 表示经度信息，正值表示东经，负值表是西经。取值范围为-180到180。仅支持WGS84坐标系。
8.         // 指定返回位置信息的最大个数。取值范围为大于等于0，推荐该值小于10。默认值是1。
9.         'maxItems': 1
10.       };
11.       // 逆地址编码转化，获取地址位置描述
12.       let data = await geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest);
13.       if (data) {
14.         if (data[0].locality !== undefined) {
15.           let res = data[0] as DeatilPositionViewPage
16.           let placeName = res.placeName
17.           let countryName = res.countryName
18.           let provience = placeName.slice(0, placeName.indexOf('省') + 1)
19.           let city = placeName.slice(placeName.indexOf('省') + 1, placeName.indexOf('市') + 1)
20.           let area = placeName.slice(placeName.indexOf('市') + 1, placeName.indexOf('区') + 1)
21.           let deatil = placeName.slice(placeName.indexOf('区') + 1)
22.           let address = `${countryName} ${provience} ${city} ${area} ${deatil}`
23.           this.returnInfor = {
24.             address: address,
25.             longitude: res.longitude,
26.             latitude: res.latitude
27.           }
28.         }
29.       }
30.     }
31.   };

复制代码

1. 运行使用代码块
2. @Entry
3. @Component
4. export struct Page1 {
5.   @State returnInfor: returnDeatilPosition = {
6.     address: '',
7.     longitude: 0,
8.     latitude: 0
9.   }
10.   //判断是否为首次请求
11.   step = 0
12.   
13.   //写入上面三个方法
15.   build() {
16.     RelativeContainer() {
17.      Button(this.returnInfor)
18.        .onclick(async()=>{await this.onClickGetLocation()})
19.     }
20.     .height('100%')
21.     .width('100%')
22.   }
23. }

复制代码

题目描述

• 我们在一些场景下可能会需要拉起用户的拨号界面，以下是关于拉起拨号的方案总结。
  

   值得注意的是如果这里是混合开辟需要的功能，我们可以把该方法写在.onLoadIntercept((event) => {})这个方法里面。具体相关使用自行查阅官方文档，较为简朴不做赘述。
  办理方案：

1. import { call, observer } from '@kit.TelephonyKit';
2. import { BusinessError } from '@kit.BasicServicesKit';
4. // 调用查询能力接口
6. @Entry
7. @Component
8. struct callphone {
9.   build() {
10.     Text('1111').onClick(()=>{
11.       let isSupport = call.hasVoiceCapability();
12.       if (isSupport) {
13.         // 如果设备支持呼叫能力，则继续跳转到拨号界面，并显示拨号的号码
14.         call.makeCall("4009609206", (err: BusinessError) => {
15.         });
17.       }
18.     })
19.   }
20. }

复制代码

题目描述

• 我们在一些场景下可能会需要用到系统分享本领，以下是关于系统分享的方案总结。
  

办理方案：

1. async share(ctx: Context, url: string, title: string) {
2.     let shareData: systemShare.SharedData = new systemShare.SharedData({
3.       utd: uniformTypeDescriptor.UniformDataType.HYPERLINK,
4.       content: url,
5.       title: title,
6.       description: '分享此链接',
7.     });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。