小程序中的web-view与h5网页之间的交互

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view

 

阅读文档发现，其实小程序的通过将h5的网址放在web-view标签的src 属性上即可打开，不过这h5的网址需要在微信后台设置为白名单。那么小程序与网页之间如何交互呢：

1.小程序向网页传值

小程序内打开网页的话，有时需要向网页内传递参数。可将需要带向网页的值通过拼接参数方式实现，然后再在网页内截取即可
 

 

2，网页向小程序传值

        网页像小程序传值的 有两种方式可以实现，一种是通过url和小程序的转发方法，将需要传给小程序的值当做参数放在当前url上，小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发时才可传

 onShareAppMessage: function (options) {
    let webViewUrl = options.webViewUrl;//web-view当前的网址
}
         另外一种是通过使用微信sdk的postMessage方法，然后小程序web-viewd中的bindmessage方法会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }