如何通过postMessage实现微信小程序webview与h5的实时通讯功能？

本文共计2923个文字，预计阅读时间需要12分钟。

在开发React Native应用时，若需在App中嵌入H5页面，可通过Webview组件的PostMessage功能实现实时的通讯。但小程序中自然也提供了相应的Webview组件，然而实现方式略有不同。

在做 React Native 应用时，如果需要在 App 里面内嵌 H5 页面，那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯，但是在小程序里面，虽然也提供了一个 webview 组件，但是，在进行 postMessage 通讯时，官方文档里面给出了一条很变态的说明：

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data 是多次 postMessage 的参数组成的数组
这里面已经说的很明白了，不管我们从 H5 页面里面 postMessage 多少次，小程序都是收不到的，除非：

1. 用户做了回退到上一页的操作
2. 组件销毁
3. 用户点击了分享

这里面其实我没有完全说对，官方其实说的是 小程序后退，并没有说是用户做回退操作，经过我的实测，确实人家表达得很清楚了，我们通过微信官方的SDK调起的回退也是完全可行的：

wx.miniProgram.navigateBack()

大体思路

从上面的分析和实测中我们可以知道，要实现无需要用户操作即可完成的通讯，第三种情况我们是完全不需要考虑了的，那么来仔细考虑第 1 和第 2 种场景。