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