526互联

webview和h5通信

发布时间 2023-12-15 18:28:57作者: lijun12138

有个需求是web-view嵌入h5页面，这时需要知道h5的路有变化，以下是一个简单的实现

1.vue页面使用

wx.miniProgram.postMessage发送消息
  beforeRouteLeave(to,from,next){
    wx.miniProgram.postMessage({
      data: {
        cardId: 0,
        title: '电子名片'
      }
    })
    next()
  },

2.小程序

<web-view src="{{src}}" bindmessage="handlePostMessage"></web-view> //src为自己的h5地址
 handlePostMessage: function (event) {
    console.log('Message received from H5:', event);
    // 在这里处理接收到的消息
    // 例如可以根据接收到的消息做相应的处理
  },

基本上就可以实现了，但是注意有个大坑就是发现接收不到消息，原因：

  1. wx.miniProgram.postMessage的调用时机：请确保在H5的路由变化后才调用wx.miniProgram.postMessage，因为如果在路由变化前调用，可能会因为页面还未完全加载就发送了消息，导致消息没有被正确接收。

  2. 检查你的代码是否有错误或异常：有时候，一些代码错误或异常可能会阻止bindmessage事件的触发。你可以检查你的控制台是否有任何错误或异常，然后尝试修复它们。

  3. 确保你的小程序版本支持bindmessage事件：bindmessage事件需要微信6.7.2及以上版本，以及小程序基础库2.6.5及以上版本。

  4. 确保你的<web-view>组件的URL是在小程序后台设置的合法业务域名：wx.miniProgram.postMessage只能向在小程序后台设置的合法业务域名发送消息。
    我是版本问题，升高版本就解决了