故事還要從授權開始

---

首先判斷用戶是否授權： 未授權： 后端接口返回一個授權的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)

總結

以上是生活随笔為你收集整理的总结 创建领取 微信会员卡 踩过的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。