微信更新sdk后大量分享朋友圈代码失效,标题 缩略图 描述无法自定义
新版SDK分享文章步骤
1.绑定域名 (方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html )
2.服务端
需要生成签名供分享页面的js接口使用
用到 noncestr,jsapi_ticket,timestamp,url(分享页面的url) 四个参数
jsapi_ticket参数又要用到accesstoken -> 获取accesstoken又要用到appid和secret(这两个在微信公众号后台可以找到)
accesstoken 和 jsapi_ticket通过http请求微信接口获取,这两个接口都有请求数限制,因此需要本地存储,过期以后再从接口获取,这两个接口参考文档
accesstoken : http://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html
jsapi_ticket : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 附录1-JS-SDK使用权限签名算法
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
生成签名示例代码
public ActionResult Config(string url) { try { var token = getToken(); var ticket = getTicket(token); long time = (DateTime.UtcNow.Ticks - new DateTime(1970, 1, 1).Ticks) / 10000000; var nonceStr = getnonceStr(); var dict = new Dictionary<string, string>() { {"jsapi_ticket",ticket.Ticket}, {"noncestr",nonceStr}, {"timestamp",time.ToString()}, {"url",HttpUtility.UrlDecode(url)} }; var str = dict.OrderBy(a => a.Key) .Select(a => string.Format("{0}={1}", a.Key, a.Value)) .Aggregate((a, b) => a + "&" + b); var sign = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToLower(); return Json(new { timestamp = time, nonceStr = nonceStr, signature = sign, }, JsonRequestBehavior.AllowGet); } } catch (Exception ex) { return Content(ex.Message); } }
3.客户端
引用微信js-sdk文件
http://res.wx.qq.com/open/js/jweixin-1.0.0.js
调用wx.config注入上面服务端生成的签名验证信息,绑定监听分享朋友圈事件
示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> </head> <body ontouchstart=""> <script src="/js/jquery.min.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> function wxshare(){ var settings = { debug:false, appId:"微信公众号的APPID", title: window.document.title, desc: window.location.host, link: window.location.href, imgUrl: '', timestamp:"", nonceStr:"", signature:"" } this.share = function(options){ if(options){ $.extend(settings, options); } if(!settings.signature){ $.ajax({ type:"GET", url:"http://服务端生成签名数据API", data:{ url:encodeURIComponent(window.location.href) }, success:function(data){ $.extend(settings, data); config(); listen(); } }); }else{ config(); listen(); } } function config(){ wx.config({ debug: settings.debug, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端 打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: settings.appId, // 必填,公众号的唯一标识 timestamp: settings.timestamp, // 必填,生成签名的时间戳 nonceStr: settings.nonceStr, // 必填,生成签名的随机串 signature: settings.signature,// 必填,签名,见附录1 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); } function listen(){ wx.ready(function () { wx.onMenuShareAppMessage({ title: settings.title, desc: settings.desc, link: settings.link, imgUrl: settings.imgUrl, trigger: function (res) { }, success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); wx.onMenuShareTimeline({ title: settings.title, desc: settings.desc, link: settings.link, imgUrl: settings.imgUrl, trigger: function (res) { }, success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); wx.onMenuShareQQ({ title: settings.title, desc: settings.desc, link: settings.link, imgUrl: settings.imgUrl, trigger: function (res) { }, success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); wx.onMenuShareWeibo({ title: settings.title, desc: settings.desc, link: settings.link, imgUrl: settings.imgUrl, trigger: function (res) { }, success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); }); } } $(function(){ new wxshare().share({ title:'mytitle', desc:'mydesc', link:window.location.href, imgUrl:'xxx' }); }) </script> </html>