uni-app之预加载和取消预加载（仅支持APP和H5）——uni.preloadPage、uni.unPreloadPage

追星胡锡进 · 发表于 2021-8-25 19:48:00

今天，在做微信小程序的时候，有一个请求需要较长的时间。向通过预加载实现。结果，结果……不支持小程序。但还是把它记录下来，说不定以后会用上。

题外话。后来将请求放到本地缓存。先读取缓存。然后，再悄悄的请求、更新。

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)

取消预载页面。

仅App-nvue支持
当预载页面未被打开时，使用 unPreloadPage时会销毁该页面，触发生命周期 onUnload
当预载页面已被打开时，使用 unPreloadPage时不销毁该页面，但该预加载页面不再继续存在，会随着路由变化而销毁

参考网址

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