不得不说，微信开发平台给的文档还是很多的，但是，细节没有到位，相信大家都觉得微信坑比，哈哈。话不多说，开始进入代码。
首先说说微信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，不要用错了哦
时间： 2024-10-12 04:15:33