藉助小程序雲開發創建微信卡券

2020年騰訊數字文創節（以下簡稱TGC）在海南舉行，爲了能讓玩家提前瞭解TGC的文化和線下活動，在活動開始前的一個月時間，我們就上線了「線上提前預約門票」的功能。爲了提升門票預約的體驗，以及更好的在活動開始之前提前觸達到預約門票的用戶，團隊今年在小程序預約門票的基礎上增加了「添加門票到微信卡券」的功能。

您需要提前準備以下賬號信息：

• 微信開放平臺賬號
• 微信小程序賬號
• 微信公衆號

一、將微信小程序賬號和微信公衆號綁定在同一個微信開放平臺賬號下

二、開通微信公衆號的卡券功能

在 mp.weixin.qq.com 中，登錄微信公衆號後臺，點擊左側菜單欄 -> 功能 -> 卡券功能（如果沒有該功能，請點擊添加功能插件進行添加）。

訪問 open.weixin.qq.com，登錄微信開放平臺後，將小程序賬號和微信公衆號綁定在該開放平臺賬號下。

三、生成卡券模板

在微信公衆號後臺，可以對優惠券和會員卡類型進行手動創建，但是針對一些特殊的票券則需要使用 API（會議門票、電影票和景區門票等等）的方式進行生成，TGC的活動是在海南線下舉行，所以我們則使用了微信卡券的景區門票類型，無法直接在後臺直接創建，所以這裏介紹下如果使用 API 的方式進行生成。

1、獲取access_token

創建卡券API需要用到微信的 access_token，而公衆號生成 access_token 的方式需要特別注意一下，需要在公衆號後臺綁定生成 access_token 的服務器IP白名單，由於生成卡券我們只需要創建一次，所以這裏我們直接添加本地的IP作爲白名單IP即可。

2、創建卡券

這一步就是利用創建卡券的API，傳入卡券的配置即可。相關的請求參數說明直接查看文檔：

https://developers.weixin.qq.com/doc/offiaccount/Cards_and_Offer/Special_ticket.html

這裏特別需要注意的是，小程序添加微信卡券功能允許我們將卡券使用界面添加跳轉回小程序的入口，所以在創建卡券的時候，我們可以通過設置一些參數，讓卡券服務入口能跳轉回小程序內，具體參數說明，請前往相關文檔查看，這裏簡單貼下使用效果，供大家參考。

文檔鏈接：

https://developers.weixin.qq.com/doc/offiaccount/Cards_and_Offer/Coupons-Mini_Program_Start_Up.html#21

四、服務端生成卡券下發（小程序雲開發）

創建完卡券之後，接下就是用戶在小程序內通過某些操作領取卡券了。小程序內領取卡券需要服務端提供卡券的校驗參數，所以這一步，我們介紹下如何在服務端生成卡券的校驗參數。

1、生成access_token

這步我們在生成卡券模板中有提到過，只不過因爲這裏客戶端頻繁調用的，我們需要在代碼層面去實現 access_token 的獲取。這裏由於我們使用的是小程序雲，雲函數的運行機制，導致其默認的是非固定IP，我們需要在騰訊雲的 cloudbase 控制檯，將獲取 access_token 的雲函數設置成固定IP。

設置固定IP成功後，將得到的 IP 配置到 公衆號管理後臺的 開發 -> 基本配置 -> IP白名單 中：

配置好IP白名單後，利用基本配置中的 AppID 和 AppSecret 請求access_token:

let requestApiTicketResult = await request({
uri: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
qs: {
access_token: accessToken,
type: 'wx_card'
}
})

2、生成api_ticket

生成 api_ticket 和獲取 access_token 類似，直接利用 access_token請求微信的接口獲取即可，這裏需要注意的是，access_token和api_ticket 每天都有請求次數的限制以及都有過期時間，所以我們需要將這兩個值緩存起來使用（注：這個問題好像不少新人同學都犯過錯）。

let requestApiTicketResult = await request({
uri: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
qs: {
access_token: accessToken,
type: 'wx_card'
}
})

3、生成卡券參數

卡券參數主要分爲這幾部分：隨機字符串 nonce_str、時間戳 timestamp、用戶 openid、卡券號碼 code、卡券簽名 signature。

卡券簽名 signature 的生成依賴其他的參數。

後端代碼實現：

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

五、小程序端添加卡券

小程序端添加卡券的就直接將服務端生成的卡券參數傳入小程序添加卡券 API 即可：

wx.addCard({
  cardList: [
    {
      cardId: 'cardId',
      cardExt: 'cardExt'  // 拿到後端生成好的cardExt
    }],
  success (res) {
    console.log(res.cardList) // 卡券添加結果
  }
})

六、實現效果

調用 wx.addCard 的效果：

調用 wx.openCard 的效果：

七、門票卡券覈銷

由於業務的特殊性(用戶可以多次通過門票卡券二維碼進入活動現場)，我們並未對卡券做覈銷的操作。但是卡券本身的核銷也是直接可以通過微信卡券覈銷接口進行覈銷，由於這部分比較簡單，這裏就不冗餘闡述了，直接可以通過查看文檔完成：
https://developers.weixin.qq.com/doc/offiaccount/Cards_and_Offer/Redeeming_a_coupon_voucher_or_card.html

產品介紹

雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平臺，爲開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、存儲、託管等serverless化能力，可用於雲端一體化開發多種端應用（小程序，公衆號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理後端服務和雲資源，避免了應用開發過程中繁瑣的服務器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。
開通雲開發：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
產品文檔：https://cloud.tencent.com/product/tcb?from=12763
技術文檔：https://cloudbase.net?from=10004
技術交流加Q羣：601134960
最新資訊關注微信公衆號【騰訊云云開發】