首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》16.8 案例实践

关灯直达底部

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章的代码实现。