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 校驗失效，不過過程當中，多方改動代碼，也出現過別的錯誤。可是總之是解決了，該踩的坑仍是要踩的！！