小程式如何做全域性重新載入

背景：

隨著業務的增加，我們伺服器需要計算大量的使用者資料，導致使用者跟客服反應頁面不能正常展示。反饋給開發後，我們一看，是伺服器異常的錯誤。So，產品想看下我們到底有多少使用者頁面不能正常展示？

方案：

1. 後端人員直接在阿里雲後臺去查哪些介面異常

2. 前端做一個伺服器報錯頁，這樣產品在小程式後臺能看到這個頁面的PV,UV

技術方案

因為業務龐大，所以我們不可能區在每個頁面加上重新載入的邏輯。所以初步考慮使用全域性重新載入。

需要解決的問題都有哪些？

1. 首先我們要有網路請求失敗的全域性控制權（要不然就需要在每個頁面處理失敗的情況）

2. 需要定義好網路失敗後是如何跳轉到過載頁（R）的（用wx.redirectTo，wx.reLaunch還是其他）

3. 點選錯誤頁的“重新載入”，如何返回或跳轉到出錯頁(E)（用wx.redirectTo，wx.reLaunch還是其他）

4. 跳轉到出錯頁後，如何重新載入資料（把所有請求都放在Page.onShow()裡面?）

5. 那如果從出錯頁的上個介面(P)傳到出錯頁（E）options，那過載頁（R）又將如何處理？

6. 點選重新載入跟返回，我們希望效果效果一樣，又該如何操作？

實踐的方式如下

第一個問題： 比較好解決，我們基於wx.request已經封裝了為fetch（如果還在用wx.request的專案可以考慮封裝下，好處多多）。基於fetch我們可以用res.statusCode來判斷伺服器是否出錯。

第二個問題： 暫且先不說具體的跳轉方式是怎樣的，就跳轉的url這個怎麼定義也需要我們來討論下。為什麼這麼說，因為我們的架構涉及到了分包。分包載入意味著我們的程式碼不僅僅是在pages下面，還放在了package下。

基於此，我們在跳轉的時候，url能直接寫成'../serverError/serverError'嗎？在主包下面可以正常跳轉，但是在分包下，路徑是'package/serverError/serverError'，這樣跳肯定不行。url應該是根目錄下的路徑，所以'/pages/serverError/serverError'。

路徑確認後，我們可以跳轉了。如果是wx.redirectTo（關閉當前頁面，跳轉到應用內的某個頁面），想象下關閉E跳轉到R，點選重新載入，再關閉R跳轉到E，這麼跳轉路徑複雜，使用者體驗不好，並且options的引數需要逐級傳遞。wx.reLaunch類似。我們用所以我們選擇wx.navigateTo。

第三個問題： 綜合問題二的解釋，跳回到E，我們用wx.navigateBack。

第四個問題： 如果從R用wx.navigateBack回到E的話，肯定會觸發E.onShow()方法。但是有些請求我們除了寫在Page.onShow()裡，還有些是寫在Page.onLoad()裡的，所以我們必須想辦法調起E.onLoad()。

大家對於getCurrentPages()這個方法肯定不陌生，官方定義是來獲取當前頁面棧，我們一般用它來獲取當前頁面路徑。其實在這個過程中，我們是能拿到當前頁面的例項的，並且例項裡面有route（頁面路徑）options（頁面傳遞引數）data(頁面初始引數)以及各種function()等等。

利用previousPageClass()我們可以拿到E的例項，也就可以拿到E.options，當然我們也可以調E.onLoad()。

util.js// 獲取當前路徑function currentPagePath() {  let pageData = getCurrentPages()  if (pageData.length >= 1) {    let len = pageData.length - 1
    let data = pageData[len]    return data.route
  } else {    return ''
  }
}// 獲取上個介面的例項function previousPageClass() {  let pageData = getCurrentPages()  if (pageData.length >= 2) {    let len = pageData.length - 2
    let preClass = pageData[len]    return preClass
  } else {    return ''
  }
}module.exports = {
  currentPagePath,
  previousPageClass
}

第五個問題： 基於問題的四的方案，我們可以調E.onLoad(E.options)來將我們的引數回傳回去。

第六個問題： 點選返回，相當於頁面解除安裝，也就是執行了R.onUnload(),這個時候我們只需要執行E.onLoad(E.options)這個方法，把options傳過去，以及呼叫起E.onLoad()就OK了。

但是點選重新載入，我們是調的wx.navigateBack()，這個方法也會走R.onUnload()。這是時候可能有些苦惱了，我們隱藏掉返回按鈕？發現官方並沒有提供此方法。禁用R.onUnload()，好像也不行。因為R.onUnload()是在點選重新載入後才執行的，所以我們可以記錄下使用者是否點選了重新載入的行為。然後我們透過記錄的行為，即便使用者點選了重新載入，然後觸發了R.onUnload()，我們不去執行E.onLoad(E.options)就OK了。

// pages/serverError/serverError.jsimport { previousPageClass } from '../../utils/util.js'let isClickReload = falsePage({  onLoad: function (options) {
    isClickReload = false
  },  onUnload: function () {    if(!isClickReload) {      this.callbackParams()
    }    
  },  /**
   * 點選事件
   */
  clickReload: function (e) {
    isClickReload = true
    wx.navigateBack()    this.callbackParams()
  },  // 點選返回，引數回傳
  callbackParams: function () {    let preOptions = previousPageClass().options
    previousPageClass().onLoad(preOptions)
  }
})

作者：Luciena
連結：