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

最新推荐文章于 2025-06-30 14:59:37 发布

转载最新推荐文章于 2025-06-30 14:59:37 发布 · 6.9k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.520webtool.com/

html+js+jquery+css 专栏收录该内容

644 篇文章

订阅专栏

介绍了一款名为520web的免费工具，该工具可极大提高埋点效率，同时分享了小程序跳转至H5页面及反向操作的方法，包括代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

http://www.520qiubite.com

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

--------------------- 本文来自狙击巴雷特的优快云博客，全文地址请点击：https://blog.youkuaiyun.com/huahua78/article/details/81123022?utm_source=copy