微信卡券功能JAVA版（PS : 其实无关乎什么语言拉 :) ）

本文是一个循序渐进的文章，你顺着思路看到底部，就可以掌握微信卡券功能的基本概念及开发了，虽然赘述了一些官方文档上的东西但是并不多，目的只是为了串联你的思路。

关于微信卡券的流程大家可以参考下微信官方文档http://mp.weixin.qq.com/wiki/9/4f455120b50741db79b54fde8896b489.html
其中的“微信卡券接口”——＞“微信卡券接口说明”了解下什么是卡券，怎么玩的这里不再多做赘述，可以使用测试帐号按照“微信卡券接口说明”中的步骤，从获取token到创建卡券设置白名单，然后是投放卡券，卡券领取及核销等流程，测试帐号申请的地方也是在上面文档中的“开发者工具”——＞“接口测试号申请”，另外在线调试可以使用“开发者工具”——＞“接口在线调试”。

OK，等你玩够了上面的在线调试，整个卡券流程差不多有个概念的时候，再来看我下面的东西。

理论上，公众号后台是有个卡券的功能的，在那里面可以创建卡券，也就跟文档里面的在线调试的创建卡券功能一样。

类似下图这个：

也就是说，如果你有了正式微信平台帐号，登录后台后，可以在卡券中填入一些规则，然后产生一个card_id，那么这个card_id就唯一标识一种类型的卡券。

OK，那么卡券产生了，如何让用户能够领取到卡券呢？
相信你看了上面的，“微信卡券接口说明”以及“接口在线调试”之后已经知道了一种领取卡券的方法，那就是下面这种，通过调用接口传入card_id等信息后，产生一个二维码，用户扫一下二维码，就可以跳到领取卡券的页面了。

这里的这个show_qrcode_url就是二维码的地址了，访问之后会出现一张二维码一扫就可以跳到领取卡券页面了，自己可以尝试下，扫描后应该会跳到下面这样一个页面这个页面完全是微信自己的，如果显示未通过审核请去设置下测试白名单，在接口在线调试的卡券接口里有。

好，那么我来说一下另一种方法用户手动领取卡券的方法。

作为一个网站的运营，如果他要发放卡券一定会在微信公众平台帐号的后台去，创建他要发放的卡券，假设我要做一个活动，下单就可以领取卡券，但只能领取其中一种卡券。

1.优惠100元卡券
2.5折卡券

暂时就这两种，那么我可能需要用户提交完订单后，跳转到一个页面，这个页面上有两个卡片，然后下面有两个单选按钮，如下图

由于我们事先已经创建好了这两种卡券，那么我们实际上已经知道了这两个券的card_id，所以此时我就想，选中某个卡券后，点“领取卡券”按钮就可以跳转到上面扫描后跳转到的微信的领取卡券页面。

OK那么这里就需要用到微信卡券的JS-SDK了。

下面这个唤起微信领取卡券页面的js只能在微信里面才能够使用。

所以当点击上面页面的“领取卡券”按钮后，实际上是执行了一个js，如下：
这个js一定要记得引入否则不好使！

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>      wx.config({            debug: true,            appId: '${appId}',            timestamp: '${configtimestamp}',            nonceStr: '${nonceStr}',            signature: '${signature}',            jsApiList: [         // 所有要调用的 API 都要加到这个列表中            'addCard'            ]          });      function addCard(cardid){          wx.addCard({                cardList: [{                    cardId: cardid,                    cardExt: '{"code":"","openid":"","timestamp":"${timestamp}","nonce_str":"${nonceStr}","signature":"${signature1}"}'                }], // 需要添加的卡券列表                success: function (res) {                    var cardList = res.cardList; // 添加的卡券列表信息                }            });      }      </script>  

所以这里这个addCard所做的事情就是打开微信里面领取卡券的页面了。尽管官方文档上将这个addCard叫做“批量添加卡券”，这个名字我是觉得很尴尬很容易误导，即使他做的真的是这个事情，那么也是内部程序的事情，而对于外部调用者看到的效果而言，这个名字太容易误导别人了。

所以这里点击领取卡券的时候会执行addCard方法，把你页面上选的那个卡券对应的cardid传进去，这时微信就会开始响应，并打开下面的页面了。

OK，听上去很简单，但是你肯定会对上述js中的参数感到疑惑，好的，看下面的官方文档中的介绍：

我们先来说wx.config中的参数
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E6.AD.A5.E9.AA.A4.E4.B8.89.EF.BC.9A.E9.80.9A.E8.BF.87config.E6.8E.A5.E5.8F.A3.E6.B3.A8.E5.85.A5.E6.9D.83.E9.99.90.E9.AA.8C.E8.AF.81.E9.85.8D.E7.BD.AE

这里面的“通过config接口注入权限验证配置”

好，简单的类似appid的字段我就不说了，直接看附录1

然后我们再来说wx.addCard中的参数
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E6.89.B9.E9.87.8F.E6.B7.BB.E5.8A.A0.E5.8D.A1.E5.88.B8.E6.8E.A5.E5.8F.A3

这里面的“批量添加卡券”

然后附录4介绍了一大堆东西


可以了吧，其实就是签名的方式而已，这里面主要说了两个东西是签名时要注意的，一个是jsapi_ticket，这个是wx.config用的，另一个是api_ticket，这个是wx.addCard用到的，这两个参数都要单独去请求，时效性是2小时，文档上建议我们本地做缓存，另外两个参数的请求地址文档上也有介绍我就不详细介绍了，下面给出个后台的例子代码，前面给的是html中的js，后面这里是该html对应的后台java代码。

@RequestMapping("/wxTest")    public String wxTest(Model model,HttpServletRequest request) throws JSONException{        Map<String, String> param = new HashMap<>();        param.put("grant_type", "client_credential");        param.put("appid", "wx2332f2349f061ec8");        param.put("secret", "36947076e00378ec11e0a7a41b805d58");        String urlGet1 = HttpUtils.URLGet("https://api.weixin.qq.com/cgi-bin/token", param, "UTF-8");        System.out.println(urlGet1);        JSONObject jsonObject = new JSONObject(urlGet1);        // 首先是请求access_token，这个有效期是2个小时，所以可以缓存2个小时，我这里就先不写怎么缓存了        String access_token = (String) jsonObject.get("access_token");        Map<String, String> params = new HashMap<>();        params.put("access_token", access_token);        params.put("type", "jsapi");        String urlGet = HttpUtils.URLGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket", params, "UTF-8");        System.out.println("jsapi_ticket : " + urlGet);        JSONObject jsonObject1 = new JSONObject(urlGet);        // 根据access_token请求jsapi_ticket，可以缓存2个小时,下面签名会用到        String jsapi_ticket = (String) jsonObject1.get("ticket");        Map<String, String> params1 = new HashMap<>();        params1.put("access_token", access_token);        params1.put("type", "wx_card");        String urlGet2 = HttpUtils.URLGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket", params1, "UTF-8");        System.out.println("api_ticket  : " + urlGet2);        JSONObject jsonObject2 = new JSONObject(urlGet2);        // 根据access_token请求api_ticket，可以缓存2个小时,下面签名会用到        String api_ticket = (String) jsonObject2.get("ticket");        long time = new Date().getTime();        Map<String, String> map = new HashMap<String, String>();        map.put("noncestr", "signstr");        map.put("jsapi_ticket", jsapi_ticket);        map.put("timestamp", time + "");        map.put("url", "http://458757617.51vip.biz/wxTest.htm");        map.put("api_ticket", api_ticket);        map.put("card_id", "pXz8nwK3qkr2bkRexA2UtxOQDw3M");        map.put("code", "");        map.put("openid", "");        // wx.config的        String[] str = { "noncestr", "jsapi_ticket", "timestamp", "url" };        Arrays.sort(str);        String url = "";        for (int i = 0; i < str.length; i++){            url += str[i] + "=" + map.get(str[i]) + "&";        }        int lastIndexOf = url.lastIndexOf("&");        String lastUrl = url.substring(0, lastIndexOf);        String signature = DigestUtils.shaHex(lastUrl);        // wx.addCard的注意，两者的签名方式不一样        String[] str1 = { "openid", "code", "timestamp", "card_id", "api_ticket", "noncestr" };        String[] valStr = new String[str.length];        String url = "";        for (int i = 0; i < str.length; i++){            valStr[i] = map.get(str[i]);        }        Arrays.sort(valStr);        for (int j = 0; j < valStr.length; j++){            url += valStr[j];        }        String signature1 = DigestUtils.shaHex(url);        ;        model.addAttribute("appid", "wx2332f2349f061ec8");        model.addAttribute("noncestr", "signstr");        model.addAttribute("signature", signature);        model.addAttribute("configtimestamp", time+"");        model.addAttribute("timestamp", time/1000);        model.addAttribute("signature1", signature1);        return "wxtest";    }

如果你按照上面实现不了，那么请看下面这段代码：

map.put("url", "http://458757617.51vip.biz/wxTest.htm");

这个url也就是上面说的领取卡券的页面的url，但是他的域名一定要在微信公众平台配置，否则jsapi是调不通的，如下图：

切记这里，域名一定不要加“http://”如果加了就不好使了。

一定要注意，config和addCard的签名方式不一样，仔细看文档！另外addCard的timestamp使用的是秒，不是毫秒！一定要注意！还有noncestr这个应该是个随机数，每次都不一样最好，因为api上说了，如果有一样的场合，那么会领取卡券失败！请注意这几个常见容易忽略的问题！

OK,这样就实现了我们想要的功能，另外关于自定义卡券，其实也无非是多了一步就是导入自定义卡券号码的过程而已，这个都是在微信公众平台帐号里面去做的，好了就写这么多了，其实还有很多东西，但了解了这一套流程，其他的就多看看api就大概知道怎么玩了。

大家要是还有什么不懂的留言问或者加群问也行~~~