H5与小程序通信

一、H5中引入js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

二、H5给小程序发送信号

// 退回上一步（目的是保证触发小程序可以收到H5的消息）
window.wx.miniProgram.navigateBack({delta: 1});
// 给小程序发消息
window.wx.miniProgram.postMessage({
  data: {
    action: 'scanCode',
    data: ''
  }
});

三、小程序监听H5发送的信号

<view class="page-body">
  <view class="page-section page-section-gap">
    <web-view src="https://192.168.2.32:9530" bindmessage="onMessage"></web-view>
  </view>
</view>

bindmessage="onMessage"是监听H5发送的信号

四、js中声明监听的方法

Page({
  onMessage: function(e) {
    console.log(e.detail.data); // 这里将打印出从H5页面传递过来的数据
  },
})

结果如图（当前结果并没有打印出来log，并没有触发）

五、注意事项

1.根据官方文档，wx.miniProgram.postMessage方法只能在特定时机（如小程序后退、组件销毁、分享等）触发小程序的message事件，因此并不是即时通信的。
2.window.wx.miniProgram.navigateBack({delta: 1}); 即是为了保证每次都可以触发，如果是需要即时通信的场景，此方案不适用。