【vue3】h5唤起微信小程序使用vue3 + vite + typescript，实现h5在微信浏览器环境唤起微信小程

背景

用户在h5端参加完活动可以跳转至app，android和ios分别给了一个链接，用户点击后若已安装app则打开，否则跳转至app下载页面。悲催的是，ios在微信浏览器环境无法唤起App Store。和产品沟通的结果是ios在微信浏览器环境中直接唤起小程序。

方案

url schema

有效期最长30天
每天生成链接上限为50万条
支持在微信外打开

wx-open-launch-weapp

长期有效
无访问上限
只可在微信浏览器打开
综合考虑后使用第二种方式

实现

官方文档：developers.weixin.qq.com/doc/offiacc… 说明：必须先绑定安全域名、引入js，所使用的公众号必须是已认证的服务号。

封装权限注入

import wx from 'weixin-js-sdk' // SDK依赖
import { getJsSdkSignature } from '@/common/api/index'

export default {
  init: (apiList = [], url, tagList = []) => {
    // 需要使用的api列表
    // const u = navigator.userAgent.toLowerCase()
    // const isIOS = u.indexOf('iphone') > -1 // 判断是否是ios微信
    return new Promise((resolve, reject) => {
      getJsSdkSignature({
        // 从后台获取签名相关的接口
        // url: url || (isIOS ? window.jsUrl : window.location.href) // 配置签名的URL
        url: url || window.location.href // 配置签名的URL
      }).then(
        (res) => {
          // console.log('init -> url==========', url || window.location.href)
          // console.log('init -> res================', res)
          const { appId, timestamp, nonceStr, signature } = res.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名，见附录1
            jsApiList: apiList, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            openTagList: tagList // 可选，需要使用的开放标签列表
          })
          wx.ready((res) => {
            // 微信SDK准备就绪后执行的回调。
            // console.log('init -> 微信SDK准备就绪后执行的回调', res)
            resolve(wx, res)
          })
        },
        (err) => {
          reject(err)
        }
      )
    })
  }
}

vite配置
在plugins中配置vue，以解决vue报错。
报错：

The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.

解决

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

代码实现

<template>
    <div class="free-btn">
      <wx-open-launch-weapp
        id="lanunch-btn"
        username="gh_XXX"
        path="pages/home/home.html"
        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
      >
        <!-- eslint-disable -->
        <div v-is="'script'" type="text/wxtag-template">
          <div
            style="position: absolute;left:0;top:0;width: 100%;height: 100%;line-height: 44px;text-align: center;color:white;font-size: 16px;">
            打开小程序</div>
        </div>
      </wx-open-launch-weapp>
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable */
import wxJs from '@/utils/wxJs'
onMounted(() => {
  wxJs.init(['chooseImage'], undefined, ['wx-open-launch-weapp'])
})
</script>
<style lang="scss" scoped>
  .free-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 44px;
    background: $fuchsin;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
  }
</style>

注意注意注意：注入的jsApiList可不能乱写，否则可能出现wx-open-launch-weapp不显示，亲测chooseImage是可以的。虽然不知道这两者有什么关系，可能官方以后会解决这个问题。