微信卡券开发-JS接口领取卡券

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cl11992/article/details/86576865

一、介绍

微信卡券不支持服务端领取,只有JS接口进行领取,在这里面记录一下

二、注意

  1. 领取卡券使用access_token是普通access_token
  2. JS领取卡券的时候,返回的券号为编译过的需要做转义
  3. 下图的标红的位置记住必须要写这个

二、领取卡券代码实例

服务端代码

下方需要的类cardSignature:https://blog.csdn.net/cl11992/article/details/86574656

/**
 * 领取卡券
 */
@ProductException
@RequestMapping(value = "receive")
public ModelAndView infolist(HttpServletRequest request, HttpServletResponse response) throws Exception {
	ModelAndView mv = new ModelAndView("card/cardRecive");// 卡券领取页面
	// 领取卡券
	String appid = "XXXXXXXXX";//公众号appid
	String cardId = "XXXXXXXX";//卡券id
	String thirdCardId = "XXXXXXXX";//第三方卡券id
	
	mv.addObject("cardId", cardId);
	mv.addObject("thirdCardId", thirdCardId);
	mv.addObject("outerStr", cardId+","+thirdCardId);//扩展参数

	mv.addObject("config", cardSignature.getCardSignature(request, thirdCardId, appid));
	return mv;
}

cardRecive.html

成功回调进入${ctx}card/receiveSucces方法,可以在里面写自己的逻辑

<body>
	<script type="text/javascript" src="${ctx}/js/common/jquery-1.11.3.min.js"></script> 
	<script type="text/javascript" src="${ctx}/js/JS-SDK.js"></script>
	<form action="${ctx}card/receiveSucces" name="frm" id="frm" method="post">
		<input type="hidden" id="isSuccess" name="isSuccess" value="" />
		<input type="hidden" id="cardId" name="cardId" value="$!cardId" />
		<input type="hidden" id="encryptionCode" name="encryptionCode" value="" />
	</form>
	<script>
		wxobj.zxAddCard(function(isSuccess,encryptionCode) {
			jQuery("#isSuccess").val(isSuccess);
			jQuery("#encryptionCode").val(encryptionCode);
			jQuery("#frm").submit();
		});
	</script>
</body>

JS-SDK.js

##  微信接口
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	var wxobj = {
		zxAddCard : function(callback){
			wx.ready(function(){
				wx.addCard({
	                cardList: [{
	                    cardId: '$thirdCardId',
	                    cardExt: '{"signature":"$config.signature","timestamp":"$config.timestamp","nonce_str":"$config.nonceStr","card_id":"$thirdCardId","outer_str":"$outerStr"}'
	                }],
	                success: function (res) {
	                	var cardList = res.cardList; // 添加的卡券列表信息
	                	//alert("sucess: "+"【isSuccess】"+res.cardList[0].isSuccess);
	                	//alert("sucess: "+"【cardId】"+res.cardList[0].cardId);
	                	//alert("sucess: "+"【code】"+res.cardList[0].code);
	                	if (res.cardList[0].isSuccess = true){
	                		//是否成功
	                		var isSuccess = res.cardList[0].isSuccess;
	                		// 卡券code码
	                		var encryptionCode = res.cardList[0].code;
	                		callback(isSuccess,encryptionCode);
	                	}
	                },
	                fail : function(res){
	                	//alert("fail: "+"【isSuccess】"+res.cardList[0].isSuccess);
	                	//alert("fail: "+"【cardId】"+res.cardList[0].cardId);
	                	//alert("fail: "+"【code】"+res.cardList[0].code);
	                	console.log(res);
	                	console.log("领券失败!");
	                },
	                complete: function(res){
	                	//alert("complete: "+"【isSuccess】"+res.cardList[0].isSuccess);
	                	//alert("complete: "+"【cardId】"+res.cardList[0].cardId);
	                	//alert("complete: "+"【code】"+res.cardList[0].code);
	                	console.log(res);
	                }
	            });
			});
		}
	};
	jQuery(function(){ 
		wx.config({
		  //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		    appId: '$config.appId', // 必填,公众号的唯一标识
		    timestamp: '$config.timestamp', // 必填,生成签名的时间戳
		    nonceStr: '$config.nonceStr', // 必填,生成签名的随机串
		    signature: '$config.signature',// 必填,签名,见附录1
		    jsApiList: ['addCard'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
		});
		//wx.ready(function(){
		    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
		//});
		//wx.error(function(res){
		    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
		//});
		//判断当前客户端版本是否支持指定JS接口
		//wx.checkJsApi({
		//    jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
		 //   success: function(res) {
		        // 以键值对的形式返回,可用的api值true,不可用为false
		        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		  //  }
		//});
		
	});
</script>

卡券券号解码(服务端接口)

下面使用的类

AccessTokenUtils:https://blog.csdn.net/cl11992/article/details/86304653

UrlConUtil:https://blog.csdn.net/cl11992/article/details/86303800

/**
 * 解码code
 */
private String decode(String encryptionCode,String appid) {
	String code = "";
	try {
		//获取access_token
		Map<String, String> accessTokenMap = AccessTokenUtils.getAccessToken;
		String token = accessTokenMap("access_token");
		
		String url = "https://api.weixin.qq.com/card/code/decrypt?access_token=" + token;
		JSONObject json = new JSONObject();
		json.put("encrypt_code", encryptionCode);// 加密的code
		JSONObject object = UrlConUtil.httpsRequest(url, "POST", json.toString());
		int errcode = (int) object.get("errcode");
		if (errcode == 0) {
			code = (String) object.get("code");
		}
		return code;
	} catch (Exception e) {
		logger.debug("解码code报错:", e);
		return "";
	}
}

猜你喜欢

转载自blog.csdn.net/cl11992/article/details/86576865
今日推荐