E企盈营销工具技术服务商 热线:4006-838-530

微信小程序的postMessage不实时?

E企盈直播平台营销卖货系统

最近在开发小程序的时候用到了wx.postMessage()这个API,在使用前我一直认为wx.postMessage()可以在小程序和H5中实时的传递信息,可以依靠这个API开发一个小程序的bridge。但是在实际的开发过程中,我发现wx.postMessage()的表现形式有些出乎意料。  在最近我需要在h5(webview)中向小程序通知一些信息,我首先想到的是之前看到过这个API: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html。在webview的文档中有描述在h5中如果引用了JSSDK 1.3.2,就可以在H5中调用wx.miniProgram.postMessage:                      在实际的使用中相当于在H5中调用如下代码:1    wx.miniProgram.postMessage({2      data: {3         type: ‘typename’, // 用于区分消息,业务定义,不是微信的格式要求4         key: ‘keyname’ // 数据,业务定义,不是微信的格式要求5      }6     });  在小程序中可以直接接收,当然是加载webview的page: 1 template 2   web-view src=”{{dicSrc}}” style=”width:200px;background-color: #A04CF7″ bindmessage=”viewmessageFn”/web-view 3 /template 4 5 script 6     methods = { 7      viewmessageFn (e) { 8         console.log(‘viewmessageFn, e: ‘, e) 9         // yourFn(e.detail.data)17      }18    }19 20 /script  也就是说h5中所有的postMessage最终都会从同一个回调函数通知到小程序的函数定义处,这个函数的名字可以自定义只要是methods中声明过的就可以。所有post的数据都在e.detail.data中,也就是刚才postMessage的数据。没有接收到?不是实时触发  按理说我应该是完全按照小程序的文档进行,但是调试了很久,在H5触发后,在小程序中的断点一直没有执行到,正当我要放弃的时候,不小心将加载webview的page退回到首页,很意外的是小程序监听postMessage的回调函数触发了。我重新试了几次发现都是在退出页面的时候触发的,我查看了一下文档发现虽然h5中的postMessage会马上提交信息,但是小程序并不会马上受理,在小程序webview上的监听函数,只会在特定时机触发并收到消息:                也就是说,我原本认为的小程序bridge并不能通过这中方式实现,所有的消息都只能等得分享或webview的生命周期结束。这不是一个实时的接口,所以不能用来处理实时的消息,只能是数据上报同步一类的或者页面关闭,向小程序返回一些返回值等“特殊”场景。消息队列  既然不是实时的触发,那么如何处理H5(webview)活跃期间发起的多个消息提交呢?原来bindmessage返回的数据是一个数组结构,每次h5 postMessage都是向这个数组中push一个对象,这样返回的数组组成了我们看到的  e.detail.data ,也就是说数据不要直接处理,而是要遍历解析一下: 1 template 2   web-view src=”{{dicSrc}}” style=”width:200px;background-color: #A04CF7″ bindmessage=”viewmessageFn”/web-view 3  /template 4   5  script 6      methods = { 7       viewmessageFn (e) { 8          console.log(‘viewmessageFn, e: ‘, e) 9           if (e.type === ‘message’ && e.detail && e.detail.data && e.detail.data.length 0) {10            e.detail.data.forEach(function (dataItem) {11              if (dataItem.type === ‘qbreport’ && dataItem.key) {12                // todo: yourFn(dataItem.key)13             }14           })15  16         }17       }18     }19  20  /script   这个数组,就是postMessage按顺序组成的消息队列。总结:  微信小程序的webview中postMessage,会把信息(对象)提交到一个消息队列,而这个消息队列只会在特定的场景(组建销毁,或分享)才会触发。不适合实时的数据传递,比较适合数据上报这种场景。使用时对这个消息队列(数组)遍历,最好对每一次postMessage的对象格式进行约定,以方便遍历时的批量处理。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序的postMessage不实时?
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏