微信小程序打通卡包之开卡组件—个人踩坑

1|0一、需求

​ 从卡券里面获取相对真实的用户信息

2|0二、调研

1. 微信卡券是属于微信公众号的功能，所以小程序要用需要在微信开放平台里面关联小程序和微信公众号。

2. 微信卡券开卡分为两种：公众号后台页面开卡、调用接口开卡（推荐）

   官方有文档,主要关注两份

   • 微信公众号创建会员卡
   • 微信卡券打通小程序

3. 微信小程序打通领取会员卡也分两种情况：

   1. 调用AddCard()、OpenCard()接口
   2. 跳转小程序开发组件（推荐）
      1. 跳转型一键开卡（推荐），用户更加无感
      2. 非跳转型一键开卡

3|0三、流程

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": "同上"
   }
   

__EOF__

本文作者：boxJLP
本文链接：https://www.cnblogs.com/toWorld/p/15224064.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！