微信小程序支付

前提： 一、小程序已經註冊完畢，各類服務器環境、https等已經配置好。 二、大家是先後臺合做，後臺給主要給咱們提供相應的數據、由於有些接口請求後臺作要比咱們作要簡單，其實我更認爲是小程序只有1M，更多的東西給後臺吧 正題： 1、參考： 一、http://www.cnblogs.com/jcscript/p/6126722.html 二、http://www.weixinapphome.com/topic/28 註釋：第二個是根據第一個作的一篇文章，這兩個都是前端實現支付發起和調用的 個人而是把支付發起和支付分開到先後分別處理。請繼續。。。 我標記了3點須要咱們注意： 第一：一、屬性package的參數值是package：'prepay_id=wx211262323463265451' 第二：二、這個簽名須要咱們注意，簽名方式是把全部參數拼接成url格式再進行MD5編碼 第三：三、這個是支付的文檔，請細看 對於上面的問題咱們來一個一個解決：咱們要先看第三步打開支付流程的文檔：https://pay.weixin.qq.com/wiki/d ... api.php?chapter=9_1 其實咱們能夠看到全部流程都在這裏！那麼咱們就按照這個流程一步步走。 一、小程序內調用登陸接口，獲取到用戶的openid,api參見公共api【小程序登陸API】 上面已經說過要先後臺結合，因此開發小程序的你這時就要作第一步了，文檔在：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject   首先用  wx.login(OBJECT)獲取code，code用來換取openid，獲取openid的事情我是咱們後臺來作，我用request帶上獲取的code去get就行了 1 2 3 4 5 6 7 function getopenid(code, cb) {      requestGet( 'UserOpenid' , { code: code }, function (res) {          if ( typeof cb == "function" ) {              cb(res);          }      }) } res的返回結果就是咱們的openid，到這裏咱們第一步完成了。 二、商戶server調用支付統一下單，api參見公共api【統一下單API：https://pay.weixin.qq.com/wiki/d ... api.php?chapter=9_1】 這個咱們看一下：   這個裏面的東西不少不少，若是是你本身完成先後端的話那就好好看，磨刀不誤砍柴工，有一點看不到可能致使一直解決不了這個流程，畢竟微信的文檔 有那麼一點亂亂的趕腳。 這個若是像我同樣是後端作的那就不用你操心了，可是你想了解的話也不難，看上面我最開始給出的兩個地址，這兩個文章都是吧所有流程作在前端（小程序）這裏的 其實不必，這個在看資料的時候發現其實微信是提供java，net，php三種語言的封裝包的，那麼就是說後臺只要吧這個東西下載下來把對應的參數填寫修改就能夠了， 可是最終是什麼樣子的，若是能夠的話我會補上這個代碼，後臺的代碼不在我這，諒解！ 這個咱們同樣只要request用post請求獲得結果就能夠了，此次咱們須要的結果就是支付perpay_id   個人這個請求時只返回了一個perpay_id可是咱們能夠看統一下單接口返回的數據   他給咱們不只返回了perpay_id，還有隨機字符串和簽名，我說這個點的緣由是我沒有用這個因此是否是咱們直接在接下來要用的隨機字符串和簽名就是直接用這兩個就能夠了呢（我沒有驗證後臺沒有給我返回，具體是什麼樣子的待驗證）。跳過這一點，咱們只要這個perpay_id同樣能夠成功。 到如今咱們來看一下   第一步的咱們已經完成了，只有第二步paySign這個簽名了。對應微信的流程是： 三、商戶server調用再次簽名，api參見公共api【再次簽名：https://pay.weixin.qq.com/wiki/d ... api.php?chapter=7_7】 這個簽名咱們來看看是有點使人苦惱的，咱們來看看上面說的兩個文章的踩坑總結： 第一篇：   第二篇：   總的來講看這個簽名的坑是最多的。 我結合一下來描述一下吧： 首先咱們看第三步（綠色）部分的地址   再看微信小程序API中wx.requestPayment(OBJECT)接口的文檔   我特別標註的紅色框部分可能會讓你恍然大悟了，有些「坑」多是咱們看東西的方式不對啊，對於appid和key文檔上有明確的說明要帶上 由此咱們也能夠看出，對於支付流程咱們正確的打開方式是下圖   要遵循上面圖片的步驟和鏈接頁面進行看和作。 好了，扯遠了：來看簽名   1 2 3 4 // 調起支付簽名 function MixedencryMD5(res_paydata,randomString,timeStamp) {    return "appId=" + config.appid + "&nonceStr=" + randomString + "&package=prepay_id=" + res_paydata + "&signType=MD5" + "&timeStamp=" + timeStamp + "&key=" + config.key;  } 這個是正確的順序，在具體簽名方法說明中，能夠看出key是在簽名參數按照ASCII大小排序完再拼接上去的， 上面的參數函數   01 02 03 04 05 06 07 08 09 10 11 12 13 14 // 時間戳 function timeStamp() {    return parseInt( new Date().getTime() / 1000) + '' } /* 隨機數 */ function randomString() {    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' ;    /****默認去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/    var maxPos = chars.length;    var pwd = '' ;    for ( var i = 0; i < 32; i++) {      pwd += chars.charAt(Math.floor(Math.random() * maxPos));    }    return pwd; } 最後就是吧這個拼接的字符串進行MD5加密，Md5加密的js在網上搜一下就行了，若是怕不對本身能夠在線驗證。 至此咱們  timeStamp 時間戳，nonceStr 隨機數，package 支付id，paySign 簽名，是否是都有了？對的，這樣就結束了   上圖就是調用支付的最後步驟了，注意一點時間戳和隨機字符串，保證生成一次，由於在wx.requestPayment(OBJECT)中咱們要用，在拼接的字符串中一樣要用，這兩個要保證同樣微信去MD5加密的時候才能獲得和你本身MD5加密同樣的結果。祝你們，一次成功！！有什麼不對的請指正，文章引用上若有侵犯請留言我會及時修正，謝謝！