最近在用 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",
})
}
})
}