vue3.4 微信浏览器打开小程序

1. main.ts

app.config.compilerOptions.isCustomElement=tag=>tag.startsWith("wx-open-launch-weapp")

2. 引入weixin-js-sdk

npm install weixin-js-sdk --save

3. html

<div v-if="isWeixin" class="btn-applet">
  <wx-open-launch-weapp   path="pages/index/index" appid="微信小程序appId" >
      <component :is="'script'" type="text/wxtag-template">
           <div style="color: #4BC051;"> 打开小程序</div>
      </component>
  </wx-open-launch-weapp>
</div>

4. js

import wx from "weixin-js-sdk"
import { ref } from "vue"
let ua: any = navigator.userAgent.toLowerCase()
let isWeixin = ref<Boolean>(!isWXWork && ua.match(/micromessenger/i) == 'micromessenger') //微信浏览器
getWechatConfig({
    url: window.location.href
  }).then(res => {
    const data = res.data
    wx.config({
      debug: false, // 开启调试模式
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名
      jsApiList: ['updateTimelineShareData'], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
    })
})

5. css

.btn-applet {
      /* color: #4BC051; 颜色设置无效，要用行内样式 */
      background: #fff;
      width: 210px;
      margin: 0px auto 0;
      border-radius: 6px;
      /* line-height: 40px; 行高设置无效，要用flex*/
      font-size: 0.37333rem;
      display: flex;
      height:40px;
      justify-content: center;
      align-items: center;
}