微信h5【vue3】跳转小程序解决方案

目标：运行在微信环境的中的 H5 页面，点击后打开小程序。

实践：在自定义 H5 页面嵌入微信标签(wx-open-launch-weapp)跳转。

微信官方文档：developers.weixin.qq.com/minigame/de…

流程：

1. 到微信公众号后台配置 JS 接口安全域名：设置与开发 - 公众号设置 - 功能设置 - JS 接口安全域名
2. 签名生成: 后端生成签名
3. 前端工程安装 "weixin-js-sdk": "^1.6.5"
4. vite.config.ts 添加开放标签 tag.includes('wx-open-launch')
5. 使用 wx.config 授权验证
6. 使用开放标签 wx-open-launch-weapp

这里主要介绍前端开发具体实现

安装依赖

安装 weixin-js-sdk

npm i weixin-js-sdk

wx.config

从接口拿到签名信息后，可以进行授权

wx.config({ 
    debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
    appId:'', // 必填，公众号的唯一标识，填自己的！ 
    timestamp: , // 必填，生成签名的时间戳，刚才接口拿到的数据 
    nonceStr: '', // 必填，生成签名的随机串 
    signature: '', // 必填，签名 
    jsApiList: [], // 需要使用的JS接口列表 
    openTagList: ['wx-open-launch-weapp'] // 必填，跳转小程序时必填 
});

开启debug模式，可以查看授权是否成功，一定要授权成功，才能进行跳转！！！

wx-open-launch-weapp 使用

<wx-open-launch-weapp
    id="launch-btn"
    :appid="公众号的唯一标识"
    :path="跳转小程序页面路径"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: pink;"
  >
    <component :is="'script'" type="text/wxtag-template">
      <button style="position: absolute; width: 400px; height: 100px; background: red;>
        点击
      </button>
    </component>
</wx-open-launch-weapp> 

这里需要注意的是，因为工程中 vue 安装的是 3.3.4，写法会和官方文档有差异。

通过上面的方式，就可以实现h5跳转小程序了，亲测有效！

使用 wx-open-launch-weapp 遇到问题

解决方式，在 vite.config.ts 加入如下配置即可解决。

plugins: [
  vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.includes('wx-open-launch')
      }
    }
  })
]