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的使用wsssocket.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的使用wsssocket.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的使用wsssocket.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端微信支付功能的全部分享。

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

qrcode.js生成微信二维码
①安装qrcodejs2 npm install qrcodejs2 --save ②在页面中引入 import QRCode from "qrcodejs2" ③在html中设置 ...
SpringBoot 生成微信二维码 B方案
SpringBoot 生成微信二维码 B方案今天主要分享一下如何使用 springBoot 来生成微信B方案的二维码.微信官方地址 (微信官方文档) 有其他方案需求的小伙伴可以进官方了解一下哈 ...
如何生成微信二维码？生成方法其实非常简单
如何生成微信二维码呢?生成微信二维码可以方便地分享微信号或公众号,让其他人可以快速添加你为好友或关注你的公众号.在商业领域中,可以将微信二维码作为营销手段,例如在文章中加入二维码,引导用户进入官方微信 ...
python制作微信个人二维码_一个python自动生成微信二维码海报的轮子
由于最近需要做一个线上活动,所以策划了一个微信二维码海报的用户裂变方案.做好了需求以后交给我们可爱的程序媛妹妹.三天过后去问她,她的表情是这样的她是不是在说,"啊啊,真是不好意思" ...
thinkphp用phpqrcode生成二维码（含中间带logo、临时二维码）或生成微信二维码海报的方法
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/ 2.PHP环境必须开启支持GD2扩展库支持(一般情况下都 ...
企业实战, java、spingboot微信扫码支付，页面生成微信二维码，微信扫码付款，websocket通知，处理订单！复制粘贴代码直接开干
一功能描述: 前端选择商品后生成二维码,用户微信扫码支付备注: 红色为后台给前端的接口 1.前端选择确认商品 2.调后台生成订单接口 (状态未付款) 3.返回订单的详情(订单确认页面 ...
java生成微信二维码，带页面跳转功能
2019独角兽企业重金招聘Python工程师标准>>> package QRCode;import java.awt.image.BufferedImage; import java ...
java后台生成微信二维码，打不开图片
访问微信接口生成二维码图片后,打开二维码图片显示不支持此格式.我这边问题解决1.参数"scene"必传且不能修改成其他字段.2.路径中"\"替换成"/ ...
如何在 PC 上识别微信二维码
抓图把二维码通过微信发消息给自己点开,右键就能看到识别二维码了. 看到没.

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

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

二、建立websocket监听支付回调

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

最新文章

热门文章