解决微信公众号二次分享的BUG记录

一个以前的公众号分享功能，当时由于测试较少，导致关于页面二次分享链接会丢失自定义的图片和标题；各种疯狂查阅、调试，最终皇天不负有心人。以下是整个过程的记录------

我的正常分享代码如下

    $(function () {
        shareInit();
    })

    //分享初始化
    function shareInit() {
        var httpUrl = location.href.split('#')[0];
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) {
            //iOS需要先encodeURI编码再传入后端进行签名(为了与分享链接link参数需要保证一致)
            //而android不需要，反而编码后不能分享
            httpUrl = encodeURI(httpUrl);
        }
        var sendJSON = {
            "wxOpenId": Number(wId),
            "userId": Number(userId),
            "code": code,
            "httpUrl": httpUrl
        };
        $.ajax({
            url: 'http://xxxx.com/api/shareService.asmx',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendJSON)
        }).done(function (data) {
            if (data.status == 200) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function () {
                    var title = data.userName+"邀请您一起加入我们";
                    var desc = data.userName+"邀请您一起加入我们";
                    var link = encodeURI(hostUrl);
                    var imgUrl = hostUrl + "/static/img/share/weixin_logo.jpg";
                    wx.updateAppMessageShareData({//“分享给朋友”及“分享到QQ”，新版
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.updateTimelineShareData({//“分享到朋友圈”及“分享到QQ空间”新版
                        title: title, // 分享标题
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.error(function (res) {
                        console.log("分享初始化失败");
                    });
                });
            } else {
                console.log("获取参数失败");
            }
        }).fail(function (e) {
            console.log("连接server失败", e);
        })
    }

以上正常分享是没有问题的，这里唯一需要注意的一点是保证传过去的url地址跟wx的ready函数中shareData里面要分享的link链接保持一致才不会导致签名非法等问题。

然而打开分享的链接再次分享android没有问题，IOS则无效（提示签名无效，实际上可以判断后端签名是没有问题的，否则android端也会出现问题的），调试发现微信在进行二次分享后会给该链接自动加上from以及isappinstalled这两个参数用来区分此链接是二次分享进来的

既然知道问题，那就好办了，我们在第二次分享的时候需要去判断一下连接地址，改回原来即可，以下是修改后的代码

    if (location.href.split('#')[0] != location.href.split('&')[0]) {
        //这里需要先decodeURI解码一次，因为分享的链接在之前是编码过的
        window.location.href = decodeURI(location.href.split('&')[0]);
    }
    $(function () {
        shareInit();
    })
    //分享初始化
    function shareInit() {
        var httpUrl = location.href.split('#')[0];
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) {
            //iOS需要先encodeURI编码再传入后端进行签名(为了与分享链接link参数需要保证一致)
            //而android不需要，反而编码后不能分享
            httpUrl = encodeURI(httpUrl);
        }
        var sendJSON = {
            "wxOpenId": Number(wId),
            "userId": Number(userId),
            "code": code,
            "httpUrl": httpUrl
        };
        $.ajax({
            url: 'http://xxxx.com/api/shareService.asmx',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(sendJSON)
        }).done(function (data) {
            if (data.status == 200) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function () {
                    var title = data.userName + "邀请您一起加入我们";
                    var desc = data.userName + "邀请您一起加入我们";
                    var link = encodeURI(hostUrl);
                    var imgUrl = hostUrl + "/static/img/share/weixin_logo.jpg";
                    wx.updateAppMessageShareData({//“分享给朋友”及“分享到QQ”，新版
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.updateTimelineShareData({//“分享到朋友圈”及“分享到QQ空间”新版
                        title: title, // 分享标题
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                    wx.error(function (res) {
                        console.log("分享初始化失败");
                    });
                });
            } else {
                console.log("获取参数失败");
            }
        }).fail(function (e) {
            console.log("连接server失败", e);
        })
    }

这样就可以了