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

最新推荐文章于 2024-07-30 17:02:47 发布

itKingOne

最新推荐文章于 2024-07-30 17:02:47 发布

阅读量5.1k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 H5

本文链接：https://blog.csdn.net/itKingOne/article/details/83304293

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小程序跳转到 h5 页面
小程序代码：

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

1、webview.js

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

Page({
  data: {
    url: ''
  },
  onLoad: function (options) {
    this.setData({
      url: decodeURIComponent(options.url),
    });
  },
  // 接收 h5 页面传递过来的参数
  handlePostMessage: function (e) {
    const data = e.detail;
    console.log(data);
  }
})

2、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