JS-SDK分享网页到微信遇到的坑

现在开发大多都需要用到微信分享，推广宣传APP做得有多牛逼，然鹅，微信分享不是简单的越塔五杀就能搞定的，需要前后台的协同才能打死这个野怪，开发中遇到的重大问题是一直提示config:invalid signature，先来说说大体开发流程，再说说这问题是怎么解决的：

1、绑定域名
域名必须ICP备案，在微信公众平台的js域名接口处绑定该域名。注意：绑定的域名或者路径不允许有下划线，因为公司的项目名带有下划线，而项目名已经被APP之前版本引用，所以不能通过修改项目名解决，于是想了另外一个办法：绑定一个和应用同级目录的路径，把需要分享的网页放到这个路径下面来访问，这时候会存在一个问题：分享页面找不到一些项目资源，这时候可以通过修改页面的相对路径来解决。

2、绑定域名的后台生成签名信息，包括appId，timestamp，noncestr，signature，校验签名信息是否有误地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign，如果signature一致则说明签名无误。

3、分享的网页引入JS文件
http协议域名引用微信接口地址 http://res.wx.qq.com/open/js/jweixin-1.0.0.js，
https协议域名引用微信接口地址 https://res.wx.qq.com/open/js/jweixin-1.0.0.js
经测试两个地址都可以正常分享。

4、通过config接口注入权限验证配置

<script type="text/javascript">        var url = location.href;        var shareTitle = "";        var shareDesc = "";        var shareImgUrl = "";        var appId;        var timestamp;        var noncestr;        var signature;        $.ajax({            url: '/app/getShareMsg/{id}.do',            type: "GET",            success: function (json) {                if (json.errorMsg) {                    alert(json.errorMsg);                    return;                }                if (json.status == 'success') {                    console.log("扫码成功");                    shareTitle = json.data.shareTitle;                    shareDesc = json.data.shareDesc;                    shareImgUrl = json.data.shareImg;                    shareImgUrl = "...../app/download.do?fileName=" + shareImgUrl;//绝对路径                    $.ajax({                        type: "GET",                        url: "/app/generateSignature.do",                        data:{url:url},                        success: function(json){                            timestamp = json.data.timestamp;                            noncestr = json.data.noncestr;                            signature = json.data.signature;                            appId = json.data.appId;                            wx.config({                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。开发时必须打开，确认没问题后再关闭。                                appId: appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识                                timestamp:timestamp, // 必填，生成签名的时间戳                                nonceStr: noncestr, // 必填，生成签名的随机串                                signature: signature,// 必填，签名，见附录1                                jsApiList: [                                    'onMenuShareTimeline',                                    'onMenuShareAppMessage'                                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2                            });                        }                    });                }            }        });    </script>

5、通过ready接口处理成功验证

页面拿到服务器返回的签名信息后，调用微信的wx.ready({})方法接口实现分享功能，代码如下（这段代码放在标签最下面）：

wx.ready(function(){            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。            wx.onMenuShareTimeline({                title: shareTitle, // 分享标题                desc: shareDesc, // 分享描述                link: url, // 分享链接                imgUrl: shareImgUrl, // 分享图标                success: function () {                    // 用户确认分享后执行的回调函数                },                cancel: function () {                    // 用户取消分享后执行的回调函数                }            });            wx.onMenuShareAppMessage({                title: shareTitle, // 分享标题                desc: shareDesc, // 分享描述                link: url, // 分享链接                imgUrl: shareImgUrl, // 分享图标                type: '', // 分享类型,music、video或link，不填默认为link                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空                success: function () {                    // 用户确认分享后执行的回调函数                },                cancel: function () {                    // 用户取消分享后执行的回调函数                }            });        });

坑：
1、签名错误：这个可以把后台服务器生成的签名信息放到https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign地址上面去校验signature是否一致，后台生成签名的方法在网上很多，在这里就不多说了。
2、确认签名没错后，仍然弹框config:invalid signature，100%是URL有问题，这里的url就是分享页面的url,有三个地方必须完全一致，
1）var url = location.href;
2）后台接收到的url;
3) link: url；
这三个url必须一致，后台接收到的url会自动把参数拼接字符&转义成&amb;，所以要替换成&，确保和前端的URL一致即可。

至此，问题解决！啦啦啦