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

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

1. 首先引入微信jssdk ；
2. 发送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);
        });
    }
});

注意：

1. 传过去的url地址跟wx.ready函数中shareData里面要分享的link链接要保持一致，否则会导致签名非法等问题；
2. 后台返回的signature需要进行encode编码；
3. 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
    }

注意：

1. 这里的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不会，不知道是不是兼容性问题，这一点还没有机会进行测试验证。如果有人遇到还希望可以留言说明。

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

参考：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
https://www.cnblogs.com/lpggo/p/7818491.html
https://www.cnblogs.com/jeanneze/p/6812849.html?utm_source=itdadao&utm_medium=referral
https://www.zhihu.com/question/28462817