公众号/h5跳转到小程序的填坑指南

前言

在当今互联网时代，小程序已经成为一种越来越流行的应用形式。微信作为国内最大的社交平台，自然也推出了自己的小程序平台。微信小程序可以与公众号、h5页面进行互通，实现跳转功能。这对于公众号运营者和h5页面开发者来说，无疑是一个非常有用的功能。

一、准备工作

在开始编写代码之前，我们需要先做好一些准备工作。

1. 首先，我们需要创建一个微信小程序。如果还没有小程序，可以按照微信官方的教程进行创建。

2. 其次，我们需要在小程序中添加一个页面，用于接收公众号/h5页面的跳转。这个页面可以是任意页面，但最好是创建一个专门用于跳转的页面，这样可以避免其他页面受到影响。

3. 最后，我们需要在公众号/h5页面中添加一个跳转小程序的按钮或链接。这个按钮或链接的具体形式可以根据自己的需求来设计。

二、实现跳转

在做好准备工作之后，就可以开始编写代码了。

1. 小程序端代码

在小程序的页面中，我们需要添加如下代码：

// 页面加载时执行
onLoad: function () {
  // 获取跳转参数
  const params = this.getLaunchOptionsSync();

  // 判断跳转来源
  if (params.referrerInfo.appId) {
    // 从公众号/h5页面跳转而来
    const appid = params.referrerInfo.appId;
    const path = params.referrerInfo.path;

    // 跳转到指定页面
    wx.navigateTo({
      url: `/${path}`
    });
  }
}

这段代码的作用是：在页面加载时，获取跳转参数，判断跳转来源，如果是从公众号/h5页面跳转而来，则跳转到指定页面。

2. 公众号/h5页面端代码

在公众号/h5页面中，我们需要添加如下代码：

<a href="weixin://app/open-launch-weapp?appid=APPID&path=PAGEPATH">跳转到小程序</a>

这段代码的作用是：在页面中添加一个跳转小程序的链接，当用户点击这个链接时，就会跳转到指定的小程序页面。

三、注意事项

在实现公众号/h5页面跳转到小程序时，需要注意以下几点：

1. 微信版本要求为：7.0.12 及以上，系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上。

2. 跳转的小程序必须是合法合规的。

3. 跳转的页面必须是已经发布的小程序页面。

4. 公众号/h5页面与小程序之间必须是同主体下的应用。

四、总结

以上就是公众号/h5页面跳转到小程序的具体方法和步骤。希望本文能够对大家有所帮助。