2020腾讯数字文创节(以下简称TGC)将在海南举办。 为了让玩家提前了解TGC的文化和线下活动,我们在活动前一个月推出了“网上提前订票”。 功能。 为了改善订票体验,更好地触达活动开始前已订票的用户,今年团队在小程序订票的基础上增加了“微信优惠券添加门票”功能。
您需要提前准备以下账户信息:
1.将微信小程序账号与微信公众号绑定同一个微信开放平台账号
访问并登录微信开放平台后,将小程序账号和微信公众号与开放平台账号绑定。
2.激活微信公众号卡券功能
登录微信公众号后台,点击左侧菜单栏->功能->卡券功能(如果没有该功能,请点击添加功能插件添加)。
3. 生成卡券模板
在微信公众号后台,可以手动创建优惠券和会员卡类型,但对于一些特殊门票,需要使用API(会议门票、电影票、景区门票等)来生成。 TGC活动是在海南线下举办的,所以我们使用的是微信优惠券的景区门票类型,后台无法直接创建,所以这里介绍如何使用API生成。
1. 获取
需要使用微信创建卡券API,公众号的生成方式需要特别注意。 需要在公众号后台绑定生成的服务器IP白名单。 由于我们只需要创建一次就可以生成卡片和优惠券,所以我们这里直接添加。 本地IP可以作为白名单IP。
2.创建优惠券
这一步是使用创建卡券的API,并传入卡券的配置。 相关请求参数说明请直接查看文档:
这里需要特别注意的是,小程序中添加的微信优惠券功能可以让我们添加卡券使用界面跳转回小程序入口。 因此,我们在创建卡券时,可以设置一些参数,让卡券服务入口。 您可以跳转回小程序。 具体参数说明请前往相关文档查看。 这里简单贴出使用结果,供大家参考。
文档链接:
#21
4、服务器生成卡券并发放(小程序云开发)
创建完卡券后,用户下一步就是通过小程序中的某些操作来领取卡券。 小程序中接收卡券需要服务器提供卡券验证参数,所以这一步我们将介绍如何在服务器端生成卡券验证参数。
1. 生成
我们在生成卡券模板时提到过这一步,但由于客户端经常在这里调用,所以我们需要在代码层面实现获取。 这里,由于我们使用的是小程序云以及云功能的运行机制,所以默认的IP是非固定IP。 我们需要在腾讯云控制台将获取到的云功能设置为固定IP。
成功设置固定IP后,将获取到的IP配置到公众号管理后台的开发->基础配置->IP白名单中:
配置好IP白名单后,在基本配置中使用 和 :
let requestAccessTokenResult = await request({ uri: 'https://api.weixin.qq.com/cgi-bin/token', qs: { grant_type: 'client_credential', appid: process.env.APPID, secret: process.env.APP_SECRET }})
2. 生成
生成和获取类似。 您可以直接使用接口请求微信。 这里需要注意的是,每天的请求数是有限制的,还有过期时间,所以我们需要把这两个值缓存起来以供使用(注:这个问题好像很多新同学都有犯了错误)。
let requestApiTicketResult = await request({ uri: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket', qs: { access_token: accessToken, type: 'wx_card' }})
3. 生成卡片参数
卡券参数主要分为这几部分:随机字符串、时间戳、用户、卡券号码代码、卡券签名。
卡签名的生成取决于其他参数。
后端代码实现:
const cardExt = { cardId: 'cardId', // 卡券id code: code, api_ticket: apiTicket, nonce_str: generate(), timestamp: parseInt((Date.now() / 1000), 10) + ''} // 按照字典升序排列return { cardId: 'CardId', cardExt: JSON.stringify({ openid: '', // 不指定openid领取 code: cardExt.code, nonce_str: cardExt.nonce_str, timestamp: cardExt.timestamp, signature: sha1(valueToString(cardExt)) })}
// 生成随机字符串const generate = (length = 16) => { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' let noceStr = '', maxPos = chars.length while (length--) noceStr += chars[Math.random() * maxPos | 0] return noceStr}
// 排序const valueToString = (obj) => Object.values(obj).sort().join('')// 加密const sha1 = (str, encoding = 'utf8') => crypto.createHash('sha1').update(str, encoding).digest('hex')
5.小程序添加卡券
在小程序中添加卡券,直接将服务器生成的卡券参数传入小程序添加卡券API即可:
wx.addCard({ cardList: [ { cardId: 'cardId', cardExt: 'cardExt' // 拿到后端生成好的cardExt }], success (res) { console.log(res.cardList) // 卡券添加结果 }})
6.实现效果
调用wx.的效果:
调用wx.的效果:
7. 门票和卡的取消
由于业务的特殊性(用户可以通过门票、优惠券二维码多次进入活动现场),我们并未对卡券进行核销。 不过,卡券本身的核销也可以直接通过微信卡券核销接口进行。 由于这部分比较简单,这里不再赘述。 直接查看文档即可完成: