本文實(shí)例講述了JS通過(guò)調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法。分享給大家供大家參考，具體如下：

最近在做微信公眾號(hào)開發(fā)，在微信支付上遇到一些問(wèn)題，困惑了3天，今天終于搞定。期間要感謝一些大神的幫助，趁熱下面分享一下我的經(jīng)驗(yàn)。

在實(shí)現(xiàn)微信支付之前，需要到微信開發(fā)平臺(tái)認(rèn)證，這些認(rèn)證和配置信息我就不多說(shuō)了，這里主要從代碼層面實(shí)現(xiàn)支付。

function onBridgeReady(){
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId" ： "wx2421b1c4370ec43b",   //公眾號(hào)名稱，由商戶傳入
      "timeStamp"：" 1395712654",     //時(shí)間戳，自1970年以來(lái)的秒數(shù)
      "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串
      "package" ： "prepay_id=u802345jgfjsdfgsdg888",   //統(tǒng)一訂單號(hào)
      "signType" ： "MD5",     //微信簽名方式：
      "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付簽名
    },
    function(res){
      alert(res.err_msg);
      if(res.err_msg == "get_brand_wcpay_request：ok" ) {}   // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：res.err_msg將在用戶支付成功后返回  ok，但并不保證它絕對(duì)可靠。
    }
  );
}
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();
}

上面的JS代碼是官方文檔上貼出來(lái)的，官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。

下面對(duì)JS中的幾個(gè)參數(shù)做主要的講解:

在開發(fā)過(guò)程中，有4個(gè)非常重要的參數(shù):一個(gè)是appid,AppSecret,apikey和商戶號(hào)。上面js中的appID就是其中之一。timeStamp是一個(gè)時(shí)間戳，10位數(shù)，nonceStr是隨機(jī)數(shù)，32位以內(nèi)，這里最重要的兩個(gè)參數(shù)，也是最容易出錯(cuò)的就是package和paySign了。我一一說(shuō)來(lái)。先說(shuō)package，這里需要用到prepay_id，這個(gè)參數(shù)是微信生成的訂單號(hào)，需要我們調(diào)用統(tǒng)一訂單接口來(lái)獲取。官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1?？梢詮奈臋n看到，要獲取prepay_id，需要很多參數(shù)，這里面有一個(gè)非常重要的參數(shù)就是簽名。注意:這里的簽名和JS中的支付簽名和不同的。 簽名的算法文檔里有，我只是強(qiáng)調(diào)兩點(diǎn)。一個(gè)是參數(shù)的順序，一定一定要按照ASCII從小到大拼接，二是apikey一定不能錯(cuò)，這個(gè)apikey在哪里呢?登入商戶平臺(tái)就可以設(shè)置了。

拼接好簽名需要的字符串后，進(jìn)行MD5加密就可以得到簽名了。然后把簽名和前面所有的參數(shù)組合成xml格式的字符串，調(diào)用給的接口URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一個(gè)xml結(jié)果，解析出其中的prepay_id，這樣這個(gè)參數(shù)就成功獲取到了。

下面再說(shuō)JS中的最后一個(gè)參數(shù)PaySign:支付簽名。支付簽名的算法也是一樣，把JS中的其他5個(gè)參數(shù)按照順序拼接，加上apikey，MD5加密，ok。

簽名的算法都是一樣的，只是參數(shù)值不同而已。這里需要注意一點(diǎn)。在支付簽名的時(shí)候，用到隨機(jī)數(shù)nonceStr，時(shí)間戳timeStamp，而簽名時(shí)使用的這兩個(gè)參數(shù)和JS中的這兩個(gè)參數(shù)的值要是一樣的，是同一個(gè)隨機(jī)數(shù)，同一個(gè)時(shí)間戳。為什么呢?雖然文檔沒(méi)說(shuō)，但是我的理解是:支付簽名是通過(guò)隨機(jī)數(shù)和時(shí)間戳來(lái)生成的，然后在支付的時(shí)候，把隨機(jī)數(shù)，時(shí)間戳，支付簽名一起發(fā)送過(guò)去，那么在微信進(jìn)行驗(yàn)證的時(shí)候，也會(huì)根基js中的隨機(jī)數(shù)和時(shí)間戳生成簽名和你發(fā)送的支付簽名進(jìn)行比較，如果你在js中重新獲取新的隨機(jī)數(shù)、時(shí)間戳，那么算出來(lái)的簽名和你發(fā)送的簽名就會(huì)不一樣，就會(huì)報(bào)錯(cuò):簽名失敗。

到此，代碼層面的注意點(diǎn)就這些，當(dāng)然，還有其他的一些注意點(diǎn)。比如其中有用的openid，這個(gè)參數(shù)也是需要調(diào)用接口獲取到的，還有支付授權(quán)的目錄是否配置正確。

最后一句總結(jié):仔細(xì)看文檔，最后問(wèn)別人，可以找微信支付相關(guān)的群，里面很多大神的，我之前就是遇到一個(gè)問(wèn)題糾結(jié)了2天沒(méi)解決，(有時(shí)候光看文檔也不行)，

然后怒加了8個(gè)微信開發(fā)的群，最終在高人的指點(diǎn)下終于搞出來(lái)了。再次表示感謝。程序員是一個(gè)熱愛(ài)分享的群體，他們非常樂(lè)意把自己知道的東西分享出去。所以不懂的時(shí)候，多問(wèn)問(wèn)。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論