H5页面跳转小程序

2021-08-13 479 阅读1分钟

H5端：

// 1：需要引入jweixin-1.3.2.js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// 2:触发事件调换小程序
 wx.miniProgram.getEnv(function (res) {
   if (res.miniprogram) {
     wx.miniProgram.switchTab({url: '/pages/home/home'});
     wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
   }
 });

小程序端：

// 切记记得把 url 的 host 添加到后台的合法域名中。
// 跳转H5 wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponent('h5页面的 url')});  

// 使用web-view 标签
<web-view src="{{url}}" bindmessage="handlePostMessage"></web-view>

// 页面跳转需要转码的地址URL 
onLoad: function (options) {
    this.setData({
      url: decodeURIComponent(options.url),
    });
},

// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
   const data = e.detail;
}