官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view
- 基础库 1.6.4 开始支持，低版本需做兼容处理
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
- 客户端 6.7.2 版本开始，navigationStyle: custom 对 <web-view> 组件无效
| 属性名 | 类型 | 默认值 | 说明 |
| src | String | webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 | |
| bindmessage | EventHandler | 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data } |
示例代码：
<!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>
阅读文档发现，其实小程序的通过将h5的网址放在web-view标签的src 属性上即可打开，不过这h5的网址需要在微信后台设置为白名单。那么小程序与网页之间如何交互呢：
1.小程序向网页传值
小程序内打开网页的话，有时需要向网页内传递参数。可将需要带向网页的值通过拼接参数方式实现，然后再在网页内截取即可
<!-- 小程序page --> <web-view src="http://a.html?id=123"></web-view> <!-- 网页 a.html--> <script> let id = getUrlParam(\'id\'); </script>
2，网页向小程序传值
网页像小程序传值的 有两种方式可以实现，一种是通过url和小程序的转发方法，将需要传给小程序的值当做参数放在当前url上，小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发时才可传
onShareAppMessage: function (options) { let webViewUrl = options.webViewUrl;//web-view当前的网址 }
另外一种是通过使用微信sdk的postMessage方法，然后小程序web-viewd中的bindmessage方法会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
<!-- html --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // javascript wx.miniProgram.postMessage({ data: \'foo\' }) wx.miniProgram.postMessage({ data: {foo: \'bar\'} })
<!-- wxml --> <web-view src="http://a.html?id=123" bindmessage="postMessage"></web-view> // javascript postMessage(e) { console.log(e) },
参考链接：https://blog.csdn.net/laishaojiang/article/details/82181952
请发表评论