HarmonyOS7 WebView 混合开发：原生和 H5 通信的 4 种姿势

文章目录前言WebView 基础搭建4 种通信方式对比JS 调原生javaScriptProxy原生调 JSrunJavaScriptCookie 与登录态踩坑白屏问题写在最后前言做移动开发纯原生的项目越来越少了。老板要快、要省钱、要热更新H5 混合开发基本是标配。但混合开发最头疼的事就是——原生和 H5 怎么通信H5 要调原生的支付原生要往 H5 里塞数据登录态怎么同步HarmonyOS7 的 WebView 组件提供了好几种通信方式我整理了 4 种最常用的姿势帮你一次搞明白。WebView 基础搭建先看怎么创建一个最基础的 WebViewimport{webview}fromkit.ArkWeb;EntryComponentstruct WebViewBasic{controller:webview.WebviewControllernewwebview.WebviewController();aboutToAppear(){webview.WebviewController.setWebDebuggingAccess(true);// 开启调试}build(){Column(){Web({src:$rawfile(index.html),// 加载本地 H5controller:this.controller}).width(100%).height(100%).javaScriptAccess(true)// 允许执行 JS.domStorageAccess(true)// 允许 DOM 存储}}}关键代码讲解setWebDebuggingAccess(true)——开发阶段必开不然 Chrome DevTools 调不了 H5 页面上线前关掉javaScriptAccess(true)—— 不开的话 JS 啥都干不了通信全废domStorageAccess(true)—— H5 用 localStorage 的话必须开$rawfile(index.html)—— 加载本地文件用$rawfile加载网络 URL 直接写字符串注意加载网络页面需要在module.json5里加ohos.permission.INTERNET权限。4 种通信方式对比原生和 H5 通信核心就两个方向H5 调原生和原生调 H5。方式方向核心 API适用场景javaScriptProxyH5 → 原生Web.javaScriptProxy()H5 调支付、弹窗、设备能力registerJavaScriptProxyH5 → 原生controller.registerJavaScriptProxy()动态注册更灵活runJavaScript原生 → H5controller.runJavaScript()原生主动调 H5 函数消息通道双向onMessage/postMessage长连接、频繁通信实际开发中javaScriptProxy runJavaScript 这俩组合就能覆盖 90% 的场景。下面重点讲。JS 调原生javaScriptProxy这是最常用的方式——把原生对象注入到 H5 的window上H5 像调本地方法一样调原生。// 1. 定义原生桥接类classNativeBridge{privatecontroller:webview.WebviewController|nullnull;setController(ctrl:webview.WebviewController){this.controllerctrl;}showToast(msg:string){promptAction.showToast({message:msg});}getUserInfo():string{returnJSON.stringify({name:张三,id:10086});}requestPayment(amount:string):void{// 调起原生支付console.info(发起支付${amount}元);// 支付完成后通过 runJavaScript 通知 H5 结果this.controller?.runJavaScript(onPaymentResult(true));}}// 2. 注入到 WebViewEntryComponentstruct WebViewDemo{controller:webview.WebviewControllernewwebview.WebviewController();Statebridge:NativeBridgenewNativeBridge();aboutToAppear(){this.bridge.setController(this.controller);}build(){Column(){Web({src:$rawfile(index.html),controller:this.controller}).javaScriptProxy({object:this.bridge,// 注入的原生对象name:nativeBridge,// H5 通过 window.nativeBridge 调用methodList:[showToast,getUserInfo,requestPayment],// 暴露的方法controller:this.controller})}}}H5 侧这样调用// H5 页面中的代码functioncallNative(){// 调用原生 Toastwindow.nativeBridge.showToast(来自H5的问候);// 获取用户信息constuserJSON.parse(window.nativeBridge.getUserInfo());console.log(user.name);// 张三// 发起支付window.nativeBridge.requestPayment(9.9);}关键代码讲解object: this.bridge—— 要注入的原生对象实例name: nativeBridge—— H5 通过window.nativeBridge访问名字自定义methodList—— 只有列在里面的方法才能被 H5 调用安全控制靠这个requestPayment里调runJavaScript(onPaymentResult(true))—— 原生处理完再通知 H5形成请求-响应闭环这个闭环模式很重要H5 调原生 → 原生处理 → 原生通过 runJavaScript 回调 H5。混合开发大多数交互都这么搞。原生调 JSrunJavaScript原生主动调 H5 的场景也很多——登录完成后通知 H5 刷新、推送消息到了让 H5 更新 UI。Button(通知H5登录成功).onClick((){consttokenabc123xyz;this.controller.runJavaScript(onLoginSuccess(${token}));})Button(更新H5数据).onClick((){constdataJSON.stringify({count:42,status:ok});this.controller.runJavaScript(updateData(${data}));})关键代码讲解runJavaScript参数是一段 JS 代码字符串不是函数名传参要自己拼字符串注意引号转义和 JSON 序列化调用时机要确保 H5 页面已经加载完成在onPageEnd回调后再调比较稳还有个升级版runJavaScriptExt支持返回ArrayBuffer二进制数据适合需要传图片、文件的场景。Cookie 与登录态混合开发绕不开的问题原生登录了H5 怎么同步登录态答案是 Cookie。import{webview}fromkit.ArkWeb;// 设置 Cookiewebview.WebCookieManager.setCookie(https://example.com,tokenabc123; Path/; Max-Age86400);// 读取 Cookieletcookiewebview.WebCookieManager.fetchCookieSync(https://example.com);console.info(当前Cookie:${cookie});// 清除所有 Cookie退出登录时webview.WebCookieManager.deleteEntireCookie();关键代码讲解setCookie—— 设置指定域名的 CookieURL 要写完整Max-Age86400—— 必须加过期时间否则是 Session CookieWebView 关了就没了fetchCookieSync—— 同步获取 Cookie调试时好用deleteEntireCookie—— 退出登录时清掉别只清原生的忘了 H5 的踩坑setCookie最好在 WebView 初始化完成后调。太早设可能会被 H5 页面加载时的请求覆盖掉。踩坑白屏问题WebView 白屏十个混合开发八个遇到过。常见原因和解决原因现象解决没加网络权限网络页面完全白module.json5加INTERNET权限JS 执行被禁页面加载了但交互不生效javaScriptAccess(true)DOM Storage 被禁SPA 页面白屏domStorageAccess(true)混合内容被拦截HTTPS 页面加载 HTTP 资源白屏服务端全走 HTTPSWebView 未渲染控件没高度检查width/height是否设了H5 本身报错控制台有 JS 错误开 DevTools 调试排查排查套路先看高度有没有 → 开 DevTools 看控制台 → 检查权限配置。大部分白屏问题都是这三类。写在最后原生和 H5 通信记住这个图就够了H5 调原生 → javaScriptProxy注入原生对象 原生调 H5 → runJavaScript执行 JS 代码 登录态同步 → CookieWebCookieManager别搞复杂了这仨组合能覆盖绝大多数混合开发场景。真遇到性能瓶颈再考虑消息通道那种重型方案。有什么 WebView 踩坑经历评论区聊聊。