El terminal Vue3-pc genera el código QR de WeChat, realiza la función de devolución de llamada de pago (WebSocket) de monitoreo de pago de código de escaneo

Escenario del proyecto: la lista de pedidos de compra en el sistema de fondo debe ser compatible con la función de pago de escaneo de WeChat, y el pago debe devolverse a la lista de pedidos después del pago exitoso.

1. Genere un código bidimensional (QRCode) de acuerdo con el retorno de la interfaz de back-end

Llame a la interfaz para recibir los datos devueltos por el backend, npm install qrcode --save para instalar el complemento y procese los datos devueltos para generar un código QR.

1. Los datos devueltos por la interfaz de back-end son los siguientes:

2. El código de front-end es el siguiente:

<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. La imagen del efecto es la siguiente:

La función de generar el código QR se completa aquí, pero en este momento, ya sea que el usuario escanee el código para pagar, el estado de éxito o fracaso no se puede obtener en tiempo real, y la interacción que se completará después de la acción de escaneo no se puede Si el pago es exitoso, la lista debe ser devuelta. En este momento, se debe establecer una conexión websocket para recibir comentarios en tiempo real.

2. Establecer devolución de llamada de pago de monitoreo de websocket

1. Establecer una conexión 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. Recibir mensajes

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

3. El sondeo prolongado evita la desconexión

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. Sal de la página para cerrar la conexión.

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

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

El código completo y los comentarios son los siguientes:

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

Lo anterior es el uso compartido completo de la función de pago de WeChat en el lado de la PC.