小程序开发卡券

迈不过友情╰ 2022-11-03 11:15 185阅读 0赞

### 前期准备 ###

*  小程序内领取卡券  
    1.开发者须有一个有卡券权限的公众号（服务号）和认证后的小程序账号；  
    2.开发者须申请一个开放平台账号，并将小程序和公众号绑定在同一个开放平台账号下，关于开放平台的介绍请参照：[微信开放平台][Link 1]；  
    3.阅读[卡券接口说明][Link 2]和[创建卡券接口][Link 3]，创建卡券并获得card\_id（**不知道为什么微信这里只提供了接口生成卡券，明明服务号也是必备的也可以在界面上生成卡券，却没有告诉，当然自己后台调用接口生成卡片可以有更多的自定义，服务号上我个人认为是提供了几种默认的样式和配置**）；

### 具体调用 ###

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

*  接口一 ：wx.addCard(Object object)

具体说明文档查看[微信官方][Link 4]

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

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

![0da7417a8b2e8a758aa6ddf96b2485e4.png][]

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

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

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

### 获取添加卡片需要的签名signature ###

一通搜索之后，找到如下：

![d2e2071d25232fdf9485e781b52a2f0b.png][]

**我们获取签名的流程如下：**

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**

*  [获取access\_token][access_token]

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

请求代码如下：

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

![b837ef4ae564737ff2113c367ab85269.png][]

后来又是搜，[获取access\_token40125错误][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<sortarr.length;i++){//拼接
        signStr +=sortarr[i];
    }
    let signature = sha1(signStr);//加密
    console.log('签名',signature);

主流程中涉及的方法：

//获取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

卡券签名错误可以在以下链接中分析排查：  
[卡券签名错误排查方法(官方提供)][Link 6]  
[微信卡券签名校验工具地址][Link 7]

参考文章：  
[https://www.2cto.com/kf/201801/712897.html][https_www.2cto.com_kf_201801_712897.html]

这里有一个后台创建卡券，前端去加载的文章：  
[https://blog.csdn.net/ioth5/article/details/73821768][https_blog.csdn.net_ioth5_article_details_73821768]

[Link 1]: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN
[Link 2]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141229
[Link 3]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025056
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.addCard.html
[0da7417a8b2e8a758aa6ddf96b2485e4.png]: /images/20221024/7f3284b0519b415aaaa51d99687a13d6.png
[Link 5]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1499332673_Unm7V
[d2e2071d25232fdf9485e781b52a2f0b.png]: /images/20221024/916a4e6b40be494a9125e403f00587f4.png
[access_token]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
[b837ef4ae564737ff2113c367ab85269.png]: /images/20221024/a52272a17cfa456586615c8725ba1300.png
[access_token40125]: https://blog.csdn.net/u010974598/article/details/78415250
[Link 6]: https://mp.weixin.qq.com/s/WhYpWmfuhUBw2wseTXdt2A
[Link 7]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign
[https_www.2cto.com_kf_201801_712897.html]: https://www.2cto.com/kf/201801/712897.html
[https_blog.csdn.net_ioth5_article_details_73821768]: https://blog.csdn.net/ioth5/article/details/73821768