故事还要从授权开始
首先判断用户是否授权： 未授权： 后端接口返回一个授权的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: '', // 背景图片URL base_info: { notice: '使用时向服务员出示此码', logo_url: '', // logo URL brand_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: '', // 积分url custom_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/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
文档上前后不一。
领取会员卡
文档地址:
这个接口不论是返回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)
