快捷導(dǎo)航

微信小程序如何實(shí)現(xiàn)全局重新加載

更新時間：2019年06月05日 09:34:06 作者：Luciena

這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)全局重新加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

背景：

隨著業(yè)務(wù)的增加，我們服務(wù)器需要計算大量的用戶數(shù)據(jù)，導(dǎo)致用戶跟客服反應(yīng)頁面不能正常展示。反饋給開發(fā)后，我們一看，是服務(wù)器異常的錯誤。So，產(chǎn)品想看下我們到底有多少用戶頁面不能正常展示？

方案：

后端人員直接在阿里云后臺去查哪些接口異常
前端做一個服務(wù)器報錯頁，這樣產(chǎn)品在小程序后臺能看到這個頁面的PV,UV

技術(shù)方案

因?yàn)闃I(yè)務(wù)龐大，所以我們不可能區(qū)在每個頁面加上重新加載的邏輯。所以初步考慮使用全局重新加載。

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

首先我們要有網(wǎng)絡(luò)請求失敗的全局控制權(quán)（要不然就需要在每個頁面處理失敗的情況）
需要定義好網(wǎng)絡(luò)失敗后是如何跳轉(zhuǎn)到重載頁（R）的（用wx.redirectTo，wx.reLaunch還是其他）
點(diǎn)擊錯誤頁的“重新加載”，如何返回或跳轉(zhuǎn)到出錯頁(E)（用wx.redirectTo，wx.reLaunch還是其他）
跳轉(zhuǎn)到出錯頁后，如何重新加載數(shù)據(jù)（把所有請求都放在Page.onShow()里面?）
那如果從出錯頁的上個界面(P)傳到出錯頁（E）options，那重載頁（R）又將如何處理？
點(diǎn)擊重新加載跟返回，我們希望效果效果一樣，又該如何操作？

實(shí)踐的方式如下

第一個問題：比較好解決，我們基于wx.request已經(jīng)封裝了為fetch（如果還在用wx.request的項(xiàng)目可以考慮封裝下，好處多多）?；趂etch我們可以用res.statusCode來判斷服務(wù)器是否出錯。

第二個問題：暫且先不說具體的跳轉(zhuǎn)方式是怎樣的，就跳轉(zhuǎn)的url這個怎么定義也需要我們來討論下。為什么這么說，因?yàn)槲覀兊募軜?gòu)涉及到了分包。分包加載意味著我們的代碼不僅僅是在pages下面，還放在了package下。

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

路徑確認(rèn)后，我們可以跳轉(zhuǎn)了。如果是wx.redirectTo（關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面），想象下關(guān)閉E跳轉(zhuǎn)到R，點(diǎn)擊重新加載，再關(guān)閉R跳轉(zhuǎn)到E，這么跳轉(zhuǎn)路徑復(fù)雜，用戶體驗(yàn)不好，并且options的參數(shù)需要逐級傳遞。wx.reLaunch類似。我們用所以我們選擇wx.navigateTo。

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

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

大家對于getCurrentPages()這個方法肯定不陌生，官方定義是來獲取當(dāng)前頁面棧，我們一般用它來獲取當(dāng)前頁面路徑。其實(shí)在這個過程中，我們是能拿到當(dāng)前頁面的實(shí)例的，并且實(shí)例里面有route（頁面路徑）options（頁面?zhèn)鬟f參數(shù)）data(頁面初始參數(shù))以及各種function()等等。

利用previousPageClass()我們可以拿到E的實(shí)例，也就可以拿到E.options，當(dāng)然我們也可以調(diào)E.onLoad()。

util.js

// 獲取當(dāng)前路徑
function currentPagePath() {
 let pageData = getCurrentPages()
 if (pageData.length >= 1) {
 let len = pageData.length - 1
 let data = pageData[len]
 return data.route
 } else {
 return ''
 }
}

// 獲取上個界面的實(shí)例
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
}

第五個問題：基于問題的四的方案，我們可以調(diào)E.onLoad(E.options)來將我們的參數(shù)回傳回去。

第六個問題：點(diǎn)擊返回，相當(dāng)于頁面卸載，也就是執(zhí)行了R.onUnload(),這個時候我們只需要執(zhí)行E.onLoad(E.options)這個方法，把options傳過去，以及調(diào)用起E.onLoad()就OK了。

但是點(diǎn)擊重新加載，我們是調(diào)的wx.navigateBack()，這個方法也會走R.onUnload()。這是時候可能有些苦惱了，我們隱藏掉返回按鈕？發(fā)現(xiàn)官方并沒有提供此方法。禁用R.onUnload()，好像也不行。因?yàn)镽.onUnload()是在點(diǎn)擊重新加載后才執(zhí)行的，所以我們可以記錄下用戶是否點(diǎn)擊了重新加載的行為。然后我們通過記錄的行為，即便用戶點(diǎn)擊了重新加載，然后觸發(fā)了R.onUnload()，我們不去執(zhí)行E.onLoad(E.options)就OK了。

// pages/serverError/serverError.js

import { previousPageClass } from '../../utils/util.js'

let isClickReload = false

Page({

 onLoad: function (options) {
 isClickReload = false
 },
 onUnload: function () {
 if(!isClickReload) {
  this.callbackParams()
 } 
 },
 /**
 * 點(diǎn)擊事件
 */
 clickReload: function (e) {
 isClickReload = true
 wx.navigateBack()
 this.callbackParams()
 },
 // 點(diǎn)擊返回，參數(shù)回傳
 callbackParams: function () {
 let preOptions = previousPageClass().options
 previousPageClass().onLoad(preOptions)
 }
})

至此所有問題，基本都已解決。

Demo代碼附上，歡迎參考。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: