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章的代碼實現。