uni-app Vue3 实现将微信支付的url转成二维码扫码支付

前言

插件名：uQRCode
uniapp扩展组件：uni-popup
技术栈：uni-app + Vue3
编码工具：HBuilder X 和 微信开发者工具
文章内容：实现点击创建订单成功之后，将后端返回的微信支付url转化为二维码的功能。

效果图

1、安装

官网地址：https://uqrcode.cn/doc/guide/getting-started.html

在HBuilder X的终端下载依赖

npm install uqrcodejs

下载完 HBuilder X项目中会自动多出一个node_modules依赖包，项目记得重启一下。

2、页面使用

①、引入

	import UQRCode from 'uqrcodejs'; 

②、创建url转二维码方法

	// 将微信支付url转换为微信二维码
	const formatWXPayToQRCode = (url) => {
    
    
		// 获取uQRCode实例
		var qr = new UQRCode();
		// 设置二维码内容
		qr.data = "https://uqrcode.cn/doc/guide/getting-started.html#%E5%AE%89%E8%A3%85";
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size = 200;
		// 调用制作二维码方法
		qr.make();
		// 获取canvas上下文
		var canvasContext = uni.createCanvasContext('qrcode'); 
		// 设置uQRCode实例的canvas上下文
		qr.canvasContext = canvasContext;
		// 调用绘制方法将二维码图案绘制到canvas上
		qr.drawCanvas();
	}

3、用uniapp扩展组件的popup弹窗包裹

初始弹窗显/隐变量
为什么要引入这个弹窗组件呢？因为我们要做的是创建完订单后就弹出一个框，框中有微信二维码这样的效果。
uQRCode其实就是将url用canvas画成一张二维码。

<template>
   <view>
     <button @click="CreateOrder">创建订单</button>
	 <uni-popup ref="QRCodePopup" type="center" :is-mask-click="false" background-color="#fff">
		<view class="pay-box">
			<view class="text-center">微信扫一扫</view>
			<!-- 关键在这行 -->
			<canvas id="qrcode" canvas-id="qrcode" style="width: 300rpx;height: 300rpx;"></canvas>
			<view class="text-center">请用本人微信扫描以上二维码</view>
		</view>
	 </uni-popup>
   </view>
</template>

<script setup>
  const QRCodePopup = ref(null) // 二维码
</script>

uni-popup需要定义一个ref对象，这个对象身上会携带很多方法，比如：弹窗的显/隐，一会就要用到。
显示：QRCodePopup.value.open('center')
隐藏：QRCodePopup.value.close()

4、项目没有下载popup扩展组件的看这里，已下载的直接看第5。

1、下载
链接：https://ext.dcloud.net.cn/plugin?name=uni-popup
2、步骤

3、项目自动新增uni_modules文件以及uni-popup，代表组件成功下载到项目中了。

5、创建订单成功用接口返回的微信支付url传入生成微信支付二维码

	// 创建订单
	const createOrder = (params) => {
    
    
		// 先显示二维码弹框，再调接口，返回的支付url给UQRCode函数，渲染展示到qrcode view标签上
		QRCodePopup.value.open('center')
		let res_wx_code = 'weixin://wxpay/bizpayurl?pr=FmQEegPz3'
		formatWXPayToQRCode(res_wx_code)
		
		// 真实场景获取支付url是以下这个样子，获取之后放进去
		/* app.globalData.utils.request({
			url: '/pay/createOrder',
			method: 'POST',
			header: {
				token: uni.getStorageSync('token')
			},
			data: params,
			success: res => {
                //  后端返回的支付URL字段，wx_code: "weixin://wxpay/bizpayurl?pr=FmQEegPz3"
				formatWXPayToQRCode(res.wx_code)   // 核心在这里
			},
			fail: res => {
				console.log(res)
			},
		})
		*/
	}

5、关闭二维码弹窗

	const closeQRCodePopup = () => {
    
    
		QRCodePopup.value.close()
		// 并跳转到订单列表
		/*  uni.navigateTo({
		      url: '../order/index'
		    }) 
		*/
	}

完整代码

<template>
  <view>
     <button @click="CreateOrder">创建订单</button>
	 <uni-popup ref="QRCodePopup" type="center" :is-mask-click="false" background-color="#fff">
		<view class="pay-box">
			<view class="text-center">微信扫一扫</view>
			<canvas id="qrcode" canvas-id="qrcode" style="width: 300rpx;height: 300rpx;"></canvas>
			<view class="text-center">请用本人微信扫描以上二维码</view>
		</view>
	 </uni-popup>
  </view>
</template>

<script setup>
  import UQRCode from 'uqrcodejs';
  import {
      
       ref } from "vue"
  const QRCodePopup = ref(null) // 二维码

  // 将微信支付url转换为微信二维码
  const formatWXPayToQRCode = (url) => {
      
      
		// 获取uQRCode实例
		var qr = new UQRCode();
		// 设置二维码内容
		qr.data = url;
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size = 200;
		// 调用制作二维码方法
		qr.make();
		// 获取canvas上下文
		var canvasContext = uni.createCanvasContext('qrcode'); 
		// 设置uQRCode实例的canvas上下文
		qr.canvasContext = canvasContext;
		// 调用绘制方法将二维码图案绘制到canvas上
		qr.drawCanvas();
  }

  // 创建订单
  const createOrder = (params) => {
      
      
		// 先显示二维码弹框，再调接口，返回的支付url给UQRCode函数，渲染展示到qrcode view标签上
		QRCodePopup.value.open('center')
		let res_wx_code = 'weixin://wxpay/bizpayurl?pr=FmQEegPz3'
		formatWXPayToQRCode(res_wx_code)

		// 真实场景获取支付url是以下这个样子，获取之后放进去
		/*
		 let params = { orderId: 12321,... }
		 app.globalData.utils.request({
			url: '/pay/createOrder',
			method: 'POST',
			header: {
				token: uni.getStorageSync('token')
			},
			data: params,
			success: res => {
                //  后端返回的支付URL字段，wx_code: "weixin://wxpay/bizpayurl?pr=FmQEegPz3"
				formatWXPayToQRCode(res.wx_code)   // 核心在这里
			},
			fail: res => {
				console.log(res)
			},
		})
		*/
  }

  // 关闭二维码弹窗
  const closeQRCodePopup = () => {
      
      
		QRCodePopup.value.close()
		// 并跳转到订单列表
		/*  uni.navigateTo({
			  url: '../order/index'
		    })
		*/ 
	}
  
</script>
<style>
.uni-popup__wrapper {
      
      
	border-radius: 20rpx;
}
.text-center {
      
      
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.pay-box {
      
      
	padding: 40rpx;
}
.pay-box canvas {
      
      
	margin: 0 auto;
}
</style>