小程序和h5页面之间的互相跳转

小程序跳转到 h5 页面

小程序代码:

wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponent('h5页面的 url')});
  •  

webview.js

<web-view src="{{url}}" bindmessage="handlePostMessage"></web-view>

onLoad: function (options) {
 this.setData({
   url: decodeURIComponent(options.url),
 });
},

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

h5 页面代码:

<head>
    ···
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
  •  

记得把 url 的 host 添加到后台的合法域名中。

h5 页面跳回小程序

在 h5 页面的任何点击事件中:

/* eslint-disable */
 wx.miniProgram.getEnv(function (res) {
   if (res.miniprogram) {
     wx.miniProgram.switchTab({url: '/pages/home/home'});
     wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
   }
 });
 /* eslint-enable */
  •  

请注意,是wx.miniProgram,不是 window.wx.miniProgram

--------------------- 本文来自 狙击巴雷特 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/huahua78/article/details/81123022?utm_source=copy

猜你喜欢

转载自blog.csdn.net/sd19871122/article/details/82904781