微信小程序的postMessage不实时？

　　最近在开发小程序的时候用到了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中调用如下代码：

    wx.miniProgram.postMessage({
      data: {
        type: 'typename', // 用于区分消息，业务定义，不是微信的格式要求
        key: 'keyname' // 数据，业务定义，不是微信的格式要求
      }
    });

　　在小程序中可以直接接收，当然是加载webview的page：

<template>
  <web-view src="{{dicSrc}}" style="200px;background-color: #A04CF7" bindmessage="viewmessageFn"></web-view>
</template>

<script>
    methods = {
      viewmessageFn (e) {
        console.log('viewmessageFn, e: ', e)
        // yourFn(e.detail.data)17       }
    }

</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 ，也就是说数据不要直接处理，而是要遍历解析一下：

<template>
  <web-view src="{{dicSrc}}" style="200px;background-color: #A04CF7" bindmessage="viewmessageFn"></web-view>
 </template>
 
 <script>
     methods = {
       viewmessageFn (e) {
         console.log('viewmessageFn, e: ', e)
          if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) {
           e.detail.data.forEach(function (dataItem) {
             if (dataItem.type === 'qbreport' && dataItem.key) {
               // todo： yourFn(dataItem.key)
             }
           })
 
         }
       }
     }
 
 </script>

 　　这个数组，就是postMessage按顺序组成的消息队列。

总结：

　　微信小程序的webview中postMessage，会把信息（对象）提交到一个消息队列，而这个消息队列只会在特定的场景（组建销毁，或分享）才会触发。不适合实时的数据传递，比较适合数据上报这种场景。使用时对这个消息队列（数组）遍历，最好对每一次postMessage的对象格式进行约定，以方便遍历时的批量处理。