uniapp微信小程序实现微信支付的功能
微信小程序需要开通微信支付的功能,需要公司在微信开发平台上面申请开通微信支付的功能(管理员才拥有权限),只有在微信开发平台上申请通过了,才可以前后端结合实现微信支付的需求
1. 获取code
// 根据uniapp提供的api获取code
// this关键字代理
const _this = this
uni.login({
provider: 'weixin', // 使用微信登录
success: (res) => {
const {code} = res;
// code => 0e1MTrFa1eDx9I0bRpJa1Mqfwf4MTrFJ
// 获取code成功后,获取openId
_this.getOpenId(code)
}
});
2. 获取openId
根据code,请求后端接口获取openId(此步需要后端配合提供接口)
// 后端提供接口,调用接口根据code获取到openId(可能还需要提供其他参数,根据后端需求来定)
getOpenId(code) {
getMiniOpenid({code: code}).then(res => {
if (res.data && res.data !== 'null') {
// 可以将获取到的openId保存到缓存中
uni.setStorageSync('openid', res.data)
}
}).catch(err => {
uni.showToast({
title: err.toString(),
duration: 2000,
icon: 'none'
})
})
}
3. 根据获取到的openId,以及订单相关数据,生成prepayId (预支付交易会话ID),调用uniapp提供的支付API:uni.requestPayment()
<1>. 调用生成订单接口,获取到订单id等信息(如果已经有订单id等信息,则不需要调用生成订单接口),(后端提供)
<2>. 根据订单id和openid,调用后端提供接口,获取prepayId 、timeStamp、paySign、signType、nonceStr等信息(后端提供)
这一步对于后端来说,只是单纯的通过openid,以及订单相关参数,向微信要了一个prepayId,然后创建了一个订单,并且给前端返回prepayId
// 根据订单id和openId调用后端接口,获取到prepayId、timeStamp、paySign、signType、nonceStr等信息
getPrepayId(){
wxMiniPay({openid: uni.getStorageSync('openid'),ordersid: this.orderid,rpid: this.rpid,}).then(res => {
//此时后端可能只返回prepayId,需要再调一个接口根据prepayId获取timeStamp、paySign、signType、nonceStr等信息
//也可能此次后端就将prepayId、timeStamp、paySign、signType、nonceStr等信息全部返回
// 根据后端提供的接口而定,我这举例将prepayId、timeStamp、paySign、signType、nonceStr等信息全部返回
const wxInfo = res.data
// 调用uniapp提供的支付API:uni.requestPayment()
uni.requestPayment({
provider: 'wxpay', // 固定传wxpay
appid: wxInfo.appId, // 微信开放平台-应用-AppId,后端返回,或者是前端自己填写
timeStamp: wxInfo.timeStamp, // 时间戳(单位:秒)
package: wxInfo.package, // 'prepay_id='+prepayId,前端拼接,或者后端直接返回拼接好的
paySign: wxInfo.paySign, // 签名
signType: wxInfo.signType, // 签名算法,这里用的 MD5/RSA 签名
nonceStr: wxInfo.nonceStr, // 随机字符串
partnerid: wxInfo.partnerid, // 微信支付商户号,后端返回或者是前端在微信公众平台里找到商户号
success(res) {
// 支付成功,可以跳转到支付结果页面等操作
},
fail(err) {
// 取消支付的操作
if (err.errMsg === 'requestPayment:fail cancel') {
uni.showToast({
title: '用户取消支付',
duration: 2000,
icon: 'none'
})
} else {
// 支付失败
uni.showToast({
title: '支付失败',
duration: 2000,
icon: 'none'
})
}
}
})
})
}
对于前端来说,微信支付就是根据uni.login()获取到code,根据code调用接口获取到openid,根据openid和订单信息调用接口获取到prepayid,根据prepayid调用接口获取到timeStamp、paySign、signType、nonceStr等信息,再调用uniapp提供的支付API:uni.requestPayment()