微信朋友圈分享页面(JS-SDK 1.0)

时间:2022-01-22 07:39:12

微信更新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(, , ).Ticks) / ;
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>