官方文档：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、传参数
<!-- h5端 HTML和JS 自动传值 --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.getEnv(function(res) { if (res.miniprogram) { wx.miniProgram.postMessage({ data: { title: \'分享标题\', imgUrl: \'share.png\', link: \'share.html?shareId=7&active=1\' } }); } }); // wx.miniProgram.navigateBack({delta: 1}) </script>
2、接收参数：在特定时机触发（如小程序后退、组件销毁、分享时）接收
// 小程序端 wxml <web-view src="{{url}}" bindmessage="handlePostMessage"></web-view> //小程序端js const app = getApp() Page({ data: { url: \'\', }, onLoad: function(options) { }, // 获取h5传递消息 右上角分享/小程序后退/组件销毁时自动触发 handlePostMessage: function(e) { console.log(e.detail.data); let data = e.detail.data[e.detail.data.length - 1]; ...///使用数据 } })
请发表评论