搞定了 ArkWeb 基础页面搭建把 Web 组件生命周期做了绑定解决最头疼的内存泄漏问题。但很多同学照着代码跑通之后马上遇到新麻烦H5 页面调用摄像头直接拒绝、上传图片无响应更换 H5 资源之后 APP 里面还是旧页面缓存脏数据清不掉部分内网域名直接拦截打不开。这些问题大多不是代码逻辑 bug而是 ArkWeb 的权限、网络访问策略和缓存机制没配置到位。很多新手会误以为只要申请INTERNET网络权限所有网页就能随便跑。实际 HarmonyOS7 对 ArkWeb 做了严格的访问隔离网页想调用设备能力、访问指定域名都需要单独授权浏览器缓存也需要手动管控否则上线之后会埋下一堆隐性问题。本篇手记我们就把 ArkWeb 配套配置一次性讲透网页设备权限申请、网络域名白名单配置、页面缓存策略管理同时演示手动清理缓存、禁用缓存的实战代码。前置阅读掌握 ArkWeb 基础页面与生命周期管理 前置环境DevEco Studio 白色皮肤HarmonyOS7 SDK一、先分清两个权限系统权限 和 ArkWeb 网页权限很多人在这里混淆踩坑率极高。应用系统权限在module.json5里面声明是 APP 整体向操作系统申请权限比如网络、相机、存储。没有这个声明APP 根本没有调用硬件的资格。ArkWeb 网页权限H5 页面在 Web 内核里发起权限请求比如 H5 调用摄像头、麦克风、相册需要我们在 ArkTS 代码中写回调手动同意或者拒绝网页的请求。 就算你在 module.json5 声明了相机权限如果 ArkWeb 没有配置权限回调H5 发起摄像头调用时依然会直接被拦截H5 拿不到摄像头流。类比理解系统权限相当于小区给你办了门禁卡允许你进入小区ArkWeb 权限回调相当于家里的房门H5 访客想进房间你需要开门放行。门禁有了房门不开访客依旧进不来。1.1 module.json5 基础权限配置首先在 module.json5 中除了 INTERNET把 H5 常用能力对应的系统权限提前声明。requestPermissions: [ { name: ohos.permission.INTERNET }, { name: ohos.permission.CAMERA }, { name: ohos.permission.MICROPHONE }, { name: ohos.permission.READ_MEDIA } ]注意ohos.permission.READ_MEDIA用于 H5 选择相册图片。HarmonyOS7 不再推荐旧的 READ_EXTERNAL_STORAGE媒体文件读取统一使用 READ_MEDIA。1.2 ArkWeb 网页权限回调代码Web 组件提供onPermissionRequest回调专门拦截 H5 发起的权限申请我们在这里做判断决定允许或者拒绝。Web({ src: https://example.com, controller: this.webController }) .width(100%) .height(80%) .onPermissionRequest((permissionReq) { console.info(H5发起权限请求类型, permissionReq.getPermissionType()) // 允许H5使用摄像头、麦克风 if(permissionReq.getPermissionType() WebPermissionType.CAMERA || permissionReq.getPermissionType() WebPermissionType.MICROPHONE){ permissionReq.grant(); }else{ permissionReq.deny(); } })grant()放行允许 H5 使用该设备能力deny()拒绝本次权限申请踩坑提醒这个回调只处理 H5 网页发起的权限。原生页面弹窗申请权限还是要用requestPermissionFromUser不要混在一起。二、网络域名白名单网络安全策略配置HarmonyOS7 默认开启网络安全限制。如果访问 HTTP 非加密地址或者访问未加入白名单的内网域名网页直接拦截报网络错误。很多人本地测试内网 H5死活打不开网页根源就是没有配置域名白名单。网络安全配置写在module.json5的networkSecurity节点支持配置允许明文 HTTP 访问、域名白名单。networkSecurity: { cleartextTraffic: { allow: true }, domainRules: [ { domains: [192.168.1.*, localhost], cleartextTraffic: { allow: true } }, { domains: [*.example.com], cleartextTraffic: { allow: false } } ] }参数说明cleartextTraffic allow:true允许 HTTP 明文请求生产环境公网域名建议关闭只给内网、本地调试开启。domainRules域名规则支持通配符*.xxx.com可以针对不同域名单独控制是否允许 HTTP。重要提醒上线正式包公网业务域名不要开启 cleartextTraffic尽量全部使用 HTTPS避免通信内容被抓包篡改。内网调试环境才打开 HTTP 明文访问。常见坑配置完白名单之后修改 module.json5必须卸载模拟器 / 真机上旧应用重新编译安装。缓存的应用配置不会自动更新很多人改完配置直接热重载结果一直不生效白白浪费大量调试时间。三、ArkWeb 页面缓存机制与管控ArkWeb 内核自带缓存会自动保存网页资源JS、CSS、图片、HTML。好处是二次打开页面加载更快坏处是发布 H5 新版本之后用户 APP 依旧加载旧缓存页面出现版本不一致、bug 无法修复也就是大家常说的缓存脏数据。我们有三种缓存控制方案全局关闭缓存调试阶段常用加载页面时禁用本次请求缓存代码主动清理全部 Web 缓存3.1 全局缓存设置WebController.setCacheMode通过控制器设置缓存模式支持 4 种模式CacheMode.Default默认根据 http header 自动判断是否缓存线上默认CacheMode.None不使用缓存全部从网络拉取调试首选CacheMode.Online优先网络网络失败才读缓存CacheMode.Offline优先本地缓存离线模式aboutToAppear() { // 调试环境禁用缓存每次都拉最新资源 this.webController.setCacheMode(CacheMode.None); }注意setCacheMode 建议在页面初始化 aboutToAppear 调用不要在页面加载中途修改中途修改容易失效。3.2 主动清除缓存代码产品版本更新的时候我们可以提供一个 “清除网页缓存” 按钮一键清理 ArkWeb 内核缓存。Button(清空Web缓存) .margin(10) .onClick(async (){ await this.webController.clearCache(true); // true同时清除cookiefalse只清理资源缓存 console.info(ArkWeb缓存清理完成); })clearCache(boolean includeCookie)参数 true清理缓存同时删除网页 Cookiefalse 只清理静态资源。四、整合完整代码权限回调 缓存控制 生命周期把《Web 组件 H5 加载与生命周期管理》的生命周期代码 权限回调 缓存设置整合在一起完整可直接运行import { Web, WebController, WebLoadStatus, WebPermissionType, CacheMode } from kit.ArkWeb; import { router } from ohos/router; Entry Component struct ArkWebConfigPage { private webController: WebController new WebController(); State loadStatus: string 待加载; State hasError: boolean false; aboutToAppear() { console.info(aboutToAppear页面准备渲染); // 设置缓存模式调试环境禁用缓存 this.webController.setCacheMode(CacheMode.None); } onPageShow() { console.info(onPageShow 页面前台); this.webController.resume(); } onPageHide() { console.info(onPageHide 页面后台); this.webController.pause(); } aboutToDisappear() { console.info(aboutToDisappear 页面销毁); this.webController.destroy(); } build() { Column() { Text(H5加载状态${this.loadStatus}) .fontSize(16) .margin({top:10}) Button(清空Web缓存) .margin(10) .onClick(async (){ await this.webController.clearCache(true); }) if(this.hasError){ Column(){ Text(页面加载失败) .fontSize(20) .margin(10) Button(重新加载) .onClick((){ this.hasError false; this.webController.reload(); }) } } Web({ src: https://example.com, controller: this.webController }) .width(100%) .height(70%) .onLoadStatusChange((status: WebLoadStatus) { switch(status) { case WebLoadStatus.StartLoading: this.loadStatus 开始加载H5页面; this.hasError false; break; case WebLoadStatus.FinishLoading: this.loadStatus 页面加载完成; this.hasError false; break; case WebLoadStatus.ErrorLoading: this.loadStatus 页面加载失败请检查网络/域名白名单; this.hasError true; break; } }) .onErrorReceive((err){ console.error(H5加载异常, JSON.stringify(err)); this.hasError true; }) .onPermissionRequest((permissionReq) { console.info(H5权限请求, permissionReq.getPermissionType()) // 放行摄像头、麦克风 if(permissionReq.getPermissionType() WebPermissionType.CAMERA || permissionReq.getPermissionType() WebPermissionType.MICROPHONE){ permissionReq.grant(); }else{ permissionReq.deny(); } }) } .width(100%) .height(100%) } }五、实战测试验证配置效果测试 1H5 相机权限写一个简单 H5 页面调用 navigator.mediaDevices 获取摄像头。module.json5 声明 CAMERA 权限ArkWeb 增加 onPermissionRequest 放行相机权限真机打开页面H5 正常唤起摄像头注释 grant 改为 denyH5 获取媒体流直接报错。注意模拟器没有摄像头硬件权限测试必须真机测试模拟器只能做代码语法校验。测试 2内网域名访问配置 networkSecurity 白名单填写本地局域网 IP开启 cleartextTraffic。配置正确内网 H5 页面正常打开不配置白名单页面直接加载失败报网络拦截。测试 3缓存验证CacheMode.Default打开页面修改服务端 H5 页面内容再次访问展示旧页面缓存生效切换 CacheMode.None刷新页面直接拿到最新 H5 内容点击清空缓存按钮清理所有资源与 Cookie这里有个坑clearCache只能清理 ArkWeb 内核的缓存。H5 前端代码里 localStorage、sessionStorage 不属于这个缓存不会被 clearCache 清除。如果 H5 业务数据存在 localStorage要让前端 H5 自己清理原生这边无法直接清除。很多同学误以为 clearCache 能清理 H5 本地存储结果上线踩坑。六、本篇小结本篇我们搞定 ArkWeb 配套的三大核心配置网页设备权限、网络域名白名单、页面缓存管理。很多 ArkWeb 线上问题根源都在这些配置项不是业务代码问题。知识点回顾区分 APP 系统权限module.json5和 ArkWeb 网页权限onPermissionRequest 回调二者缺一不可HarmonyOS7 网络安全策略默认拦截未配置的内网域名、HTTP 明文请求内网调试需要配置 networkSecurity 域名白名单CacheMode 四种缓存模式调试优先 CacheMode.None生产环境默认 DefaultwebController.clearCache () 清理 Web 资源缓存 Cookie但无法清除 H5 localStorage/sessionStorage修改 module.json5 配置之后需要卸载重装应用热重载不会更新安全配置。实践指南搭建本地简易 HTTP 服务在内网放一个 H5 页面配置域名白名单在 ArkWeb 访问内网页面写 H5 的摄像头调用页面真机测试 onPermissionRequest 放行 / 拒绝两种情况的效果分别切换 CacheMode.Default 和 CacheMode.None观察页面资源缓存差异。