前言：

本文只介紹了代碼片段，如果需要支付前準(zhǔn)備的流程可以繼續(xù)瀏覽查找（狗頭）

該方法是開(kāi)發(fā)uniapp時(shí)使用的，未涉及5+APP

前端部分并不復(fù)雜，只是有些流程步驟有些雜亂，正常都是后端去和微信交互。前端只需要將每個(gè)參數(shù)對(duì)應(yīng)的填好，發(fā)送請(qǐng)求即可。

微信支付：

一、配置manifest中的微信支付，填寫(xiě)對(duì)應(yīng)微信開(kāi)放平臺(tái)申請(qǐng)應(yīng)用的AppID值

二、發(fā)送請(qǐng)求獲取appid、partnerid、prepayid、package、noncestr、timestamp、sign等值，這些都是后端與微信交互產(chǎn)生的，調(diào)用接口傳入后端需要的參數(shù)獲取就好了。

三、獲取到對(duì)應(yīng)的參數(shù)值后，就可以使用uniapp官方的api請(qǐng)求進(jìn)行支付了。

具體操作和代碼如下：

一、manifest中的配置

?

?二、代碼：（可自行優(yōu)化方法，文中有點(diǎn)冗雜）

import { wxPay } from '../../api/api.js';

......

testWxPay() {
				const data = {
					joinType: **,
					name: "***",
					totalAmount: *
				}
               // 這個(gè)是后端給我的接口，我統(tǒng)一寫(xiě)在了管理api的js文件中
				wxPay(data).then(res => {
					uni.hideLoading()
					console.log(res, "測(cè)試微信支付的res")
					this.wxParams = res.info.responseData.app_response
					//訂單對(duì)象，從服務(wù)器獲取
					var orderInfos = {
						"appid": this.wxParams.appid, // 應(yīng)用ID（AppID）
						"partnerid": this.wxParams.partnerid, // 商戶號(hào)（PartnerID）
						"prepayid": this.wxParams.prepayid, // 預(yù)支付交易會(huì)話ID
						"package": this.wxParams.package, // 固定值
						"noncestr": this.wxParams.noncestr, // 隨機(jī)字符串
						"timestamp": this.wxParams.timestamp, // 時(shí)間戳（單位：秒）
						"sign": this.wxParams.sign, // 簽名，這里用的 MD5 簽名
					};
					console.log(this.wxParams, "this.wxParams")
					console.log(orderInfos, "orderInfos")
                  // uniapp官方的Api，可直接到官網(wǎng)搜索查詢
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfos,
						success(res) {
							console.log('success:' + JSON.stringify(res));
							console.log("微信支付成功");
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("微信支付失敗");
						}
					});
				}).catch(err => {
					uni.hideLoading()
					console.log(err, "測(cè)試微信支付err")
				})

},

支付寶支付：

注意：

• 支付寶支付沒(méi)有包名和簽名的限制，可以使用標(biāo)準(zhǔn)基座開(kāi)發(fā)測(cè)試
• uniapp使用支付寶支付無(wú)法調(diào)起支付寶原因有可能是targetSdkVersion大于或等于30的原因，我改成28后可以正常調(diào)起了，這樣的解決方式有可能會(huì)和其他引入的插件產(chǎn)生沖突

一、配置manifest中的支付寶支付

二、發(fā)送請(qǐng)求獲取支付寶訂單數(shù)據(jù)，

三、獲取到支付寶訂單數(shù)據(jù)后，就可以使用uniapp官方的api請(qǐng)求進(jìn)行支付了。

一：manifest中的配置

?

二：代碼片段：

import { aliPay } from '../../api/api.js';

......


testAliPay() {
				const data = {
					joinType: ***,
					name: "***",
					totalAmount: *
				}

                // 后端給的接口，傳參調(diào)用即可
				aliPay(data).then(res => {
					uni.hideLoading()
					//訂單對(duì)象，從服務(wù)器獲取
					var orderStr = res.orderString
					console.log(orderStr, "orderStr")
					//訂單對(duì)象，從服務(wù)器獲取

                   // uniapp官方Api，直接調(diào)用，傳入?yún)?shù)
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: orderStr, //支付寶訂單數(shù)據(jù)
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}).catch(err => {
					uni.hideLoading()
					console.log(err, "試支付寶支付err")
				})

},

結(jié)尾：?

到這里就要和大家說(shuō)再見(jiàn)啦??? ！

如果大家有流程配置的需要的話，可以移步其他參考資料：

微信支付：

uni.requestPayment(OBJECT) | uni-app官網(wǎng)

uniapp支付之微信支付 - 簡(jiǎn)書(shū)

支付寶支付：

uni.requestPayment(OBJECT) | uni-app官網(wǎng)

uniapp支付之支付寶APP支付 - 簡(jiǎn)書(shū)

支付寶無(wú)法喚起：uniapp集成支付寶支付無(wú)法喚起支付寶客戶端 - 簡(jiǎn)書(shū)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-427182.html

到了這里，關(guān)于uniapp實(shí)現(xiàn)微信支付、支付寶支付的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！