用uniapp编写微信小程序如何与内嵌的h5页面通信
时间: 2024-05-11 08:16:43 浏览: 85
uniapp开发的微信小程序商城
可以使用微信小程序提供的web-view组件来实现与内嵌的H5页面通信。具体方法如下:
1. 在小程序页面中添加web-view组件,并设置src属性为H5页面的URL。
2. 在H5页面中使用JavaScript的postMessage方法向小程序发送消息,代码如下:
```
window.parent.postMessage('Hello', '*');
```
其中,postMessage方法的第一个参数为要发送的消息,第二个参数为接收消息的窗口的origin,一般设置为通配符*,表示接收任何域的消息。
3. 在小程序页面中监听web-view的message事件,通过event.detail.data获取接收到的消息,代码如下:
```
<web-view src="https://example.com" bindmessage="onMessage"></web-view>
Page({
onMessage(event) {
console.log(event.detail.data); // 输出Hello
}
})
```
通过这种方式,可以在微信小程序和内嵌的H5页面之间进行双向通信。
阅读全文