1. 程式人生 > >完美解決微信頁面返回不重新整理問題

完美解決微信頁面返回不重新整理問題

       新到的這家公司業務重點是放在移動端的(以前很少做微信平臺相關的頁面),比如微信,小程式,支付寶等等平臺。所以頁面的製作難免和移動端打交道。現在就遇到一個小問題,但是又很不好解決的一個問題:就是從一個頁面跳到另外一個頁面,然後再按虛擬鍵返回時(小米手機左右滑動),頁面不重新整理!可能有些場景為了效能可以不去請求伺服器,但是我這個問題是其他頁面更改了資料,返回的時候資料必須更新!但是你微信做了個好人,自己主動不去重新整理,與我的業務是相矛盾的。這樣可就愁死我了。

let needRefresh = sessionStorage.getItem("need-refresh");
if(needRefresh){
  sessionStorage.removeItem("need-refresh");
  location.reload();
}

//然後被跳轉的頁:
sessionStorage.setItem("need-refresh", true);

感覺程式碼冗餘,原理是說的很清楚了,但是解決方案不盡如人意。效果就是回到首頁快取一次,重新整理一次,給人的錯覺是重新整理了兩次(因為reload()的存在,頁面無論如何都會載入一次。),雖然這樣解決了問題,但是無法通過我自己這一關,我無法忍受這種體驗效果差!

        我就在想,像一些實時性的網站,比如:比分網站,新聞網站,有些可能是定時器每隔一段時間ajax請求伺服器。那我就類似這樣,一開始進去就用定時器的形式請求資料,我也擔心他還是會把你快取起來,不去請求伺服器。但是結果出人意料的解決了這個問題:程式碼如下:

setTimeout(()=>{
   this.getHomeData();
},100);

其實就是人為的給了一個假的定時器(其實有可能 這裡的 0 為 200 系統原因,不去糾結。)。問題就此解決。什麼多餘的程式碼不用寫,只是人為的創造了一個假的定時器。

     注:一開始我想定時0毫秒,真實環境中不生效,後來改成100ms。又有效果了,暫時解決了。你們最好做個完整的測試去驗證。測試環境和真實環境會有些區別。——2018/08/24補充。