h5如何向uniapp webview通信

### H5 页面与 UniApp WebView 双向通信 #### 使用 `uni.postMessage` 实现从 UniApp 向 H5 发送消息 在 UniApp 中，可以使用 `uni.postMessage` 方法来实现从原生应用到 H5 页面的消息传递。此方法允许开发者通过特定接口发送数据给嵌入的网页。 ```javascript // 在 UniApp 的 JavaScript 文件中调用 postMessage 函数 setTimeout(() => { uni.postMessage({ data: { message: '来自 UniApp 的问候' } }); }, 2000); ``` 当上述代码执行时，在两秒延迟之后会尝试向当前加载于 web-view 组件内的 HTML 文档发送一条包含自定义信息的对象[^1]。 #### 接收来自 UniApp 的消息 (H5端) 为了能够在 H5 页面接收到这些由 UniApp 发来的信息，则需监听 window 对象上的 `message` 事件： ```html <script> window.addEventListener('message', function(event) { console.log('接收到来自 UniApp 的消息:', event.data.message); // 输出 "来自 UniApp 的问候" }); </script> ``` 这段脚本会在每次接收到新消息时触发回调函数并打印出所携带的数据内容。 #### 使用 `WebViewJavascriptBridge` 或者 `postMessage API` 来实现在 H5 到 UniApp 方向上传输数据 对于反方向即从 Web 端发起请求的情况，可以通过创建一个名为 `WebViewJavascriptBridge` 的桥梁对象来进行跨平台交互；不过更推荐的方式是利用现代浏览器普遍支持的标准 `postMessage()` API 完成这一操作。 ##### H5 调用 Native 功能实例 下面是一个简单的例子展示如何从 H5 页面主动联系宿主环境中的应用程序逻辑: ```html <button id="sendToNative">点击这里通知 App </button> <script type="text/javascript"> document.getElementById('sendToNative').addEventListener('click', () => { const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'uniwebviewjssdk://native?data=' + encodeURIComponent(JSON.stringify({ action: 'doSomethingInApp' })); document.body.appendChild(iframe); setTimeout(function() { document.body.removeChild(iframe); }, 300); }); </script> ``` 在这个案例里，每当按钮被按下就会动态生成一个隐藏 iFrame 并设置其 src 属性指向特殊协议 URL (`uniwebviewjssdk`) 加上编码后的 JSON 字符串作为参数传送给目标程序处理。 ##### 处理来自 H5 的调用 (UniApp端) 最后一步是在 UniApp 应用内部配置好相应的处理器以便能够响应上面提到的那种形式的通知： ```javascript onPageShow(res) { if (res.referrerInfo && res.referrerInfo.extraData) { let extraData = res.referrerInfo.extraData; switch(extraData.action){ case 'doSomethingInApp': console.log('H5 请求执行的操作已被捕获！'); break; default: console.warn(`未知动作:${extraData.action}`); } } } ``` 以上就是关于 H5 和 UniApp WebView 组件之间建立双向通讯机制的主要方式和技术要点介绍。