1.绑定域名

　　去微信公众号平台中设置js接口安全域名，要注意的是不填写http://, 只填写域名即可，如 www.baidu.com。

一个月只能修改三次，要谨慎填写。

2.引入JS文件

在页面中引入微信js脚本文件。 <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.写入config文件配置

 1 wx.config({
 2       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 3       appId: '', // 必填，公众号的唯一标识
 4       timestamp:,// 必填，后台生成的时间戳
 5       nonceStr: '',//必填，后台生成的随机字符串
 6       signature: '',//必填，后台根据token，ticket，时间戳，和随机字符串生成签名
 7       jsApiList: [
 8         'checkJsApi',
 9         'onMenuShareTimeline',
10         'onMenuShareAppMessage',
11         'onMenuShareQQ',
12         'onMenuShareWeibo',
13         'onMenuShareQZone',
14         'hideMenuItems',
15         'showMenuItems',
16         'hideAllNonBaseMenuItem',
17         'showAllNonBaseMenuItem',
18         'translateVoice',
19         'startRecord',
20         'stopRecord',
21         'onVoiceRecordEnd',
22         'playVoice',
23         'onVoicePlayEnd',
24         'pauseVoice',
25         'stopVoice',
26         'uploadVoice',
27         'downloadVoice',
28         'chooseImage',
29         'previewImage',
30         'uploadImage',
31         'downloadImage',
32         'getNetworkType',
33         'openLocation',
34         'getLocation',
35         'hideOptionMenu',
36         'showOptionMenu',
37         'closeWindow',
38         'scanQRCode',
39         'chooseWXPay',
40         'openProductSpecificView',
41         'addCard',
42         'chooseCard',
43         'openCard'
44       ]
45   });

config配置信息

4.调用接口

（1）首先要知道微信给你生成的AppID和AppSecret，

（2）根据AppId和AppSecret到https://api.weixin.qq.com/cgi-bin/token获取AccessToken。

access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）

（3）然后拿着Token到https://api.weixin.qq.com/cgi-bin/ticket/getticket获取ticket。

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）

（4）然后根据ticket和随机字符串和时间戳和当前页面的url生成Signature（签名）。

签名算法：签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

（a）{对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。

（b）对string1进行sha1签名，得到signature.

  1     public static class WeHelper
  2     {
  3         public static string appId
  4         {
  5             get
  6             {
  7                 return "";//微信开发者appId
  8             }
  9         }
 10         private static string secret
 11         {
 12             get
 13             {
 14                 return "";//微信开发者secret
 15             }
 16         }
 17 
 18         private static readonly string tokenUrl = "https://api.weixin.qq.com/cgi-bin/token";
 19 
 20         private static readonly string ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
 21 
 22         /// <summary>
 23         /// 获取Token
 24         /// </summary>
 25         /// <returns></returns>
 26         public static string GetAccessToken()
 27         {
 28             if (HttpRuntime.Cache.Get("AccessToken") == null)
 29             {
 30                 StringBuilder sbUrl = new StringBuilder();
 31                 sbUrl.AppendFormat(tokenUrl);
 32                 sbUrl.AppendFormat("?grant_type=client_credential");
 33                 sbUrl.AppendFormat("&appid={0}", appId);
 34                 sbUrl.AppendFormat("&secret={0}", secret);
 35                 using (WebClient client = new WebClient())
 36                 {
 37                     client.Encoding = Encoding.UTF8;
 38                     string data = client.UploadString(sbUrl.ToString(), string.Empty);
 39                     var result = JObject.Parse(data);
 40                     if (result["access_token"] != null && result["access_token"].Value<string>() != string.Empty)
 41                     {
 42                         string token = result["access_token"].Value<string>();
 43                         HttpRuntime.Cache.Insert("AccessToken", token, null, DateTime.Now.AddSeconds(7200), System.Web.Caching.Cache.NoSlidingExpiration);
 44                         return token;
 45                     }
 46                     else
 47                         throw new Exception(data);
 48                 }
 49             }
 50             else
 51             {
 52                 return HttpRuntime.Cache.Get("AccessToken").ToString();
 53             }
 54         }
 55         /// <summary>
 56         /// 获取token
 57         /// </summary>
 58         /// <param name="accessToken"></param>
 59         /// <returns></returns>
 60         public static string GetTicket(string accessToken)
 61         {
 62             if (HttpRuntime.Cache.Get("Ticket") == null)
 63             {
 64                 StringBuilder sbUrl = new StringBuilder();
 65                 sbUrl.AppendFormat(ticket);
 66                 sbUrl.AppendFormat("?access_token={0}", accessToken);
 67                 sbUrl.AppendFormat("&type=jsapi");
 68                 using (WebClient client = new WebClient())
 69                 {
 70                     client.Encoding = Encoding.UTF8;
 71                     string data = client.UploadString(sbUrl.ToString(), string.Empty);
 72                     var result = JObject.Parse(data);
 73                     if (result["ticket"] != null && result["ticket"].Value<string>() != string.Empty)
 74                     {
 75                         string ticket = result["ticket"].Value<string>();
 76                         HttpRuntime.Cache.Insert("Ticket", ticket, null, DateTime.Now.AddSeconds(7200), System.Web.Caching.Cache.NoSlidingExpiration);
 77                         return ticket;
 78                     }
 79                     else
 80                         throw new Exception(data);
 81                 }
 82             }
 83             else
 84             {
 85                 return HttpRuntime.Cache.Get("Ticket").ToString();
 86             }
 87         }
 88         /// <summary>
 89         /// 获取签名
 90         /// </summary>
 91         /// <param name="timestamp"></param>
 92         /// <param name="noncestr"></param>
 93         /// <param name="url"></param>
 94         /// <returns></returns>
 95         public static string GetSignature(string timestamp,string noncestr,string url)
 96         {
 97             string string1 = "jsapi_ticket=" + GetTicket(GetAccessToken()) + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;
 98             //使用sha1加密这个字符串
 99             return SHA1(string1);
100         }
101         #region 工具类
102         /// <summary>
103         /// 生成随机字符串
104         /// </summary>
105         /// <returns></returns>
106         public static string CreateNonceStr()
107         {
108             int length = 16;
109             string chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
110             string str = "";
111             var rad = new Random();
112             for (int i = 0; i < length; i++)
113             {
114                 str += chars.Substring(rad.Next(0, chars.Length - 1), 1);
115             }
116             return str;
117         }
118 
119         /// <summary>
120         /// 加密
121         /// </summary>
122         /// <param name="str"></param>
123         /// <returns></returns>
124         public static string SHA1(string str)
125         {
126             str = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToString();
127             return str.ToLower();
128         }
129 
130         /// <summary>
131         /// 生成时间戳
132         /// </summary>
133         /// <returns></returns>
134         public static string CreateTimestamp()
135         {
136             TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
137             string timestamp = Convert.ToInt64(ts.TotalSeconds).ToString();
138             return timestamp;
139         } 
140         #endregion
141     }

微信helper生成签名

 1         /// <summary>
 2         /// 获取微信信息
 3         /// </summary>
 4         /// <returns></returns>
 5         public ActionResult GetWeInfo()
 6         {
 7             string timpstamp = WeHelper.CreateTimestamp();
 8             string nonceStr = WeHelper.CreateNonceStr();
 9             string url = Request.Url.ToString();
10             string sig = WeHelper.GetSignature(timpstamp, nonceStr, url);
11 
12             return Json(new
13             {
14                 appId= WeHelper.appId,
15                 timpstamp = timpstamp,
16                 noncestr = nonceStr,
17                 signature = WeHelper.SHA1(sig)
18             });
19         }

后台接口

5前台页面

首先要将微信的config信息写入。可以ajax调用。或者后台输出到前台。这里使用ajax调用。

 1     $(function () {
 2         $.ajax({
 3             type: "post",
 4             dataType: "json",
 5             url: "/Home/GetWeInfo",
 6             success: function (data) {
 7                 wx.config({
 8                     debug: false,
 9                     appId: data.appId,//微信开发者appId
10                     timestamp: data.timestamp,//后台生成的时间戳
11                     nonceStr: data.noncestr,//随机字符串
12                     signature: data.signature,//后台生成的签名
13                     jsApiList: ['checkJsApi', 'scanQRCode']//要调用的微信接口
14                 });
15             }
16         });
17     });

微信config信息写入

 1    <a class="btn btn-default" onclick="scan()">点击扫一扫</a>
 2 
 3  function scan() {
 4         wx.scanQRCode({
 5             needResult: 1,
 6             scanType: ["qrCode"],
 7             desc: 'scanQRCode desc',
 8             success: function (res) {
 9                 alert(JSON.stringify(res));//这里可以获取到扫描得到的内容。
10             }
11         });
12     }

点击按钮扫一扫

备注：

要注意的是token与ticketd在微信端都有7200秒的缓存。并且第一步的URL和第四部的URL都要按照微信要求的格式填写，不要写成局域网的地址。

在微信端调试非常费劲，因为每次都要发布到正式环境。

建议后台多用日志，前台多用log输出或者alert输出，也可以使用微信开发者工具。

如果一切都配置成功的话，返回结果如下：

posted on 2017-07-25 14:53 已经超神阅读(4301) 评论(2) 编辑收藏举报