webview和h5通信

有个需求是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只能向在小程序后台设置的合法业务域名发送消息。
    我是版本问题,升高版本就解决了

posted @   lijun12138  阅读(305)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示