个人技术总结——uni-app的生命周期函数

[222100403江滢怡]

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	《构建之法》

目录

• 技术概述
• 技术详述
• 应用生命周期
• 页面生命周期
• 组件生命周期
• 示例代码
• 技术使用中遇到的问题和解决过程
• 问题一
• 问题描述
• 解决方案
• 问题二
• 问题描述
• 解决方案
• 总结

技术概述

uni-app生命周期用于管理应用和页面从启动到销毁的各个阶段。该技术在跨平台应用开发中至关重要，帮助开发者在特定时机执行代码，如初始化、数据加载和资源清理。学习难点在于理解不同生命周期的触发条件和适用场景。

技术详述

应用生命周期

应用生命周期指的是整个uni-app从启动到关闭的整个过程，其需要在App.vue中声明，包括：

• onLaunch：应用程序第一次启动时触发
• onShow：应用程序启动或从后台进入前台时触发
• onHide：应用程序进入后台时触发
• onError：应用程序发生错误时触发，可以用来捕获和处理错误信息
• onUniNViewMessage：监听来自nvue页面的消息

页面生命周期

页面生命周期指的是uni-app中每个页面从加载到渲染再到销毁的过程，页面生命周期钩子函数包括：

• onInit：监听页面初始化，触发时机早于onLoad，参数为上个页面传递的数据
• onLoad：页面被加载时触发，此时页面的响应式数据、计算属性等已设置完成，可以进行数据初始化和网络请求等操作
• onReady：页面渲染完成时触发，此时可以进行页面动画和交互等操作，组件挂载完成，DOM树可用
• onShow：页面被展示时触发
• onHide：页面被隐藏时触发
• onUnload：页面被销毁时触发，可以进行资源释放和清理等操作

组件生命周期

uni-app组件的生命周期与Vue标准组件的生命周期相同，包括：

• beforeCreate：组件实例被创建前触发
• created：组件实例被创建之后触发，此时组件的数据和方法已经初始化
• beforeMount：组件被渲染之前触发，此时组件还没有被渲染到页面上
• mounted：组件被渲染之后触发，此时组件已经被渲染到页面上
• beforeUpdate：组件数据更新之前触发
• updated：组件数据更新之后触发
• beforeDestroy：组件实例被销毁之前触发
• destroyed：组件实例被销毁之后触发，此时组件的数据和方法已经无法访问

示例代码

// App.vue
onShow() {
  // 应用再次进入前台时，可能需要刷新用户信息
  this.refreshUserInfo();
}

// 某个页面的Vue组件
onLoad(options) {
  // 页面加载时获取参数并请求数据
  this.fetchData(options.userId);
},
onShow() {
  // 页面显示时，可能需要刷新页面数据
  this.refreshData();
}

技术使用中遇到的问题和解决过程

问题一

问题描述

开发应用时，遇到用户需要切换账号等类似问题，页面上仍然显示上一用户的数据。

解决方案

首先要确保在用户登出时，清除所有与用户相关的数据和状态。

重新登录后，可以利用onShow和onHide钩子来管理页面的显示和隐藏，确保数据在显示时是最新的。

问题二

问题描述

页面间传递数据时出现问题，获取传递的数据失败。

解决方案

使用uni.navigateTo等API时，通过url参数传递数据，并在目标页面的onLoad钩子中处理从上一个页面传递来的数据。

总结

理解每个生命周期的触发时机和适用场景，能够帮助我们编写更加健壮且用户友好的代码。这次开发中同时遇到了需要切换用户数据的需求与页面返回保留同一位置的需求，让我对各种生命周期钩子有了更深的理解，能够面对不同问题采用合适的解决方案。