微信小程序webview與h5通過postMessage實現實時通訊的實現

在做 React Native 應用時，如果需要在 App 里面內嵌 H5 頁面，那么 H5 與 App 之間可以通過 Webview 的 PostMessage 功能實現實時的通訊，但是在小程序里面，雖然也提供了一個 webview 組件，但是，在進行 postMessage 通訊時，官方文檔里面給出了一條很變態的說明：

網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發并收到消息。e.detail = { data }，data 是多次 postMessage 的參數組成的數組
這里面已經說的很明白了，不管我們從 H5 頁面里面 postMessage 多少次，小程序都是收不到的，除非：

用戶做了回退到上一頁的操作 組件銷毀 用戶點擊了分享

這里面其實我沒有完全說對，官方其實說的是 小程序后退，并沒有說是用戶做回退操作，經過我的實測，確實人家表達得很清楚了，我們通過微信官方的SDK調起的回退也是完全可行的：

wx.miniProgram.navigateBack()

大體思路

從上面的分析和實測中我們可以知道，要實現無需要用戶操作即可完成的通訊，第三種情況我們是完全不需要考慮了的，那么來仔細考慮第 1 和第 2 種場景。

第 1 種方式：回退

當我們想通過網頁向小程序發送數據，同時還可以回退到上一個頁面時，我們可以在 wx.miniProgram.postMessage 之后，立馬調用一次 wx.miniProgram.navigateBack()，此時小程序的操作是：

處理 postMessage 信息 回退到上一頁

我們在處理 postMessage 的時候做一些特殊操作，可以將這些數據保存下來

第 2 種方式：組件銷毀

這是我感覺最合適的一種方式，可以讓小程序拿到數據，同時還保留在當前頁面，只需要銷毀一次 webview 即可，大概的流程就是：

小程序 postMessage 小程序 navigateTo 將小程序頁面導向一個特殊的頁面 小程序的那個特殊頁面立馬回退到 webview 所在的頁面 webview 所在的頁面的 onShow 里面，做一次處理，將 webview 銷毀，然后再次打開 觸發 onMessage 拿到數據 H5 頁面再次被打開

這種方式雖然變態，但是至少可以做到實時拿到數據，同時還保留在當前 H5 頁面，唯一需要解決的是，在做這整套操作前，H5 頁面需要做好狀態的緩存，要不然，再次打開之后，H5 的數據就清空了。

第 1 種方式：通過回退，將數據提交給小程序之后傳遞給 webview 的上一頁面

這種方式實現起來其實是很簡單的，我們現在新建兩個頁面：

sandbox/canvas-by-webapp/index.js

const app = getApp();Page({ data: {  url: '',  dimension: null,  mime: '', }, handleSaveTap: function() {  wx.navigateTo({   url: '/apps/browser/index',   events: {    receiveData: data => {     console.log('receiveData from web browser: ', data);     if (typeof data === 'object') {      const { url, mime, dimension } = data;      if (url && mime && dimension) {       this.setData({        url,        dimension,        mime,       });       this.save(data);      }     }    }   }  }) }, save: async function({ url, mime, dimension }) {  try {   await app.saveImages([url]);   app.toast('保存成功！');  } catch (error) {   console.log(error);   app.toast(error.message || error);  } },});