小程序嵌套H5 传参

1.查询小程序是否支持H5。

  利用wx.miniProgram.getEnv语句来查询

2.H5跳转小程序

首先需要在H5中引入

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
    <!-- 调试用的移动端 console -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
    <!-- <script>eruda.init();</script> -->
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

或者import引入文件

利用wx.miniProgram.navigateTo等路由可以进行携参跳转到对应的小程序页面。(注意:跳转的页面路径为“/pages/..”,跟小程序页面路径一样。

wx.miniProgram.navigateTo({url: '/pages/prod/prod?p1='aa'&p2='bb'})

也可以利用wx.miniProgram.postMessage携参跳转

wx.miniProgram.postMessage({ data: {parmas: 'bar'} })

(注意:该方法向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件)

3.小程序嵌入H5

在WXML页面中直接引入

<web-view src='{{URL}}'></web-view>    

JS文件中,在onLoad里,可以利用路径携参传给H5

const URL = 'https://XXX?a='+参数
this.setData({
    URL:URL
  })

上一篇:阿里巴巴 DevOps 转型后的运维平台建设


下一篇:微信小程序构建npm