当前位置:首页 > 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调用失败时。
用途:捕获全局错误并上报。
示例代码:

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

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

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

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

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

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

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

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

组件生命周期

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

uniapp应用周期

注意事项

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

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

相关文章

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

投票 uniapp

投票 uniapp

uniapp 投票功能实现 uniapp 是一个基于 Vue.js 的跨平台开发框架,可以用于开发微信小程序、H5、App 等多种应用。实现投票功能需要结合前端界面和后端数据处理。 前端界面设计 使…

uniapp探探

uniapp探探

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

uniapp 网络封装

uniapp 网络封装

uniapp 网络请求封装方法 uniapp 提供了 uni.request 方法进行网络请求,但直接使用可能导致代码重复和维护困难。封装网络请求可以提高代码复用性和可维护性。 基础封装示例 创建一…

uniapp 图像旋转

uniapp 图像旋转

图像旋转的基本原理 在UniApp中实现图像旋转通常涉及对图像数据的处理或CSS变换。旋转可以通过修改图像的transform属性或使用Canvas API直接操作像素数据实现。 使用CSS实现图像…

uniapp下拉换图

uniapp下拉换图

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