那些年我们路过的微信支付接入的坑~

       开始之前，先说下背景，楼主刚从外地回长沙，先从上海，到南京，再回长沙，身为一个湖南人，不回长沙怎么能行，回来的时候休息了整整一个，美滋滋有木有，可能真的是吗，程序猿想要休息，只能在这个空档期，苦逼的我们，然后开始上班，接到任务，没错 就是支付，支付宝支付+微信支付，虽然之前没做支付，但是身为一个程序猿，怎么会惧怕，一声狮子吼开干，先接入的支付宝支付（手机网站支付为例），不得不说，支付宝接入还是蛮容易的，毕竟人家文档写的好，想要接的好，多费些时间就OK，比如接手机网站支付可以混合Native支付，当手机装了支付宝软件可以唤起支付宝支付，没有装则H5支付了，接完以后，咦，支付（不包括业务逻辑）还是蛮简单嘛 ，没什么难度，然后屁颠屁颠的去看微信支付，早点做完好去邀功（美滋滋的自我陶醉中），“看，我接入的那么快，厉害吧，哈哈” ，但是事情 并没有想象中的那么顺利，入坑开始咯，刚开始看微信支付（公众号支付为例）文档的时候 真的是觉得，哇 这好简单，接的时候 坑是真的多哟，不过多看看就好了，历尽千辛万苦终于爬出坑，开始贴图

    首先要做的是申请公众号，然后开通对应的支付权限，我们需要里面几个重要的参数 ：商户id，AppID，AppSecret，key，Appid是在申请公众号的时候微信给的id，AppSecret是开通对应权限给的参数，商户id与key是开通支付的参数，自己生成。然后就在微信服务平台配置授权目录，这里配置的请求路径要和实际发起请求的参数一致，否则无法唤起支付，路径都是指定在请求的上一层 ，以/结束。

JS接口安全域名授权等，授权这类的还真的是多，套用官方的看看，

到这差不多微信服务平台配置的差不多了，如有不对 再来补，在做之前 先看看微信公众号支付官方文档统一下单接口，在支付时候首先都要调统一下单接口，在微信支付服务后台生成预支付交易单，返回正确的预支付交易会话标识后再按扫码、JSAPI、APP等不同场景生成交易串调起支付，先看看状态图

在统一下单之前，记得先把这些参数先定义了，不然也找不到你哪家商户啊 ，钱打给谁啊 ，那就尴尬了。

哦，看到这里再结合文档，基本明白了，首先是传参数嘛，然后调统一下单接口，然后根据统一下单返回的参数进行下一步操作，首先把官方提给的demo下载下来，导入到自己项目（楼主项目框架ssh），然后看denmo里的readme，整个controller，然后调统一下单接口，但是这里面有个坑，参数的坑，仔细看文档还是能避免的，如果没仔细的话，呵呵哒，一个是交易类型    trade_type,记得要改

还有一个是openid，这是一个非必填的，但是在公众号支付的时候 是必填，然后楼主在接入的时候 没有仔细看后面的说明，尴尬的很，openid是啥呢，简单的讲就是你在关注公众号的时候 微信后台会给你生成一个唯一的id，这个就是openid，如何取这个值呢？去看文档上的，在授权的时候，会把openid等相关的参数保存在session里，直接取就好了。

OK，到这 ，我们可以开始可以调统一下单的接口了，需要注意的是价格total_fee,单位价格是分，取值的时候记得转，然后参数都别写错了 按照文档上的要求写，微信要用这些参数去生成sign签名，还需要验签的，不过demo里已经帮我们把生成签名与验签做了（点赞），openid的话 我是自己去公众服务平台自己取的，调统一下单接口后返回的是xml串我记得，然后demo也帮我们转了，转车map，然后我们就拿到了统一下单返回的参数值，期间要更新自己的业务状态什么的  我都没有写出来啊，根据实际需求的。

如果你是扫码支付的话 会返回一个code_url，用来生成二维码图片（生成工具QrCode/ZXing自选），如果是公众号支付，则会返回一个prepay_id，这是微信生成的预支付标识，用于后续接口调用中使用，有效期是2小时。

拿到prepay_id后，我们便要开始公众号支付了，公众号支付需要什么参数呢？先看官方文档怎么说，这里面其实也是有坑的，一定要注意，首先这里的sign签名 并不是统一下单返回的sign签名，我们需要生成新的sign签名用于支付，其他的参数最好也都不一致，比如timeStamp和nonce_str，都重新生成一次，还有package参数，本身package是关键字，在用的时候 一定要注意，然后是package的值，统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=123456789， 提交的时候 应该是这个  package="prepay_id=123456789",记得拼，其实统一下单返回参数 都是放在package里面的，如果有其他需求的话，我们可以在后面接着拼，然后再去生成新的签名。

到这里后端的就差不多了，只差把参数传给前段了，毕竟是从端发起的支付，下面的这些参数就要用你新生成的签名参数，比如timeStamp,sign等

微信公众号支付，是调用内置浏览器内置然后唤起微信支付，有两种方式 jssdk  v2与 jsapi v3,楼主用的是jsapi上的，先把jssdk的说下 老规矩 先给官方的文档以及官方的jssdk demo

首先是加载js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

然后通过config注入权限验证配置 ，jsapilist里面 需要哪个功能就写哪个，文档上有说明

感觉这个用官方的文档更清晰明了一点 这样 这个我就直接贴官方的图

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

然后用ready处理成功验证，其实这一步意义不大，可要可不要，

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

然后用chooseWXPay 唤起支付，记得参数 一定要按照文档格式写，区分大小写

然后jssdk就完成了，接下来我们用jsapi，先给官方文档，jsapi调用微信内置对象WeixinJSBridge，唤起支付，官方的就不看了（就在上一个链接里），就看楼主的，大侠们 一定要记得，参数 按照官方的来，或者看着楼主的写，因为我是按照官方的写，去区分大小写的

这里面还有个小坑啊，虽说不难，但是还是提一下，那就是WeixinJSBridge内置对象里面传的参数是json对象，而不是json串，所以在入参的时候 记得转。

然后到这里，基本就完成了，公众号支付调试的话 得使用微信提供的微信web开发者工具进行调试，然后里面其实还有个小坑的，如果很不巧，你在做app的时候 也用的iframe，那你就惨了，因为iframe中都隔了一层，微信浏览器内置对象只能在顶层唤起，然后就是无法唤起微信支付，尴尬吧，怎么办呢 ？在顶层js里写唤起方法

这是iframe顶层的js，然后支付页面去调顶层的这个方法，便可以唤起支付

window.top.WeixinJS();调用顶层JS方法。

============================================================================

然后到这里的话该写的都写完了，理解全凭个人，有不到位的地方，敬请指出。需要源码的话，留个邮箱