微信小程序webview postMessage使用

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