微信小程序通过webview和h5通信
h5页面发送消息给小程序
引入jweixin-1.6.0.js
js
// 引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>发送消息给小程序
js
clickFn() {
// 延迟一点点再返回,确保 postMessage 已发出
// 只有下面 4 个时机,小程序端才会收到 message:
// 用户点击 web-view 内部的 <a> 跳转;
// 调用 wx.miniProgram.navigateTo / redirectTo / switchTab / reLaunch;
// 调用 wx.miniProgram.postMessage 后,再调用 wx.miniProgram.navigateBack;
wx.miniProgram.postMessage({
data: {
fromScan: '我是返回给小程序的数据'
}
});
setTimeout(() => {
wx.miniProgram.navigateBack();
}, 100);
}小程序端
页面代码
html
<web-view bindmessage="onWebViewMsg" src="http://localhost:19256/SubModule/SummaryPage/jumpApplet/jumpApplet?BizToken=1"/>js代码
js
// web-view 触发的 message 事件
onWebViewMsg(e) {
// e.detail.data 是一个数组,里面每一项就是你 postMessage 的对象
const msg = e.detail.data?.[0];
if (msg && msg.fromScan) {
this.setData({
fromScan: msg.fromScan
});
// 也可以直接做后续业务逻辑
console.log('收到 web-view 返回数据:', msg.fromScan);
}
},