vue3 前端pc生成微信支付二维码

总体思路：后端会把二维码地址返回给前端。
地址大概是这样的：“weixin://wxpay/bizpayurl?xxxxxxx”
pc要做的就是 把这个地址以二维码形式展示

首先 借助 qrcodejs2

npm install  qrcodejs2 --save

使用示例（我这里是一个独立的页面；因为我里面有跳转页面操作；如果没有跳转，也可以做成弹框展示） 至于是否支付成功，前端这边通过轮询，来感知是否支付成功

<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'