微信公众号开发

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

本文主要是介绍微信小程序打通卡包之开卡组件—个人踩坑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、需求

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

二、调研

  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": "同上"
    }
    
这篇关于微信小程序打通卡包之开卡组件—个人踩坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!