uni-app uni.preloadPage 预加载tabbar首页时，首页onReady会触发两次

uni-app uni.preloadPage 预加载tabbar首页时，首页onReady会触发两次

测试过的手机：

小米10，红米 note7,iphoneX

示例代码：

uni.preloadPage({
url: "pages/test/test1",
complete(err) {
console.log('预加载成功' + JSON.stringify(err));
// #ifdef APP-PLUS
plus.navigator.setStatusBarStyle('dark')
// #endif  
},
fail(err) {  
console.log('预加载失败' + JSON.stringify(err))  
}
})

操作步骤：

下载附件代码，然后运行，不管是标准运行基座还是自定义基座，onReady都会执行两次，这导致我实际项目里的请求也触发了两次。

预期结果：

预加载的页面onReady只触发一次

实际结果：

onReady会触发两次

bug描述：

在app.vue的onLaunch里预加载了tabbar首页，在onready中打印日志，发现会打印两次。此项目我已精简到只有三个测试页面，方便你们查看，这个问题困扰很久了，希望能帮我看看，谢谢了


| 信息类别         | 内容                               |
|------------------|------------------------------------|
| 产品分类         | uniapp/App                         |
| PC开发环境操作系统 | Mac                                |
| PC开发环境操作系统版本号 | macOS Big Sur 11.1                 |
| HBuilderX类型    | 正式                               |
| HBuilderX版本号  | 3.0.7                              |
| 手机系统         | 全部                               |
| 手机厂商         | 华为                               |
| 页面类型         | nvue                               |
| 打包方式         | 云端                               |
| 项目创建方式     | HBuilderX                          |

更多关于uni-app uni.preloadPage 预加载tabbar首页时，首页onReady会触发两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

示例项目

更多关于uni-app uni.preloadPage 预加载tabbar首页时，首页onReady会触发两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题已记录，已加分，感谢您的反馈！

嗯嗯，暂时先用缓存定义了一个flag解决了这个问题

使用uniapp框架，微信小程序如何实现页面预加载呢？

这是一个已知的uni-app预加载页面时的生命周期触发问题。在预加载tabbar首页时，确实会出现onReady被调用两次的情况。

原因分析：

  1. 预加载页面时，框架会先初始化页面实例
  2. 当实际切换到该tabbar页面时，会再次触发完整的生命周期

解决方案：

  1. 可以在页面中添加一个标志变量来避免重复执行：
let hasReady = false
onReady() {
  if(hasReady) return
  hasReady = true
  // 你的初始化代码
}

  1. 或者考虑将初始化逻辑放在onLoad中执行，因为onLoad通常只会触发一次

  2. 如果必须在onReady中执行，可以使用防抖处理：

let readyTimer = null
onReady() {
  clearTimeout(readyTimer)
  readyTimer = setTimeout(() => {
    // 你的初始化代码
  }, 100)
}
回到顶部