微信小程序 详解 小程序支付

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. function getopenid(code, cb) {
3. requestGet('UserOpenid', { code: code }, function (res) {
5. if (typeof cb == "function") {
7. cb(res);
9. }
11. })
13. }

res的返回结果就是我们的openid，到这里我们第一步完成了。

2、商户server调用支付统一下单，api参见公共api【统一下单API：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1】 
这个我们看一下： 
 
这个里面的东西很多很多，如果是你自己完成前后端的话那就好好看，磨刀不误砍柴工，有一点看不到可能导致一直解决不了这个流程，毕竟微信的文档 
有那么一点乱乱的赶脚。 
这个如果像我一样是后端做的那就不用你操心了，但是你想了解的话也不难，看上面我最开始给出的两个地址，这两个文章都是吧全部流程做在前端（小程序）这里的 
其实没必要，这个在看资料的时候发现其实微信是提供java，net，php三种语言的封装包的，那么就是说后台只要吧这个东西下载下来把对应的参数填写修改就可以了， 
但是最终是什么样子的，如果可以的话我会补上这个代码，后台的代码不在我这，谅解！ 
这个我们一样只要request用post请求得到结果就可以了，这次我们需要的结果就是支付perpay_id 
 
我的这个请求时只返回了一个perpay_id但是我们可以看统一下单接口返回的数据 
 
他给我们不仅返回了perpay_id，还有随机字符串和签名，我说这个点的原因是我没有用这个所以是不是我们直接在接下来要用的随机字符串和签名就是直接用这两个就可以了呢（我没有验证后台没有给我返回，具体是什么样子的待验证）。跳过这一点，我们只要这个perpay_id一样可以成功。 
到现在我们来看一下 
 
第一步和第一步的我们已经完成了，只有第二步paySign这个签名了。对应微信的流程是： 
3、商户server调用再次签名，api参见公共api【再次签名：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7】
这个签名我们来看看是有点令人苦恼的，我们来看看上面说的两个文章的踩坑总结：
第一篇： 
 
第二篇： 
 
总的来说看这个签名的坑是最多的。 
我结合一下来描述一下吧： 
首先我们看第三步（绿色）部分的地址

 
再看微信小程序API中wx.requestPayment(OBJECT)接口的文档 
 
我特别标注的红色框部分可能会让你恍然大悟了，有些“坑”可能是我们看东西的方式不对啊，对于appid和key文档上有明确的说明要带上 
由此我们也可以看出，对于支付流程我们正确的打开方式是下图 
 
要遵循上面图片的步骤和连接页面进行看和做。 
好了，扯远了：来看签名

 

1. // 调起支付签名
3. function MixedencryMD5(res_paydata,randomString,timeStamp) {
5. return "appId=" + config.appid + "&nonceStr=" + randomString + "&package=prepay_id=" + res_paydata + "&signType=MD5" + "&timeStamp="+ timeStamp + "&key=" + config.key;
7. }

这个是正确的顺序，在具体签名方法说明中，可以看出key是在签名参数按照ASCII大小排序完再拼接上去的， 
上面的参数函数

 

1. // 时间戳
3. function timeStamp() {
5. return parseInt(new Date().getTime() / 1000) + ''
7. }
9. /* 随机数 */
11. function randomString() {
13. var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
15. var maxPos = chars.length;
17. var pwd = '';
19. for (var i = 0; i < 32; i++) {
21. pwd += chars.charAt(Math.floor(Math.random() * maxPos));
23. }
25. return pwd;
27. }

最后就是吧这个拼接的字符串进行MD5加密，Md5加密的js在网上搜一下就好了，如果怕不对自己可以在线验证。 
至此我们 timeStamp 时间戳，nonceStr 随机数，package 支付id，paySign 签名，是不是都有了？对的，这样就结束了 
 
上图就是调用支付的最后步骤了，注意一点时间戳和随机字符串，保证生成一次，因为在 
wx.requestPayment(OBJECT)中我们要用，在拼接的字符串中同样要用，这两个要保证一样微信去MD5加密的时候才能得到和你自己MD5加密一样的结果