微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)

谁践踏了优雅 2022-05-16 05:26 128阅读 0赞

# 微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡) #

需求:点击我们公司的微信公众号，从菜单栏中进入会员中心，如果是新会员则需绑定注册，注册完跳转到用户中心页面，然后给用户发会员卡，如果是老会员，如果以前没有的会员卡的，发一张会员卡给他，如果有，则不做任何处理。  
实现:我的思路是这样的，进入会员中心，调用微信API接口，判断用户是否领过卡,若没有领取，则调用微信JS-JDK的addCard()接口。具体实现过程如下(用C\#实现)：

### 1创建会员卡 ###

1) 先打开微信开发者文档,先调用创建会员卡接口，在文档的4.1 创建会员卡接口，直接用postman，详情见文档。  
![这里写图片描述][70]

创建的时候要特别注意”use\_custom\_code”: false,”bind\_openid“：false两个字段  
![这里写图片描述][70 1]  
**第一个为是否自定义code，第二个是否绑定openid，这个很重要，很重要，很重要！！！**因为后面调用JS-JDK的addCard接口所需要的签名会根据这两个的值决定是否加入openid和code进行签名的生成(被坑了很久)。后面会详细说明这个签名，先一步步来，记住这两个参数一定要注意。按照这个文档说明，创建会员卡应该没有什么问题，对了， “sku”: \{ “quantity”: 50000000 \}这个是库存，要添加一点库存。

### 2调用微信JS-SDK ###

##### 1)引入微信js #####

##### 2)通过config接口注入权限验证配置 #####

我这里是进入页面就调取接口看是否已经领卡，没有领卡，则调用微信接口，用户点击领取，然后调取激活接口，将会员卡激活，下面讲述签名的生成。

##### 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完全不同，不是同一个东西**，**我会最最下面放出他们获取的方法**

public string GetSignature(string api_ticket, string noncestr, long timestamp, string code, string openId, string cardId)
            {
                var string1Builder = new StringBuilder();
    
                var paramList = new List<string>();
                paramList.Add(api_ticket);
                paramList.Add(cardId);
                paramList.Add(code);
                paramList.Add(noncestr);
                paramList.Add(openId);
                paramList.Add(timestamp.ToString());
                paramList.Sort(string.CompareOrdinal);
    
                var strParam = new StringBuilder();
    
                foreach (var item in paramList)
                    strParam.Append(item);
    
    
                //string1Builder.Append(api_ticket).Append(cardId).Append(code).
                // Append(noncestr).Append(openId).Append(timestamp);
    
                return ShaEncrypt.SHA1Encrypt(strParam.ToString()).ToLower();
            }

#### 意思就是这里有几个参数，那么对应的上面的 paramList.Add();就要添加几个，而这里的code和openid的填写与否取决与创建会员卡是填写的两个字段，上面已经提及 ####

//意思就是这里有几个参数，那么对应的上面的 paramList.Add();就要添加几个
    //而这里的code和openid的填写与否取决与创建会员卡是填写的两个字段，上面已经提及
     cardExt: '{"code":"","openid": "", "timestamp": "","nonce_str": "", "signature": ""}'

![这里写图片描述][70 2]

### 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的微信接口：**[这里写链接内容][Link 1]  
也就是在下图目录下的13.1，当然也可以在第二张图上找到，都是一样的  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]

**获取jsapi\_ticket的微信接口在附录一,也就是目录下的16节**

[这里写链接内容][Link 1]  
![这里写图片描述][70 5]

[70]: /images/20220516/121740d102e147e49cd9eee1fa6b1b8e.png
[70 1]: /images/20220516/2bc07a771d2241c894b9f0b27e9484a9.png
[70 2]: /images/20220516/d385ba68788e4a6394e715968e5f0b4e.png
[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[70 3]: /images/20220516/d2778298ad244c94b55056ffbe3cae16.png
[70 4]: /images/20220516/335a6638dcbf4b24b830e3034f9ab851.png
[70 5]: /images/20220516/5ed71f5f4f454dbea64144ebd6d79179.png