手把手教你小程序卡券开发

手把手教你小程序卡券开发

摘要：实话说，我第一次看这个官方文档是挺懵的！但由于项目需要还是通过各种方式摸到了成功的果实。避免走更多的弯路，让我们一起了解下，希望对您有所帮助。

官方文档：查看微信卡包中的卡券

启发文档：小程序与微信会员卡打通教程

网页H5添加卡券：批量添加卡券接口

api_ticket：获取api_ticket

普通access_token：获取access_token

微信卡券JSAPI签名校验工具：校验工具

1、批量添加卡券：
第一步：获取api_ticket，然后获取api_ticket需要普通access_token，所以需要先获取普通access_token。

第二步：调用批量领取卡券接口：

      let time = parseInt(new Date().getTime()/1000)
      console.log('time',time)
      let arr = []//卡券id列表
      let cardList = []
      for(let i in arr){
        let temp = [];
        temp.push(api_ticket)
        temp.push(time)
        temp.push(arr[i])
        temp.sort()
        let str = temp.join('')
        let signature = this.sha1(str)
        cardList.push({cardId:arr[i],cardExt:'{"timestamp": '+time+', "signature":"'+signature+'"}'})
      }
      console.log('cardList',cardList)
      wx.addCard({
        cardList: cardList,
        success (res) {
          console.log('res',res) // 卡券添加结果
        },
        fail(e){
          console.log('e',e)
        }
      })

sha1加密方法：

  encodeUTF8(s) {
    var i, r = [], c, x;
    for (i = 0; i < s.length; i++)
      if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
      else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
      else {
        if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
          c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
            r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
        else r.push(0xE0 + (c >> 12 & 0xF));
        r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
      };
    return r;
  },
  
  // 字符串加密成 hex 字符串
  sha1(s) {
    var data = new Uint8Array(this.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;
  }

注：主要是JSAPI签名校验比较模糊，所有必须的参数是都要的，其它参数都是可有可无，可以通过文章开头的校验链接进行校验。

热爱编程的您可复制链接交流：【小程序+云开发】(非技术勿扰）
分享不易，点赞关注给作者一点点鼓励，谢谢您！