js 刷新页面但是不闪烁_记一个微信H5页面的第一次分享不能获取到题图和简介bug的解决过程

bug表现

在微信第一次打开此页面时，分享出去的链接不能获取到题图和简介


但是点击右上角菜单，点“刷新”后，就能正确分享出去

惊不惊喜？意不意外？组里的小弟尝试了几次debug未果，遂求助于我。

排查

首先怀疑是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中的调试模式后，第一次打开页面时提示签名不对，这下思路有了


但是，为毛刷新一下又变OK了呢？也就是说，刷新后签名变正确了，嗯，继续往下追踪签名咯。

微信JS-SDK签名

通过后台打印log，发现第一次签名出错时的URL和刷新后的URL是不一致的，因为签名的参数是包含URL的：noncestr=Wm3WZYTPz0wzccnWjsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qgtimestamp=1414587457url=http://mp.weixin.qq.com?params=value

所以我正式找到了此次报错的根源：签名时的URL和页面跳转的URL不一致。

签名时的URL和页面跳转的URL不一致

为什么我如此肯定是签名时的URL和页面跳转的URL不一致呢，因为我知道实现逻辑啊。
起因是我们的URL是加密过的，里面有一些追踪参数：ID，stamp之类的，举例说明(不加密)：

1. 在用户点击链接时，在服务器端接收的 URL为：/p/edit_id1231
2. 在页面返回到前端浏览器时，我们在服务器上将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，改好代码，部署到服务器，测试通过，美滋滋呀，美滋滋~