1.安装依赖

npm i weixin-js-sdk

2.配置vue.config

  //...其他配置
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        //修改它的选项...
        options.compilerOptions = {
          isCustomElement: (tag) => tag.startsWith("wx-open-launch-weapp"),
        }
        return options
      })
  },

3.注入sdk

import wx from "weixin-js-sdk"
import { getSignature } from "@/api/user"

export const wxInit = async () => {
  const { code, data } = await getSignature()
  if (code == 0) {
    wx.config({
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: [
        "onMenuShareTimeline",
        "scanQRCode",
        "chooseImage",
        "previewImage",
        "wx-open-subscribe",
        "wx-open-launch-weapp",
      ],
      openTagList: ["wx-open-subscribe", "wx-open-launch-weapp"],
    })
    wx.ready(function() {
      console.log("接口配置成功")
    })
  }
}

4.在App create中调用方法

<script>
  import { wxInit } from '@/utils/wx.js'
  export default {
    name: 'App',
    created() {
      console.log('created')
      wxInit()
    }
  }
</script>

5.在业务页面中使用标签

      <div v-show="payActive=='wx'&&payType==4" class="operation-btn">
    <wx-open-launch-weapp id="launch-btn" appid="wx123456"  :extra-data="extraData" @launch="handleLaunchFn" @error="handleErrorFn" @ready="ready">
          <div v-is="'script'" type="text/wxtag-template">
            <span style="color:#fff">立即支付</span>
          </div>
        </wx-open-launch-weapp>
      </div>

完结！！！