uniapp和webview实时交互

### UniApp WebView 实时通信方法 #### 使用 `uni.postMessage` 和 `message` 事件实现实时通信 在 UniApp 中，为了实现与 WebView 的实时通信，可以利用 `uni.postMessage()` 方法以及监听 WebView 组件的 `message` 事件。这使得可以从 Web 页面向 UniApp 发送消息，并且能够在 UniApp 中接收到这些消息。 对于 HTML 页面而言，确保已经引入了合适的 JavaScript 文件，例如 `uni.webview.1.5.6.js` 或者更新版本[^3]。这样做的目的是为了让 HTML 页面能够识别并执行特定于 UniApp 的 API 函数。 下面是一个简单的例子展示如何设置这种双向通信机制： #### 在 H5 (HTML/JavaScript) 页面发送消息给 UniApp 应用程序 当希望从嵌入式的网页内传递信息回宿主应用时，可采用如下方式调用 `uni.postMessage`: ```javascript // 假设这是H5页面中的JS代码 function sendMessageToUniApp(data){ uni.postMessage({ data: JSON.stringify(data), type:'customType' }); } ``` 此函数接受一个参数作为待传输的数据对象，并将其转换成字符串形式以便通过 postMessage 接口传送给上层的应用逻辑处理单元。 #### 在 UniApp 端接收来自 H5 页面的消息 要在 UniApp 中捕获上述发出的信息，则需注册相应的回调处理器来响应 `message` 事件的发生。如果是在 nvue 页面里操作的话，应该使用 `@onPostMessage` 来绑定该行为；而在普通的 vue 页面中则是 `@message` 属性: ```html <template> <!-- 如果是非nvue页面 --> <web-view :src="url" @message="handleMessage"></web-view> <!-- 若为nvue页面则应改为 --> <!--<web-view :src="url" @onPostMessage="handleNVueMessage"></web-view>--> </template> <script> export default { methods:{ handleMessage(event){ console.log('Received message from web page:', event.detail.data); const receivedData = JSON.parse(event.detail.data); // 解析JSON格式的数据 // 这里可以根据实际需求进一步处理receivedData... }, handleNVueMessage(event){ console.log('NVUE Received message from web page:',event.detail.data); const receivedData = JSON.parse(event.detail.data); // 处理数据... } } }; </script> ``` 这段模板定义了一个名为 `<web-view>` 的组件实例用于加载外部 URL 资源的同时也绑定了两个不同的事件监听器分别对应两种不同类型的 Vue/NVUE 页面结构下的消息接收场景。 ---