uniapp中嵌入h5 webview通信

### UniApp 中 H5 WebView 通信方法 #### 方法一：URL 参数传递 通过 URL 地址携带参数是一种简单有效的方式。可以在 URL 后面附加查询字符串来传输数据，不过这种方式可能会导致页面重载。为了避免这种情况，在 URL 的锚点部分（`#` 符号后）追加动态参数可以防止页面刷新。 ```javascript // 在 UniApp 应用内设置带有额外参数的链接 const urlWithParams = 'http://example.com/page.html#' + encodeURIComponent(JSON.stringify({ key: value })); this.$refs.webview.src = urlWithParams; ``` 在 H5 页面中解析这些参数： ```javascript function getHashParameters() { const hash = window.location.hash.substr(1); try { return JSON.parse(decodeURIComponent(hash)); } catch (e) { console.error('Failed to parse parameters from hash', e); return {}; } } console.log(getHashParameters()); ``` 这种方法适用于简单的键值对形式的数据交换[^4]。 #### 方法二：EvalJS 调用 JavaScript 函数 对于更复杂的交互需求，可以直接调用 Web 视图中的 JavaScript 函数。这通常用于执行特定操作或更新 DOM 元素而不需要重新加载整个网页。 ```javascript // 定义一个全局函数供外部访问 window.receiveMessageFromNative = function(data){ alert(`Received message: ${data}`); }; // 在 UniApp 端触发此函数并传参 wv.evalJS(`receiveMessageFromNative('${JSON.stringify(message)}')`); ``` 需要注意的是 `evalJS()` 只能在 Android 平台上工作；iOS 设备上可能需要其他解决方案[^3]。 #### 方法三：基于事件监听的消息机制 建立双向通讯通道允许双方互相发送消息。可以通过自定义事件监听器实现这一点。 ##### 发送方（UniApp） ```javascript var wv = plus.webview.currentWebview(); wv.addEventListener('message-from-h5', function(event){ let data = event.detail; console.log('Data received:', data); }); setTimeout(() => { wv.postMessageToWebview({ action: "greet", text: "Hello!" }); }, 2000); ``` ##### 接收方（H5） ```html <script> if(window.plus && typeof window.plus !== undefined){ document.addEventListener('plusready', onPlusReady, false); } else{ onPlusReady(); } function onPlusReady(){ window.addEventListener('message', function(e){ console.log('Got a message!', e.data); // Send back an acknowledgment or response parent.window.webkit.messageHandlers.nativeHandler.postMessage({ type:'response', content:e.data.text+' Back' }); }); } </script> ``` 这种方案提供了更加灵活和强大的沟通能力，适合处理复杂的应用逻辑[^1]。