odeJs 微信公眾號功能開發,移動端 H5頁面調用微信的支付功能。這幾天根據公司的需要使用 node 和 h5頁面調用微信的支付功能完成支付需求。現在把開發過程重新捋一遍，以幫助更多的開發者順利的完成微信支付功能的開發。（微信暫時還沒有提供 node 的支付功能）
一.請求CODE
請求 code 的目的就是獲取用戶的 openid（用戶相對于當前公眾號的唯一標識） 和access_token，請求的API：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
此 api 需要注意幾個參數：
1. appid公眾號的 appid，可以在公眾號中看到
2. redirect_uri 自定義的微信回調地址， 微信會在你請求完上面的地址后跳轉到你定義的redirect_uri的地址， 帶著 code，此處的 redirect_url 需要 **url_encode** *php*， 如果你的程序是 node 則需要使用 **encodeURLComponent(url)**編碼
3. response_type=code，這個沒什么好說的就是固定的 response_type=code，詳細說明可以查看微信官網的說明
4. scope=snsapi_userinfo，固定這樣寫就好，詳細說明可以查看微信官網的說明
5. state=STATE 固定這樣寫就好，詳細說明可以查看微信官網的說明
6. wechat_redirect 固定這樣寫就好，詳細說明可以查看微信官網的說明
ps：官網鏈接：
二.通過code獲取access_token,openid
第一步已經獲取到了 code 的值了， 那么接下來就需要通過 code 來獲取 access_token,openid的值了，請求的 api
API https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
此處api 的參數說明：
1. appid 微信公眾號 id，微信公眾號后臺獲取
2. secret 微信公眾號的密鑰， 微信公眾號后臺獲取
3. code， 第一步獲取用到的 code
4. grant_type=authorization_code 固定就好
三.通過access_token調用接口
access_token 可以做后續的功能， 可以參考官方的例子：
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&lang=zh_CN
四.網頁端調起支付API
看見這個是不是感覺快完事兒了， 只要網頁端調用微信支付功能就完事兒了？no，還差點
在微信瀏覽器里面打開H5網頁中執行JS調起支付。接口輸入輸出數據格式為JSON。
注意：WeixinJSBridge內置對象在其他瀏覽器中無效。
示例代碼如下：
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" ： "wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp"：" 1395712654", //時間戳，自1970年以來的秒數 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" ： "prepay_id=u802345jgfjsdfgsdg888", "signType" ： "MD5", //微信簽名方式： "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request：ok" ) {} // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回 ok，但并不保證它絕對可靠。 } ); }if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}看到上面的代碼， 那么想調用微信的支付功能需要傳遞參數，
{ "appId" ： "wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp"：" 1395712654", //時間戳，自1970年以來的秒數 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" ： "prepay_id=u802345jgfjsdfgsdg888", "signType" ： "MD5", //微信簽名方式： "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }參數說明：
1. appId //公眾號名稱，由商戶傳入
2. timeStamp //時間戳，自1970年以來的秒數 此處需要特別的注意一下，需要是字符串的時間戳格式， 意思就是必須就“” 引號
3. nonceStr //隨機串 32位的， 隨后會提供方法
4. signType // 微信簽名方式： MD5
5. paySign //微信簽名， 隨后說
6. **package** //這個最重要， 充哪里獲取到的呢？ 接下來說。
ps: 官網接口說明
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
五.獲取package， 從微信的 統一下單 接口獲取prepay_id
官方 api：
https://api.mch.weixin.qq.com/pay/unifiedorder
請求參數一堆， 但是有一些不是必須的，下面是必須參數
{ appid : APPID, attach : ATTACH, body : BODY, mch_id : MCH_ID, nonce_str: NONCE_STR, notify_url : NOTIFY_URL,// 微信付款后的回調地址 openid : OPENID, out_trade_no : OUT_TRADE_NO ,//new Date().getTime(), //訂單號 spbill_create_ip : SPBILL_CREATE_IP , //客戶端的 ip total_fee : TOTAL_FEE, //商品的價格， 此處需要注意的是這個價格是以分算的， 那么一般是元， 你需要轉換為 RMB 的元 trade_type : 'JSAPI',}微信的統一下單接口要求傳遞的是 xml 的數據， 而且數據還需要簽名， 那么首先吧數據簽名。
簽名規則可以參考微信給出的簽名規則（簽名方法一會給出）
微信官方簽名規則：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
生成簽名后需要吧數據組裝為xml 的格式：
var body = '<xml> ' + '<appid>'+config.wxappid+'</appid> ' + '<attach>'+obj.attach+'</attach> ' + '<body>'+obj.body+'</body> ' + '<mch_id>'+config.mch_id+'</mch_id> ' + '<nonce_str>'+obj.nonce_str+'</nonce_str> ' + '<notify_url>'+obj.notify_url+'</notify_url>' + '<openid>'+obj.openid+'</openid> ' + '<out_trade_no>'+obj.out_trade_no+'</out_trade_no>'+ '<spbill_create_ip>'+obj.spbill_create_ip+'</spbill_create_ip> ' + '<total_fee>'+obj.total_fee+'</total_fee> ' + '<trade_type>'+obj.trade_type+'</trade_type> ' + '<sign>'+obj.sign+'</sign> ' + // 此處必帶簽名， 否者微信在驗證數據的時候是不通過的 '</xml>';
接下來就是請求 api 獲取prepay_id的值了， 將上面得到的 xml 數據請求下面的 api 發送給微信， 微信驗證數據沒問題后會放回你想要的值。
api ： https://api.mch.weixin.qq.com/pay/unifiedorder
六. 獲取到了prepay_id是不是就可以在 h5 段直接調用微信的支付了么？ 答案是還不可以。
獲取到了prepay_id那么現在h5 呼起微信的支付功能的參數是這樣的：
{ "appId" ： "wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp"：" 1395712654", //時間戳，自1970年以來的秒數 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" ： "prepay_id=u802345jgfjsdfgsdg888", "signType" ： "MD5", //微信簽名方式：}有了這樣的參數， 那么你還需要吧所有參與的參數做簽名。簽名規跟上面的一樣，生成了簽名后需要吧簽名的參數 paySign 賦給h5 呼起微信的支付功能的參數（也就是微信的簽名不參與簽名的生成）
最后的參數是這樣子的：
{ "appId" ： "wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp"：" 1395712654", //時間戳，自1970年以來的秒數 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" ： "prepay_id=u802345jgfjsdfgsdg888", "signType" ： "MD5", //微信簽名方式： "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名}如果你的各個環節都沒有問題， 那么得到了這樣參數后你就可以正常的調用起微信的支付功能， 跟原生的功能是沒有任何的差別的，（估計你現在的心里也特高興吧， 沒有 app 竟然可以使用 app 的功能，就是這么的神奇）。
七.支付完成的回調
微信支付完了后會在 h5 頁面的微信支付的回調函數里面放回值，
res.err_msg == "get_brand_wcpay_request：ok" ，這樣就是成功了， 但是不是就完事兒了呢 ？ 也不是，為什么呢？ 微信真的收到錢了么？ 收到的錢是不是你傳遞給微信的值呢 ？你還需要將支付的結果寫數據庫什么的，這些都是未知。還記的在統一下單接口中有個必須參數就是 notify_url : NOTIFY_URL,// 微信付款后的回調地址 這個地址是用戶傳遞給微信的， 微信在收到用戶的付款后會以 post 的方式請求這個接口，微信會傳遞用戶付款的信息過來， 不過是 xml 格式的。
類系這樣的 xml 格式：
<xml> <appid><![CDATA[wx2421b1c4370ec43b]]></appid> <attach><![CDATA[支付測試]]></attach> <bank_type><![CDATA[CFT]]></bank_type> <fee_type><![CDATA[CNY]]></fee_type> <is_subscribe><![CDATA[Y]]></is_subscribe> <mch_id><![CDATA[10000100]]></mch_id> <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str> <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid> <out_trade_no><![CDATA[1409811653]]></out_trade_no> <result_code><![CDATA[SUCCESS]]></result_code> <return_code><![CDATA[SUCCESS]]></return_code> <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign> <sub_mch_id><![CDATA[10000100]]></sub_mch_id> <time_end><![CDATA[20140903131540]]></time_end> <total_fee>1</total_fee> <trade_type><![CDATA[JSAPI]]></trade_type> <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id></xml>
根據自己的業務邏輯解析這個 xml 格式的數據就好了。
注意：這里你在獲取到數據后微信需要得到你的回應， 如果你一直不回應微信， 微信會請求你好幾次， 這樣估計你的邏輯會有問題吧，所以你需要給微信返回 xml 的格式的 回應。
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg></xml>
小坑：node ，express 框架開發， 如果你在微信的支付成功后的回調中沒有獲取到任何 xml 的值， 那么你需要安裝一組件：body-parser-xml， 你可以使用 npm install body-parser-xml --save 安裝， 在 app.js 里面require('body-parser-xml')(bodyParser);,使用中間件的方式
// 解決微信支付通知回調數據app.use(bodyParser.xml({ limit: '2MB', // Reject payload bigger than 1 MB xmlParseOptions: { normalize: true, // Trim whitespace inside text nodes normalizeTags: true, // Transform tags to lowercase explicitArray: false // Only put nodes in array if >1 }}));這樣你就可以正常的獲取到微信的 xml 數據了。
使用方法：
pay.getAccessToken({ notify_url : 'http://demo.com/', //微信支付完成后的回調 out_trade_no : new Date().getTime(), //訂單號 attach : '名稱', body : '購買信息', total_fee : '1', // 此處的額度為分 spbill_create_ip : req.connection.remoteAddress, }, function (error, responseData) { res.render('payment', { title : '微信支付', wxPayParams : JSON.stringify(responseData), //userInfo : userInfo }); });就到這里吧， 感覺也差不多了。如有不對的地方還請指正。
附上我自己的代碼：https://git.oschina.net/anziguoer/wechatPay
本文已被整理到了《JavaScript微信開發技巧匯總》，歡迎大家學習閱讀。
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
