uniapp小程序与的h5通信 - CSDN文库

<think>好的，我现在需要回答用户关于UniApp小程序如何与H5页面进行通信的问题。用户还希望有方法示例。首先，我得回忆一下UniApp的文档和相关技术点。根据用户提供的引用，UniApp和H5通信主要有两种方式：UniApp向H5发送数据，以及H5向UniApp发送消息。我记得UniApp使用WebView组件加载H5页面，而通信通常依赖于JavaScript的API。比如，UniApp可以通过WebView的API向H5传递数据，而H5可以通过uni.postMessage方法发送消息到UniApp。接下来，我需要考虑具体的实现步骤。首先，UniApp向H5发送数据可能是在WebView加载时通过URL参数传递，或者在加载完成后通过evalJS执行JavaScript代码。例如，在onReady事件中调用evalJS来修改H5页面的全局变量。这需要确保WebView已经加载完毕，否则evalJS可能不生效。然后是H5向UniApp发送消息。H5页面可以通过uni的SDK调用postMessage，而UniApp端需要监听@message事件来处理接收到的数据。需要注意的是，H5页面必须引入uni-webview-js库，否则无法使用uni.postMessage方法。这一点很重要，用户可能会忽略导致通信失败。用户可能遇到的常见问题包括：通信方法不生效，可能是因为没有正确引入库，或者事件监听没有正确绑定。例如，在UniApp的WebView组件中，必须添加@message监听器，而H5页面需要引入uni-webview-js的脚本。此外，跨域问题也可能影响通信，但通常在WebView中同源策略较为宽松，不过仍需注意。另外，引用中提到的H5返回App页面时可能需要通信，这时候可能需要通过H5发送消息触发UniApp的路由跳转。比如，在H5的表单提交成功后，调用uni.postMessage通知UniApp跳转到指定页面。在写示例代码时，需要确保UniApp的template部分有正确的WebView标签，并绑定load事件和message事件。H5页面的示例代码要展示如何引入uni-webview-js，并调用postMessage方法。同时，要提醒用户注意生命周期的问题，比如在WebView的onReady后再调用evalJS。最后，应该总结一下步骤，强调关键点，比如引入库、事件监听、数据格式等。可能还需要提到调试方法，比如在H5中使用console.log检查是否成功发送消息，或者在UniApp中打印接收到的数据来排查问题。</think>### UniApp小程序与H5页面通信方法及示例 UniApp通过`<web-view>`组件加载H5页面时，可通过以下两种方式实现双向通信： #### 一、UniApp向H5发送数据 1. **URL参数传递** 在加载H5页面时直接通过URL传参： ```html <web-view :src="`https://h5-domain.com/page.html?token=${token}``"></web-view> ``` H5页面通过`window.location.search`解析参数[^1]。 2. **evalJS方法注入** 通过WebView组件的`evalJS`执行H5页面的JavaScript代码： ```html <web-view ref="webview" @onPostMessage="handleH5Message" @load="onWebViewLoad"></web-view> ``` ```javascript onWebViewLoad() { this.$refs.webview.evalJS(`window.setUniAppData('${JSON.stringify(data)}')`); } ``` #### 二、H5向UniApp发送数据 1. **uni.postMessage API** H5页面引入`uni-webview-js`库后调用： ```html <script src="https://gitee.com/dcloud/uni-webview-js/raw/master/dist/uni.webview.1.5.4.js"></script> <script> uni.postMessage({ action: 'submit', data: { status: 'success' } }); </script> ``` UniApp监听`@message`事件接收数据： ```javascript handleH5Message(event) { const message = event.detail.data[0]; if (message.action === 'submit') { uni.navigateBack({ delta: 1 }); // 根据H5指令控制路由 } } ``` #### 完整示例 **UniApp端代码**： ```html <template> <web-view src="/hybrid/html/index.html" @message="handleH5Message" @load="onWebViewReady" ></web-view> </template> <script> export default { methods: { onWebViewReady() { // 向H5注入初始化数据 this.$refs.webview.evalJS(`window.uniAppToken = 'UNIAPP_123'`); }, handleH5Message(e) { const msg = e.detail.data[0]; if (msg.type === 'route') { uni.switchTab({ url: msg.target }); } } } } </script> ``` **H5页面代码**： ```html <!DOCTYPE html> <html> <head> <script src="https://gitee.com/dcloud/uni-webview-js/raw/master/dist/uni.webview.1.5.4.js"></script> </head> <body> <button onclick="sendToUniApp()">返回首页</button> <script> function sendToUniApp() { uni.postMessage({ type: 'route', target: '/pages/home/index' }); } </script> </body> </html> ``` #### 注意事项 1. **安全校验**：建议对H5发送的消息进行来源验证 2. **生命周期**：需等待WebView加载完成（`@load`事件触发后）再调用`evalJS` 3. **数据格式**：通信数据需为可序列化的JSON对象[^2]

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通