小程序和H5网页无缝跳转：解锁新体验

2023-10-23 21:48:52

H5 与微信小程序的无缝衔接：用 wx-open-launch-weapp 轻松跳转

在互联网世界中，微信小程序和 H5 网页早已占据了一席之地。微信小程序凭借其便捷性、强大功能和社交生态深受用户喜爱，而 H5 网页则以其跨平台、低成本的优势广泛应用于营销和电子商务领域。

为满足用户需求，实现微信小程序与 H5 网页之间的无缝跳转成为许多开发者的追求。本文将介绍如何使用 wx-open-launch-weapp 标签轻松实现从 H5 网页到微信小程序的跳转。

轻松实现 H5 网页到微信小程序的跳转

第一步：引入微信开放标签

在需要实现跳转的 H5 网页中，引入微信开放标签：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二步：配置 wx-open-launch-weapp 标签

在需要跳转的按钮或元素中，添加 wx-open-launch-weapp 标签：

<button wx-open-launch-weapp id="btn-launch" data-miniprogram-appid="你的小程序 APPID">点击跳转小程序</button>

其中，data-miniprogram-appid 是需要跳转的小程序的 APPID。

第三步：初始化微信开放标签

在页面加载完成后，初始化微信开放标签：

wx.ready(function () {
  wx.miniProgram.navigateTo({
    appId: '你的小程序 APPID',
    path: '小程序页面路径',
    envVersion: 'release',
    extraData: '传递的数据'
  });
});

完成以上步骤，你便可以成功实现从 H5 网页跳转到微信小程序。

代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <button wx-open-launch-weapp id="btn-launch" data-miniprogram-appid="wx123456789">点击跳转小程序</button>
  <script>
    wx.ready(function () {
      wx.miniProgram.navigateTo({
        appId: 'wx123456789',
        path: '/pages/index/index',
        envVersion: 'release',
        extraData: {}
      });
    });
  </script>
</body>
</html>