微信小程序与网页h5的参数传递
Posted 蓝精灵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序与网页h5的参数传递相关的知识,希望对你有一定的参考价值。
官方文档: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>
以上是关于微信小程序与网页h5的参数传递的主要内容,如果未能解决你的问题,请参考以下文章