微信小程序webview postMessage使用

web-view组件bindmessage说明

网页向小程序破postMessage时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data },data是多次postMessage的参数组成的数组

示例：

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的对象格式进行约定，以方便遍历时的批量处理。