（轉）微信小程式API——微信支付詳解（順便講一下我遇見的坑）
https://blog.csdn.net/cwh1010714845/article/details/78944335
學習微信小程式已經半個多月了，終於接觸到小程式中一個很重要的功能——微信支付。接下來就給大家詳細講解一下微信支付功能的呼叫。
一想到微信支付，大家一定會去看微信小程式的API文件，沒錯，作為一個菜鳥我也看過，當然我第一次看的時候腦袋也有點暈，因為其中所需要的引數有點多，而且很多東西我們都不知道怎樣去獲得。沒關係，下面我一步一步給各位講解，怎麼去實現微信支付這一功能的呼叫。
首先大家需要去下載一個公眾號支付的sdk，下面是網址
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
我的伺服器後臺選用的是php，所以我下載的是php的sdk。
話不多說，接下來開始我們的正題。我們下載完sdk以後會發現這就是一個支付的demo，微信團隊已經把所有的程式碼幫我們寫好了，但是請注意，這是公眾號支付的demo，因此我們需要修改一下其中的部分內容。
1.首先我們開啟WxpayAPI_php_v3.0.1目錄下的cert目錄，我們可以看到cert目錄放的就是我們的證書檔案，我們需要把原有的證書檔案刪除，替換成我們微信商戶平臺中的證書檔案。所謂證書檔案，就是當你註冊成功一個微信商戶號後，在“賬戶中心—API安全”下我們可以下載我們的證書，微信團隊需要在支付時確認商家身份，所以需要這一環節，如下圖。
2.配置完證書以後，我們就該配置我們的小程式資訊和商家資訊了。在資料夾lib目錄下的WxPay.Config.php檔案中，我們可以看到一些引數的資訊，因此我們需要把它修改成我們自己的資訊。如下圖。
3.修改example目錄下的WxPay.JsApiPay.php檔案。如下圖。
途中引數code指的是獲取到的使用者的code，但是在開發文件中code變數為js_code，因此我們需要將202行中的code->js_code。還有第205行，我們需要的介面應該為wx.login中的介面，因為我們需要把這些引數傳上去，因此修改後的程式碼為下圖。
3.在example目錄下的jsapi.php檔案中，我們可以修改以下資訊。
其中的引數資訊我們可以在微信文件中瞭解，部分的引數我們無需修改，大家想了解引數可以進入下面連結。
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1
最後29行是我手動加上去的，給我們的前臺返回統一下單的這些引數，以便我們傳遞給微信支付API。然後我們還需要把這個檔案中的H5程式碼註釋掉或者刪掉，因為小程式不會顯示這些程式碼。註釋掉下圖中的全部H5程式碼
當我們做完以上幾步以後，我們就可以開始我們的微信小程式的開發了。首先我們建立一個專案，新增我們的APPID。
首先在app.js中我們需要呼叫wx.login方法來獲取使用者的code
//app.js
App({
code: null,
onLaunch: function () {
var that=this;
wx.login({
success: function (res) {
if (res.code) {
that.code=res.code;
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
}
});
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
然後我們建立一個page，命名為pay，我們在pay.wxml中建立一個按鈕，並且給它繫結事件，我們希望點選按鈕實現支付功能。
<view>
<button bindtap='wxpay' class='css'>發起支付</button>
</view>
1
2
3
接下來是pay.js程式碼
// pages/pay/pay.js
var app=getApp();
Page({
wxpay: function(){
var code=app.code;
wx.request({
//我把資料夾名改為了wxpayapi,SERVER_PATH為伺服器的域名
url: SERVER_PATH+'wxpayapi/example/jsapi.php',
data: {
code: code
},
header: {
'content-type': 'application/json' // 預設值
},
success: function (res) {
console.log(res.data);
var data=res.data;
wx.requestPayment({
'timeStamp': data.timeStamp,
'nonceStr': data.nonceStr,
'package': data.package,
'signType': 'MD5',
'paySign': data.paySign,
'success': function (res) {
console.log("支付成功！")
},
'fail': function (res) {
}
})
}
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
當我們獲取到code後就把code傳送給jsapi.php檔案，然後我們把結果給log出來，我們可以看到我們統一下單api給我們返回的引數，而這些引數正是wx.requestPayment所需要的引數，因此我們直接傳給wx.requestPayment方法，然後就可以支付了。
接下來還有一個很重要的環節，就是我在呼叫微信支付功能的工程中所遇到的一些bug，可能有些人也會遇到同樣的問題，於是我就給大家說明一下。
1.傳送請求失敗。我們呼叫wx.request給伺服器傳送請求的時候必須在微信小程式的後臺給我們的伺服器域名設定白名單。在“設定->開發設定”。
需要注意的一點是我們發起請求的是域名，而且是HTTPS的域名，因此如果請求的地址是IP或者是HTTP，編譯器會報錯。
2.
Notice: “Undefined property: JsApiPay::$curl_timeout in C:\xampp\htdocs\www\curtain\public\WxPay414\WxPay.JsApiPay.php on line 100”
在此處改為30，指30s。
3.證書問題。
Fatal error: Uncaught WxPayException: curl出錯，錯誤碼:60 in C:\xampp\htdocs\www\curtain\public\WxPay414\lib\WxPay.Api.php:564
Stack trace:
解決方法：http://blog.csdn.net/qq_34755805/article/details/51221932
4.<b>Notice</b>: Undefined index: access_token in <b>C:\phpStudy\PHPTutorial\WWW\wxpayapi\example\WxPay.JsApiPay.php</b> on line <b>156</b><br />
解決方法，註釋掉第156行。
---------------------
作者：最冷一天丶
來源：CSDN
原文：https://blog.csdn.net/cwh1010714845/article/details/78944335
版權宣告：本文為博主原創文章，轉載請附上博文連結！