当前位置:首页 > uni-app

uniapp应用周期

2026-03-05 07:28:42uni-app

uniapp应用生命周期

uniapp的应用生命周期分为应用级别和页面级别,涵盖了从启动到销毁的完整流程。以下是详细说明:

应用生命周期(App.vue中定义)

onLaunch
触发时机:应用初始化完成时(全局只触发一次)。
用途:常用于获取用户信息、检查更新、初始化全局数据。
示例代码:

onLaunch(options) {
  console.log('App Launch', options);
  // 获取用户信息或检查版本更新
}

onShow
触发时机:应用启动或从后台进入前台显示。
用途:处理场景值(如小程序二维码参数)、恢复数据状态。
示例代码:

onShow(options) {
  console.log('App Show', options.scene);
}

onHide
触发时机:应用从前台进入后台。
用途:保存临时数据、清理定时器。
示例代码:

onHide() {
  console.log('App Hide');
}

onError
触发时机:脚本错误或API调用失败时。
用途:捕获全局错误并上报。
示例代码:

uniapp应用周期

onError(err) {
  console.error('Global Error:', err);
}

页面生命周期(页面vue文件中定义)

onLoad
触发时机:页面加载时。
参数:接收路由传递的queryparams
用途:初始化页面数据。
示例代码:

onLoad(options) {
  this.id = options.id; // 获取路由参数
}

onShow
触发时机:页面显示/切入前台时。
onLoad区别:每次页面显示都会触发(如返回页面)。
用途:刷新动态数据(如用户状态变化)。

onReady
触发时机:页面初次渲染完成。
用途:操作DOM或调用原生组件(需注意平台差异)。

uniapp应用周期

onHide
触发时机:页面隐藏/切入后台。
用途:暂停定时器或动画。

onUnload
触发时机:页面卸载时(如路由跳转关闭当前页)。
用途:清理非响应式资源(如事件监听)。

组件生命周期

与Vue标准生命周期一致(如createdmounted),同时支持onBackPress(监听返回按钮,需返回布尔值阻止默认行为)。

注意事项

  • 平台差异:部分生命周期仅特定平台支持(如小程序onShareAppMessage)。
  • 异步问题:避免在onReady前操作DOM,可通过nextTick延迟执行。
  • 性能优化:高频触发事件(如onscroll)建议使用节流。

标签: 周期uniapp
分享给朋友:

相关文章

uniapp模板库

uniapp模板库

uniapp模板库推荐 官方模板库 uni-app官方提供多个模板,涵盖电商、社交、新闻等多个领域。这些模板可直接在HBuilderX中通过新建项目选择,包含基础结构和常用功能模块,适合快速启动项目。…

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

修改 checkbox 选中状态的方法 在 uniapp 中修改 checkbox 的选中状态可以通过以下几种方式实现: 绑定 v-model 控制状态 通过数据绑定方式控制 checkbox…

uniapp特性

uniapp特性

uniapp的核心特性 跨平台开发 uniapp支持一套代码编译到多个平台,包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等。开发者无需为不同平台单独编写代码。…

uniapp审批

uniapp审批

uniapp审批流程实现 在uniapp中实现审批功能,通常需要结合前端界面和后端逻辑。以下是几种常见的实现方式: 前端界面设计 使用uniapp的组件和API构建审批界面,包括表单提交、审批列表…

uniapp 线程

uniapp 线程

uniapp 线程的概念 在 uniapp 中,线程的概念与原生应用开发有所不同。由于 uniapp 是基于 JavaScript 的运行环境,它并不直接支持多线程操作。JavaScript 本身是单…

uniapp探探

uniapp探探

uniapp实现探探滑动卡片效果 探探的滑动卡片效果主要包含卡片堆叠、左右滑动操作、动画反馈等功能。在uniapp中可以通过以下方式实现类似交互: 使用swiper组件实现基础滑动 uniapp的…