零、微信公众号
需要小程序绑定的微信公众号开通并具备会员卡能力，具体操作不作阐释。
一、（后端）配置会员卡参数
1.会员卡创建和更新可通过接口方式或者页面按钮来创建更新会员卡，会员卡创建成功后，通过微信接口返回创建成功信息，取回card_id字段填入会员卡配置表中。
2.会员卡激活页面填写信息相关字段配置需要通过微信接口在创建完会员卡后，使用接口来配置，在会员卡模块表单字段配置时，需要先创建好后，修改保存时触发拦截器调用微信接口。
3.创建会员卡时相关图片需要先上传微信，使用微信返回的url，否则报错。在设计表时，同时存在aliOss图片路径和wx图片路径字段，在编辑界面，使用原有的上传aliOss上传方式将图片上传后。再次编辑保存时，出发拦截器获取到alioss图片路径，转成File类调用微信上传图片接口，将微信返回的url保存在表字段中。
4.会员卡激活方式选择跳转型一键开卡，用户会员卡填写信息提交后，跳转到创建会员卡时配置的页面，可在这通过微信返回的ticket获取用户填写信息，通过card_id和card_code来激活会员卡。
5.通过跳转型一键激活方式，用户填写信息后跳转到小程序页面，调用原有的会员中心注册接口，在注册接口中我们传入ticket,card_id,card_code字段，来获取用户信息并激活会员卡。
6，会员卡激活事件推送，使用openId来向用户表中保存会员卡信息。用户删卡事件，删除用户表中卡信息。用来判断用户是否领卡。
二、（前端）调用微信接口获取开卡参数
后端配置好一些基本的会员卡参数以后，按照文档所说，让后端同学调用以下接口并将返回给到前端。
前端拿到返回，结构如下:
{
"errcode": 0,
"errmsg": "ok",
"url": "https://mp.weixin.qq.com/bizmall/activatemembercard? action=preshow&&enxxxxxxx=MjM5Mzc0OTEwMA%3D%3D#wechat_redirect"
}
这里url里面包含我们开卡时需要传递的参数encrypt_card_id，outer_str和biz，需要decode这个url将三个参数解析出来，这里网上的文章和官方的文档都没有具体写要decode到什么程度，微信返回的这个url格式也非常抽象，自己探索了一下后，用下述代码再处理下既是可以用的三个参数，流程写在备注里了。
const url = res.url; // 接口返回的很抽象的url
let obj = {}; // 拆解url参数
let str = url.split("?")[1].split("&");
for (let i = 0; i < str.length; i++) {
let a = str[i].split('=')
obj[a[0]] = a[1]
}
// 拆解后的obj格式应该是
// obj = {
// action: "preshow",
// "": undefined,
// encrypt_card_id: "AsddasdFSDFcsd%2BAsddasdFSDFcsd%2BAsddasdFSDFcsd",
// outer_str: "上面和card_id接口一起传的outer_str的渠道值",
// biz: "AsddasdFSDFcsd%3D%3D#wechat_redirect"
//}
// 这里你会发现，除了outer_str，另外两个根本没法直接用，所以需要进一步拆
obj.biz = obj.biz.split('%')[0]; // biz的值xxxxx%3D%3D#wechat_redirect 拆一下，去掉%3D也就是&及其后面的值
const encrypt_card_id = decodeURIComponent(obj.encrypt_card_id); // encrypt_card_id用decodeURIComponent方法de一下，把%2B转化为+
const extraData = { encrypt_card_id : encrypt_card_id , outer_str : obj.outer_str, biz : obj.biz }
console.log("开卡数据", url, extraData) // biz: "AsddasdFSDFcsd", encrypt_card_id: "AsddasdFSDFcsd+AsddasdFSDFcsd+AsddasdFSDFcsd", outer_str: "xx"
接下来按照文档说的，跳转至对应的开卡小程序，至此即可看到开卡页
wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9', // 固定为此appid，不可改动
extraData: extraData, // 包括encrypt_card_id outer_str biz三个字段
success: function() {},
fail: function() {},
complete: function() {}
})
开卡后注意此时你想返回小程序还是想继续跳转进会员卡详情页，后端在配置卡片时，有一个参数是wx_activate_after_submit_url，这个值直接决定点击资料提交后是返回小程序页面还是继续进微信会员卡详情页激活卡片
1.返回小程序（跳转型开卡）
如果wx_activate_after_submit_url有值，只要有，就会返回小程序，我们实际测试这个值无论填什么，无论是H5还是小程序路径，都是返回到之前从小程序跳转进开卡组件的那个页面。比如你从你的小程序PageA进的开卡组件，返回时则返回PageA，如果你从PageB页面进到开卡组件，返回时就是PageB。
注意：此时返回后你的卡片是未激活的状态，但是App.onShow的options中可以拿到卡片参数，继续传给后端去激活即可。
2.继续进卡详情页（非跳转型开卡）
这种需要用户手动点击左上角-关闭-返回小程序，我们不是这个流程，没有过多研究。
接着跳转型开卡说，此时返回小程序后，拿到activate_ticket，card_id，code和appid 4个参数，后续配合后端接口在前端将其传入并激活卡片，再刷新用户状态即可。activate_ticket可以用来查询当前用户开卡时填写的信息。
三、测试流程及注意事项
微信会员卡不是微信卡券，微信会员卡仅支持领取一张，删除后需要重新配置卡片才会再次触发开卡流程，否则点击开卡会进入上一张已删除的卡面，卡面内可以再次激活卡片。
再次吐槽微信官方的文档简直拿脚在写，需要反复查阅才能梳理完整流程。
