開發uniapp微信支付模塊詳解(前端)

1.准備好微信開放平台申請應用的appid並填入manifest.json中app SDK配置中

 

 

 2.在app 模塊權限配置里勾選Payment

 

 

 3.獲取多個支付的服務商(這一步因為我公司的只用微信支付就沒去獲取了),可以參照官方示例Demo hello項目;里面的獲取服務商代碼如下: (單個微信支付的可以跳過這個)

在onload里使用getgetProviderr接口去獲取,然后把值儲存進自定義的數組,通過點擊后判斷是那個服務商

   <template v-if="providerList.length > 0">

          <button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)" >{{item.name}}支付</button>

 </template>

  

  data() {

       return {

            providerList: []

        }

     },

 

 onLoad: function() {

            // #ifdef APP-PLUS

            uni.getProvider({

                service: "payment",

                success: (e) => {

                    console.log("payment success:" + JSON.stringify(e));

                    let providerList = [];

                    e.provider.map((value) => {

                        switch (value) {

                            case 'alipay':

                                providerList.push({

                                    name: '支付寶',

                                    id: value,

                                    loading: false

                                });

                                break;

                            case 'wxpay':

                                providerList.push({

                                    name: '微信',

                                    id: value,

                                    loading: false

                                });

                                break;

                            default:

                                break;

                        }

                    })

                    this.providerList = providerList;

                },

                fail: (e) => {

                    console.log("獲取支付通道失敗：", e);

                }

            });

            // #endif

        },

4.獲取訂單數據(這是從官方demo的獲取得的原始數據);記住服務端給你獲取的字段名必須要小寫,不能使用駝峰.;

{
 "data": {
  "appid": "wx0411fa6a39d61297",
  "noncestr": "mzgmuAGjcKgKeO4W",
  "package": "Sign=WXPay",
  "partnerid": "1230636401",
  "prepayid": "wx06114357636379c131cf65541407669700",
  "timestamp": 1583466237,
  "sign": "2820515803D395ED2FF66A07B6560DBA"
 },
 "statusCode": 200,
 "header": {
  "Transfer-Encoding": "chunked",
  "Server": "Tengine",
  "Access-Control-Allow-Origin": "*",
  "Connection": "keep-alive",
  "X-Android-Received-Millis": "1583466237162",
  "EagleId": "0e1d28a515834662374177089e",
  "Date": "Fri, 06 Mar 2020 03:43:57 GMT",
  "Via": "cache26.l2st4-5[250,0], cache17.cn1366[256,0]",
  "X-Android-Selected-Protocol": "http/1.1",
  "Timing-Allow-Origin": "*",
  "X-Android-Response-Source": "NETWORK 200",
  "Vary": "[Accept-Encoding, Accept-Encoding]",
  "X-Android-Sent-Millis": "1583466236803",
  "_": "HTTP/1.1 200 OK",
  "Content-Type": "text/plain;charset=UTF-8"
 },
 "errMsg": "request:ok"
}

5.調用requestPayment接口

 requestPayment(e, index) {        
                uni.requestPayment({
                    provider:"wxpay",//這個值因為是微信支付;如果有更多的支付服務的話請看第3步里獲取的那個數組里的值;詳細的可以看下官方文檔里
                    orderInfo: orderInfo,  //這個值是第四步服務端返回給你的訂單數據,自己可以組裝成一個對象賦值過來
                    success: (e) => {
                        console.log("success", e);
                        uni.showToast({
                            title: "感謝您的贊助!"
                        })
                    },
                    fail: (e) => {
                        console.log("fail", e);
                        uni.showModal({
                            content: "支付失敗,原因為: " + e.errMsg,
                            showCancel: false
                        })
                    },
                   
                })
            },

6.走到這里基本就走完了,可能會出現這個問題

UniAPP 進行微信支付時報錯： {"errMsg":"requestPayment:fail:[payment微信:-1]General errors"}這個問題的話

通過網上各種經驗參考如果你遇到了這種情況，建議首先將打包成功的APP應用下載到手機上（暫定安卓機）進行微信支付操作，很可能是成功操作哦！,解決方案可以看這位老哥的https://blog.csdn.net/u011415782/article/details/91817308