最近在开发小程序的时候用到了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的对象格式进行约定，以方便遍历时的批量处理。
