首页 > 专题 > 微信 > 正文

微信小程序webview与h5通过postMessage实现实时通讯的实现

2020-02-25 01:09:27
字体:
来源:转载
供稿:网友

在做 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);  } },});            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
2022年香港资料大全,正版资料最老版,澳门正版跑狗图2022,2022年澳门码资料,澳门正版跑狗图2022