当前位置:首页 > 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请求超时处理方法 在uniapp中处理请求超时可以通过多种方式实现,以下是几种常见的处理策略: 设置全局请求超时时间 在main.js中配置全局请求超时时间,适用于所有请求: uni…

uniapp 成功案例

uniapp 成功案例

成功案例概览 UniApp 凭借跨平台开发能力,已被多个行业采用,涵盖电商、社交、教育、政务等领域。以下为部分典型案例: 京东拼购 京东拼购(现为“京喜”)采用 UniApp 开发,实现微信小程序、…

uniapp 表格导入

uniapp 表格导入

uniapp 表格导入的实现方法 使用 uni.chooseFile 选择文件 在 uniapp 中,可以通过 uni.chooseFile API 让用户选择本地文件。该 API 支持多平台,包括…

uniapp下拉换图

uniapp下拉换图

uniapp下拉换图实现方法 监听页面滚动事件 在页面中监听onPageScroll事件,获取滚动位置。当滚动到特定位置时触发换图逻辑。 onPageScroll(e) { if(e.sc…

uniapp 退场动画

uniapp 退场动画

实现退场动画的方法 在UniApp中实现退场动画可以通过CSS动画、Vue过渡效果或第三方动画库完成。以下是几种常见方法: 使用CSS动画 通过定义@keyframes和animation属性实现退…

uniapp教程

uniapp教程

uniapp 入门基础 uniapp 是一个使用 Vue.js 开发跨平台应用的框架,支持编译到 iOS、Android、H5 以及小程序等多个平台。以下是快速入门的关键点。 环境搭建 安装 HBu…