最近在開發小程序的時候用到了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的對象格式進行約定，以方便遍歷時的批量處理。