React接入微信js-sdk（分享）踩坑记

最近作了一个项目，用的react+react-router4 ，要接入微信js-sdk，在实现的过程当中掉坑了！特此记录一下。

按照微信官方给的api 等文档接入以后，发现由于项目是spa ，因此存在安卓pushState 的bug。因此把对微信的config 放到了asyncComponent 组件的componentDidMount 中

（asyncComponent 是用于作代码切割按需加载的，react-router4不支持以前老的用require.ensure()来作按需加载，因此用了es6 的import() 来作这个，所以写了一个中间组件，专门用于不一样路由下的页面组件的加载，这样正好方便解决微信接入安卓的pushState 这个bug）

 

OK，代码写好了，放到手机上面测试，发现，神了奇了，安卓是ok了，在微信调试工具上也ok，可是在ios 上就是不行。ios 上面点开分享的连接，始终会出现 invalid signature 错误。查看了不少资料，关于怎么排查invalid signature 的缘由（以下）：

• invalid signature签名错误。建议按以下顺序检查：
• 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
• 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
• 确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认)，包括’http(s)://’部分，以及’？’后面的GET参数部分,但不包括’#’hash后面的部分。
• 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
• 确保必定缓存access_token和jsapi_ticket。
• 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。若是是html的静态页面在前端经过ajax将url传到后台签名，前端须要用js获取当前页面除去’#’hash部分的连接（可用location.href.split(‘#’)[0]获取,并且须要encodeURIComponent），由于页面一旦分享，微信客户端会在你的连接末尾加入其它参数，若是不是动态获取当前连接，将致使分享后的页面签名失败。

更多关于微信的错误排查可见：https://blog.csdn.net/biyongyao/article/details/77792767

 

一条一条排查以后发现，没问题啊，经过抓包工具抓到传给后端的url 也是当前路由下这个页面的url 啊？一脸懵逼了。

各方debug 各方找问题以后，终于发现，原来 用iphone微信，若是是单页面应用，前端作跳转逻辑（就是在分享出去的那个页面，再作了一次判断跳转），那么这个时候，『复制连接』以及『浏览器中打开』都只会获取 最开始的url地址。

因而，我猜想，可能微信在进行signature 校验的时候，拿的是我跳转以前的url 来作校验，才致使了最后的 invalid signature。因而，我把分享出去的页面的跳转逻辑去了。！！！成功了！！！！（心里一万只XXX奔腾而过）至此，终于从ios 点击分享连接 出现

invalid signature 的坑中爬了出来。

总结：问题的关键就出在了我在分享出去的页面上作了跳转，致使ios 上面的signature 校验失效，不过过程当中，多方改动代码，也出现过别的错误。可是总之是解决了，该踩的坑仍是要踩的！！