需求背景
在小程序里嵌入 H5 页面,经常需要两边互通数据。比如小程序传用户信息给网页,或者网页触发支付后通知小程序。核心机制就是 postMessage。
基础准备
首先得确保域名白名单配置正确,这是通信的前提。小程序后台添加业务域名,网页端引入微信 JS-SDK。
<!-- 内嵌网页需引入微信 JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
通信实现
小程序向网页发送消息
小程序端通过 web-view 组件的 postMessage 方法发送数据。这里有个细节,建议封装一下,避免重复代码。
// page.js
Page({
data: { webViewUrl: 'https://your-domain.com/page.html' },
onLoad() {
// 初始化逻辑
},
// 向网页发送消息
sendToWebPage() {
const webview = this.selectComponent('#myWebview');
if (webview) {
webview.postMessage({
data: {
type: 'from_miniprogram',
message: 'Hello from Mini Program!',
timestamp: Date.now()
}
});
}
},
// 接收网页消息
onMessage(e) {
console.log('收到网页消息:', e.detail.data);
{ type, data } = e..;
(type === ) {
}
}
});


