微信JS-SDK實(shí)現(xiàn)微信會(huì)員卡功能(給用戶(hù)微信卡包里發(fā)送會(huì)員卡)
需求:點(diǎn)擊我們公司的微信公眾號(hào),從菜單欄中進(jìn)入會(huì)員中心,如果是新會(huì)員則需綁定注冊(cè),注冊(cè)完跳轉(zhuǎn)到用戶(hù)中心頁(yè)面,然后給用戶(hù)發(fā)會(huì)員卡,如果是老會(huì)員,如果以前沒(méi)有的會(huì)員卡的,發(fā)一張會(huì)員卡給他,如果有,則不做任何處理。
實(shí)現(xiàn):我的思路是這樣的,進(jìn)入會(huì)員中心,調(diào)用微信API接口,判斷用戶(hù)是否領(lǐng)過(guò)卡,若沒(méi)有領(lǐng)取,則調(diào)用微信JS-JDK的addCard()接口。具體實(shí)現(xiàn)過(guò)程如下(用C#實(shí)現(xiàn)):
1創(chuàng)建會(huì)員卡
1) 先打開(kāi)微信開(kāi)發(fā)者文檔,先調(diào)用創(chuàng)建會(huì)員卡接口,在文檔的4.1 創(chuàng)建會(huì)員卡接口,直接用postman,詳情見(jiàn)文檔。
創(chuàng)建的時(shí)候要特別注意”use_custom_code”: false,”bind_openid“:false兩個(gè)字段
第一個(gè)為是否自定義code,第二個(gè)是否綁定openid,這個(gè)很重要,很重要,很重要?。?!因?yàn)楹竺嬲{(diào)用JS-JDK的addCard接口所需要的簽名會(huì)根據(jù)這兩個(gè)的值決定是否加入openid和code進(jìn)行簽名的生成(被坑了很久)。后面會(huì)詳細(xì)說(shuō)明這個(gè)簽名,先一步步來(lái),記住這兩個(gè)參數(shù)一定要注意。按照這個(gè)文檔說(shuō)明,創(chuàng)建會(huì)員卡應(yīng)該沒(méi)有什么問(wèn)題,對(duì)了, “sku”: { “quantity”: 50000000 }這個(gè)是庫(kù)存,要添加一點(diǎn)庫(kù)存。
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)通過(guò)config接口注入權(quán)限驗(yàn)證配置
<script> $(function () { //判斷是否已經(jīng)領(lǐng)取會(huì)員卡 $.ajax({ url: '/User/ExitCard', type: 'GET', success: function (data) { if (data.Status == 1) //1代表沒(méi)有存在卡,0代表存在卡 wxAddCard(); } }); } //微信添加卡券 function wxAddCard() { //微信sdk config wx.config({ debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: '', // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: '', // 必填,生成簽名的時(shí)間戳 nonceStr: '', // 必填,生成簽名的隨機(jī)串 signature: '',// 必填,簽名,見(jiàn)附錄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接口列表見(jiàn)附錄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)入頁(yè)面就調(diào)取接口看是否已經(jīng)領(lǐng)卡,沒(méi)有領(lǐng)卡,則調(diào)用微信接口,用戶(hù)點(diǎn)擊領(lǐng)取,然后調(diào)取激活接口,將會(huì)員卡激活,下面講述簽名的生成。
3)簽名的配置
上一小節(jié)中的wx.config中appid為公眾號(hào)的唯一標(biāo)識(shí),自己填自身微信公眾號(hào)的,timestamp,nonceStr,signature三個(gè)簽名其實(shí)就是為了加密吧。(以下代碼都是用C#實(shí)現(xiàn))
timestamp的生成:
/// <summary> /// 創(chuàng)建時(shí)間戳 ///本代碼來(lái)自開(kāi)源微信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ī)字符串 ///本代碼來(lái)自開(kāi)源微信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四個(gè)參數(shù),先使用ASCII算法排序(其實(shí)就是看他們的字母順序 j,n,t,u排序,如果首字母相等看第二位,以此類(lèi)推),先等鍵進(jìn)行排序,然后拼接例如jsapi_ticket=xxx&noncestr=&….我這里已經(jīng)自己手動(dòng)排序了,所以沒(méi)實(shí)現(xiàn)ASCCII排序,排序完之后,使用sha1加密,代碼如下:
/// <summary> /// 簽名算法 ///本代碼來(lái)自開(kāi)源微信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)頁(yè)的URL,不包含#及其后面部分(必須是調(diào)用JS接口頁(yè)面的完整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所需要的四個(gè)參數(shù)appId,timestamp,nonceStr,signature。
沒(méi)有意外的話可以成功,成功自動(dòng)進(jìn)入 wx.ready(function () {}中。
wx.addCard({ cardList: [{ cardId: '',//吧你前面創(chuàng)建會(huì)員卡成功返回的參數(shù)中的cardId寫(xiě)進(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)建會(huì)員卡的時(shí)候設(shè)置的”use_custom_code”: false,”bind_openid“:false決定,當(dāng)兩個(gè)為false時(shí),則吧 paramList.Add(code);paramList.Add(openId);注釋掉,哪個(gè)為fasle,哪個(gè)就不要。
下面代碼的api_ticket與上面的jsapi_ticket完全不同,不是同一個(gè)東西,我會(huì)最最下面放出他們獲取的方法
//意思就是這里有幾個(gè)參數(shù),那么對(duì)應(yīng)的上面的 paramList.Add();就要添加幾個(gè) //而這里的code和openid的填寫(xiě)與否取決與創(chuàng)建會(huì)員卡是填寫(xiě)的兩個(gè)字段,上面已經(jīng)提及 cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'
意思就是這里有幾個(gè)參數(shù),那么對(duì)應(yīng)的上面的 paramList.Add();就要添加幾個(gè),而這里的code和openid的填寫(xiě)與否取決與創(chuàng)建會(huì)員卡是填寫(xiě)的兩個(gè)字段,上面已經(jīng)提及
3.下面貼上面后臺(tái)接口主要的代碼
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號(hào) //code我這里是自定義的會(huì)員卡號(hào) // cardId為創(chuàng)建會(huì)員卡時(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(激活會(huì)員卡)
//激活會(huì)員卡 public Boolean ActiveCard(string accessToken,string bonus,string cardNo,string cardId) //bonus為用戶(hù)積分 cardNo 卡號(hào) cardId卡ID { var data = new Hashtable(); data.Add("init_bonus", bonus); data.Add("membership_number", cardNo); data.Add("code", cardNo);//上面跟這個(gè)設(shè)置相同,自定義code放在微信會(huì)員卡卡上面 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請(qǐng)求的工具類(lèi),
自己去實(shí)現(xiàn)發(fā)送post請(qǐng)求即可,就不貼出來(lái)了。
4)總結(jié)與心得
總體流程大概就是如上,我覺(jué)得已經(jīng)夠詳細(xì)了,寫(xiě)這篇博客的理由就是網(wǎng)上關(guān)于微信這一塊的知識(shí)有,但是沒(méi)有很詳細(xì)的,讓剛接觸的人不知道如何下手,雖說(shuō)看文檔可以看懂,但是微信官方文檔有很多坑,往往在文檔中一個(gè)小小的細(xì)節(jié)就讓人搞個(gè)大半天,而且報(bào)的錯(cuò)誤都比較籠統(tǒng),所以就打算自己寫(xiě)一份比較詳細(xì)的,一個(gè)呢自己總結(jié)一下經(jīng)驗(yàn),有助于自身成長(zhǎng),另一個(gè)為后來(lái)人鋪路,讓他們少走點(diǎn)彎路,往后有機(jī)會(huì)接微信其他接口,會(huì)吧流程繼續(xù)貼出來(lái),以供參考。
獲取api_ticket的微信接口:這里寫(xiě)鏈接內(nèi)容
也就是在下圖目錄下的13.1,當(dāng)然也可以在第二張圖上找到,都是一樣的
獲取jsapi_ticket的微信接口在附錄一,也就是目錄下的16節(jié)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ES6新特性三: Generator(生成器)函數(shù)詳解
這篇文章主要介紹了ES6新特性之Generator(生成器)函數(shù),簡(jiǎn)單分析了Generator(生成器)函數(shù)的功能、定義、調(diào)用方法并結(jié)合實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2017-04-04JavaScript數(shù)組去重的幾種方法效率測(cè)試
JavaScript數(shù)組去重是前端面試酷愛(ài)的問(wèn)題,問(wèn)題簡(jiǎn)單而又能看出程序員對(duì)計(jì)算機(jī)程序執(zhí)行過(guò)程的理解如何。數(shù)組去重的方法有很多,到底哪種是最理想的我不清楚。于是我測(cè)試了下數(shù)組去重的效率。測(cè)試二十萬(wàn)個(gè)數(shù)據(jù),隨著數(shù)據(jù)越多效率很明顯的就體驗(yàn)了出來(lái)。下面來(lái)一起看看吧。2016-10-10微信企業(yè)號(hào)開(kāi)發(fā)之微信考勤Cookies的使用
使用微信考勤,每次使用微信企業(yè)號(hào)開(kāi)發(fā):微信用戶(hù)信息和web網(wǎng)頁(yè)的session的關(guān)系這個(gè)里邊的方法,調(diào)用微信的接口,有點(diǎn)慢,微信官方也推薦使用Cookies,但如何使用Cookies,自己卻一直沒(méi)有搞清楚。下面小編幫大家解決難題,需要的朋友可以參考下2015-09-09錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)...2007-08-08簡(jiǎn)單談?wù)凜ommonsChunkPlugin抽取公共模塊
下面小編就為大家分享一篇簡(jiǎn)單談?wù)凜ommonsChunkPlugin抽取公共模塊,具有很的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12