总结创建领取微信会员卡踩过的坑

故事还要从授权开始

首先判断用户是否授权：未授权：后端接口返回一个授权的link，使用get请求访问link，需要手动修改referer，前端带的referer要和后端配置的referer是同一个，否则会报错。

a标签会自动带当前页的 referer

<a :href="wxAuthLink" class="a cp">{{$t('立即授权')}}</a>

不想带需要添加 rel=“noopener noreferrer”

前端`Request Headers` 里带上referer 之后，就需要后端的同学发挥了，后端的接口要部在和你的referer一样的域名。。

授权之后：接口调试工具：[https://mp.weixin.qq.com/debug/](https://mp.weixin.qq.com/debug/) 调试工具的使用方法：

填写好appid appsecret会返回一个 access_token

接口类型选择卡券接口

这样就可以调试了，字段有问题会给提示。

创建会员卡：（我们使用的是1.0版本）
接口文档：点击跳转到接口文档

请求示例：

    card: {card_type: 'MEMBER_CARD',member_card: {background_pic_url: '', // 背景图片URLbase_info: {notice: '使用时向服务员出示此码',logo_url: '', // logo URLbrand_name: '',code_type: 'CODE_TYPE_BARCODE',title: '',color: 'Color010',center_title: '',center_sub_title: '',center_url: '',description: '', // 会员卡详情里的使用须知service_phone: '', // 会员卡详情里的手机号码date_info: {type: 'DATE_TYPE_PERMANENT'},sku: {quantity: 100000000},pay_info: {swipe_card: {is_swipe_card: false // 微信支付}},get_limit: 1 // 每人可领券的数量限制，建议会员卡每人限领一张 （画重点）},supply_balance: false, // 是否支持储值wx_activate: true, // 自动激活prerogative: '', // 会员卡详情里的特权说明advanced_info: {'business_service': [] // 会员卡详情里的商户服务},supply_bonus: false, // 显示积分，填写true或false，如填写true，积分相关字段均为必 填 若设置为true则后续不可以被关闭。bonus_url: '', // 积分urlcustom_field1: {'name_type': 'FIELD_NAME_TYPE_LEVEL','url': ''},custom_field2: {'name_type': 'FIELD_NAME_TYPE_COUPON','url': ''},custom_cell1: {name: '',tips: '',url: ''},custom_cell2: {name: '',tips: '',url: ''}}},

要根据需求理性选择字段呢
微信支付： swipe_card 字段
注意： 创建的时候要用card包裹，编辑的时候不需要用card包裹。。。。。

编辑： 不可修改品牌名称 栏位2，设置后不可删除只能修改
还有很多不能删除或者修改的，目前还不能完全找到，需要慢慢找
编辑示例：

{"member_card": {"custom_cell1": {"name": "欢迎来到华为官网我的精致花粉们","tips": "欢迎来到华为","url": "https://consumer.huawei.com/"},"advanced_info": {"business_service": ["BIZ_SERVICE_DELIVER", "BIZ_SERVICE_FREE_PARK", "BIZ_SERVICE_FREE_WIFI", "BIZ_SERVICE_WITH_PET"]},"prerogative":"特权说明","supply_bonus": true,"bonus_url": "积分链接","base_info": {"color": "Color010","logo_url": "http://mmbiz.qpic.cn/mmbiz_jpg/Y5otQicOXUK2RyX59yBU6LjSsTpPkYSNDXgslq1cJgNdE32dEbgicVUYG2TwM3M0P5ibBBBs9bW5F1cicP3AZVKdwg/0","description": "description","brand_name": "HUAWEI2","title": "华为VIP","service_phone": "010-5215815","notice": "使用时向服务员出示此码","code_type": "CODE_TYPE_BARCODE","pay_info": {"swipe_card": {"is_swipe_card": true}}},"supply_balance": false,"background_pic_url": "http://mmbiz.qpic.cn/mmbiz_jpg/Y5otQicOXUK2RyX59yBU6LjSsTpPkYSND98WyyXDksBnH6xLdajkJfl7MWr9mJbnuGCxUGWaqJMeq8yWmUibTvYA/0","discount": 1,"custom_field1": {"name_type": "FIELD_NAME_TYPE_LEVEL","url": "等级URL"},"custom_field2": {"name_type": "FIELD_NAME_TYPE_COUPON","url": "优惠券的url"},"custom_cell2": {"name": "欢迎来到小米官网","tips": "欢迎来到小米","url": "https://www.mi.com/"}},"card_id": "pfTj4jk__t19mlJ6D0hNQQh9rSww"
}

编辑调用的接口：
https://developers.weixin.qq.com/doc/offiaccount/Cards_and_Offer/Membership_Cards/Manage_Member_Card.html#2

编辑的参数我把不需要的参数删除了。不然会报错呢。

获取用户信息文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0
直接拼接参数就行了

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appid}&redirect_uri=${data.redirect_uri}&response_type=code&scope=snsapi_userinfo#wechat_redirect

使用的appid是开发者的ID(AppID) 配置的回调地址要和redirect_uri一致
以个人公众号为例：

用户领卡表单设置：文档地址就是创建会员卡的地址，下面有创建开卡项的。搜索关键词 – 手机号

请求示例：

{"required":{"common_fields":["OPEN_FORM_FIELD_GENDER","OPEN_FORM_FIELD_MOBILE","OPEN_FORM_FIELD_NAME"]},"
optional":{"common_fields":["OPEN_FORM_FIELD_ADDRESS","OPEN_FORM_FIELD_CITY"]}}

注意 “教育背景” 字段 USER_FORM_INFO_FLAG_EDUCATION_BACKGROUND
文档上前后不一。

领取会员卡
文档地址:
https://developers.weixin.qq.com/doc/offiaccount/Cards_and_Offer/Distributing_Coupons_Vouchers_and_Cards.html

这个接口不论是返回url和show_qrcode_url 返回的只能生成二维码扫码，不可以直接点击跳转。。

貌似就这些回头来补编辑的注意事项。

补充：中心按钮。按钮文案和提示语。这里的 18 和 24 指的是字节。

返回的图片无法显示这一块，详见另一篇博客。 [https://blog.csdn.net/weixin_46034375/article/details/119353056?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_46034375/article/details/119353056?spm=1001.2014.3001.5501)