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 校验失效，不过过程中，多方改动代码，也出现过别的错误。但是总之是解决了，该踩的坑还是要踩的！！

 

转载于:https://www.cnblogs.com/lcx33/p/8821241.html