装修公司网站建设,网站制作 杭州公司,it外包公司品牌,idea做一个自己的网站教程目录
需求与调整
代码实现
获取令牌
生成合法票据
获取有效签名
客户端准备
客户端实现
小结 需求与调整
在微信中打开网页应用后#xff0c;可以选择将地址发送给朋友进行分享#xff0c;如下图#xff1a; 在实际的应用中#xff0c;我们可能不是简单的将该网页…目录
需求与调整
代码实现
获取令牌
生成合法票据
获取有效签名
客户端准备
客户端实现
小结 需求与调整
在微信中打开网页应用后可以选择将地址发送给朋友进行分享如下图 在实际的应用中我们可能不是简单的将该网页的链接直接分享出去而是生成符合实际需要的URL微信称其为自定义分享。意思即在用户点击“转发给朋友”按钮之前进行URL等内容的更新 经过调整后再把链接发送给要分享的朋友。微信给出的关键方法是updateAppMessageShareData。
需要注意的是
最好不要再使用 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本而支持 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。
代码实现
获取令牌
获取令牌是调用API的基础请提供合法的APPID和APPSECRET示例代码如下 public string GetAccessToken(){string accessToken ;//获取配置信息Datatablestring respText ;//获取appid和appsercretstring wechat_appid ;string wechat_appsecret ;//获取josn数据string getAccessTokenUrl https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credentialappid{0}secret{1};string url string.Format(getAccessTokenUrl, wechat_appid, wechat_appsecret);HttpWebRequest request (HttpWebRequest)WebRequest.Create(url);HttpWebResponse response (HttpWebResponse)request.GetResponse();using (Stream resStream response.GetResponseStream()){StreamReader reader new StreamReader(resStream, Encoding.Default);respText reader.ReadToEnd();resStream.Close();}JavaScriptSerializer Jss new JavaScriptSerializer();Dictionarystring, object respDic (Dictionarystring, object)Jss.DeserializeObject(respText);//通过键access_token获取值try{accessToken respDic[access_token].ToString();}catch (Exception e){accessToken e.Message;}return accessToken;}生成合法票据
正式调用前需要生成合法的票据C#示例代码如下 public string getJsapi_ticket(string accessToken){string content ;try{string url https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token accessToken typejsapi;string method GET;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;Stream responseStream response.GetResponseStream();StreamReader sr new StreamReader(responseStream, Encoding.UTF8);//获取返回过来的结果content sr.ReadToEnd();dynamic resultStr JsonConvert.DeserializeObject(content, new { errcode , errmsg , ticket , expires_in }.GetType());//请求成功if (resultStr.errcode 0 resultStr.errmsg ok){content resultStr.ticket;}else{content ;}return content;}catch (Exception ex){content ex.Message;return content;}}获取有效签名
通过获取成功的票据信息生成有效签名后就可以在客户端进行调用及分享了示例代码如下 public static string GetMD5(string encypStr, string charset){string retStr;MD5CryptoServiceProvider m5 new MD5CryptoServiceProvider();//创建md5对象byte[] inputBye;byte[] outputBye;//使用GB2312编码方式把字符串转化为字节数组try{inputBye Encoding.GetEncoding(charset).GetBytes(encypStr);}catch (Exception ex){inputBye Encoding.GetEncoding(GB2312).GetBytes(encypStr);}outputBye m5.ComputeHash(inputBye);retStr System.BitConverter.ToString(outputBye);retStr retStr.Replace(-, ).ToUpper();return retStr;}/// summary/// 随机串/// /summarypublic string getNoncestr(){Random random new Random();return GetMD5(random.Next(1000).ToString(), GBK).ToLower().Replace(s, S);}/// summary/// 时间截自1970年以来的秒数/// /summarypublic string getTimestamp(){TimeSpan ts DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);return Convert.ToInt64(ts.TotalSeconds).ToString();}/// summary/// 签名加密使用SHA加密所得/// /summary/// param namecontent签名加密参数/param/// param nameencode编码UTF-8/param/// returns/returnspublic string Sha1(string content, Encoding encode){try{SHA1 sha1 new SHA1CryptoServiceProvider();byte[] bytesIn encode.GetBytes(content);byte[] bytesOut sha1.ComputeHash(bytesIn);sha1.Dispose();string result BitConverter.ToString(bytesOut);result result.Replace(-, );return result;}catch (Exception ex){throw new Exception(SHA1加密出错 ex.Message);}}/// summary/// 获取签名/// /summary/// param namejsapi_ticket微信公众号调用微信JS临时票据/param/// param namenonceStr随机串/param/// param nametimestamp时间戳/param/// param nameurl当前网页URL/param/// returns/returnspublic 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 Sha1(string1Builder.ToString(), Encoding.UTF8);}
客户端准备
我们通过准备 ViewState 传递到客户端示例代码如下
string atGetAccessToken();
string ticket getJsapi_ticket(at);
string nonceStr getNoncestr();
string timestamp getTimestamp();
string currentWebUrl Request.Url.ToString() ;
string sign GetSignature(ticket, nonceStr, Int64.Parse(timestamp), currentWebUrl);ViewState[ticket] ticket;
ViewState[nonceStr] nonceStr;
ViewState[timestamp] timestamp;
ViewState[url] currentWebUrl;
ViewState[sign] sign;客户端实现
首先需要引用腾讯JS包如下
script srchttps://res2.wx.qq.com/open/js/jweixin-1.6.0.js/script后续我们将进行初始化配置如下代码
wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。appId: , // 必填公众号的唯一标识timestamp:%ViewState[timestamp]% , // 必填生成签名的时间戳nonceStr:%ViewState[nonceStr]%, // 必填生成签名的随机串signature:%ViewState[sign]%,// 必填签名jsApiList:[updateAppMessageShareData,updateTimelineShareData,onMenuShareAppMessage, onMenuShareTimeline ]
});最后定义自定义分享函数 shareUrl 如下代码
//自定义分享
//分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致function shareUrl(title,link,desc,imgUrl){var desc document.getElementById(x_shareDesc).value;var imgUrl ;wx.updateAppMessageShareData({ title: title, // 分享标题desc: desc, // 分享描述link: link, // 分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl , // 分享图标success: function () {
// alert(更新分享地址link 信息成功);},fail: function () {
// alert(分享fail);}})
}//关键方法调用
wx.ready(function(){shareUrl();
});小结
使用微信JSSDK需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
另外为保障稳定性引入的JS最好使用http://res2.wx.qq.com/open/js/jweixin-1.6.0.js 支持https。
目前Android微信客户端不支持pushState的H5新特性所以使用pushState来实现web app的页面会导致签名失败此问题会在Android6.2中修复。
信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后config是一个客户端的异步操作所以如果需要在页面加载时就调用相关接口则须把相关接口放在ready函数中调用来确保正确执行。
error接口可处理失败验证如下所示
wx.error(function(res){// config信息验证失败会执行error函数如签名过期导致验证失败具体错误信息可以打开config的debug模式查看也可以在返回的res参数中查看对于SPA可以在这里更新签名。
});
更多的开发细节请参考 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。
再次感谢您的阅读请大家多评论指正。
