Skip to content
微信小程序通过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);
    }
  },