【HarmonyOS】纯血鸿蒙真实项目开发---经验总结贴

embedded/2025/1/12 21:59:38/

项目场景：

将已有的Web网页接入到原生App。

涉及到一些网页回退、webviewController执行时机报错1710000001、位置定位数据获取、拉起呼叫页面、系统分享能力使用等。

问题描述

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

解决方案：

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

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

问题描述

  1. 每个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 './Page1'@Entry
@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.ArkWeb'@Entry
@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%')}
}

问题描述

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

高发于在emitter中调用WebviewController控制器，尽量避免在emitter中使用，若必须使用参照下面的解决方案

解决方案：

解决这个问题，我并没有发现可以统一解决各种情况的方法。以下有多种解决方法：

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

问题描述

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

解决方案：

获取用户位置授权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: Array<abilityAccessCtrl.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%')}
}

问题描述

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

值得注意的是如果这里是混合开发需要的功能，我们可以把该方法写在.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) => {});}})}
}

问题描述

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

解决方案：

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

http://www.ppmy.cn/embedded/153391.html

相关文章

【灵码助力安全2】——利用通义灵码辅助复现未公开漏洞的实践

【灵码助力安全2】——利用通义灵码辅助复现未公开漏洞的实践

前言 暨上一篇【灵码助力安全1】——利用通义灵码辅助快速代码审计的最佳实践之后&#xff0c;这第二篇主要是想分享一下通义灵码在复现未公开漏洞方面的应用&#xff0c;当然&#xff0c;前提也是必须得有相应的源码。 有的时候&#xff0c;由于安全人员水平的限制和时间、…
阅读更多...
前端如何处理后端传入的复杂数据格式

前端如何处理后端传入的复杂数据格式

在前后端联调过程中不难发现&#xff0c;有时候从后端获取到的数据格式并不是我们所想要的格式&#xff0c;这时候就需要我们自己动手去处理了。最近在开发项目过程中也是遇到了很多传入的数据格式和自己所想要展示的有所区别&#xff0c;这里就先记录一下吧&#xff0c;总结总…
阅读更多...
moviepy 将mp4视频文件提取音频mp3 - python 实现

moviepy 将mp4视频文件提取音频mp3 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” -------------------------------------------------------------…
阅读更多...
linux删除用户

linux删除用户

1、查看账号 cat /etc/passwd 查看所有用户账号信息&#xff1a;该文件记录了系统中的所有用户账号信息&#xff0c;包括用户名、用户ID、用户所属组等。 2、删除账号 基本删除&#xff1a;使用userdel命令删除用户账号&#xff0c;格式为userdel [选项] 用户名。如果不加任…
阅读更多...
2024年总结与2025年计划

2024年总结与2025年计划

2024年总结与2025年计划 ​ 今天是2024年12月29日, 星期日, 今年的第364天, 这一年99.18%的时间已流逝. 今天我才开动笔准备写的年终的总结。 时间流逝 一年&#xff0c;一方面觉得自己没有什么大的突破&#xff0c;并且感觉自己的时间也越来越少&#xff0c;今年下半年和上半…
阅读更多...
27_Redis AOF持久化

27_Redis AOF持久化

1.AOF介绍 AOF的全称是Append Only File，即文件追加的方式，也被称为追加模式或日志模式。AOF以独立日志的方式记录每次写命令（读操作不记录），Redis重启时再重新执行AOF文件中的命令来恢复数据。AOF会先把命令追加在AOF缓冲区，然后根据对应策略写入硬盘（appendfsync），…
阅读更多...
Vue.js：现代前端开发的灵活框架

Vue.js：现代前端开发的灵活框架

大家好&#xff01;我是 [数擎 AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | A…
阅读更多...
drawDB docker部属

drawDB docker部属

docker pull xinsodev/drawdb docker run --name some-drawdb -p 3000:80 -d xinsodev/drawdb浏览器访问&#xff1a;http://192.168.31.135:3000/
阅读更多...
最新文章

Copyright @ 2022~2023