微信开放标签 wx-open-launch-weapp 实现 H5 跳转小程序

在微信的 H5 页面中跳转到小程序是一项常见的需求。通过使用微信提供的开放标签 wx-open-launch-weapp，可以让用户从 H5 页面直接打开特定的小程序页面。本篇文章将记录我在实际项目中使用该标签的经验和注意事项，并用AI整理了一下详细步骤。

1. 配置微信公众平台的业务域名

首先，需要确保你已经在微信公众平台上正确配置了 H5 页面所使用的业务域名。没有配置业务域名的 H5 页面将无法正常调用微信开放标签。

登录微信公众平台，进入"公众号设置" -> "功能设置"。
在"业务域名"一栏中，添加 H5 页面的域名（例如 your-domain.com)

这是微信 H5 页面与小程序之间通信的基础，确保该域名在微信认证的环境中可用。

2. 获取并配置小程序的原始 ID

使用 wx-open-launch-weapp 标签时，必须提供目标小程序的原始 ID（即 username 字段），该字段通常以 gh_ 开头。你可以在微信小程序后台找到这个 ID。

登录微信小程序后台，进入"设置" -> "基本信息"页面。
找到小程序的原始 ID，将其复制，备用。

在开放标签中，你需要将这个 ID 配置到 username 属性中，以确保 H5 页面能够正确调用指定的小程序。

3. 确保 H5 页面在 HTTPS 环境下运行

微信对安全性的要求很高，所有涉及微信 API 和开放标签的 H5 页面必须在 HTTPS 环境下运行。如果页面没有使用 HTTPS 协议，将导致功能无法正常使用。

确保你的 H5 页面已经部署到 HTTPS 环境。

4. 引入微信 JSSDK

在你的 index.html 中引入微信 JSSDK，以便在 H5 页面中调用微信的功能接口。

xml 复制代码

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

5. 配置微信 `config`

为了让微信 JSSDK 正常工作，需要在页面加载时进行 wx.config 的配置。这一步通常放在一个单独的配置文件中，比如 wxConfig.js。

`wxConfig.js`

javascript 复制代码

import axios from 'axios';
import { Toast } from 'vant';
import { getToken } from '@/utils/auth';  // 假设这里的getToken是用于获取登录token

const API_ROOT = process.env.API_ROOT;  // 获取API根路径
const url = window.location.href;       // 当前页面的URL，用于微信分享签名

/**
 * 微信JSSDK配置
 * @param {Boolean} debug 是否开启调试模式
 * @returns {Promise} 配置结果的Promise
 */
export function wxConfig(debug = false) {
  return new Promise((resolve, reject) => {
    // 发送请求到后端获取签名信息
    axios({
      method: 'post',
      url: `${API_ROOT}/async/userBind/getWxShareInfo`,  // 微信分享信息接口
      data: { url },  // 发送当前页面的URL
      timeout: 60000,  // 超时时间
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        token: getToken(),  // 从本地获取token
      },
    })
      .then(res => {
        console.log(res, 'res');
        const data = res.data;
        
        // 校验返回结果
        if (data.resultCode !== 0) {
          // 根据不同错误码处理提示信息
          if (data.resultCode === 3) {
            // Toast(data.resultMessage);
          } else if (data.resultCode === -1) {
            // Toast('登录已失效,请重新登录');
          } else {
            // Toast(`操作异常，请联系管理员(${data.resultCode})!`);
          }
          reject(data);
        } else {
          // 获取返回的数据
          const resultData = data.resultData;
          console.log(resultData, 'getWxinShareInfo');
          
          // 调用微信JSSDK的config方法
          wx.config({
            debug,  // 是否开启调试模式
            appId: process.env.NODE_ENV === "production" ? resultData.appId : 'wx863ba2f7ef50223c',  // 公众号ID
            timestamp: resultData.timestamp,  // 时间戳
            nonceStr: resultData.nonceStr,    // 随机字符串
            signature: resultData.signature,  // 签名
            jsApiList: ['onMenuShareTimeline'],  // 使用的微信API
            openTagList: ['wx-open-launch-weapp']  // 开放标签列表，小程序跳转标签
          });

          // 微信JSSDK配置成功后的回调
          wx.ready(function () {
            console.log('wx.ready');
          });

          // 成功配置resolve返回
          resolve(data);
        }
      })
      .catch(err => {
        // 错误处理
        Toast(err);
        reject(err);
      });
  });
}

6. 在 App.vue 中引入配置并调用

在项目中，我们可以在合适的时机调用 wxConfig。例如，可以在 App.vue 中进行调用，确保只有在微信环境下才执行配置。

`App.vue`

javascript 复制代码

javascript
import { wxConfig } from '@/utils/wxConfig';

export default {
  methods: {
    registerWxConfig() {
      if (window.location.href.indexOf('poster') > -1) {
        if (isWeixin()) {
          wx.miniProgram.getEnv((res) => {
            if (res.miniprogram) {
              console.log('在小程序内');
            } else {
              console.log('不在小程序内');
              wxConfig();
            }
          });
        }
      }
    },
    isWeixin() {
      return /micromessenger/i.test(window.navigator.userAgent);
    }
  },
  mounted() {
    this.registerWxConfig();
  }
}

7. 使用 `wx-open-launch-weapp` 标签

在页面中，使用 wx-open-launch-weapp 标签以展示一个按钮，用户点击按钮后将跳转到小程序的指定页面。

示例代码