不得不说,微信开发平台给的文档还是很多的,但是,细节没有到位,相信大家都觉得微信坑比,哈哈。话不多说,开始进入代码。
首先说说微信jssdk的问题,刚开始公众号jssdk是在后台加载,但是,我踩到了和大家一样的坑,微信二次分享(A==>B,B==>C),B分享到C的时候,jssdk如果是在后台加载,微信会在你地址栏上面追加参数,比如说form=xxx,这个时候,就算你在前端处理过url,后台还是jssdk路径错误,这个是不可避免的,所以,我把jssdk加载放置前端通过ajax加载,这样每次分享的jssdk都能成功加载:
$.post('${basePath}/wx/jssdk.do',{url:location.href.split('#')[0]},function(row){//url直接用当前路径后台代码自己构造,微信给出很详细了
console.log(row);
//appId=row.rows.appId;
wx.config({
debug: true,
appId: row.rows.appId,
timestamp: row.rows.timestamp,
nonceStr: row.rows.nonceStr,
signature: row.rows.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
})
这个时候,无论是怎么分享,jssdk都是加载成功的。
下面是分享的具体代码:
var onceId = uuid();
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: '111', // 分享标题
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
success: function () {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='2';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: '111', // 分享标题
desc: '222', // 分享描述
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+encodeURIComponent(thisUrl)+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标${basePath}/images/wechat/h1.jpg
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function (data) {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='1';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
})
这里只拿分享给朋友和朋友圈为例,其他分享意义不大,这里会看到一个link,这个link是分享地址,大家应该看到我有注掉一行代码,这里又有一个坑了,直接分享网页授权,朋友圈是无法分享的,你表面上是分享成功了,实际上你分享出去的东西只有你自己可见,别人的朋友圈不会出现你分享的内容(亲测)。所以,我们还是要分享当前路径,出去一些不必要参数的路径,下面贴完整代码:
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
$(function () {
var isShare=false;
if(getQueryString('shareId')!=null){
isShare=true;
}
var thisUrl=location.href;
if(thisUrl.indexOf("?")>0){
thisUrl=thisUrl.substring(0, thisUrl.indexOf("?"));
}
var data={shareUrl:thisUrl};
var openId='${openId}';
$.post('${basePath}/wx/jssdk.do',{url:location.href.split('#')[0]},function(row){
console.log(row);
//appId=row.rows.appId;
wx.config({
debug: true,
appId: row.rows.appId,
timestamp: row.rows.timestamp,
nonceStr: row.rows.nonceStr,
signature: row.rows.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
//alert('1');
if(isShare==true){
//通过分享进入页面
//alert('2');
var fromurl=thisUrl;
var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+row.rows.appId+'&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_userinfo&state=getopen#wechat_redirect';
location.href=url;
}else{
//通过公众号进入
if(getQueryString('state')=='ok'){
$("#follow").hide();
}else if(getQueryString('state')=='getopen'){
//通过网页授权二次进入
var access_code=getQueryString('code');
if (access_code==null){
//alert('2');
var fromurl=thisUrl;
var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+row.rows.appId+'&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_userinfo&state=getopen#wechat_redirect';
location.href=url;
} else {
//alert(access_code);
$.post('${basePath}/wx/openid.do',{code:access_code},function(result){
console.log(result);
//alert(result.rows.openId);
//alert(result.rows.accessToken);
openId=result.rows.openId;
$.post('${basePath}/wx/checkofollow.do',{openId:result.rows.openId},function(ret){
console.log(ret);
//alert(ret.rows.subscribe);
if(ret!=null&&ret.rows.subscribe=='1'){
$("#follow").hide();
}else{
$("#follow").show();
}
});
});
}
}
}
});
var onceId = uuid();
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: '111', // 分享标题
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
success: function () {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='2';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: '111', // 分享标题
desc: '222', // 分享描述
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+encodeURIComponent(thisUrl)+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标${basePath}/images/wechat/h1.jpg
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function (data) {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='1';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
//分享到QQ
wx.onMenuShareQQ({
title: '111', // 分享标题
desc: '222', // 分享描述
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
success: function () {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='9';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
//分享到腾讯微博
wx.onMenuShareWeibo({
title: '111', // 分享标题
desc: '222', // 分享描述
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', // 分享链接
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
success: function () {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='9';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
//alert('222');
// 用户取消分享后执行的回调函数
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: '111', // 分享标题
desc: '222', // 分享描述
link: thisUrl+'?shareId='+onceId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId+'&redirect_uri='+thisUrl+'&response_type=code&scope=snsapi_userinfo&state='+onceId+'#wechat_redirect', // 分享链接
imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
success: function () {
data.shareUrl=thisUrl+'?shareId='+onceId;
data.shareId=onceId;
data.shareModel='9';
data.shareType='9';
data.openId=openId;
httpPost('${basePath}/wx/clientshare.do',data);
onceId = uuid();
// 用户确认分享后执行的回调函数
//alert('success');
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
});
通过标识符判断用户是否通过分享进入到公众号,如果是,则进行跳转网页授权获取用户详情,然后获取用户是否关注公众号(如何获取参考微信文档),然后显示按钮标签什么的,用户如果点击就出你们做好的关注页面。ps后台代码就不贴出来了,微信文档给的都很详细。希望能帮助到大家,不懂的可以私。对了,这里还有一个坑,微信有两个token,网页授权是一个token,还有一个是7200秒的token,获取用户详情的时候,调用的是7200秒的token,不要用错了哦