微信小程序与网页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的参数传递的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 向内嵌的H5传参(传递参数)

微信小程序怎么向外部php文件传递参数

h5打开微信小程序带参数

H5跳转微信小程序

微信小程序代码片段

微信小程序(20)-- 小程序与H5如何互相跳转