当前位置：首页 > news >正文

微信h5环境使用开放标签（wx-open-launch-weapp）打开三方小程序

news 来源：原创 2025/5/18 10:55:22

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

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

这是微信 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 页面中调用微信的功能接口。

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

5. 配置微信 config

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

// API 为获取公众号信息定义的接口
API().then((result) =>{
  wx.config({
    debug: false, // 开启调试模式
    appId: result.appId, // 必填，公众号的唯一标识
    timestamp: result.timestamp, // 签名时间戳 必填
    nonceStr: result.nonceStr, // 签名随机串 必填
    signature: result.signature,// 签名必填
    jsApiList: ['miniProgram.navigateTo', 'onMenuShareAppMessage'],// 使用的 JS 接口列表 必填
    openTagList: ['wx-open-launch-weapp'] // 开放标签
  });
  wx.ready(() => {
     console.log('config初始化正确')
  });
  wx.error((error) => {
     console.log(`config error`);
  });
}).catch((err) =>{
  console.log('接口加载错误', err)
})

6. 使用 wx-open-launch-weapp 标签

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

vue
<template>
   <wx-open-launch-weapp
     id="launch-btn"
     :username="gh_xxxxxxxxx"
     :path="/subpack/xxxx/xxxx"
     @launch="successFun"
     @error="errorFun"
    >
      <script type="text/wxtag-template">
        <style>
            .content{
              width: 100%;
              height: 48px;
              background-color: red;
            }
         </style>
         <div class="content"></div>
       </script>
  </wx-open-launch-weapp>
</template>
// username 是要跳转到小程序的原始id
// path 是要跳转到的小程序路径 为空就跳转到首页
// 注：写在开放标签里面的标签元素是不能使用v-if v-show这些的，如需写逻辑展示 如下
// <template v-if="xxx">
//   <wx-open-launch-weapp>
//   </wx-open-launch-weapp>
// </template>
// 在wx-open-launch-weapp标签外层套一层template写逻辑判断使用，开放标签里面使用写法不变
js
<script>
 methods: {
   successFun() {
     console.log('成功打开小程序')
   },
   errorFun(err) {
     console.log('打开小程序失败', err)
   }
 }
</script>