寫在前面的話

本文內(nèi)容是指的uni-app項(xiàng)目的支付，文檔中5+ APP的項(xiàng)目類型不涉及。
雖然uni-app已經(jīng)為我們封裝好了一個(gè)統(tǒng)一的API，所以在uni-app中我們只需要調(diào)用uni.requestPayment即可。但是uni-app官方文檔的散亂看起來也挺頭疼的。這里我精簡整個(gè)流程，并對自己開發(fā)時(shí)碰到問題做個(gè)總結(jié)。
需要注意的是，支付模塊的開發(fā)不僅僅是需要客戶端的開發(fā)，還需要服務(wù)端的開發(fā)。這里是在保證服務(wù)端的配置正確的前提下，對于前端uni-app的開發(fā)與配置指南。

開通微信支付

這里有必要說明一下，申請微信支付流程對于初次申請者會(huì)感覺有些混亂，如果不理清相應(yīng)關(guān)系可能會(huì)在各種平臺找來找去。

微信支付各平臺關(guān)聯(lián)圖.png

對于APP，要在微信開放平臺（https://open.weixin.qq.com）注冊申請賬號。注這里公司使用需300元認(rèn)證費(fèi)。在應(yīng)用詳情中申請開通微信支付功能。

當(dāng)審核都通過了，就可以獲取到應(yīng)用ID（APPID，即類似于個(gè)人ID一樣，唯一標(biāo)識）
有了以上基礎(chǔ)，申請微信商戶平臺（https://pay.weixin.qq.com），注冊申請賬號。之后只需關(guān)聯(lián)AppID，即可。

關(guān)聯(lián)AppID.png

配置

小程序

無需配置，只需保證微信小程序配置即可。

APP

在manifest.json文件“App模塊配置”項(xiàng)的“Payment(支付)”下，勾選“微信支付”項(xiàng)

App微信支付配置.png

參數(shù)說明

• appid
  微信開放平臺申請的應(yīng)用ID（AppID）
• iOS平臺通用鏈接（Universal Link）
  在iOS平臺微信支付使用的通用鏈接，必須與微信開放平臺 “管理中心” > “應(yīng)用詳情” > “開發(fā)信息” 中的“Universal Links”項(xiàng)中配置一致
  注：關(guān)于通用鏈接，如果沒有配置一致，iOS是無法在支付完成后回到APP的。

應(yīng)用內(nèi)發(fā)起支付——API使用

調(diào)用 [uni.requestPayment(OBJECT)]發(fā)起支付，OBJECT參數(shù)中provider屬性值固定為wxpay、

示例代碼

微信小程序支付：

這里 的timeStamp, nonceStr, package, signType, paySign是由后端與微信交互生成的，值得注意的是package，微信直傳過來的值是packageValue。

uni.requestPayment({
    provider: 'wxpay',    //支付類型-固定值
    timeStamp: res.data.orderInfo.timeStamp, // 時(shí)間戳（單位：秒）
    nonceStr: res.data.orderInfo.nonceStr, // 隨機(jī)字符串
    package: res.data.orderInfo.packageValue, // 固定值
    signType: res.data.orderInfo.signType, //固定值
    paySign: res.data.orderInfo.paySign, //簽名
    success: function (res) {
        console.log('success:' + JSON.stringify(res));
        console.log("支付成功");
    },
    fail: function (err) {
        console.log('fail:' + JSON.stringify(err));
        console.log("支付失敗");
    }
});

APP支付

這里是orderInfo，該屬性值為訂單對象。依然值得注意的是package，微信直傳過來的值是packageValue。
partnerid，微信傳過來的是partnerId。
prepayid，微信傳過來是prepayId。
noncestr，微信傳過來的是nonceStr。
timestamp，微信傳過來的是timeStamp。
這里一定一定要注意大小寫，不然訂單請求失敗，讓你找問題，找到痛不欲生。

//訂單對象，從服務(wù)器獲取
var orderInfo = {
  "appid": res.data.orderInfo.appId,  // 應(yīng)用ID（AppID）
  "partnerid": res.data.orderInfo.partnerId, // 商戶號（PartnerID）
  "prepayid": res.data.orderInfo.prepayId,  // 預(yù)支付交易會(huì)話ID
  "package": res.data.orderInfo.packageValue,        // 固定值
  "noncestr": res.data.orderInfo.nonceStr, // 隨機(jī)字符串
  "timestamp": res.data.orderInfo.timeStamp, // 時(shí)間戳（單位：秒）
  "sign": res.data.orderInfo.sign, // 簽名，這里用的 MD5 簽名
};

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("支付失敗");                        
    });

至此，微信小程序已經(jīng)可以正常支付了。而APP則需要打包才可以。uni-app有兩種打包方式，一個(gè)是提交云端打包，一個(gè)是本地離線打包。這里說下離線打包的相關(guān)配置和問題。

iOS離線打包微信支付

關(guān)于離線打包我會(huì)單獨(dú)出一篇，這里不在講解。只進(jìn)行微信支付相關(guān)配置講解。
在uni-app官方提供的App離線SDK中有一個(gè)打包工程，如果想使用微信支付，就需要添加相應(yīng)的依賴庫以及資源，這點(diǎn)我就很懷念cocopods，方便太多了。

添加依賴庫及資源

注意：SDK 中的

• libWeChatSDK_pay.a 為帶支付功能的微信SDK，支持微信分享、微信支付及微信授權(quán)登錄功能
• libWeChatSDK.a 為不帶支付功能的SDK，僅支持微信分享和授權(quán)登錄，不使用支付功能請?zhí)砑哟藥?，避免審核被?/li>
• 不要同時(shí)添加到工程避免沖突

工程配置

1.在URL Types 中添加配置： identifier 填寫 weixin ，URL Schemes 填寫wx[后面是您在微信平臺申請的appkey] ,如果沒有該項(xiàng)按照圖中的格式創(chuàng)建。注意wx這兩個(gè)字母必須添加。

wechat-schemes.png

weichat-plist.png

weixin-associated.png

weixin-assoDomains.png

weixin-unlinks.png

weixin_plist.jpg