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

最新推荐文章于 2025-10-23 09:00:31 发布

原创最新推荐文章于 2025-10-23 09:00:31 发布 · 5.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #小程序 #H5

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

5 篇文章

订阅专栏

本文详细介绍了如何使用小程序代码实现跳转至H5页面，并展示了如何在H5页面中利用微信JS-SDK实现跳回小程序的具体操作。通过代码示例，读者可以了解webview组件的使用及参数传递过程。

部署运行你感兴趣的模型镜像

小程序跳转到 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

您可能感兴趣的与本文相关的镜像