前言

这篇是一边做预研一边写的，因为是预研，所有的代码都是在小程序中进行的，并没有交给后台。

前期准备具体调用

由于我其实不是很清楚后续的步骤，那么我就看到小程序提供了两个接口，添加和展示卡券的，那么我就从这俩卡券接口入手调用。

具体说明文档查看微信官方

wx.addCard({ cardList: [ { cardId: 'dfdsfsdfsdfsdfsdfdsfdfd',//假的 cardExt: '{"code": "", "openid": "", "timestamp": "", "signature":""}' } ], success(res) { console.log(res.cardList) // 卡券添加结果 } })

上面代码我先调用了一下看看什么效果

可以看到，签名错误，这是因为signature参数我们没有传，那么这个参数是怎么来的呢，不得不吐槽一下微信官方，以下是官方的一句signature参数说明：

签名，商户将接口列表中的参数按照指定方式进行签名,签名方式使用 SHA1，具体签名方案参见：卡券签名

我按照链接点过去凌乱了，麻烦你请告诉我你的说明在哪儿？？？

获取添加卡片需要的签名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

签名涉及的相关变量如下

api_ticket (调用卡券相关接口的临时票据) 【必须】

timestamp (时间戳，单位为：秒)【必须】

card_id (卡卷创建后获得的卡卷ID)【必须】

code (卡券code码，相当于用户领取的那张卡卷的卡卷号)【非必须，根据业务需要】

openid (指定领取用户的opeind)【非必须，根据业务需要】

nonce_str (不超过32位随机字符串，随你随便写)【非必须，最好有】

我是在微信公众平台创建卡券的，然后code和openid并不需要用到，实际参与签名的是api_ticket、timestamp、card_id、nonce_str这4个，card_id在公众平台创建卡卷的时候就能看到，timestamp和nonce_str这两个时间戳和随机数生成就不用说了很简单，这里说一下api_ticket 。

我们首先需要获取到access_token，然后再用access_token换取api_ticket

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

请求代码如下：

let url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=xxxxxxxx' + '&secret=' + 'xxxxxxxxxxxx'; console.log('url',url); wx.request({ url: url, data: {}, method: 'GET', success(res) { console.log('信息',res) } });

点击上方蓝色标题查看官方文档，我们获取access_token的appid和secret都是服务号中的appid和secret，打印结果是：

后来又是搜，获取access_token40125错误，说服务号中其实是有两个，一个是在【基本配置】中appid和secret，另外还有一个是在【开发者工具】——【公众平台测试账号】中，我在开发过程中一开始用了基本配置中的那套，修改成后者之后验证成功获取access_token。

但是，我这次最大的坑就在这儿了，虽然这样是可以请求成功的，但是当后面签名啥的一系列都是正确的，却依然显示的签名错误，其实40125就是单纯的告诉你secrete错误，找了相关同事重新确认secrete修改才可以了

说明：

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。

获取卡券的api_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token +'&type=wx_card

通过上个步骤获取到的access_token，获取卡券签名要用到的ticket，注意type一定是wx_card，代码如下：

getTicket(access_token){ let that = this; let url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token +'&type=wx_card' wx.request({ url: url, data: {}, method: 'GET', success(res) { console.log('ticket', res); } }); },

通过以上流程，我们获取到了签名所需要的api_ticket ，服务号创建的卡券的card_id，另外一个必须的timestamp也很容易获取，获取签名前还需要对变量进行字典排序，最后是一个对这些变量拼接成的字符串进行sha1加密的算法

主流程代码如下：

let arr = [timestamp, api_ticket, cardid];let sortarr = sort(arr);//排序console.log('arr',arr);let signStr = '';for(let i=0;i

主流程中涉及的方法：

//获取timestamp时间戳function timestampStr(){ let timestamp = Date.parse(new Date()); timestamp = timestamp / 1000 + ''; return timestamp;}//对拼接的字符串字典排序function sort(arr){ return arr.sort();}// 字符串加密成 hex 字符串（sha 1加密）function sha1(s) { var data = new Uint8Array(encodeUTF8(s)) var i, j, t; var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2); s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer); for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2); s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8); s[l - 1] = data.length << 3; var w = [], f = [ function () { return m[1] & m[2] | ~m[1] & m[3]; }, function () { return m[1] ^ m[2] ^ m[3]; }, function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; }, function () { return m[1] ^ m[2] ^ m[3]; } ], rol = function (n, c) { return n << c | n >>> (32 - c); }, k = [1518500249, 1859775393, -1894007588, -899497514], m = [1732584193, -271733879, null, null, -1009589776]; m[2] = ~m[0], m[3] = ~m[1]; for (i = 0; i < s.length; i += 16) { var o = m.slice(0); for (j = 0; j < 80; j++) w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1), t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0, m[1] = rol(m[1], 30), m.pop(), m.unshift(t); for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0; }; t = new DataView(new Uint32Array(m).buffer); for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2); var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) { return (e < 16 ? "0" : "") + e.toString(16); }).join(""); return hex;}

最后我们继续调用wx.addCard(Object object)：

wx.addCard({ cardList: [ { cardId: 'xxxxxxx', cardExt: '{"timestamp": "' + timestamp + '", "signature":"' + signature + '"}' } ], success(res) { console.log('添加结果',res.cardList) // 卡券添加结果 }, fail(res){ console.log('添加失败',res); }, complete(res){ console.log('添加完成', res); } })

说明：

cardExt是一个字符串的json，里面的内容一定是参与签名的变量（不能多不能少，用了哪几个签名就填哪几个，没有用到的也不要填了）和获取到的签名signature

卡券签名错误可以在以下链接中分析排查：

卡券签名错误排查方法(官方提供)

微信卡券签名校验工具地址

参考文章：

这里有一个后台创建卡券，前端去加载的文章：