微信小程序微信小程序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: {
评论0