? ? 心血來潮來更一篇文章,今天我們講一講使用uni-app開發(fā)之支付模塊。
? ? 可以說支付部分是app的一個重要內(nèi)容,一般的app里都會有這個模塊,所以下面單拿出一篇文章給大家進行講解:
? ? 首先在uni-app中主要有支付寶支付、微信支付、蘋果應用內(nèi)支付這幾種(剩余的支付方式不是主流,我也就不講啦,嘻嘻>-<),接下來我就分開給大家講一講這幾種支付方式。
? ? (一)開發(fā)前準備
? ? 首先如果你想使用者三種支付方式必須要去相應的開放平臺注冊并申請支付功能
? ? (1)支付寶支付能力申請:
? ? 首先登陸支付寶賬號然后創(chuàng)建應用用來獲取支付寶應用的appid以便在uni-app的manifest.json中進行配置,接下來開通app支付功能,開通的步驟比較繁瑣,會有支付寶的工作人員進行審核,如果是公司項目的話應該會會順利,我就不在這里啰嗦了,第三步配置密鑰用來獲取公鑰和私鑰這是需要后臺進行處理的。
? ? (2)微信支付能力申請:
? ? 首先到?微信開放平臺?申請移動應用并開通支付功能,申請應用后可以獲取 AppID 和 AppSecret 值,然后將應用接入?微信商戶平臺,選擇 App 支付,最后開通支付功能后可獲取支付業(yè)務服務器配置數(shù)據(jù):PARTNER(財付通商戶號)、PARTNER_KEY(財付通密鑰)、PAYSIGNKEY(支付簽名密鑰),最后一步也是后臺進行處理的,不用我們操心啦。
? ? (3)蘋果應用內(nèi)支付:
? ? 因為我們的項目沒用過蘋果應用支付所以我就先不多說這部分了,等以后我踩完坑了再給大家補上哈。
? ? (4)manifest.json配置
? ? 打開manifest.json文件找到app SDK配置,然后找到支付的部分進行相關(guān)配置就好了,都是圖形界面配置比較容易,我就一帶而過了。
(二)開發(fā)支付模塊
? ? 首先通過uni.getProvider方法獲取到用戶手機里的服務商,service選擇payment,共有4種方式alipay(支付寶支付)、wxpay(微信支付)、baidu(百度收銀臺支付)、appleiap(蘋果應用內(nèi)支付)。代碼如下:
uni.getProvider({
? ? service: 'payment',
? ? success: function (res) {
? ? //在這里進行業(yè)務邏輯處理
? ? }
});
然后通過后臺獲取訂單信息:
uni.request({
url: addUrl() + '/api/recharge/pay',
method: 'POST',
header: {
referer: ''
},
data: {
//請求接口的參數(shù)
},
success: (res) => {
//獲得訂單信息
}
})
第三步調(diào)起微信/支付寶支付
//支付寶支付
uni.requestPayment({
provider: 'alipay',
orderInfo: orderInfo, //訂單數(shù)據(jù)
success: function(res) {
//處理業(yè)務邏輯
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
icon: 'none',
title: '支付失敗'
});
}
});
//微信支付
uni.requestPayment({
provider: 'wxpay',
orderInfo: orderInfo, //訂單數(shù)據(jù)
success: function(res) {
//處理業(yè)務邏輯
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
icon: 'none',
title: '支付失敗'
});
}
});