react解決ios微信分享的問題

最近在用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;
複製代碼

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