小程序开发卡券

前期准备

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

具体调用

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

  • 接口一 :wx.addCard(Object object)

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

 

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

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

参考文章:
https://www.2cto.com/kf/201801/712897.html

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

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值