微信小程序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);  } },});