Le terminal Vue3-pc génère le code QR WeChat, la réalisation de la fonction de rappel de paiement (WebSocket) de suivi du paiement par code scan

Scénario de projet : la liste des bons de commande dans le système d'arrière-plan doit prendre en charge la fonction de paiement par analyse WeChat, et le paiement doit être renvoyé à la liste des commandes après un paiement réussi.

1. Générer un code à deux dimensions (QRCode) selon le retour de l'interface back-end

Appelez l'interface pour recevoir les données renvoyées par le backend, npm install qrcode --save pour installer le plug-in et traitez les données renvoyées pour générer un code QR.

1. Les données renvoyées par l'interface backend sont les suivantes :

2. Le code frontal est le suivant :

<template>
  <div class="pay-weixin">
    <img :src="qrCodeImgUrl">
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import QRCode from 'qrcode' // 引入生成二维码插件qrcode
import { weChatNativePay } from '@/api/index'

const qrCodeImgUrl = ref('')

onMounted(() => {
  // 微信支付二维码接口
  weChatNativePay({
    amount: '',
    description: '',
    module: '',
    outTradeNo: ''
  }).then(res => {
    // 使用toDataURL方法 返回的是promise对象 通过.then取值
    let img = QRCode.toDataURL(res.data)
    img.then(t => {
      qrCodeImgUrl.value = t
    })
  })
})

</script>

3. L'image d'effet est la suivante :

La fonction de génération du code QR est terminée ici, mais à ce moment, que l'utilisateur scanne le code pour payer, le statut de réussite ou d'échec ne peut pas être obtenu en temps réel, et l'interaction à terminer après l'action de numérisation ne peut pas être Si le paiement est réussi, la liste doit être renvoyée. À ce stade, une connexion Websocket doit être établie pour recevoir des commentaires en temps réel.

2. Établir un rappel de paiement de surveillance WebSocket

1. Établir une connexion WebSocket

// 定义scoket
const socket = ref(null)

// onopen()方法
const open = () => {
  // 注意wss和ws 协议是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要传的参数)}`)
  socket.value.onopen=()=>{
    // 需要处理的逻辑代码
  }
}

2. Recevoir des messages

// onmessage()方法
const message = () => {
  socket.value.onmessage=(e)=>{
    // 后端返回的标识 判断是否支付成功
    let res = JSON.parse(e.data)
    if (res.data=='Payment succeeded') {
      ElMessage.success('支付成功')
    }
  }
}

3. Une longue interrogation empêche la déconnexion

const open = () => {
  // 注意wss和ws 协议是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要传的参数)}`)
  socket.value.onopen=()=>{
    // 接收消息方法
    message()
    // 建立心跳机制防止无操作websocket断开连接  send()方法
    timers.value = setInterval(() => {
      const data = {message: 'heartbeat'} // 给后端传参 无要求可随意
      socket.value.send(JSON.stringify(data))
    },1000*30)
  }
}

4. Quitter la page pour fermer la connexion

// onclose()方法
const close = ()=>{
  socket.value?.close()
  socket.value.onclose=()=>{
    console.log('关闭了');
  }
  socket.value = null
}

// 页面销毁
onBeforeUnmount(() => {
  close()
})

Le code complet et les commentaires sont les suivants :

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

// 定义scoket
const socket = ref(null)

onMounted(() => {
  // 微信支付二维码接口
  weChatNativePay({
    amount: '',
    description: '',
    module: '',
    outTradeNo: ''
  }).then(res => {
    // 使用toDataURL方法 返回的是promise对象 通过.then取值
    let img = QRCode.toDataURL(res.data)
    img.then(t => {
      qrCodeImgUrl.value = t
    })
    // 二维码展示成功后开始建立websocket连接
    open()
  })
})


// 关闭websocket连接   onclose()方法
const close = ()=>{
  socket.value?.close()
  socket.value.onclose=()=>{
    console.log('关闭了');
  }
  socket.value = null
}

// 打开websocket   onopen()方法
const open = () => {
  // 注意wss和ws 协议是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要传的参数)}`)
  socket.value.onopen=()=>{
    // 接收消息方法
    message()
    // 建立心跳机制防止无操作websocket断开连接 send()方法
    timers.value = setInterval(() => {
      const data = {message: 'heartbeat'} // 给后端传参 无要求可随意
      socket.value.send(JSON.stringify(data))
    },1000*30)
  }
}

// 接收消息 处理支付成功逻辑   onmessage()方法
const message = () => {
  socket.value.onmessage=(e)=>{
    // 后端返回的标识 判断是否支付成功
    let res = JSON.parse(e.data)
    if (res.data=='Payment succeeded') {
      ElMessage.success('支付成功')
    }
  }
}

// 页面销毁时记得断开websocket连接
onBeforeUnmount(() => {
  close()
})

</script>

Ce qui précède est le partage complet de la fonction de paiement WeChat côté PC.