微信小程序webview postMessage使用
- 前端
- 三生万物
- 0
web-view 组件 bindmessage说明：
网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。 e.detail = { data } ，data 是多次 postMessage 的参数组成的数组
示例：
// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram)
})
注意： postMessage 的 data 键名不能改，不然取不到数据
小程序代码
<web-view bindmessage="handlePostMessage" src="https://www.xxx.com/test.html"></web-view>
Page({
handlePostMessage(e) {
console.log(e.detail.data)
}
})
总结：微信小程序的 webview 中 postMessage，会把信息（对象）提交到一个消息队列，而这个消息队列只会在特定的场景（组建销毁，或分享）才会触发。不适合实时的数据传递，比较适合数据上报这种场景。使用时对这个消息队列（数组）遍历，最好对每一次 postMessage 的对象格式进行约定，以方便遍历时的批量处理。
参考链接：
- 官方说明：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
