引言:
工作中开发微信网站,简称微网站。由于微网站的分享内容是系统自动选取的当前网址,客户需要改变分享的内容,即点击屏幕右上角的分享按钮,选择发送给朋友和发送到朋友圈,其中的内容和图片需要自定义。于是查找文档微信JS-SDK说明文档一文和网站众多高手的经验,大体知道了调用的步骤,但是具体如何调用才能成功却是不了解的。经过一番试验,终于成功调用发送朋友和发送到朋友圈两个接口,此处记录调用的具体过程。
步骤一:引用js文件。
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
步骤二:通过config接口注入权限验证配置
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: ‘‘, // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: ‘‘, // 必填,生成签名的随机串 signature: ‘‘,// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });
网上众多网友也是这样写的,但是具体如果配却谈之甚少,接下来介绍本文是如何调用的。
debug和appId,都不用说,很简单。
timespan生成签名的时间戳:
/// <summary> /// 生成时间戳 /// 从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间,且最终需要转换为字符串形式 /// </summary> /// <returns></returns> public string getTimestamp() { TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0); return Convert.ToInt64(ts.TotalSeconds).ToString(); }
nonceStr生成签名的随机串:
/// <summary> /// 生成随机字符串 /// </summary> /// <returns></returns> public string getNoncestr() { Random random = new Random(); return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK"); }
singature签名的生成比较麻烦。
首先生成获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token)
public string Getaccesstoken() { string appid = System.Configuration.ConfigurationManager.AppSettings["WXZjAppID"].ToString(); string secret = System.Configuration.ConfigurationManager.AppSettings["WXZjAppSecret"].ToString(); string urljson = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + secret; string strjson = ""; UTF8Encoding encoding = new UTF8Encoding(); HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(urljson); myRequest.Method = "GET"; myRequest.ContentType = "application/x-www-form-urlencoded"; HttpWebResponse response; Stream responseStream; StreamReader reader; string srcString; response = myRequest.GetResponse() as HttpWebResponse; responseStream = response.GetResponseStream(); reader = new System.IO.StreamReader(responseStream, Encoding.UTF8); srcString = reader.ReadToEnd(); reader.Close(); if (srcString.Contains("access_token")) { //CommonJsonModel model = new CommonJsonModel(srcString); HP.CPS.BLL.WeiXin.CommonJsonModel model = new BLL.WeiXin.CommonJsonModel(srcString); strjson = model.GetValue("access_token"); Session["access_tokenzj"] = strjson; } return strjson; }
接着获取jsapi_ticket:
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket)
public string Getjsapi_ticket() { string accesstoken = (string)Session["access_tokenzj"]; string urljson = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesstoken + "&type=jsapi"; string strjson = ""; UTF8Encoding encoding = new UTF8Encoding(); HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(urljson); myRequest.Method = "GET"; myRequest.ContentType = "application/x-www-form-urlencoded"; HttpWebResponse response = myRequest.GetResponse() as HttpWebResponse; Stream responseStream = response.GetResponseStream(); StreamReader reader = new System.IO.StreamReader(responseStream, Encoding.UTF8); string srcString = reader.ReadToEnd(); reader.Close(); if (srcString.Contains("ticket")) { HP.CPS.BLL.WeiXin.CommonJsonModel model = new BLL.WeiXin.CommonJsonModel(srcString); strjson = model.GetValue("ticket"); Session["ticketzj"] = strjson; } return strjson; }
最后生成signature:
public string Getsignature(string nonceStr, string timespanstr) { if (Session["access_tokenzj"] == null) { Getaccesstoken(); } if (Session["ticketzj"] == null) { Getjsapi_ticket(); } string url = Request.Url.ToString(); string str = "jsapi_ticket=" + (string)Session["ticketzj"] + "&noncestr=" + nonceStr + "×tamp=" + timespanstr + "&url=" + url;// +"&wxref=mp.weixin.qq.com"; string singature = SHA1Util.getSha1(str); string ss = singature; return ss; }
本文调用实例:
<script type="text/javascript"> wx.config({ debug: false, appId: ‘<%=corpid %>‘, timestamp: <%=timestamp%>, nonceStr: ‘<%=nonceStr%>‘, signature: ‘<%=signature %>‘, jsApiList: [‘onMenuShareTimeline‘, ‘onMenuShareAppMessage‘] }); </script>
步骤三:调用接口
在进行完第二步的调用后,步骤三就显得非常轻巧了。
wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 });
本文的调用实例是:
<script type="text/javascript" > wx.ready(function () { wx.onMenuShareAppMessage({ title: ‘<%=shareTitle %>‘, desc: ‘<%=shareContent %>‘, link: ‘<%=currentUrl %>‘, imgUrl: ‘<%=shareImageUrl %>‘ }); wx.onMenuShareTimeline({ title: ‘<%=shareContent %>‘, link: ‘<%=currentUrl %>‘, imgUrl: ‘<%=shareImageUrl %>‘ }); }) </script>
本文基本上总结到此处。
易出现的问题:
1、检查后台是否设置:右上角公众号名称--功能设置--JS接口安全域名
2、检查代码里的appid和公众号后台的id是否一致
3、图片的调用地址是绝对路径(相对路径好像不行)。
引用文档:
微信JS-SDK说明文档
补充:
、、