uni-app微信小程序支付流程

526 阅读1分钟

最近在用 uni-app 开发微信小程序,涉及到微信支付功能的开发,在此记录一下。

一、业务流程

扫描PC端后台管理二维码,跳转至小程序支付页面,输入支付金额后,点击支付按钮。

二、实现流程

  • PC后台管理端调用后端生成跳转小程序指定页面的二维码

  • 用户输入金额后,点击支付按钮,调用后端JSAPI下单接口,生成订单

可查看微信官方文档小程序支付部分JSAPI下单

  • 根据后端返回的参数,小程序调起支付API

可查看微信官方文档小程序支付部分小程序调起支付API

	const confirmPay = () => {
		const orderData = {
			//微信支付单位为分需要乘100
			amount: Number(state.number) * 100,
			orderTitle: "订单支付",
			orderDesc: "订单支付",
			userId: state.userId
		}
		//后端JSAPI下单
		creatOrder(orderData).then(res => {
			if (res.code === 0) {
				try {
					const {
						appId,
						nonceStr,
						paySign,
						signType,
						timeStamp
					} = res.data
					//
					if (nonceStr && res.data.package && paySign && signType && timeStamp) {
						// 小程序调起支付API
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: timeStamp,
							nonceStr: nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: paySign,
							// success: function(res) {
							// 	console.log('success:' + JSON.stringify(res));
							// },
							// fail: function(err) {
							// 	console.log('fail:' + JSON.stringify(err));
							// }
						})
					}
				} catch (e) {
					console.log(e);
				}
			} else {
				uni.showToast({
					title: res.error,
					icon: "error",
				})
			}
		})
	}