|
提及這個(gè)支付，真是像是一個(gè)女神一樣很多人都很渴望，但是很多時(shí)候都沒(méi)有用到，但是又想試試到底是怎么樣子的：
今天我們就來(lái)揭開神秘秘的面紗吧。
前提是：
1、小程序已經(jīng)注冊(cè)完畢，各種服務(wù)器環(huán)境、https等已經(jīng)配置好。
2、你們是前后臺(tái)合作，后臺(tái)給主要給我們提供相應(yīng)的數(shù)據(jù)、因?yàn)橛行┙涌谡?qǐng)求后臺(tái)做要比我們做要簡(jiǎn)單，其實(shí)我更認(rèn)為是小程序只有1M，更多的東西給后臺(tái)吧
正題：
一、參考：
1、http://www.cnblogs.com/jcscript/p/6126722.html
2、http://www.weixinapphome.com/topic/28
注釋：第一個(gè)是盟主天下雪已經(jīng)轉(zhuǎn)到小程序聯(lián)盟中了的文章，第二個(gè)是根據(jù)第一個(gè)做的一篇文正，這兩個(gè)都是前端實(shí)現(xiàn)支付發(fā)起和調(diào)用的
我的而是把支付發(fā)起和支付分開到前后分別處理。請(qǐng)繼續(xù)。。。
[attach]8273[/attach]
上圖我標(biāo)記了3點(diǎn)需要我們注意：
第一：1、屬性package的參數(shù)值是package：'prepay_id=wx211262323463265451'
第二：2、這個(gè)簽名需要我們注意，簽名方式是把所有參數(shù)拼接成url格式再進(jìn)行MD5編碼
第三：3、這個(gè)是支付的文檔，請(qǐng)細(xì)看
對(duì)于上面的問(wèn)題我們來(lái)一個(gè)一個(gè)解決：我們要先看第三步打開支付流程的文檔：https://pay.weixin.qq.com/wiki/d ... api.php?chapter=9_1
[attach]8274[/attach]
其實(shí)我們可以看到所有流程都在這里！那么我們就按照這個(gè)流程一步步走。
1、小程序內(nèi)調(diào)用登錄接口，獲取到用戶的openid,api參見公共api【小程序登錄API】
上面已經(jīng)說(shuō)過(guò)要前后臺(tái)結(jié)合，所以開發(fā)小程序的你這時(shí)就要做第一步了，文檔在：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
 
首先用
wx.login(OBJECT)獲取code，code用來(lái)?yè)Q取openid，獲取openid的事情我是我們后臺(tái)來(lái)做，我用request帶上獲取的code去get就好了
-
function getopenid(code, cb) {
-
-
requestGet('UserOpenid', { code: code }, function (res) {
-
-
if (typeof cb == "function") {
-
-
cb(res);
-
-
}
-
-
})
-
-
}
res的返回結(jié)果就是我們的openid，到這里我們第一步完成了。
2、商戶server調(diào)用支付統(tǒng)一下單，api參見公共api【統(tǒng)一下單API：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1】 這個(gè)我們看一下： 
這個(gè)里面的東西很多很多，如果是你自己完成前后端的話那就好好看，磨刀不誤砍柴工，有一點(diǎn)看不到可能導(dǎo)致一直解決不了這個(gè)流程，畢竟微信的文檔 有那么一點(diǎn)亂亂的趕腳。 這個(gè)如果像我一樣是后端做的那就不用你操心了，但是你想了解的話也不難，看上面我最開始給出的兩個(gè)地址，這兩個(gè)文章都是吧全部流程做在前端（小程序）這里的 其實(shí)沒(méi)必要，這個(gè)在看資料的時(shí)候發(fā)現(xiàn)其實(shí)微信是提供java，net，php三種語(yǔ)言的封裝包的，那么就是說(shuō)后臺(tái)只要吧這個(gè)東西下載下來(lái)把對(duì)應(yīng)的參數(shù)填寫修改就可以了， 但是最終是什么樣子的，如果可以的話我會(huì)補(bǔ)上這個(gè)代碼，后臺(tái)的代碼不在我這，諒解！ 這個(gè)我們一樣只要request用post請(qǐng)求得到結(jié)果就可以了，這次我們需要的結(jié)果就是支付perpay_id  我的這個(gè)請(qǐng)求時(shí)只返回了一個(gè)perpay_id但是我們可以看統(tǒng)一下單接口返回的數(shù)據(jù)  他給我們不僅返回了perpay_id，還有隨機(jī)字符串和簽名，我說(shuō)這個(gè)點(diǎn)的原因是我沒(méi)有用這個(gè)所以是不是我們直接在接下來(lái)要用的隨機(jī)字符串和簽名就是直接用這兩個(gè)就可以了呢（我沒(méi)有驗(yàn)證后臺(tái)沒(méi)有給我返回，具體是什么樣子的待驗(yàn)證）。跳過(guò)這一點(diǎn)，我們只要這個(gè)perpay_id一樣可以成功。 到現(xiàn)在我們來(lái)看一下  第一步和第一步的我們已經(jīng)完成了，只有第二步paySign這個(gè)簽名了。對(duì)應(yīng)微信的流程是： 3、商戶server調(diào)用再次簽名，api參見公共api【再次簽名：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7】 這個(gè)簽名我們來(lái)看看是有點(diǎn)令人苦惱的，我們來(lái)看看上面說(shuō)的兩個(gè)文章的踩坑總結(jié)： 第一篇：  第二篇：  總的來(lái)說(shuō)看這個(gè)簽名的坑是最多的。 我結(jié)合一下來(lái)描述一下吧： 首先我們看第三步（綠色）部分的地址
 再看微信小程序API中wx.requestPayment(OBJECT)接口的文檔  我特別標(biāo)注的紅色框部分可能會(huì)讓你恍然大悟了，有些“坑”可能是我們看東西的方式不對(duì)啊，對(duì)于appid和key文檔上有明確的說(shuō)明要帶上 由此我們也可以看出，對(duì)于支付流程我們正確的打開方式是下圖  要遵循上面圖片的步驟和連接頁(yè)面進(jìn)行看和做。 好了，扯遠(yuǎn)了：來(lái)看簽名
-
// 調(diào)起支付簽名
function MixedencryMD5(res_paydata,randomString,timeStamp) {
return "appId=" + config.appid + "&nonceStr=" + randomString + "&package=prepay_id=" + res_paydata + "&signType=MD5" + "&timeStamp=" + timeStamp + "&key=" + config.key;
}
|
這個(gè)是正確的順序，在具體簽名方法說(shuō)明中，可以看出key是在簽名參數(shù)按照ASCII大小排序完再拼接上去的， 上面的參數(shù)函數(shù)
-
// 時(shí)間戳
function timeStamp() {
return parseInt(new Date().getTime() / 1000) + ''
}
/* 隨機(jī)數(shù) */
function randomString() {
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默認(rèn)去掉了容易混淆的字符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;
}
|
最后就是吧這個(gè)拼接的字符串進(jìn)行MD5加密，Md5加密的js在網(wǎng)上搜一下就好了，如果怕不對(duì)自己可以在線驗(yàn)證。 至此我們 timeStamp 時(shí)間戳，nonceStr 隨機(jī)數(shù)，package 支付id，paySign 簽名，是不是都有了？對(duì)的，這樣就結(jié)束了  上圖就是調(diào)用支付的最后步驟了，注意一點(diǎn)時(shí)間戳和隨機(jī)字符串，保證生成一次，因?yàn)樵?nbsp; wx.requestPayment(OBJECT)中我們要用，在拼接的字符串中同樣要用，這兩個(gè)要保證一樣微信去MD5加密的時(shí)候才能得到和你自己MD5加密一樣的結(jié)果。
祝大家，一次成功?。∮惺裁床粚?duì)的請(qǐng)指正，文章引用上如有侵犯請(qǐng)留言我會(huì)及時(shí)修正，謝謝！
|
