vue3-pc端生成微信二维码、扫码支付监听支付回调（WebSocket）功能实现

项目场景：后台系统中采购订单列表需要支持微信扫描支付功能，支付成功需要返回到订单列表。

一、根据后端接口返回生成二维码（QRCode）

调用接口接收后端返回数据, npm install qrcode --save 安装插件，处理返回数据生成二维码。

1. 后端接口返回数据如下：

2. 前端代码如下：

<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. 效果图如下：

生成二维码功能到这就完成了，但是这个时候用户是否扫码支付，成功或失败的状态不能实时获取到，做不了扫码动作之后要完成的交互，如支付成功要返回列表。这个时候需要建立websocket连接来实时收到反馈。

二、建立websocket监听支付回调

1.建立一个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. 接收消息

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

3.长轮询防止连接断开

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.离开页面关闭连接

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

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

完整代码及注释如下：

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

以上就是pc端微信支付功能的全部分享。