Vue3前端PC端生成微信支付二维码

大致思路：后台返回二维码地址给前台。

地址大概是这样的：“weixin://wxpay/bizpayurl?xxxxxxx”

PC要做的就是把这个地址以二维码的形式显示出来

首先借助qrcodejs2

npm install  qrcodejs2 --save

使用示例（我这里是独立页面；因为里面有跳转页面操作；如果没有跳转usdt收款二维码生成，也可以显示为弹框）至于是否支付成功usdt收款二维码生成，前端感知轮询是否支付成功

<template>
        <div ref="qrCode"></div>
</template>
<script lang="ts" setup>
import QRCode from 'qrcodejs2'
import {ref,reactive,watch} from "vue"
import { useRouter,useRoute,onBeforeRouteLeave} from 'vue-router';
const router = useRouter();
const route = useRoute();
let timerPoll=null//赋值setsetInterval
//确保这里的dom能访问到
const qrCode=ref()
//生成二维码
const getQrcode=(qText)=>{
            let el = qrCode.value
            new QRCode(el, {
                width: 200,
                height: 200,
                text: qText,
                
            })
        }
   //模拟请求
   setTimeout(() => {
   //codeUrl类似于weixin://wxpay/bizpayurl?xxxxxxx
    getQrcode(codeUrl)
    
}, 1000);
//至于是否支付成功，前端这边通过轮询，来感知是否支付成功
timerPoll= setInterval(() => {
    //   console.log("轮询");
    setTimeout(() => {   
    //这里查看订单详情是否为已付款状态
    //已付款做些操作 
}, 1000);
    
      
  }, 1000);
//路由离开销毁轮询
    onBeforeRouteLeave((to, from, next) => {
          window.clearInterval(timerPoll)
           timerPoll = null;
  next()
})
//这里做的是独立的页面,为了防止闪点其他页面，加个监听路由
watch(
  () => route.path,
  (newValue) => {
    // console.log("监听啊");
    window.clearInterval(timerPoll);
    timerPoll = null;
  }
);
</script>

警告如果使用qrcodejs2报错TypeError: Cannot read properties of undefined (reading '_android')

解决方案 ---------- 解决方案 重新安装一个 qrcodejs2-fix

yarn add qrcodejs2-fix 或者
npm i qrcodejs2-fix
//引用记得换掉
import QRCode from 'qrcodejs2-fix'