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 });
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 + "×tamp=" + 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 }
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 });
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輸出，也可以使用微信開發者工具。
如果一切都配置成功的話，返回結果如下：
