微信JS-SDK實(shí)現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:53:15

微信JS-SDK實(shí)現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)

微信JS-SDK實(shí)現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡):需求:點(diǎn)擊我們公司的微信公眾號，從菜單欄中進(jìn)入會員中心，如果是新會員則需綁定注冊，注冊完跳轉(zhuǎn)到用戶中心頁面，然后給用戶發(fā)會員卡，如果是老會員，如果以前沒有的會員卡的，發(fā)一張會員卡給他，如果有，則不做任何處理。實(shí)現(xiàn):我的思路是這樣的，進(jìn)入會員

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信JS-SDK實(shí)現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡):需求:點(diǎn)擊我們公司的微信公眾號，從菜單欄中進(jìn)入會員中心，如果是新會員則需綁定注冊，注冊完跳轉(zhuǎn)到用戶中心頁面，然后給用戶發(fā)會員卡，如果是老會員，如果以前沒有的會員卡的，發(fā)一張會員卡給他，如果有，則不做任何處理。實(shí)現(xiàn):我的思路是這樣的，進(jìn)入會員

需求:點(diǎn)擊我們公司的微信公眾號，從菜單欄中進(jìn)入會員中心，如果是新會員則需綁定注冊，注冊完跳轉(zhuǎn)到用戶中心頁面，然后給用戶發(fā)會員卡，如果是老會員，如果以前沒有的會員卡的，發(fā)一張會員卡給他，如果有，則不做任何處理。
實(shí)現(xiàn):我的思路是這樣的，進(jìn)入會員中心，調(diào)用微信API接口，判斷用戶是否領(lǐng)過卡,若沒有領(lǐng)取，則調(diào)用微信JS-JDK的addCard()接口。具體實(shí)現(xiàn)過程如下(用C#實(shí)現(xiàn))：

1創(chuàng)建會員卡

1) 先打開微信開發(fā)者文檔,先調(diào)用創(chuàng)建會員卡接口，在文檔的4.1 創(chuàng)建會員卡接口，直接用postman，詳情見文檔。

創(chuàng)建的時(shí)候要特別注意”use_custom_code”: false,”bind_openid“：false兩個字段

第一個為是否自定義code，第二個是否綁定openid，這個很重要，很重要，很重要！！！因?yàn)楹竺嬲{(diào)用JS-JDK的addCard接口所需要的簽名會根據(jù)這兩個的值決定是否加入openid和code進(jìn)行簽名的生成(被坑了很久)。后面會詳細(xì)說明這個簽名，先一步步來，記住這兩個參數(shù)一定要注意。按照這個文檔說明，創(chuàng)建會員卡應(yīng)該沒有什么問題，對了， “sku”: { “quantity”: 50000000 }這個是庫存，要添加一點(diǎn)庫存。

2調(diào)用微信JS-SDK

1)引入微信js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2)通過config接口注入權(quán)限驗(yàn)證配置

<script>
 $(function () {
 //判斷是否已經(jīng)領(lǐng)取會員卡
 $.ajax({
 url: '/User/ExitCard',
 type: 'GET',
 success: function (data) {
 if (data.Status == 1) 
 //1代表沒有存在卡，0代表存在卡
 wxAddCard();
 }
 });
 }

 //微信添加卡券
 function wxAddCard() {

 //微信sdk config
 wx.config({
 debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
 appId: '', // 必填，公眾號的唯一標(biāo)識
 timestamp: '', // 必填，生成簽名的時(shí)間戳
 nonceStr: '', // 必填，生成簽名的隨機(jī)串
 signature: '',// 必填，簽名，見附錄1
 jsApiList: ['onMenuShareTimeline',
 'onMenuShareAppMessage',
 'onMenuShareQQ',
 'onMenuShareWeibo',
 'onMenuShareQZone',
 'startRecord',
 'stopRecord',
 'onVoiceRecordEnd',
 'playVoice',
 'pauseVoice',
 'stopVoice',
 'onVoicePlayEnd',
 'uploadVoice',
 'downloadVoice',
 'chooseImage',
 'previewImage',
 'uploadImage',
 'downloadImage',
 'translateVoice',
 'getNetworkType',
 'openLocation',
 'getLocation',
 'hideOptionMenu',
 'showOptionMenu',
 'hideMenuItems',
 'showMenuItems',
 'hideAllNonBaseMenuItem',
 'showAllNonBaseMenuItem',
 'closeWindow',
 'scanQRCode',
 'chooseWXPay',
 'openProductSpecificView',
 'addCard',
 'chooseCard',
 'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
 });

 wx.ready(function () {
 wx.addCard({
 cardList: [{
 cardId: '',
 cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'
 }],
 success: function (res) {
 $.ajax({
 url: '/User/ActiveCard',
 type: 'GET',
 success: function (data) {
 if (data.Status == 0)
 alert("成功激活");
 }
 });
 },
 cancel: function (res) {
 alert(JSON.stringify(res))
 }
 });

 });

 }
 </script>

我這里是進(jìn)入頁面就調(diào)取接口看是否已經(jīng)領(lǐng)卡，沒有領(lǐng)卡，則調(diào)用微信接口，用戶點(diǎn)擊領(lǐng)取，然后調(diào)取激活接口，將會員卡激活，下面講述簽名的生成。

3)簽名的配置

上一小節(jié)中的wx.config中appid為公眾號的唯一標(biāo)識，自己填自身微信公眾號的，timestamp，nonceStr，signature三個簽名其實(shí)就是為了加密吧。（以下代碼都是用C#實(shí)現(xiàn)）
timestamp的生成:

/// <summary>
 /// 創(chuàng)建時(shí)間戳 ///本代碼來自開源微信SDK項(xiàng)目：https://github.com/night-king/weixinSDK
 /// </summary>
 /// <returns></returns>
 public long CreatenTimestamp()
 {
 return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
 }

nonceStr的生成:

/// <summary>
 /// 創(chuàng)建隨機(jī)字符串 ///本代碼來自開源微信SDK項(xiàng)目：https://github.com/night-king/weixinSDK
 /// </summary>
 /// <returns></returns>
 public string CreatenNonce_str()
 {
 Random r = new Random();
 var sb = new StringBuilder();
 var length = strs.Length;
 for (int i = 0; i < 15; i++)
 {
 sb.Append(strs[r.Next(length - 1)]);
 }
 return sb.ToString();
 }

signature生成（這里是wx.config中的signature生成）,signature簽名的生成是由jsapi_ticket，noncestr，timestamp，url四個參數(shù)，先使用ASCII算法排序(其實(shí)就是看他們的字母順序 j,n,t,u排序，如果首字母相等看第二位，以此類推)，先等鍵進(jìn)行排序，然后拼接例如jsapi_ticket=xxx&noncestr=&….我這里已經(jīng)自己手動排序了，所以沒實(shí)現(xiàn)ASCCII排序，排序完之后，使用sha1加密，代碼如下:

/// <summary>
 /// 簽名算法 ///本代碼來自開源微信SDK項(xiàng)目：https://github.com/night-king/weixinSDK
 /// </summary>
 /// <param name="jsapi_ticket">jsapi_ticket</param>
 /// <param name="noncestr">隨機(jī)字符串(必須與wx.config中的nonceStr相同)</param>
 /// <param name="timestamp">時(shí)間戳(必須與wx.config中的timestamp相同)</param>
 /// <param name="url">當(dāng)前網(wǎng)頁的URL，不包含#及其后面部分(必須是調(diào)用JS接口頁面的完整URL)</param>
 /// <returns></returns>
 public string GetSignature(string jsapi_ticket, string noncestr, long timestamp, string url)
 {
 var string1Builder = new StringBuilder();
 string1Builder.Append("jsapi_ticket=").Append(jsapi_ticket).Append("&")
 .Append("noncestr=").Append(noncestr).Append("&")
 .Append("timestamp=").Append(timestamp).Append("&")
 .Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);
 return ShaEncrypt.SHA1Encrypt(string1Builder.ToString()).ToLower();
 }

public static string SHA1Encrypt(string data)
 {
 //也給不了全部的代碼，只需知道拼接后sha1加密 網(wǎng)上可以找到
 var hash = SHA1.Create();
 var encoder = new System.Text.ASCIIEncoding();
 var combined = encoder.GetBytes(data);
 var result = hash.ComputeHash(combined);

 StringBuilder strbul = new StringBuilder(40);
 for (int i = 0; i < result.Length; i++)
 {
 strbul.Append(result[i].ToString("x2"));//加密結(jié)果"x2"

結(jié)果為32位,"x3"結(jié)果為48位,"x4"結(jié)果為64位 } return strbul.ToString(); }

返回wx.config所需要的四個參數(shù)appId，timestamp，nonceStr，signature。

沒有意外的話可以成功，成功自動進(jìn)入 wx.ready(function () {｝中。

wx.addCard({
 cardList: [{
 cardId: '',//吧你前面創(chuàng)建會員卡成功返回的參數(shù)中的cardId寫進(jìn)去
 cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'
 }],
 success: function (res) {
 $.ajax({
 url: '/User/ActiveCard',
 type: 'GET',
 success: function (data) {
 if (data.Status == 0)
 alert("成功激活");
 }
 });
 },
 cancel: function (res) {
 alert(JSON.stringify(res))
 }
 });

cardExt的signature簽名生成由你創(chuàng)建會員卡的時(shí)候設(shè)置的”use_custom_code”: false,”bind_openid“：false決定，當(dāng)兩個為false時(shí),則吧 paramList.Add(code);paramList.Add(openId);注釋掉，哪個為fasle，哪個就不要。
下面代碼的api_ticket與上面的jsapi_ticket完全不同，不是同一個東西，我會最最下面放出他們獲取的方法

//意思就是這里有幾個參數(shù)，那么對應(yīng)的上面的 paramList.Add();就要添加幾個
//而這里的code和openid的填寫與否取決與創(chuàng)建會員卡是填寫的兩個字段，上面已經(jīng)提及
 cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'

意思就是這里有幾個參數(shù)，那么對應(yīng)的上面的 paramList.Add();就要添加幾個，而這里的code和openid的填寫與否取決與創(chuàng)建會員卡是填寫的兩個字段，上面已經(jīng)提及代碼如下:

3.下面貼上面后臺接口主要的代碼

1）/User/ExitCard（post微信接口，然后根據(jù)返回消息判斷是否已經(jīng)領(lǐng)取卡，領(lǐng)取則為true，未領(lǐng)取則為false）

public bool ExitCard(string openId, string token,string code, string cardId)//token為access_token code為自定義code號
//code我這里是自定義的會員卡號
// cardId為創(chuàng)建會員卡時(shí)微信返回的cardId
 {

 var data = new Hashtable();
 data.Add("openid", openId);
 data.Add("card_id", cardId);
 var res = HttpHelper.HttpComm(
 string.Format("https://api.weixin.qq.com/card/user/getcardlist?access_token={0}", token),
 "POST",
 JSONHelper.ToJson(data));
 var resObj = JSONHelper.FromJsonToAnonymousType(res,
 new
 {
 error_code = 0,
 errmsg = "ok",
 has_share_card = false,
 card_list = Enumerable.Repeat(new { card_id = string.Empty, code = string.Empty }, 1).ToList()
 });
 //var resObj = JSONHelper.FromJsonTo<Dictionary<string, object>>(res);
 //object info = new object();
 //var str = resObj.TryGetValue("card_list", out info);
 if (resObj.card_list.Count == 0 || resObj.card_list == null)
 return false;
 var temp = false;
 for (var i = 0; i < resObj.card_list.Count; i++)
 {
 if (resObj.card_list[i].code == code)
 {
 temp = true;
 break;
 }
 }
 return temp;
 }

2）/User/ActiveCard（激活會員卡）

//激活會員卡
 public Boolean ActiveCard(string accessToken,string bonus,string cardNo,string cardId)
 //bonus為用戶積分 cardNo 卡號 cardId卡ID
 {

 var data = new Hashtable();
 data.Add("init_bonus", bonus);
 data.Add("membership_number", cardNo);
 data.Add("code", cardNo);//上面跟這個設(shè)置相同，自定義code放在微信會員卡卡上面
 data.Add("card_id", cardId);
 var res = HttpHelper.HttpComm(
 string.Format("https://api.weixin.qq.com/card/membercard/activate?access_token={0}", accessToken),
 "POST",
 JSONHelper.ToJson(data));
 var resObj = JSONHelper.FromJsonToAnonymousType(res,new { errcode = "0", errmsg = "ok" });
 if (resObj.errcode == "0")
 return true;//激活成功
 return false;
 }

上面的HttpHelper.HttpComm只是一種自己封裝定義的http請求的工具類，

自己去實(shí)現(xiàn)發(fā)送post請求即可，就不貼出來了。

4）總結(jié)與心得

總體流程大概就是如上，我覺得已經(jīng)夠詳細(xì)了，寫這篇博客的理由就是網(wǎng)上關(guān)于微信這一塊的知識有，但是沒有很詳細(xì)的，讓剛接觸的人不知道如何下手，雖說看文檔可以看懂，但是微信官方文檔有很多坑，往往在文檔中一個小小的細(xì)節(jié)就讓人搞個大半天，而且報(bào)的錯誤都比較籠統(tǒng)，所以就打算自己寫一份比較詳細(xì)的，一個呢自己總結(jié)一下經(jīng)驗(yàn)，有助于自身成長，另一個為后來人鋪路，讓他們少走點(diǎn)彎路，往后有機(jī)會接微信其他接口，會吧流程繼續(xù)貼出來，以供參考。

獲取api_ticket的微信接口：這里寫鏈接內(nèi)容

也就是在下圖目錄下的13.1，當(dāng)然也可以在第二張圖上找到，都是一樣的