微信 ajax 2次,微信二次分享失败问题解决

自定义微信分享标题及描述的基本流程：

首先引入微信jssdk ；

发送ajax请求将浏览器分享的地址(window.location.href.split("#")[0])发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo；

代码基本上是这样：

$(function(){

var appId, nonceStr, timestamp, signature;

var _url = encodeURIComponent(location.href.split('#')[0]);

$.ajax({

url: 'http://api.kuailuapp.com/?s=app/Usersauth/jssdk&url=' +_url, // 这里的url地址一般是后端提供的接口地址

dataType: 'json',

type: 'GET',

async: true,

success: function (data) {

if (datas.status == '1') {

appId = datas.data.appId;

nonceStr = datas.data.nonceStr;

timestamp = datas.data.timestamp;

signature = encodeURIComponent(datas.data.signature);

wxShare();

}

},

error: function () {}

});

function wxShare(){

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

wx.config({

debug: false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来

appId: appId, // 必填，公众号的唯一标识

timestamp: timestamp, // 必填，生成签名的时间戳

nonceStr: nonceStr, // 必填，生成签名的随机串

signature: signature,// 必填，签名，见附录1

jsApiList: [

"onMenuShareTimeline",

"onMenuShareAppMessage",//分享给好友

"onMenuShareQQ",

"onMenuShareWeibo",

"onMenuShareQZone"

]

});

wx.ready(function () {

//分享好友

var shareData = {

title: '分享标题',

desc: '分享描述',

dataUrl: '',

type: 'link',

imgUrl: '缩略图线上地址',

link: location.href.split("#")[0]

};

wx.onMenuShareTimeline(shareData);

wx.onMenuShareAppMessage(shareData);

wx.onMenuShareQQ(shareData);

wx.onMenuShareWeibo(shareData);

wx.onMenuShareQZone(shareData);

});

}

});

注意：

传过去的url地址跟wx.ready函数中shareData里面要分享的link链接要保持一致，否则会导致签名非法等问题；

后台返回的signature需要进行encode编码；

imgUrl的属性值不能是绝对路径，需要是一个完整的url地址，否则会找不到图片；

一般情况下，通过上述步骤就能实现一次分享。由于微信在分享出去之后会给链接自动加上from以及isappistalled这两个参数，证明该链接是通过分享过来的，由于这两个参数的影响，便会导致二次分享进行时签名失效，无法调用一次分享时的自定义信息，只能通过微信自带的分享功能分享出去，变成一段空荡荡的链接和白色缩略图。

ps：

网上看了很多人说url用encodeURIcomponent进行转码就不会出现这个问题，但是就像我上面代码写的一样，url是用encodeURIcomponent进行转码过的，亲测，二次分享还是会有问题。

由于是因为微信在回调url上自动添加了参数导致的签名失效，所以最终的解决办法是在分享出去的页面判断是否有参数，有则去掉参数回到五参数的url：

if(window.location.href.indexOf('from') != -1 || window.location.href.indexOf('isappinstalled') != -1){

// 二次分享url重定向 - 需要截取一次分享后微信自动拼接的url参数&from=singlemessage&isappinstalled=0

window.location.href = window.location.href.split('&')[0]; // 这里的split中的字符串会变换(?或&)，主要看自己的url

}

注意：

这里的split中的字符串会有变换，主要看自己的url规则，经测试如果url中已有?号，则微信会通过&来拼接from和isappinstalled参数，如果url中没有?号，微信则通过?号来拼接from和isappinstalled参数；

如：短链接 - http://abc.com/product_list?from=singlemessage

或：长链接 - http://abc.comindex.php?route=product/product_list&from=singlemessage&isappinstalled=0

网上也有看到有人是这么操作的，说是没问题。经测试：这种方式使用长链接的方式没有问题，使用短链接的(短链接是后台再数据库中进行配置的，将长链接换成短链接)，在微信分享出去后的页面，会一直再刷新页面，即不停的执行window.location.href = window.location.href.split('&')[0];。好像是安卓会ios不会，不知道是不是兼容性问题，这一点还没有机会进行测试验证。如果有人遇到还希望可以留言说明。

综上，在项目中解决了微信二次分享的问题。不确定的是这种分式是否有什么潜在的风险，或者有更好的方式。在网上看到很多比较麻烦的方法，但是感觉也是这个道理，所以先记录下来。