需求背景
在微信小程序中嵌入 web-view 组件是常见场景,但原生代码与内嵌网页之间的数据交互往往需要精心设计。虽然官方提供了 postMessage 接口,但在实际工程中直接调用容易遇到延迟、类型安全及维护性问题。本文基于多年实战经验,梳理一套稳定、可扩展的通信方案。
基础配置
通信前需确保环境合规,否则消息会被静默丢弃。
小程序端配置
在 app.json 或页面配置文件中声明权限:
{
"usingComponents": {},
"permission": {
"scope.webView": {
"desc": "用于网页和小程序通信"
}
}
}
网页端配置
内嵌 H5 页面必须引入微信 JS-SDK,并校验域名白名单。
<!-- 引入官方 SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
注意:务必在微信公众平台后台配置合法域名,否则
wx.miniProgram对象可能不可用。
通信实现
原生 API 调用
小程序向网页发送
通过 selectComponent 获取实例后调用 postMessage:
// page.js
Page({
data: { webViewUrl: 'https://your-domain.com/page.html' },
onLoad() {
// 初始化逻辑
},
sendToWebPage() {
webview = .();
(webview) {
webview.({
: {
: ,
: ,
: .()
}
});
}
},
() {
.(, e..);
{ type, data } = e..;
(type === ) {
}
}
});


