uniapp生命应用生命周期和页面生命周期

在uni-app中,组件生命周期分为两部分:页面生命周期和应用生命周期。页面生命周期用于控制页面的生命周期事件,而应用生命周期用于控制整个应用的生命周期事件。
页面生命周期

  • onLoad:页面加载时触发,可以在这个生命周期里进行初始化数据操作。

  • onShow:页面显示时触发,每次页面展示都会触发,比如从其他页面返回到该页面时。

  • onReady:页面初次渲染完成时触发,可以在这个生命周期里访问页面节点。

  • onHide:页面隐藏时触发,比如跳转到其他页面或者切入后台时触发。

  • onUnload:页面卸载时触发,比如页面被销毁时触发,可以在这个生命周期里进行一些清理操作。

应用生命周期

  • onLaunch:应用初始化时触发,只触发一次,在应用生命周期内只有一个实例。

  • onShow:应用启动或从后台进入前台时触发,可以在这个生命周期里做一些应用激活时的操作。

  • onHide:应用从前台进入后台时触发,可以在这个生命周期里做一些应用进入后台时的操作。

  • onError:应用发生错误时触发,可以在这个生命周期里进行错误处理。

需要注意的是,uni-app的生命周期函数名称和小程序的生命周期函数名称大致相同,但具体的触发时机和用法可能有所区别。另外,uni-app还提供了扩展的生命周期函数如onPullDownRefresh、onReachBottom、onResize等等,可以根据实际需求进行使用。

页面生命周期函数的使用

  1. 在页面的vue文件中,直接编写对应的生命周期函数即可。例如,在页面的vue文件里添加以下代码:
export default {  
  onLoad() {  
    console.log('页面加载');  
  },  
  onShow() {  
    console.log('页面显示');  
  },  
  onReady() {  
    console.log('页面初次渲染完成');  
  },  
  onHide() {  
    console.log('页面隐藏');  
  },  
  onUnload() {  
    console.log('页面卸载');  
  },  
}  
  1. 在对应的生命周期函数中编写你所需的逻辑代码。例如,在onLoad生命周期函数里进行初始化数据操作,如调用接口获取数据。

应用生命周期函数的使用

  1. App.vue文件中,直接编写对应的应用生命周期函数即可。例如,在App.vue中添加以下代码:
export default {  
  onLaunch() {  
    console.log('应用初始化');  
  },  
  onShow() {  
    console.log('应用显示');  
  },  
  onHide() {  
    console.log('应用隐藏');  
  },  
  onError(err) {  
    console.log('应用错误', err);  
  },  
}  
  1. 在对应的应用生命周期函数中编写你所需的逻辑代码。例如,在onLaunch生命周期函数里进行应用初始化操作,如获取用户信息、打开数据库连接等。

相关推荐

  1. uniapp生命应用生命周期页面生命周期

    2024-02-03 00:02:02       51 阅读
  2. #Uniapp页面生命周期&应用生命周期应用

    2024-02-03 00:02:02       59 阅读
  3. uni-app的生命周期应用页面生命周期

    2024-02-03 00:02:02       33 阅读
  4. 小程序-生命周期(2) 应用周期/页面周期

    2024-02-03 00:02:02       32 阅读
  5. Flutter页面生命周期

    2024-02-03 00:02:02       38 阅读
  6. uniapp生命周期

    2024-02-03 00:02:02       53 阅读
  7. UniApp 生命周期详解

    2024-02-03 00:02:02       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-03 00:02:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-03 00:02:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-03 00:02:02       82 阅读
  4. Python语言-面向对象

    2024-02-03 00:02:02       91 阅读

热门阅读

  1. LeetCode 面试热门 100 题(第 038 ~ 050题)

    2024-02-03 00:02:02       55 阅读
  2. 常用的数据库SQL语句使用大全

    2024-02-03 00:02:02       47 阅读
  3. 面了搜狐大模型算法岗(实习),有惊无险。。。

    2024-02-03 00:02:02       47 阅读
  4. 网络编程练习题(TCP)

    2024-02-03 00:02:02       48 阅读
  5. 一线大厂面试真题——谈谈你对ES的理解

    2024-02-03 00:02:02       49 阅读
  6. linux 上库五步走,经验贴

    2024-02-03 00:02:02       48 阅读
  7. Spark如何用累加器Accumulator收集日志

    2024-02-03 00:02:02       52 阅读
  8. unity打开外部exe,并将其置顶

    2024-02-03 00:02:02       49 阅读
  9. Kubernetes实战(二十二)-Pod时区修改

    2024-02-03 00:02:02       57 阅读
  10. C# Newtonsoft.Json解析json笔记

    2024-02-03 00:02:02       45 阅读