uniapp的生命周期

在 UniApp 中,生命周期函数是指在组件(如页面、视图等)创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数,帮助开发者在适当的时机进行相关的逻辑处理。

UniApp 的生命周期函数可以分为 页面生命周期组件生命周期 两类。以下是详细的介绍:

一、页面生命周期

页面生命周期指的是每个页面从加载、显示到销毁的整个过程。

  1. onLoad

    页面加载时触发,参数 options 包含了页面的启动参数。

    适用于:获取页面传递的参数,初始化页面数据等。

    javascript

复制代码
  onLoad(options) {
    console.log('页面加载', options);
  }
  • onShow

    页面每次显示时触发。

    适用于:页面显示时需要刷新数据或处理一些界面相关的逻辑。

    javascript

复制代码
  onShow() {
    console.log('页面显示');
  }
  • onReady

    页面首次渲染完成时触发。

    适用于:页面渲染完成后的一些处理,通常用于 DOM 操作等。

    javascript

复制代码
  onReady() {
    console.log('页面渲染完成');
  }
  • onHide

    页面隐藏时触发(如进入后台、页面跳转)。

    适用于:暂停或保存状态,避免一些不必要的操作。

    javascript

复制代码
  onHide() {
    console.log('页面隐藏');
  }
  • onUnload

    页面卸载时触发(如页面被销毁,用户离开页面)。

    适用于:页面销毁时进行清理操作,如清除定时器、取消订阅等。

    javascript

复制代码
  onUnload() {
    console.log('页面卸载');
  }
  • onPullDownRefresh

    用户下拉页面时触发。

    适用于:刷新页面内容。

    javascript

复制代码
  onPullDownRefresh() {
    console.log('页面下拉刷新');
  }
  • onReachBottom

    页面触底时触发。

    适用于:加载更多数据。

    javascript

复制代码
  onReachBottom() {
    console.log('页面触底');
  }
  • onPageScroll

    页面滚动时触发。

    适用于:监听滚动位置变化,执行页面滚动相关操作。

    javascript

复制代码
  onPageScroll(e) {
    console.log('页面滚动', e);
  }
  • onShareAppMessage

    用户点击分享按钮时触发。

    适用于:定制分享内容。

    javascript

复制代码
   onShareAppMessage() {
     return {
       title: '分享标题',
       path: '/pages/index/index',
     };
   }

二、组件生命周期

组件生命周期是指 UniApp 中自定义组件的生命周期函数。它分为 组件创建组件显示组件销毁 等过程。

  1. created

    组件实例化时触发。

    适用于:初始化组件的状态,执行数据请求等。

    javascript

复制代码
  created() {
    console.log('组件创建');
  }
  • attached

    组件挂载到页面时触发。

    适用于:DOM 节点已渲染,适合进行操作和监听事件。

    javascript

复制代码
  attached() {
    console.log('组件挂载');
  }
  • ready

    组件渲染完成后触发。

    适用于:执行需要访问组件节点的方法,如获取元素尺寸等。

    javascript

复制代码
  ready() {
    console.log('组件渲染完成');
  }
  • moved

    组件被移动到节点树中时触发。

    适用于:处理组件位置变动时的逻辑。

    javascript

复制代码
  moved() {
    console.log('组件已移动');
  }
  • detached

    组件从页面卸载时触发。

    适用于:清理定时器、事件监听器等资源。

    javascript

复制代码
   detached() {
     console.log('组件卸载');
   }

三、全局生命周期

UniApp 中还可以使用一些全局生命周期函数来管理应用程序的状态:

  1. onLaunch

    应用启动时触发。

    适用于:全局初始化操作、获取用户信息等。

    javascript

复制代码
  onLaunch() {
    console.log('应用启动');
  }
  • onShow

    应用每次显示时触发。

    适用于:应用从后台回到前台时进行的一些逻辑处理。

    javascript

复制代码
  onShow() {
    console.log('应用显示');
  }
  • onHide

    应用每次隐藏时触发。

    适用于:应用进入后台时,暂停相关操作等。

    javascript

复制代码
  onHide() {
    console.log('应用隐藏');
  }
  • onError

    全局错误捕获。

    适用于:捕获并处理应用运行时的错误。

    javascript

复制代码
  onError(msg) {
    console.log('应用发生错误:', msg);
  }
  • onPageNotFound

    页面不存在时触发。

    适用于:自定义 404 页面或处理页面跳转失败等。

    javascript

复制代码
   onPageNotFound() {
     console.log('页面不存在');
   }

总结

UniApp 的生命周期函数为开发者提供了丰富的钩子,可以在不同的时间点处理相应的逻辑。页面生命周期主要包括页面加载、显示、隐藏和卸载等阶段,而组件生命周期则处理组件的创建、挂载、渲染和销毁等。合理利用这些生命周期函数,可以更高效地开发 UniApp 应用,提升应用的性能和用户体验。

相关推荐
郑州光合科技余经理18 小时前
乡镇外卖跑腿小程序开发实战:基于PHP的乡镇同城O2O
java·开发语言·javascript·spring cloud·uni-app·php·objective-c
2501_916008891 天前
iOS 跨平台开发实战指南,从框架选择到开心上架(Appuploader)跨系统免 Mac 发布全流程解析
android·macos·ios·小程序·uni-app·iphone·webview
QuantumLeap丶2 天前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
用户9714171814272 天前
uniapp页面路由
vue.js·uni-app
Kingsaj2 天前
uni-app打包app -- 在用户首次启动 App 时,强制弹出一个“用户协议与隐私政策”的确认对话框。
服务器·ubuntu·uni-app
Vue10242 天前
uniapp 使用renderjs 封装 video-player 视频播放器, html5视频播放器-解决视频层级、覆盖、播放卡顿
uni-app·音视频·html5
钱端工程师2 天前
uniapp封装uni.request请求,实现重复接口请求中断上次请求(防抖)
前端·javascript·uni-app
茶憶2 天前
uni-app app移动端实现纵向滑块功能,并伴随自动播放
javascript·vue.js·uni-app·html·scss
dcloud_jibinbin2 天前
【uniapp】解决小程序分包下的json文件编译后生成到主包的问题
前端·性能优化·微信小程序·uni-app·vue·json
茶憶2 天前
uniapp移动端实现触摸滑动功能:上下滑动展开收起内容,左右滑动删除列表
前端·javascript·vue.js·uni-app