uni-app之預加載和取消預加載（僅支持APP和H5）——uni.preloadPage、uni.unPreloadPage

今天，在做微信小程序的時候，有一個請求需要較長的時間。向通過預加載實現。結果，結果……不支持小程序。但還是把它記錄下來，說不定以后會用上。

題外話。后來將請求放到本地緩存。先讀取緩存。然后，再悄悄的請求、更新。

uni.preloadPage(OBJECT)

預加載頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。

平台差異說明

App-nvue	H5	微信小程序	支付寶小程序	百度小程序	字節跳動小程序	QQ小程序
√（2.7.12+）	√（2.7.12+）	×	×	×	×	×

 

H5平台

預加載 /pages/test/test 對應的js文件，不執行頁面預渲染邏輯。

uni.preloadPage({url: "/pages/test/test"});

App-nvue平台

預加載nvue頁面 /pages/test/test

uni.preloadPage({url: "/pages/test/test"});

注意事項

• App平台僅支持預加載 nvue 頁面，執行頁面預渲染，預載時觸發生命周期 onLoad，onReady，不觸發 onShow
• 打開新頁面時，url 完全相同（包含參數）時，優先使用預加載頁面，觸發生命周期 onShow
• tabbar頁面，僅支持預加載尚未顯示過的頁面，否者返回 fail，提示 already exists
• 同一時間，相同 url 僅 preloadPage 一次
• 當同一個預載頁面已被打開(在路由棧)，再次打開相同url時，不再使用該預加載頁面，而是打開新的非預載頁面
• uni.reLanuch, uni.switchTab, uni.navigateBack(含Android返回鍵) 切換頁面時，預加載頁面不會被銷毀，僅觸發生命周期 onHide
• 在預載頁面使用 uni.redirectTo 時，預加載頁面會被銷毀，觸發生命周期 onUnload

示例

uni.preloadPage({url: "/pages/test/test"}); // 預加載 /pages/test/test 頁面（僅觸發onLoad，onReady)
uni.navigateTo({url: "/pages/test/test"}); // url匹配，跳轉預加載頁面（僅觸發onShow)
uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配，正常打開新頁面

uni.unPreloadPage(OBJECT)

取消預載頁面。

1. 僅App-nvue支持
2. 當預載頁面未被打開時，使用 unPreloadPage時會銷毀該頁面，觸發生命周期 onUnload
3. 當預載頁面已被打開時，使用 unPreloadPage時不銷毀該頁面，但該預加載頁面不再繼續存在，會隨着路由變化而銷毀

參考網址

• https://uniapp.dcloud.io/api/preload-page?id=preloadpage