uniapp app通过webview向H5发送信息

### UniApp WebView 向 H5 页面发送数据的方法 在 UniApp 中，`web-view` 组件可以用来加载外部网页或者本地 HTML 文件。为了实现 `web-view` 和 H5 页面之间的通信，可以通过 URL 参数传递、调用 JavaScript 方法等方式完成。 以下是几种常见的方法及其代码示例： #### 1. **通过 URL 参数传递** 这是最简单的方式之一，适用于少量的数据传输场景。可以在跳转到目标页面时，在 URL 中附加参数[^1]。 ```javascript // 在父页面中定义跳转逻辑 let url = 'https://example.com/page.html'; let params = { name: 'John', age: 28, }; this.$router.push({ path: '/pages/webview/index', query: { ...params } }); ``` 在接收方（H5 页面），可以通过 JavaScript 获取 URL 参数并解析： ```javascript function getQueryVariable(variable) { const query = window.location.search.substring(1); const vars = query.split('&'); for (const pair of vars) { const keyValue = pair.split('='); if (decodeURIComponent(keyValue[0]) === variable) { return decodeURIComponent(keyValue[1]); } } } console.log(getQueryVariable('name')); // 输出 John console.log(getQueryVariable('age')); // 输出 28 ``` --- #### 2. **使用 evalJS 调用 H5 的 JavaScript 函数** 如果需要更复杂的交互，比如动态更新 DOM 或者触发某些事件，则可以利用 `evalJS` 方法来执行 H5 页面中的脚本。 假设 H5 页面中有如下函数： ```html <script> function receiveData(data) { alert(JSON.stringify(data)); } </script> ``` 那么可以从 UniApp 中这样调用它： ```javascript import { getCurrentPages } from '@unijs/core'; getCurrentPages().pop().$getWebview().evalJS(`receiveData(${JSON.stringify({ message: 'Hello, H5!' })})`); ``` 注意：此功能仅支持原生 WebView 控件，不适用于 iframe 嵌入的情况[^2]。 --- #### 3. **通过 postMessage 实现双向通信** 对于更加灵活的需求，还可以借助浏览器标准 API —— `postMessage` 来建立跨域消息通道[^4]。 ##### 父级（UniApp）向子级（H5）发信： ```javascript window.onload = () => { document.querySelector('#sendBtn').addEventListener('click', () => { const webviewContext = plus.webview.currentWebview(); const childView = webviewContext.children()[0]; // 子 Webview 对象 childView.evalJS(`window.postMessage('${escape(JSON.stringify({ action: 'greeting' }))}', '*')`); }); }; ``` ##### 子级（H5）监听来自父级的消息： ```javascript window.addEventListener('message', event => { try { const data = JSON.parse(unescape(event.data)); console.log('Received:', data.action); // greeting } catch (e) {} }, false); ``` > 提醒：上述例子假定双方都运行在同一应用上下文中；如果是完全独立部署的服务端渲染内容，则需额外配置 CORS 政策以允许跨源资源共享[^3]。 --- ### 注意事项 - 如果发现插值表达式未被正确替换而显示为原始模板语法，请确认已启用 `[v-cloak]` 属性隐藏未编译节点。 - 数据量较大时不建议采用 GET 请求形式拼接地址栏参数，因为存在长度限制风险。