16.8.1 HTML5网页中领取卡券
HTML5网页中领取卡券是微信JS-SDK接口的一个功能。生成卡券ID之后，将其传入HTML5页面中，再使用JS-SDK接口进行领取。
HTML5网页中领取卡券的代码如下。
1 <?php 2 require_once('wxjssdk.class.php'); 3 $weixin = new class_weixin; 4 $signPackage = $weixin->GetSignPackage; 5 $cardapi_ticket = $weixin->getCardApiTicket; 6 7 $card_id = "piPuduN0wOytmRlSyeNJQToE7BIU"; 8 $obj['api_ticket'] = $cardapi_ticket; 9 $obj['timestamp'] = strval(time);10 $obj['nonce_str'] = $weixin->createNonceStr;11 $obj['card_id'] = $card_id;12 $signature = $weixin->get_cardsign($obj);13 14 ?>15 16 <!DOCTYPE html>17 <html>18 <head>19 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />20 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=2.0, minimum-scale=1.0, user-scalable=no" />21 <meta name="format-detection" content="telephone=no" />22 <title>微信</title>23 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">24 <link rel="stylesheet" href="http:// demo.open.weixin.qq.com/jssdk/css/style.css">25 </head>26 <body ontouchstart="">27 <h3>微信卡券接口</h3>28 <span>批量添加卡券接口</span>29 <button>addCard</button>30 </body>31 <script src="https:// res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>32 <script>33 wx.config({34 debug: false,35 appId: '<?php echo $signPackage["appId"];?>',36 timestamp: <?php echo $signPackage["timestamp"];?>,37 nonceStr: '<?php echo $signPackage["nonceStr"];?>',38 signature: '<?php echo $signPackage["signature"];?>',39 // url:'<?php echo $signPackage["url"];?>',40 jsApiList: [41 'addCard',42 ]43 });44 </script>45 <script>46 wx.ready(function {47 // 自动执行的48 wx.checkJsApi({49 jsApiList: [50 'addCard',51 ],52 success: function (res) {53 // alert(JSON.stringify(res));54 }55 });56 57 document.querySelector('#addCard').onclick = function {58 wx.addCard({59 cardList: [60 {61 cardId: '<?php echo $obj['card_id'];?>',62 cardExt: '{"code":"","openid":"","nonce_str":"<?php echo $obj ['nonce_str']?>" ,"timestamp": "<?php echo $obj['timestamp'];?>", "signature":"<?php echo $signature;?>"}'63 }64 ],65 success: function (res) {66 alert('已添加卡券：' + JSON.stringify(res.cardList));67 },68 cancel: function (res) {69 alert(JSON.stringify(res))70 }71 });72 };73 });74 75 wx.error(function (res) {76 alert(res.errMsg);77 });78 </script>79 </html> 上述代码中，需要注意的地方是卡券的签名部分，读者可以参考第14章的代码实现。