官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view
| 属性 | 类型 | 默认值 | 必填 | 说明 |
最低版本 |
| src | string | 否 | webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 | 1.6.4 | |
| bindmessage | eventhandler | 否 | 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组 | 1.6.4 |
一、小程序向网页h5传递参数
1、小程序代码-传递参数
<!-- wxml -->
<web-view src="https://xxx.com/test.html？id=123"></web-view>
2、h5页面代码-接收参数
<!-- 网页 a.html--> <script> let id = getUrlParam(‘id‘); </script>
二、网页h5向小程序传递参数
1、小程序代码-接收参数
bindmessage：网页向小程序 postMessage时，在特定时机触发并收到消息。
<web-view src="{{link}}" bindmessage="handlePostMessage"></web-view> onLoad: function (options) { this.setData({ link: decodeURIComponent(options.link), }); }, // 接收 h5 页面传递过来的参数 handlePostMessage: function (e) { console.log(‘postMessage:‘, e.detail); let resObj = e.detail.data[e.detail.data.length - 1]; this.setData({ share_title: resObj.title, share_img: resObj.imgUrl, }); }
2、h5页面代码-传递参数
//引入wx插件 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script type="text/javascript"> wx.miniProgram.getEnv(function(res) { if(res.miniprogram) { wx.miniProgram.postMessage({ data: { title:‘xxx.png‘, imgUrl :‘xxx.html‘ } }); // 参数 } }) </script>