1.前端
1.1 导入微信端的JS
如果你的网址是http,则地址为 http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如果你的网址是https,则地址为 https://res.wx.qq.com/open/js/jweixin-1.0.0.js
1.2 调用后台,获取需要的配置
调用后台,需要的配置为:appId、timestamp、nonceStr、signature
appId为公众号的appId,timestamp为后台返回的时间戳,nonceStr为后台生成的随机字符串,signature为后台生成的签名。
1.3 调用完后台后,加载微信分享配置
1 wx.config({ 2 debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 3 appId: appId, // 必填,公众号的唯一标识 4 timestamp: timestamp, // 必填,生成签名的时间戳 5 nonceStr: nonceStr, // 必填,生成签名的随机串 6 signature: signature,// 必填,签名,见附录1 7 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,这里调用的是分享到朋友圈和分享给朋友 8 });
1.4 再检测JS接口列表
wx.checkJsApi({ jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表 success: function(res) { // 以键值对的形式返回,可用的api值true,不可用为false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } });
1.5 wx read,分享配置
在上面1.3步骤完成后,config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
ready函数中包含写一些分享配置信息。如分享到朋友圈、分享给朋友的配置信息。
1 wx.ready(function(){ 2 //分享到朋友圈 3 wx.onMenuShareTimeline({ 4 title:'分享标题', // 分享标题 5 link: 'http://'+location.host+'/GFMain/GetIntoFundStartWithShare?pid='+GetQueryString('pid')||'', // 分享链接 6 imgUrl: 'http://'+location.host+'/img/share.png', // 分享图标 7 success: function () { 8 // 用户确认分享后执行的回调函数 9 }, 10 cancel: function () { 11 // 用户取消分享后执行的回调函数 12 } 13 }); 14 15 //分享给朋友 16 wx.onMenuShareAppMessage({ 17 title:'分享标题', // 分享标题 18 desc: '分享描述', // 分享描述 19 link: 'http://'+location.host+'/xxx/', // 分享链接 20 imgUrl: 'http://'+location.host+'/img/share.png', // 分享图标 21 type: 'link', // 分享类型,music、video或link,不填默认为link 22 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 23 success: function () { 24 // 用户确认分享后执行的回调函数 25 }, 26 cancel: function () { 27 // 用户取消分享后执行的回调函数 28 } 29 }); 30 });
1.6 错误回调
config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
1 //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 2 wx.error(function(res){ 3 });
2.后端
2.1 前端调用后端
在上面的1.2中,前端开始调用后端,后端获取前端的参数为:前端当前的整个url,包括参数(包括参数)。例如:http://www.cjt.com/alunchen?pid=xxx&home=1
这里需要注意的是参数名字全部最好是小写,大写会自定义分享不了。
2.2 获取ticket
首先要获取ticket,因为ticket主要是我们从微信获取的,其他返回给前端的参数都是我们从ticket之上在做一些数据处理。所以,ticket是所有返回数据的根本。
通过访问微信的API获取token,获取ticket之前要首先获取token,因为ticket获取要传一个token给微信。
// 获取Token public static string GetToken(string appid, string secret) { Log.Info("进入GetToken"); string strJson = RequestUrl(string.Format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}", appid, secret)); Log.Info(string.Format("strJson:{0}", strJson)); return CPublicMethod.GetJsonValue(strJson, "access_token"); } //公共方法,request网络获取 public static string RequestUrl(string url, string method) { // 设置参数 HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest; CookieContainer cookieContainer = new CookieContainer(); request.CookieContainer = cookieContainer; request.AllowAutoRedirect = true; request.Method = method; request.ContentType = "text/html"; request.Headers.Add("charset", "utf-8"); //发送请求并获取相应回应数据 HttpWebResponse response = request.GetResponse() as HttpWebResponse; //直到request.GetResponse()程序才开始向目标网页发送Post请求 Stream responseStream = response.GetResponseStream(); StreamReader sr = new StreamReader(responseStream, Encoding.UTF8); //返回结果网页(html)代码 string content = sr.ReadToEnd(); return content; } //公共方法,获取Json public string GetJsonValue(string jsonStr, string key) { string result = string.Empty; if (!string.IsNullOrEmpty(jsonStr)) { key = "\"" + key.Trim('"') + "\""; int index = jsonStr.IndexOf(key) + key.Length + 1; if (index > key.Length + 1) { //先截逗号,若是最后一个,截“}”号,取最小值 int end = jsonStr.IndexOf(',', index); if (end == -1) { end = jsonStr.IndexOf('}', index); } result = jsonStr.Substring(index, end - index); result = result.Trim(new char[] { '"', ' ', '\'' }); //过滤引号或空格 } } return result; }
通过上面的返回的token获取ticket
1 //获取ticket 2 public string getJsApiTicket(string appid, string appSecret) 3 { 4 5 //这里开始从微信API获取ticket 6 string token = GetToken(appid, appSecret); 7 string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" + token + ""; 8 Jsapi api = JsonConvert.DeserializeObject(httpGet(url)); 9 string ticket = api.ticket; 10 return ticket; 11 } 12 13 //公共方法,发起一个http请球,返回值 14 private string httpGet(string url) 15 { 16 try 17 { 18 WebClient MyWebClient = new WebClient(); 19 MyWebClient.Credentials = CredentialCache.DefaultCredentials;//获取或设置用于向Internet资源的请求进行身份验证的网络凭据 20 Byte[] pageData = MyWebClient.DownloadData(url); //从指定网站下载数据 21 string pageHtml = System.Text.Encoding.Default.GetString(pageData); //如果获取网站页面采用的是GB2312,则使用这句 22 23 return pageHtml; 24 } 25 26 27 catch (WebException webEx) 28 { 29 Console.WriteLine(webEx.Message.ToString()); 30 return null; 31 } 32 }
备注:这里需要注意的是,由于获取ticket的失效时间为7200秒(目前来说),所以我们每次获取到的ticket都要保持在数据库,等到ticket超过7200秒时再获取一次。我们这里设计的数据库有两个字段:ticket、ticket_expires。ticket为ticket字符串值,ticket_expires为失效时间。
2.3 返回时间戳、随机字符串、签名、appid
string jsapiTicket = getJsApiTicket(appid, appSecret); // 返回时间戳 string timestamp = Convert.ToString(ConvertDateTimeInt(DateTime.Now)); // 返回创建随机字符串 string nonceStr = createNonceStr(); // 返回签名signature string rawstring = "jsapi_ticket=" + jsapiTicket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + pathurl + ""; string signature = SHA1_Hash(rawstring); // 返回的appid string appid = "xxx"; //创建随机字符串 public string createNonceStr() { int length = 16; string chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; string str = ""; Random rad = new Random(); for (int i = 0; i < length; i++) { str += chars.Substring(rad.Next(0, chars.Length - 1), 1); } return str; } public string SHA1_Hash(string str_sha1_in) { SHA1 sha1 = new SHA1CryptoServiceProvider(); byte[] bytes_sha1_in = System.Text.UTF8Encoding.Default.GetBytes(str_sha1_in); byte[] bytes_sha1_out = sha1.ComputeHash(bytes_sha1_in); string str_sha1_out = BitConverter.ToString(bytes_sha1_out); str_sha1_out = str_sha1_out.Replace("-", "").ToLower(); return str_sha1_out; }
详细请看微信官方说明:
http://qydev.weixin.qq.com/wiki/index.php?title=WeixinJS%E6%8E%A5%E5%8F%A3