微信小程序的postMessage不实时?
最近在开发小程序的时候用到了wx.postMessage()这个API,在使用前我一直认为wx.postMessage()可以在小程序和H5中实时的传递信息,可以依靠这个API开发一个小程序的bridge。但是在实际的开发过程中,我发现wx.postMessage()的表现形式有些出乎意料。
在最近我需要在h5(webview)中向小程序通知一些信息,我首先想到的是之前看到过这个API: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html。在webview的文档中有描述在h5中如果引用了JSSDK 1.3.2,就可以在H5中调用wx.miniProgram.postMessage:
在实际的使用中相当于在H5中调用如下代码:
wx.miniProgram.postMessage({
data: {
type: 'typename', // 用于区分消息,业务定义,不是微信的格式要求
key: 'keyname' // 数据,业务定义,不是微信的格式要求
}
});
在小程序中可以直接接收,当然是加载webview的page:
<template>
<web-view src="{{dicSrc}}" style="width:200px;background-color: #A04CF7" bindmessage="viewmessageFn"></web-view>
</template> <script>
methods = {
viewmessageFn (e) {
console.log('viewmessageFn, e: ', e)
// yourFn(e.detail.data)
}
} </script>
也就是说h5中所有的postMessage最终都会从同一个回调函数通知到小程序的函数定义处,这个函数的名字可以自定义只要是methods中声明过的就可以。所有post的数据都在e.detail.data中,也就是刚才postMessage的数据。
没有接收到?不是实时触发
按理说我应该是完全按照小程序的文档进行,但是调试了很久,在H5触发后,在小程序中的断点一直没有执行到,正当我要放弃的时候,不小心将加载webview的page退回到首页,很意外的是小程序监听postMessage的回调函数触发了。我重新试了几次发现都是在退出页面的时候触发的,我查看了一下文档发现虽然h5中的postMessage会马上提交信息,但是小程序并不会马上受理,在小程序webview上的监听函数,只会在特定时机触发并收到消息:
也就是说,我原本认为的小程序bridge并不能通过这中方式实现,所有的消息都只能等得分享或webview的生命周期结束。这不是一个实时的接口,所以不能用来处理实时的消息,只能是数据上报同步一类的或者页面关闭,向小程序返回一些返回值等“特殊”场景。
消息队列
既然不是实时的触发,那么如何处理H5(webview)活跃期间发起的多个消息提交呢?原来bindmessage返回的数据是一个数组结构,每次h5 postMessage都是向这个数组中push一个对象,这样返回的数组组成了我们看到的 e.detail.data ,也就是说数据不要直接处理,而是要遍历解析一下:
<template>
<web-view src="{{dicSrc}}" style="width:200px;background-color: #A04CF7" bindmessage="viewmessageFn"></web-view>
</template> <script>
methods = {
viewmessageFn (e) {
console.log('viewmessageFn, e: ', e)
if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) {
e.detail.data.forEach(function (dataItem) {
if (dataItem.type === 'qbreport' && dataItem.key) {
// todo: yourFn(dataItem.key)
}
}) }
}
} </script>
这个数组,就是postMessage按顺序组成的消息队列。
总结:
微信小程序的webview中postMessage,会把信息(对象)提交到一个消息队列,而这个消息队列只会在特定的场景(组建销毁,或分享)才会触发。不适合实时的数据传递,比较适合数据上报这种场景。使用时对这个消息队列(数组)遍历,最好对每一次postMessage的对象格式进行约定,以方便遍历时的批量处理。
最新文章
- Web.config配置数据库连接
- 数据结构和算法 &ndash; 8.链表
- POJ 1984 Navigation Nightmare
- [转]AFNetWorking使用笔记
- eclipse html插件的下载和安装
- 枚举子集的3种方式 -- C++描述
- Jenkins2 插件 Pipeline+BlueOcean 实现持续交付的初次演练
- btsync 分享资源
- Axios 执行post发送两次请求的小坑
- bootstrap-table表格插件的使用案例
- Oracle_索引
- 剑指Offer——网易笔试之解救小易——曼哈顿距离的典型应用
- java中的stream的泛型方法的使用示例
- freemarker是什么东西?
- temp--重庆农商行银联前置改造项目出差
- Introducing stapbpf – SystemTap’s new BPF backend
- 【Java】【问题】
- MySQL Replication--复制异常1
- iOS基础总结
- Java 访问权限控制:你真的了解 protected 关键字吗?
热门文章
- Memcache 学习笔记(一)----Memcache — Linux部署
- OSGEarth加载 geoserver 发布 TMS
- flexviewer infowindow背景问题
- Windows 8 Metro风格颜色表-Metro colours
- Android 录音getMaxAmplitude()
- ubuntu 18 设置语言环境
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
- jq重复切换类名
- linux第一个C语言和sh脚本
- 【Leetcode】【Medium】Binary Tree Zigzag Level Order Traversal