Weex WebView 落地指南：从加载 H5 到双向通信的完整流程

Weex WebView 落地指南从加载 H5 到双向通信的完整流程【免费下载链接】weexA framework for building Mobile cross-platform UI项目地址: https://gitcode.com/gh_mirrors/we/weex原生页面已经搭好了但运营希望活动页用 H5 动态下发不想每发一次版就改一次 UI。这时你会碰到三个绕不开的问题H5 怎么嵌进 Weex 页面、加载到哪一步了怎么知道、Weex 和 H5 之间的数据怎么传。weex 框架内置的web组件加webview模块就是为这类混合开发准备的本文按上屏 → 通信 → 验证的实际落地顺序带你把这套 WebView 能力跑通。 先分清两样东西web组件和webview模块很多新手第一步就搞混了——模板里写的是组件JS 里调的是模块两者在原生侧是分开实现的web组件负责渲染和事件。Android 侧是 WXWeb.javaiOS 侧是 WXWebComponent.m内部各自包了一个系统 WebViewAndroid 的WebView、iOS 的WKWebView。webview模块负责命令式操作刷新、前进后退、发消息。Android 对应 WXWebViewModule.javaiOS 对应 WXWebViewModule.m。模块方法在 SDK 初始化时统一注册注册点在 WXSDKEngine.java 里的registerModule(webview, ...)所以业务侧不用自己注册weex.requireModule(webview)直接就能拿到。简单记模板里挂webJS 里拿webview模块操作这个web的 ref。 让 H5 上屏src、source与四个事件web组件支持两种加载方式src给一个 URL加载远程页面运行时动态改src会触发重新加载source给一段 HTML 字符串本地直接渲染showLoading是否显示加载进度条Android 侧还会在进度到 100 时才揭开页面。加载过程通过四个事件暴露给 JS都在标签上声明才会生效事件时机携带数据pagestart开始导航urlpagefinish加载完成url、canGoBack、canGoForwardiOS 还带titleerror加载失败Androidtype、errorMsgiOSerrorCode、errorMsg、urlreceivedtitle标题变化Androidtitle一段最小可用的写法大概是这样web refwebview1 :srcurl show-loading pagestartonStart pagefinishonFinish erroronError/web一个容易忽略的细节原生侧会先检查 JS 是否声明了对应事件Android 的WXWeb里通过getEvents().contains(...)判断iOS 的WXWebComponent里通过addEvent:打标记没声明的事件不会触发这为后面为什么收不到 error埋了伏笔。 双向通信postMessage 与message事件这是 Weex WebView 最有价值的部分。两个方向都刻意对齐了 Web 标准的MessageEvent语义payload 统一是{ type: message, data: ..., origin: ... }的结构。Weex → H5调用webview.postMessage(ref, data)。原生侧拿到 ref 找到组件然后在页面里执行window.dispatchEvent(new MessageEvent(message, ...))origin字段自动填当前 bundle 的scheme://host:port。H5 侧就是标准写法window.addEventListener(message, (e) { if (e.origin ! https://your-bundle-host) return; // 校验来源 console.log(e.data); });H5 → Weex两个平台的注入方式不同但对 H5 代码是透明的iOS 在页面启动时注入一段脚本把window.postMessage指向webkit.messageHandlers.weex消息经WKScriptMessageHandler回来后触发组件的message事件Android 则在onPageFinished时改写window.postMessage走 JSInterface 桥老系统降级为prompt方案把数据带回原生。H5 侧调用postMessage(data, targetOrigin)后JS 里在web标签上监听message就能拿到{ type, data, origin }。⚠️ 安全建议双向都要校验origin。H5 页面上可能被注入的脚本也能调postMessageWeex 侧收到后建议按来源白名单过滤别直接拿data去改业务状态。 导航控制与加载体验webview模块暴露的命令式方法一共四个全部以 ref 作为第一个参数web.reload(ref)重新加载当前页面web.goBack(ref)/web.goForward(ref)历史栈前进后退web.postMessage(ref, data)上一节讲过这里不再展开。两个实用技巧按钮置灰逻辑pagefinish事件里的canGoBack/canGoForward正好用来控制返回/前进按钮的可用状态iOS 侧在真正执行前也会再做一次canGoBack检查不会越界。标题栏同步监听receivedtitle把 H5 页面的 title 同步到原生导航栏用户感知上就是一个完整网页。仓库里的测试页 web-event.vue 把这套交互完整演示了一遍按钮触发 reload/goBack/goForward三个事件回调把 url 显示在页面上做断言可以直接照着抄。✅ 跑起来验证两个调试视角验证混合开发效果建议同时用两个视角真机/模拟器跑 demo 工程iOS 用 playground/ios/ 下的 WeexDemoAndroid 用 playground/android/HarmonyOS 侧可以用 DevEco Studio 直接跑起工程观察日志类似下面这种运行窗口。DevTools 看页面结构H5 内容出问题时在浏览器开发者工具里检查 DOM 和事件派发确认消息有没有真的到达window。验证顺序建议先确认pagestart→ 再确认pagefinish→ 最后测postMessage往返。web-event.vue里故意先配了一个不存在的域名来触发error事件一秒钟内就能把错误链路也验掉。 踩坑速答收不到error检查标签上是否真的写了error没声明的事件原生侧不会派发。postMessage报组件找不到第一个参数传的是this.$refs.xxx对应的 ref 字符串不是组件对象确认 ref 名字和模板一致。Android 的 error 信息很粗原生侧目前只区分page error/http error/ssl error三类文案需要精确错误码时看 iOS 侧的errorCode或自行扩展IWebView。还在用notifyWebviewiOS 源码里已标注将被逐步弃用新代码统一用postMessage语义更贴近 Web 标准。收尾到这里Weex 的 WebView 集成就完整了web负责上屏与事件webview模块负责命令式操作双向通信统一走message事件加origin校验。后续如果要深入平台适配细节比如 HarmonyOS 上的 Weex 容器可以从 ohos/docs/weex鸿蒙化指导文档.md 和 ohos/ 目录继续看。建议把本文的事件表贴在手边遇到收不到事件或消息没到达时按表逐项核对绝大多数问题都能在前两节里找到答案。【免费下载链接】weexA framework for building Mobile cross-platform UI项目地址: https://gitcode.com/gh_mirrors/we/weex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考