先说明一下我是用mpvue来写的小程序，但是其实和小程序直接写也差不多，然后后端是使用php（直接面向过程原生写的）。
前端时间接到了一个微信小程序的项目，基本就是卡券投放的功能。之前虽然对小程序接触的不是特别特别深入，但是微信的各种文档好歹还是看过的。之前一直很推崇微信的开发者文档，毕竟是国人的做出来的东西，很多东西很符合国人看文档的习惯，而且对初级开发者很友好了，很多地方又很像vue react之类的，看起来还是非常轻松的。
但是！！这一次卡券投放功能差点就快写自闭了，文档乱七八糟，官方给的很多链接打开却是另一篇文档，看了几十篇文档和别人的文章之后才搞懂一二。
拿到需求，首先先去看微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api/wx.addCard.html
嗯前端就这一个东西，按照官方给的格式书写就好，重点是这里的签名signature，先完成后端然后再完善前端代码
简述一下签名产生流程：
1.使用创建卡券公众号的appid和secret获取access_token（注意是公众号的appid和secret，而不是小程序的），因为access_token每天调用次数有限每次时效2小时，请务必使用某种方法去全局保存access_token
2.使用获取到的access_token去换取ticket（这个ticket是用来参与生成签名的也是有调用次数限制和时效2小时，务必全局保存）
3.按照字典序排序以下参数 必填参数：ticket（步骤2中换取的） timestamp（当前时间戳）nonce_str（不超过32位的随机字符串） card_id（要投放的卡券的卡券id） 选填参数：code（自定义code模式下填写） openid（指定领取者的情况下填写）
4.将3.中字典序排序完成之后的参数进行字符串拼接然后使用sha1加密，即为前端需要用到的signature
第一步后端代码如下
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $appid . "&secret=" . $secret . "";
$ch = curl_init();
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
$result = json_decode($result);
这样便获取到了access_token，保存在$result中
第二步后端代码如下
//$access即为access_token
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access .'&type=wx_card';
$ch = curl_init();
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
$result = json_decode($result);
此时的$result即为使用access_token换取到的ticket
第三步与第四步后端代码如下
$strs="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";
$nonce=substr(str_shuffle($strs),mt_rand(0,strlen($strs)-11),32);
$ticket = $_GET['ticket'];
$cardid = $_GET['cardid'];
$time = time();
$arr['timestamp'] = $time;
$arr['ticket'] = $ticket;
$arr['nonce_str'] = $nonce;
$arr['card_id'] = $cardid;
sort($arr,SORT_STRING);
$str = '';
foreach ($arr as $v) {
$str .= $v;
}
$sign = sha1($str);
此时的$sign即为前端投放卡券所需要的signature
切记！这里参与签名所使用到的timestamp nonce_str card_id 也要和signature一起返回给前端
前端代码如下：
wx.addCard({
cardList: [
{
cardId:''+this.wxcard_id +'',
cardExt:'{"timestamp": "' + that.time1 +'","nonce_str":"'+ that.nonce +'","signature":"'+ that.signature +'"}'
}
],
})
这里的timestamp nonce_str cardId即为后端生成签名的时候所使用到的参数
然后就可以正常投放卡券了，我被 签名错误 这个问题卡了好久，下面讲一下可能出现签名错误的几种情况和解决方法
这里就有一个小坑了，点进去微信卡券接口文档有一句话是这样的
2.3. 以小程序AppId调用添加/查看卡券JS-API，签名参数与公众号Addcard/Opencard JS-SDK一致；
大家看见JS-API，可能就会先获取access-token然后换取jsticket就会使用下面这个url
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access .'&type=jsapi
但是注意！！微信卡券的ticket与正常js_api不同，这里一定要把url后的type改成wx_card
然后给大家一个测试卡券签名是否正确的链接吧，大家可以测试一下签名错误的时候是否是由于生成签名错误导致
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign
如果这个url下生成的签名和你后端生成的签名一模一样，且参与签名的ticket没有过期，那就是前端的问题了
如果后端参与签名的有 timestamp nonce_str openid 那前端caedExt中也需要有这几个参数，换句话说就是有几个参数在后端参与了生成签名，那就得在前端也得写入。基本就是这样了！good luck！！！
