vue3 前端pc生成微信支付二维码

总体思路：后端会把二维码地址返回给前端。
地址大概是这样的：“weixin://wxpay/bizpayurl?xxxxxxx”
pc要做的就是把这个地址以二维码形式展示

首先借助 qrcodejs2

npm install  qrcodejs2 --save

使用示例（我这里是一个独立的页面；因为我里面有跳转页面操作；如果没有跳转，也可以做成弹框展示）至于是否支付成功，前端这边通过轮询，来感知是否支付成功

<template><div ref="qrCode"></div>
</template>
<script lang="ts" setup>
import QRCode from 'qrcodejs2'
import {ref,reactive,watch} from "vue"
import { useRouter,useRoute,onBeforeRouteLeave} from 'vue-router';
const router = useRouter();
const route = useRoute();
let timerPoll=null//赋值setsetInterval
//确保这里的dom能访问到
const qrCode=ref()
//生成二维码
const getQrcode=(qText)=>{let el = qrCode.valuenew QRCode(el, {width: 200,height: 200,text: qText,})}//模拟请求setTimeout(() => {//codeUrl类似于weixin://wxpay/bizpayurl?xxxxxxxgetQrcode(codeUrl)}, 1000);//至于是否支付成功，前端这边通过轮询，来感知是否支付成功
timerPoll= setInterval(() => {//   console.log("轮询");setTimeout(() => {   //这里查看订单详情是否为已付款状态//已付款做些操作
}, 1000);}, 1000);//路由离开销毁轮询onBeforeRouteLeave((to, from, next) => {window.clearInterval(timerPoll)timerPoll = null;next()
})
//这里做的是独立的页面,为了防止闪点其他页面，加个监听路由
watch(() => route.path,(newValue) => {// console.log("监听啊");window.clearInterval(timerPoll);timerPoll = null;}
);
</script>

警告如果使用qrcodejs2报错 TypeError:Cannot read properties of undefined(reading‘_android‘)

解决方法-----------解决方法重新安装一个qrcodejs2-fix

yarn add qrcodejs2-fix 或者
npm i qrcodejs2-fix//引用记得换掉
import QRCode from 'qrcodejs2-fix'

vue3 前端pc生成微信支付二维码相关推荐

Java利用HttpClient发送请求生成微信支付二维码、查询支付状态
一.HttpClient工具类 import org.apache.http.Consts; import org.apache.http.HttpEntity; import org.apache. ...
用qrcode生成微信支付二维码
项目场景: 用qrcode生成微信支付二维码问题描述根据后台返回的路径动态生成微信二维码在这里我们用的是qrcodejs2,它有官网文档 npm i qrcodejs2 导入: import Q ...
vue项目生成微信支付二维码(web端),其他二维码也可以生成
第一步引入第三方插件: npm install –save qrcodejs2 第二步,在vue页面中引用: <template><h2>微信扫码支付</h2>&l ...
行业寒冬：java生成微信支付二维码
01 Redis面试问题常见划分(6个部分) Redis 的概念理解 Redis 基本数据结构详解 Redis 高并发问题策略 Redis 集群结构以及设计理念 Redis 持久化机制 Redis 应 ...
生成微信支付二维码及微信支付
jquery.qrcode http://www.cnblogs.com/xcsn/archive/2013/08/14/3258035.html // 账号信息 String appid = Pro ...
微信支付之01------获取订单微信支付二维码的接口------Java实现
[ 前言:以前写过一个获取微信二维码支付的接口,发现最近公司新开的项目会经常用到,现在我又翻出代码看了一遍,觉得还是把整个代码流程记下来的好 ] 借鉴博客: 他这篇博客写得不错,挺全的:https:/ ...
微信支付：支付流程分析、微信扫码支付（HttpClient）、微信支付二维码生成、检测支付状态、订单状态操作准备工作、支付信息回调、MQ处理支付回调状态、定时处理订单状态
微信支付微信支付开发的整体思路生成支付二维码查询支付状态(微信的服务器) 实现订单状态的修改.删除订单支付状态回查->微信服务器将支付状态返回给支付微服务 MQ处理支付回调状态 Rabb ...
前端如何实现微信扫描二维码下载应用，根据手机系统跳转不同页面
菜花记录前端如何实现微信扫描二维码下载应用,根据手机系统跳转不同页面需求 :由于微信扫码无法直接下载需要再跳转到浏览器下载,所以微信扫码页面添加背景图和相关提示草料二维码生成器地址整改之前: ...
公众号生成微信渠道二维码的方法？
2019独角兽企业重金招聘Python工程师标准>>> 微信公众号有一个默认的二维码,不同渠道投放的都是同一个二维码信息,那么无法知道用户是从哪个渠道关注的.所以现在需要渠道二维码, ...

vue3 前端pc生成微信支付二维码

首先借助 qrcodejs2

使用示例（我这里是一个独立的页面；因为我里面有跳转页面操作；如果没有跳转，也可以做成弹框展示）至于是否支付成功，前端这边通过轮询，来感知是否支付成功

警告如果使用qrcodejs2报错 TypeError:Cannot read properties of undefined(reading‘_android‘)

vue3 前端pc生成微信支付二维码相关推荐

最新文章

热门文章

vue3 前端pc生成微信支付二维码

首先 借助 qrcodejs2

使用示例（我这里是一个独立的页面；因为我里面有跳转页面操作；如果没有跳转，也可以做成弹框展示） 至于是否支付成功，前端这边通过轮询，来感知是否支付成功

警告 如果使用qrcodejs2报错 TypeError:Cannot read properties of undefined(reading‘_android‘)

vue3 前端pc生成微信支付二维码相关推荐

最新文章

热门文章

首先借助 qrcodejs2

使用示例（我这里是一个独立的页面；因为我里面有跳转页面操作；如果没有跳转，也可以做成弹框展示）至于是否支付成功，前端这边通过轮询，来感知是否支付成功

警告如果使用qrcodejs2报错 TypeError:Cannot read properties of undefined(reading‘_android‘)