微信小程序打通卡包之開卡組件—個人踩坑

一、需求

​ 從卡券里面獲取相對真實的用戶信息

二、調研

1. 微信卡券是屬於微信公眾號的功能，所以小程序要用需要在微信開放平台里面關聯小程序和微信公眾號。

2. 微信卡券開卡分為兩種：公眾號后台頁面開卡、調用接口開卡（推薦）

   官方有文檔,主要關注兩份

   • 微信公眾號創建會員卡
   • 微信卡券打通小程序

3. 微信小程序打通領取會員卡也分兩種情況：

   1. 調用AddCard()、OpenCard()接口
   2. 跳轉小程序開發組件（推薦）
      1. 跳轉型一鍵開卡（推薦），用戶更加無感
      2. 非跳轉型一鍵開卡

三、流程

1. 創建一張會員卡，參考微信公眾號創建會員卡文檔，貼出基本格式

   POST請求，JSON格式。

   {
       "card": {
           "card_type": "MEMBER_CARD",
           "member_card": {
               "wx_activate": true,
               "wx_activate_after_submit": true,
               "wx_activate_after_submit_url": "pages/index/index",
               "activate_app_brand_user_name": "gh_1211a5ca04bf@app",//小程序原始ID+@app 原始id不是appId
               "activate_app_brand_pass": "pages/index/index",
               "base_info": {
                   "logo_url": "XXXXX",
                   "brand_name": "會員卡名字",
                   "code_type": "CODE_TYPE_QRCODE",
                   "title": "會員卡副標題",
                   "color": "Color100",
                   "notice": "使用時向店員出示此券",
                   "service_phone": "020-8887744488",
                   "description": "不可與其他優惠同享",
                   "date_info": {
                       "type": "DATE_TYPE_PERMANENT"
                   },
                   "sku": {
                       "quantity": 100000000
                   },
                   "get_limit": 1,
                   "use_custom_code": false,
                   "can_give_friend": false,
                   "need_push_on_view": false
               },
               "supply_bonus": true,
               "supply_balance": false,
               "prerogative": "請線下聯系店鋪"
           }
       }
   }
   

2. 設置用戶開卡時填寫的開卡字段，分必填和選填，詳情見微信公眾號創建會員卡

   貼出基本格式

   {
       "card_id": "會員卡ID",
       "required_form": {
           "can_modify":false,
           "common_field_id_list": [
               "USER_FORM_INFO_FLAG_MOBILE"
           ]
       },
       "optional_form": {
           "can_modify":false,
           "common_field_id_list": [
               "USER_FORM_INFO_FLAG_NAME",
               "USER_FORM_INFO_FLAG_SEX",
               "USER_FORM_INFO_FLAG_BIRTHDAY",
               "USER_FORM_INFO_FLAG_LOCATION"
           ]
       }
   }
   
   

3. 跳轉小程序開發組件，畢竟是微信自己開發的小程序，所以需要傳一些參數。參數怎么來，怎么跳，參考博客，可以綁定一個按鈕，或者直接用navigator組件。這里有幾個坑：打個比方，用戶通過其他渠道，如addCard、朋友分享已經領取了你這個卡，那么是不會進入小程序開發組件的，只會進入會員卡列表頁面，也就不會顯示注冊頁面，所以我們確保不能通過其他渠道提前領取。

4. 填好信息，點擊一鍵激活。怎么把參數extraData帶回我們自己的小程序。

   踩坑點

   1. 確保開卡時，這幾個信息完整。尤其是wx_activate_after_submit_url，血坑。這參數我以為不用填，誰知道死活跳不回，目前好像這參數可以隨便填，畢竟真正起跳回路徑的是activate_app_brand_pass。

      "wx_activate": true,
      "wx_activate_after_submit": true,
      "wx_activate_after_submit_url": "pages/index/index",
      "activate_app_brand_user_name": "gh_1211a5ca04bf@app",//小程序原始ID+@app 原始id不是appId
      "activate_app_brand_pass": "pages/index/index",
      

   2. 跳回去后，在哪里拿extraData，注意是在小程序App.js的onShow里面，不是跳轉頁面的onShow。uniapp在app.vue的onShow。

5. 拿到參數后就簡單了，調取接口獲得用戶注冊信息，並且激活卡就行。

   激活卡參數如下

   {
       "membership_number": "卡號或者手機號",
       "code": "extraData里有",
       "card_id": "同上"
   }