溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求:點擊我們公司的微信公眾號，從菜單欄中進入會員中心，如果是新會員則需綁定注冊，注冊完跳轉到用戶中心頁面，然后給用戶發會員卡，如果是老會員，如果以前沒有的會員卡的，發一張會員卡給他，如果有，則不做任何處理。
實現:我的思路是這樣的，進入會員中心，調用微信API接口，判斷用戶是否領過卡,若沒有領取，則調用微信JS-JDK的addCard()接口。具體實現過程如下(用C#實現)：
1創建會員卡
1) 先打開微信開發者文檔,先調用創建會員卡接口，在文檔的4.1 創建會員卡接口，直接用postman，詳情見文檔。
創建的時候要特別注意”use_custom_code”: false,”bind_openid“：false兩個字段
第一個為是否自定義code，第二個是否綁定openid，這個很重要，很重要，很重要！！！因為后面調用JS-JDK的addCard接口所需要的簽名會根據這兩個的值決定是否加入openid和code進行簽名的生成(被坑了很久)。后面會詳細說明這個簽名，先一步步來，記住這兩個參數一定要注意。按照這個文檔說明，創建會員卡應該沒有什么問題，對了， “sku”: { “quantity”: 50000000 }這個是庫存，要添加一點庫存。
2調用微信JS-SDK
1)引入微信js
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2)通過config接口注入權限驗證配置
<script>
$(function () {
//判斷是否已經領取會員卡
$.ajax({
url: '/User/ExitCard',
type: 'GET',
success: function (data) {
if (data.Status == 1)
//1代表沒有存在卡，0代表存在卡
wxAddCard();
}
});
}
//微信添加卡券
function wxAddCard() {
//微信sdk config
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: '', // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
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>
我這里是進入頁面就調取接口看是否已經領卡，沒有領卡，則調用微信接口，用戶點擊領取，然后調取激活接口，將會員卡激活，下面講述簽名的生成。
3)簽名的配置
上一小節中的wx.config中appid為公眾號的唯一標識，自己填自身微信公眾號的，timestamp，nonceStr，signature三個簽名其實就是為了加密吧。（以下代碼都是用C#實現）
timestamp的生成:
/// <summary>
/// 創建時間戳 ///本代碼來自開源微信SDK項目：https://github.com/night-king/weixinSDK
/// </summary>
/// <returns></returns>
public long CreatenTimestamp()
{
return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
}
nonceStr的生成:
/// <summary>
/// 創建隨機字符串 ///本代碼來自開源微信SDK項目：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四個參數，先使用ASCII算法排序(其實就是看他們的字母順序 j,n,t,u排序，如果首字母相等看第二位，以此類推)，先等鍵進行排序，然后拼接例如jsapi_ticket=xxx&noncestr=&….我這里已經自己手動排序了，所以沒實現ASCCII排序，排序完之后，使用sha1加密，代碼如下:
/// <summary>
/// 簽名算法 ///本代碼來自開源微信SDK項目：https://github.com/night-king/weixinSDK
/// </summary>
/// <param name="jsapi_ticket">jsapi_ticket</param>
/// <param name="noncestr">隨機字符串(必須與wx.config中的nonceStr相同)</param>
/// <param name="timestamp">時間戳(必須與wx.config中的timestamp相同)</param>
/// <param name="url">當前網頁的URL，不包含#及其后面部分(必須是調用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加密 網上可以找到
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"));//加密結果"x2"結果為32位,"x3"結果為48位,"x4"結果為64位
}
return strbul.ToString();
}
返回wx.config所需要的四個參數appId，timestamp，nonceStr，signature。
沒有意外的話可以成功，成功自動進入 wx.ready(function () {｝中。
wx.addCard({
cardList: [{
cardId: '',//吧你前面創建會員卡成功返回的參數中的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))
}
});
cardExt的signature簽名生成由你創建會員卡的時候設置的”use_custom_code”: false,”bind_openid“：false決定，當兩個為false時,則吧 paramList.Add(code);paramList.Add(openId);注釋掉，哪個為fasle，哪個就不要。
下面代碼的api_ticket與上面的jsapi_ticket完全不同，不是同一個東西，我會最最下面放出他們獲取的方法
//意思就是這里有幾個參數，那么對應的上面的 paramList.Add();就要添加幾個
//而這里的code和openid的填寫與否取決與創建會員卡是填寫的兩個字段，上面已經提及
cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'
意思就是這里有幾個參數，那么對應的上面的 paramList.Add();就要添加幾個，而這里的code和openid的填寫與否取決與創建會員卡是填寫的兩個字段，上面已經提及
3.下面貼上面后臺接口主要的代碼
1）/User/ExitCard（post微信接口，然后根據返回消息判斷是否已經領取卡，領取則為true，未領取則為false）
public bool ExitCard(string openId, string token,string code, string cardId)//token為access_token code為自定義code號
//code我這里是自定義的會員卡號
// cardId為創建會員卡時微信返回的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);//上面跟這個設置相同，自定義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請求的工具類，
自己去實現發送post請求即可，就不貼出來了。
4）總結與心得
總體流程大概就是如上，我覺得已經夠詳細了，寫這篇博客的理由就是網上關于微信這一塊的知識有，但是沒有很詳細的，讓剛接觸的人不知道如何下手，雖說看文檔可以看懂，但是微信官方文檔有很多坑，往往在文檔中一個小小的細節就讓人搞個大半天，而且報的錯誤都比較籠統，所以就打算自己寫一份比較詳細的，一個呢自己總結一下經驗，有助于自身成長，另一個為后來人鋪路，讓他們少走點彎路，往后有機會接微信其他接口，會吧流程繼續貼出來，以供參考。
獲取api_ticket的微信接口：這里寫鏈接內容
也就是在下圖目錄下的13.1，當然也可以在第二張圖上找到，都是一樣的
獲取jsapi_ticket的微信接口在附錄一,也就是目錄下的16節
這里寫鏈接內容
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
