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


Posted in Javascript onJuly 25, 2019

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

1创建会员卡

1) 先打开微信开发者文档,先调用创建会员卡接口,在文档的4.1 创建会员卡接口,直接用postman,详情见文档。

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

创建的时候要特别注意”use_custom_code”: false,”bind_openid“:false两个字段

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

第一个为是否自定义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的填写与否取决与创建会员卡是填写的两个字段,上面已经提及


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

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,当然也可以在第二张图上找到,都是一样的

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

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

获取jsapi_ticket的微信接口在附录一,也就是目录下的16节

这里写链接内容

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
微信小程序实现左滑动删除效果
Mar 30 #Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
小程序实现左滑删除效果
Jul 25 #Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 #Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python正则捕获操作示例
2017/08/19 Python
django反向解析和正向解析的方式
2018/06/05 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python 的AES加密与解密实现
2019/07/09 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
七年级数学教学反思
2014/01/22 职场文书
保护环境建议书300字
2014/05/13 职场文书
会议室标语
2014/06/21 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2014离婚协议书范文
2014/09/10 职场文书
质量主管工作职责
2014/09/26 职场文书
违纪学生保证书
2015/02/27 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS