項目場景：后臺系統(tǒng)中采購訂單列表需要支持微信掃描支付功能，支付成功需要返回到訂單列表。

一、根據(jù)后端接口返回生成二維碼（QRCode）

調(diào)用接口接收后端返回數(shù)據(jù), npm install qrcode?--save 安裝插件，處理返回數(shù)據(jù)生成二維碼。

1. 后端接口返回數(shù)據(jù)如下：

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

生成二維碼功能到這就完成了，但是這個時候用戶是否掃碼支付，成功或失敗的狀態(tài)不能實時獲取到，做不了掃碼動作之后要完成的交互，如支付成功要返回列表。這個時候需要建立websocket連接來實時收到反饋。

二、建立websocket監(jiān)聽支付回調(diào)

1.建立一個websocket連接

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

// onopen()方法
const open = () => {
  // 注意wss和ws 協(xié)議是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要傳的參數(shù))}`)
  socket.value.onopen=()=>{
    // 需要處理的邏輯代碼
  }
}

2.?接收消息

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

3.長輪詢防止連接斷開

const open = () => {
  // 注意wss和ws 協(xié)議是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要傳的參數(shù))}`)
  socket.value.onopen=()=>{
    // 接收消息方法
    message()
    // 建立心跳機(jī)制防止無操作websocket斷開連接  send()方法
    timers.value = setInterval(() => {
      const data = {message: 'heartbeat'} // 給后端傳參 無要求可隨意
      socket.value.send(JSON.stringify(data))
    },1000*30)
  }
}

4.離開頁面關(guān)閉連接

// onclose()方法
const close = ()=>{
  socket.value?.close()
  socket.value.onclose=()=>{
    console.log('關(guān)閉了');
  }
  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()
  })
})


// 關(guān)閉websocket連接   onclose()方法
const close = ()=>{
  socket.value?.close()
  socket.value.onclose=()=>{
    console.log('關(guān)閉了');
  }
  socket.value = null
}

// 打開websocket   onopen()方法
const open = () => {
  // 注意wss和ws 協(xié)議是http的使用ws，是https的使用wss
  socket.value = new WebSocket(`wss://xxx(后端提供接口)/${xxx(要傳的參數(shù))}`)
  socket.value.onopen=()=>{
    // 接收消息方法
    message()
    // 建立心跳機(jī)制防止無操作websocket斷開連接 send()方法
    timers.value = setInterval(() => {
      const data = {message: 'heartbeat'} // 給后端傳參 無要求可隨意
      socket.value.send(JSON.stringify(data))
    },1000*30)
  }
}

// 接收消息 處理支付成功邏輯   onmessage()方法
const message = () => {
  socket.value.onmessage=(e)=>{
    // 后端返回的標(biāo)識 判斷是否支付成功
    let res = JSON.parse(e.data)
    if (res.data=='Payment succeeded') {
      ElMessage.success('支付成功')
    }
  }
}

// 頁面銷毀時記得斷開websocket連接
onBeforeUnmount(() => {
  close()
})

</script>

以上就是pc端微信支付功能的全部分享。文章來源地址http://www.zghlxwxcb.cn/news/detail-519999.html

到了這里，關(guān)于vue3-pc端生成微信二維碼、掃碼支付監(jiān)聽支付回調(diào)（WebSocket）功能實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！