版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
今天居然又涨了一个粉丝好开心，最近在帮朋友做公众号，顺便记录下遇到的问题。其实我已经解决N多问题了，都是找各种资料，各种试错，从前端到后台。这个二次分享的bug只是其中一个，如果大家有什么疑问来问我吧 哈哈
===================== 心情再差也要写代码的分割线 ====================
正常的分享页面前端代码：
// 微信分享示例
$(function () {
wechartInit();
});
function wechartInit() {
var localURL = location.href.split('#')[0];
var targetURL = 'http://xxx/api/UserMessage/GetWeChartData' + '?url=' + localURL;
$.post(targetURL, { url: localURL }, function (weChartDataStr) {
//alert(weChartData.jsAPITicket);
var weChartData = JSON.parse(weChartDataStr);
if (weChartData['isSuccessful']) {
wx.config({
debug: false,
appId: weChartData['appID'],
timestamp: weChartData['timestamp'],
nonceStr: weChartData['nonce'],
signature: weChartData['signature'],
jsApiList: ['onMenuShareTimeline', // 分享朋友圈
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone'] // 分享好友
});
wx.ready(function () {
var obj = {
title: '我们将在10月5日举行婚礼，诚挚邀请您的到来', // 分享标题
desc: '我们将在10月5日举行婚礼，诚挚邀请您的到来', // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://xxx/xxx.jpg' // 分享图标
};
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage(obj);
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline(obj);
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ(obj);
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo(obj);
// 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
wx.onMenuShareQZone(obj);
});
wx.error(function (res) { });
}
else {
alert(weChartData.message);
}
});
}
其中 targetURL 是为了在服务器后台获取签名写的接口，内容为：
[HttpPost]
public string GetWeChartData(string url)
{
JsonWechartData jsonData = new JsonWechartData();
logger.Info("receive wechart data request, client: " + url);
try
{
WeChatHelper wxHelper = new WeChatHelper(url);
jsonData.appID = WeChatHelper.APP_ID;
jsonData.jsAPITicket = WeChatHelper.JS_API_TICKET;
jsonData.nonce = wxHelper.getNonce();
jsonData.timestamp = wxHelper.getTimestamp();
jsonData.signature = wxHelper.getSignature();
jsonData.isSuccessful = true;
}
catch (Exception ex)
{
jsonData.isSuccessful = false;
jsonData.message = ex.Message;
}
return JsonHelper.SerializeObject(jsonData);
}
这样写的话，第一次分享这个页面没任何问题的，但是点开分享的页面后，再次点分享就会失败了。调试后发现是因为微信会在第二次分享的连接后面加上参数，然后再次去后台验签的时候就会失败。所以，第二次分享的时候需要去判断一下连接地址，改回原来即可。前端代码改成这样：参考原文
<script>
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;
}
var from = getQueryString('from');
var appinstall = getQueryString('appinstall');
var sec = getQueryString('sec');
var timekey = getQueryString('timekey');
if (from || appinstall || sec || timekey) {//假如拼接上了
window.location.href = "http://xxxx/user-define.html";
}
// 微信分享示例
$(function () {
wechartInit();
});
function wechartInit() {
var localURL = location.href.split('#')[0];
var targetURL = 'http://xxxx/api/UserMessage/GetWeChartData' + '?url=' + localURL;
$.post(targetURL, { url: localURL }, function (weChartDataStr) {
//alert(weChartData.jsAPITicket);
var weChartData = JSON.parse(weChartDataStr);
if (weChartData['isSuccessful']) {
wx.config({
debug: false,
appId: weChartData['appID'],
timestamp: weChartData['timestamp'],
nonceStr: weChartData['nonce'],
signature: weChartData['signature'],
jsApiList: ['onMenuShareTimeline', // 分享朋友圈
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone'] // 分享好友
});
wx.ready(function () {
var obj = {
title: '我们将在10月5日举行婚礼，诚挚邀请您的到来', // 分享标题
desc: '我们将在10月5日举行婚礼，诚挚邀请您的到来', // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://xxxx/xxx.jpg' // 分享图标
};
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage(obj);
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline(obj);
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ(obj);
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo(obj);
// 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
wx.onMenuShareQZone(obj);
});
wx.error(function (res) { });
}
else {
alert(weChartData.message);
}
});
}
</script>
这样就搞定了