![3c8adc78ff409bbe1a6bf2efd5e6881f.png](https://img-blog.csdnimg.cn/img_convert/3c8adc78ff409bbe1a6bf2efd5e6881f.png)
bug表现
在微信第一次打开此页面时,分享出去的链接不能获取到题图和简介
![a0ba4f5aeeef5b7dfa7f140326f7ace6.png](https://img-blog.csdnimg.cn/img_convert/a0ba4f5aeeef5b7dfa7f140326f7ace6.png)

但是点击右上角菜单,点“刷新”后,就能正确分享出去
![25147335fa6759e02944c4da48fe6209.png](https://img-blog.csdnimg.cn/img_convert/25147335fa6759e02944c4da48fe6209.png)
惊不惊喜?意不意外?组里的小弟尝试了几次debug未果,遂求助于我。
![e37b0f7d142756d2689cb354d2a9bc2e.png](https://img-blog.csdnimg.cn/img_convert/e37b0f7d142756d2689cb354d2a9bc2e.png)
排查
首先怀疑是WX API的参数是否有设置错误,确认没有错。
调试良久,被迫打开wx.config中的调试模式(因为在正式环境,不方便打开微信的调试模式)
微信H5在正式环境的调试思路
这里也是个难点,在正式环境中肯定不能让用户看到调试的信息,我是这么做的,在URL后传参数:http://xxx.com?debug=true
然后在页面中加上动态设置debug的开关,大概代码如下:if(getQueryString("debug")=='true'){
window.debug=true;
}
wx.config({
"debug": window.debug,
...
转机出现!
打开wx.config中的调试模式后,第一次打开页面时提示签名不对,这下思路有了
![19f30bccac22d4d9791ff0fadd5f7807.png](https://img-blog.csdnimg.cn/img_convert/19f30bccac22d4d9791ff0fadd5f7807.png)

但是,为毛刷新一下又变OK了呢?也就是说,刷新后签名变正确了,嗯,继续往下追踪签名咯。
微信JS-SDK签名
通过后台打印log,发现第一次签名出错时的URL和刷新后的URL是不一致的,因为签名的参数是包含URL的:noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
所以我正式找到了此次报错的根源:签名时的URL和页面跳转的URL不一致。
签名时的URL和页面跳转的URL不一致
为什么我如此肯定是签名时的URL和页面跳转的URL不一致呢,因为我知道实现逻辑啊。
起因是我们的URL是加密过的,里面有一些追踪参数:ID,stamp之类的,举例说明(不加密):
- 在用户点击链接时,在服务器端接收的 URL为:
/p/edit_id1231
- 在页面返回到前端浏览器时,我们在服务器上将URL变成了:
/p/edit_id1231#stamp=421421#ref=3143214321
在1时,服务器去请求签名时用了旧URL:/p/edit_id1231,而到了页面在微信端显示出来时URL为:/p/edit_id1231#stamp=421421#ref=3143214321
微信的JS-SDK做签名校验时,因为URL不一致,所以就出错了。
修复
既然都到这了,修复就简单了,服务器去请求签名时应该拿新的URL:/p/edit_id1231#stamp=421421#ref=3143214321
,改好代码,部署到服务器,测试通过,美滋滋呀,美滋滋~
![30387fbdb69fb6d8982d5f22f54c14d7.png](https://img-blog.csdnimg.cn/img_convert/30387fbdb69fb6d8982d5f22f54c14d7.png)