在uni-app项目中常用的支付主要有支付宝支付、微信支付、应用余额内支付这几种（剩余的支付方式不是主流，我也就不讲啦，嘻嘻>-<），接下来我对这几种支付方式进行了统一的封装。
封装的好处：不需要碰到支付就写一遍uni的支付调用，很不方便
具体uni.requestPayment说明请看官方文档：
https://uniapp.dcloud.io/api/plugins/payment.html#requestpayment
先看封装代码
/*
* 支付 pay.js
*/
export const pay = (result, self, success, fail) => {
if (result.code === -10) {
self.showError(result.msg);
return false;
}
// 发起微信支付
if (result.data.pay_type == 20) {
//小程序支付
// #ifdef MP-WEIXIN
uni.requestPayment({
// 这里是官方需要的参数--一般是后端获取
provider: 'wxpay',
timeStamp: result.data.payment.timeStamp,
nonceStr: result.data.payment.nonceStr,
package: 'prepay_id=' + result.data.payment.prepay_id,
signType: 'MD5',
paySign: result.data.payment.paySign,
success: res => {
paySuccess(result, self, success);
},
fail: res => {
self.showError('订单未支付成功', () => {
// 这个this.showError是一个提示，我放在main.js
payError(result, fail);
});
},
});
// #endif
//公众号支付
// #ifdef H5
if(self.isWeixin()){
WeixinJSBridge.invoke('getBrandWCPayRequest', JSON.parse(result.data.payment),
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
paySuccess(result, self, success);
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
self.showSuccess('支付取消', () => {
payError(result, fail);
});
} else {
self.showError('订单未支付成功', () => {
payError(result, fail);
});
}
}
);
}else{
//h5支付
uni.navigateTo({
url: '/pages/order/pay-h5/pay-h5?order_id='+result.data.order_id+'&order_type='+result.data.order_type,
});
return ;
}
// #endif
// #ifdef APP-PLUS
//微信支付
wxAppPay(result, self,success, fail);
return;
// #endif
}
// 余额支付
if (result.data.pay_type == 10) {
paySuccess(result, self, success);
}
// 支付宝支付
if (result.data.pay_type == 30) {
// #ifdef APP-PLUS
aliAppPay(result, self,success, fail);
// #endif
// #ifdef H5
uni.navigateTo({
url: '/pages/order/alipay-h5/alipay-h5?order_id='+result.data.order_id+'&order_type='+result.data.order_type,
});
// #endif
}
}
/*跳到支付成功页*/
function paySuccess(result, self, success) {
if(success){
success(result);
return;
}
gotoSuccess(result);
}
/*跳到支付成功页*/
function gotoSuccess(result) {
uni.reLaunch({
url: '/pages/order/pay-success/pay-success?order_id=' + result.data.order_id
});
}
/*支付失败跳订单详情*/
function payError(result, fail) {
if(fail){
fail(result);
return;
}
uni.redirectTo({
url: '/pages/order/order-detail?order_id=' + result.data.order_id
});
}
function wxAppPay(result, self,success, fail){
// 获取支付通道
plus.payment.getChannels(function(channels) {
self.channel = channels[0];
console.log(self.channel);
uni.requestPayment({
provider: 'wxpay',
orderInfo: result.data.payment,
success(res) {
paySuccess(result, self, success);
},
fail(error) {
console.log(error);
self.showError('订单未支付成功', () => {
payError(result, fail);
});
},
});
}, function(e) {
console.log("获取支付通道失败：" + e.message);
});
}
function aliAppPay(result, self,success, fail){
console.log(result.data.payment);
uni.requestPayment({
provider: 'alipay',
orderInfo: result.data.payment,
success(res) {
paySuccess(result, self, success);
},
fail(error) {
console.log(error);
self.showError('订单未支付成功', () => {
payError(result, fail);
});
},
});
}
说明：pay.js中用到的showError写在main.js中
/**
* 显示失败提示框 main.js
*/
Vue.prototype.showError = function (msg, callback) {
uni.showModal({
title: '友情提示',
content: msg,
showCancel: false,
success: function (res) {
callback && callback();
}
});
};
接下来就是使用
// test.vue
import {
pay } from '@/common/pay.js';
addTwenOrder(bizcontent).then((res) => {
// 这个是接口
if (res) {
uni.hideLoading();
console.log(res.data);// 里面就是一些签名算法、随机字符串等等
pay(res, self); // 这里调用
this.disButton = !this.disButton;
}
})
.catch((res) => {
this.disButton = !this.disButton;
uni.hideLoading();
console.log("回调" + JSON.stringify(res));
});
完结~