我的csdn同步发布：微信那些事儿（一）
小弟现在一家外包公司做Java后台开发，公司项目多以互联网项目为主，前端时间大火的电商平台也是我们公司主攻的方向，说到商城的平台那肯定是离不开网上支付（主要有，微信、支付宝、银联等）。今天就说说那些年微信支付的坑。
首先说一下我们项目关于订单支付的流程，我们采用的是后台去获取微信支付的支付信息再返给前端后调起微信支付的。说实话没有多少技术含量，主要是微信支付官方文档描述的有时候让人摸不着头脑，比如要使用公众号支付的时候，进入文档看到的就是场景介绍，案例和开发步骤等等，但对于刚刚接触微信的“新人”来说，有点难以理解，appid，私钥，商户号等一系列名词，要搞清楚里面的道道还是要花一点时间的，本文的目的就是为了让那些使用刚刚使用微信支付的“新手”少走一些弯路，避免在这个没有多少技术的业务上花太多的时间。
微信提供了好几种的支付场景：刷卡，公众号，扫码，APP支付。在一般的电商平台最经常使用的应该是公共号和APP支付。由于本人对后台和网页前端比较熟悉，下面主要说说公众号【注：这里所说的是H5调起支付】，公共号支付是用户在微信公众号内的商户界面调起微信支付的过程，说白了就是用户使用微信浏览器打开你写的网页，并通过微信浏览器内置的js对象（WeixinJSBridge）调起微信APP本身的支付功能来完成支付业务。我们需要做的就是，配置一些参数传给WeixinJSBridge这个对象的某个方法，说到这里大家应该都明白是怎么回事了，接下来就让我们看下，我们到底需要配置哪些参数需要配置，具体的js又要怎么写，首先我们先看微信官方给的文档上的代码：
<pre><code>
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId"："wx2421b1c4370ec43b",//公众号名称，由商户传入
"timeStamp"：" 1395712654",//时间戳，自1970年以来的秒数
"nonceStr"："e61463f8efa94090b1f366cccfbbb444",//随机串
"package"："prepay_id=u802345jgfjsdfgsdg888",
"signType"："MD5",//微信签名方式：
"paySign"："70EA570631E4BB79628FBCA90534C63FF7FADD89"//微信签名
},function(res){
if(res.err_msg =="get_brand_wcpay_request：ok") {}// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。}
);
}
</code></pre>
我们一行行来分析，第一行定义了一个函数onBridgeReady，这只是一个普通的js函数，没有什么好说的，让我们来看看这个函数到底做了什么事情，在他的内部只调用了一个函数就是WeixinJSBridge.invoke(param1,param2,param3);,接下来就是分析三个参数到底是什么意思:
- param1=getBrandWCPayRequest，这个是微信定义的，使用微信支付就必须是这个参数，这个在程序中可以直接写死就行了；
- param2={
“appId” ： “wx2421b1c4370ec43b”, //公众号名称，由商户传入
“timeStamp”：” 1395712654”, //时间戳，自1970年以来的秒数
“nonceStr” ： “e61463f8efa94090b1f366cccfbbb444”, //随机串
“package” ： “prepay_id=u802345jgfjsdfgsdg888”,
“signType” ： “MD5”, //微信签名方式：
“paySign” ： “70EA570631E4BB79628FBCA90534C63FF7FADD89” //微信签名
}
这个参数就是前面说的需要我们配置的参数了，我们接着一个一个来分析：
第一个appId没得说，它是申请公共号时微信给到每个不同公众号的唯一标识，我们在微信公众号平台直接拿过来就行了；
第二个参数timeStamp，请注意这个参数的名称，曾经小弟在在后台写顺手了，看到这个参数直接timestamp，接下来就悲剧了，调试了两个小时发现错误的我恨不得抽自己两个大嘴巴，个人建议直接把这段代码复制到你的js中，只修改后面的参数，保证不会出现低级错误，好了聊回正题，这参数的意义就和给出的注释一样，但最好是从后台传过来（保证和签名时值一样）；
第三个参数nonceStr，随机串，没有什么实际意义，就是随机生成的，签名会用到；
第四个参数package，也是最重要的参数，在这里的意思就是通过微信的统一下单接口获取的预付单号，说实话第一次看到这个参数，感觉有点莫名其妙，也不知道微信团队的那位大神为什么会起这个名字(对于我这种对变量命名有强迫症的，实在难受)，关于统一下单这个接口没什么好说的，唯一需要注意的openid(每个微信号对该公众号的唯一标识)，是通过网页授权登陆，来获取的，具体是如果获取的，小弟会在后面的博文中专门讲述关于授权，获取用户信息相关微信接口，在这里就不赘述了。统一下单接口返回的是预付单号，也就是prepay_id=u802345jgfjsdfgsdg888，中的”u802345jgfjsdfgsdg888”这个，所以在js中 不要忘记添加上”prepay_id=”,不然也是无法调起成功的；
第五个参数signType，签名方式，小弟一般用的都是MD5；
第六个参数paySign，签名，这没有什么好说的，一般的都是从后台签名好了传过来就行了，需要注意的的就是，对照签名生成算法,按照顺序来一步步就是没错了，在这里可能会报”invalid signature”(签名错误)，这时候用签名校验工具，校验一下就行了，在仔细对照一下参数就行了，注意一下参数的顺序（参数名ASCII码从小到大排序，即字典序）；
说到这里第二个参数也就说完了，其实这里注意的就是要细心，参数不能出错，param2这参数一般是在后台处理完成后返回到前台使用，这样可以减少很多不必要的错误，比如timeStamp不对应，paySign不正确等等，如果这个部分在后台的处理有什么问题的可以联系我，大家可以一起探讨一下； - param3=function(res){
if(res.err_msg == “get_brand_wcpay_request：ok” ) {}
}
这个参数的意思就是调起微信后的回调函数，成功支付后res.err_msg就等于”get_brand_wcpay_request：ok” ，这个参数微信官方说这个可能不准确，最好还是自己使用查询订单接口去微信后台查询该订单是否支付成功，才能修改我们自己系统内的订单支付状态;若res.err_msg=”get_brand_wcpay_request：cancel” ,就表示用户取消支付。
微信再给出上段代码的下面还给出了以下代码：
<pre><code>
if(typeofWeixinJSBridge =="undefined"){if(document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady,false); }elseif(document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}
</code></pre>
这一段代码就是确保我们在微信浏览器中可以使用WeixinJSBridge对象，在我们调起微信支付前这样写就可以了。
好了，到这里关于微信公众号支付前端部分就讲到这里了，如果各位大神有不同看法或者建议，大家可以一起讨论一下，希望可以帮助大家。
网友评论