react解決ios微信分享的問題

阿9發表於2018-07-20
ReactiOS

最近在用react做微信h5的專案開發，在配置微信分享的時候，遇到一個問題，在安卓的手機上可以很正常的分享，但是在ios上卻不能正常分享。於是花了兩個小時解決問題以及研究出現這樣的問題的根本所在。。。

問題描述

在安卓上可以正常分享，在ios上不能正常分享，但是如果在配置微信分享的當前頁面重新整理一下（微信右上角點開），則在ios上就可以正常分享。並且在之後通過路由進入這個頁面同樣也可以正常分享了！！ios不能分享的時候，微信分享的debug彈框顯示的是微信簽名錯誤

解決方法一：

一陣無語之後，感慨居然還有這種操作。但其實操作到這，我已經是可以很巧妙的把問題解決的，就是在首次進入分享功能的頁面時，讓頁面自動重新整理一次。那怎麼保證只重新整理一次，而不會導致每次進來就重新整理呢？答案很簡答，在快取裡設定標識，我選擇的是sessionStorage，因為每次關閉微信h5，sessionStorage就會自動的被清除，這就很好的保證了我每次開啟專案進入分享頁面都會重新整理一次

javascript
const _not_first_invite = sessionStorage.getItem('not_first_invite');
if ( !_not_first_invite ) {
    sessionStorage.setItem('not_first_invite', '1');
    window.location.reload();
}
複製程式碼

當然這種操作是比較取巧的，但是並沒有深入到這個問題的根本

解決方法二：

在洞悉第二種方法之前，我的同事跟我說他之前用PHP做的時候並不會出現ios不能分享的問題，那我首先想到的是傳統前端頁面跳轉的特點，那就是每次跳轉都會重新整理。然後我又想了想我當前的專案，是用react做的單頁面應用，單頁面應用的跳轉是靠路由驅動的，如react-router、vue-router等。分析到這裡，心裡其實還是很茫然，於是乎我用一臺ios和一臺Android來做測試。因為獲取微信簽名是需要前端提供當前頁面的url，這時候我提出一個猜想，微信分享的簽名url必須是進入專案後重新整理的第一個頁面的url！！因為我試驗了一下，ios微信右上角點選獲取連結，這個連結並不是我分享頁面的連結，而是我第一次進入專案第一個頁面的連結。而我用window.location.href獲取並用來簽名的是當前分享頁面的連結，不行！！而重新整理之後就正常了，右上角獲取當前連結果然也是分享頁面的連結，當然我獲取的也是這個連結，所以就沒問題了。那麼很明顯了，iOS需要使用進入專案第一個頁面的URL獲取簽名！！於是想辦法儲存進入專案的第一個頁面的URL並去獲取簽名，果然，iOS可以正常分享了。但是看了看Android卻不能分享了，而原來卻沒有問題，那麼是不是安卓每次路由切換都重新配置簽名呢？不管怎麼樣還是區分一下手機型別

javascript
const current_url = iosMobile() ? sessionStorage.getItem('first_enter_url') : window.location.href;
複製程式碼

這樣兩個端就沒有問題了！！

相關文章