微信小程序支付

时间 2019-11-21

标签微信程序支付繁體版

原文原文链接

前提：
一、小程序已经注册完毕，各类服务器环境、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

javascript

首先用
wx.login(OBJECT)获取code，code用来换取openid，获取openid的事情我是咱们后台来作，我用request带上获取的code去get就行了php

 
             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文档上有明确的说明要带上

由此咱们也能够看出，对于支付流程咱们正确的打开方式是下图

要遵循上面图片的步骤和链接页面进行看和作。
好了，扯远了：来看签名

 
             // 调起支付签名 
            
             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大小排序完再拼接上去的，
上面的参数函数

 
             // 时间戳 
            
             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加密同样的结果。祝你们，一次成功！！有什么不对的请指正，文章引用上若有侵犯请留言我会及时修正，谢谢！