uni-app如何实现页面预加载？

本是古典何须时尚 2022-12-19 03:53 142阅读 0赞

[uni.preloadPage(OBJECT)][uni.preloadPage_OBJECT]

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>是</td> 
   <td>预加载页面url</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>预加载成功完成回调</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>预加载失败回调</td> 
  </tr> 
 </tbody> 
</table>

[H5 平台][H5]

预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑

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

[App-nvue 平台][App-nvue]

预加载nvue页面 /pages/test/test

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

注意事项

1.  App平台仅支持预加载 nvue 页面，执行页面预渲染，预载时触发生命周期 `onLoad`，`onReady`，不触发 `onShow`
2.  打开新页面时，url 完全相同（包含参数）时，优先使用预加载页面，触发生命周期 onShow
3.  tabbar页面，仅支持预加载尚未显示过的页面，否者返回 fail，提示 already exists
4.  同一时间，相同 url 仅 preloadPage 一次
5.  当同一个预载页面已被打开(在路由栈)，再次打开相同url时，不再使用该预加载页面，而是打开新的非预载页面
6.  `uni.reLanuch`, `uni.switchTab`, `uni.navigateBack`(含Android返回键) 切换页面时，预加载页面不会被销毁，仅触发生命周期 `onHide`
7.  在预载页面使用 `uni.redirectTo` 时，预加载页面会被销毁，触发生命周期 `onUnload`

原文查看：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

[uni.preloadPage_OBJECT]: https://uniapp.dcloud.io/api/preload-page?id=preloadpage
[H5]: https://uniapp.dcloud.io/api/preload-page?id=h5-%E5%B9%B3%E5%8F%B0
[App-nvue]: https://uniapp.dcloud.io/api/preload-page?id=app-nvue-%E5%B9%B3%E5%8F%B0
[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/