uniapp页面周期函数
时间: 2025-01-06 07:38:24 浏览: 63
### UniApp 页面生命周期函数详解
#### 一、页面生命周期概述
UniApp 提供了一系列页面生命周期函数,使开发者能够在页面的不同生命周期阶段执行特定的操作。这有助于更好地管理页面的状态和行为[^2]。
#### 二、主要页面生命周期函数及其作用
##### onLoad
此函数在页面加载时触发,适用于接收启动参数并进行必要的初始化工作[^1]。
```javascript
export default {
onLoad(option) { // option为对象,其键名即为传递的参数名
console.log('onLoad', option);
}
}
```
##### onShow
每当页面显示时都会调用该函数,无论是首次访问还是从后台切换回前台均会触发。
##### onHide
当页面隐藏时会被调用,比如跳转至其他应用或新页面覆盖当前页时。
##### onUnload
仅在页面卸载(关闭)时才会被调用一次,可用于清理资源或保存状态。
##### onReady
初次渲染完成时调用,如果依赖于页面结构,则应在此处处理逻辑。
#### 三、组合式API中的差异
对于采用组合式API风格编写的应用程序而言,在Vue2与Vue3环境下存在细微差别,具体实现细节需参照各自版本对应的官方文档说明[^3]。
相关问题
uniapp 生命周期函数
uni-app 支持以下应用生命周期函数:
1. `onLaunch`:当 uni-app 初始化完成时触发,全局只触发一次。
2. `onShow`:当 uni-app 启动或从后台进入前台显示时触发,可以被多次触发。
3. `onHide`:当 uni-app 从前台进入后台时触发,可以被多次触发。
4. `onError`:当 uni-app 报错时触发。
这些应用生命周期函数是在 App.vue 文件中定义的。你可以在 `<script>` 标签中编写相应的函数来处理相应的事件。例如,以下是一个示例代码:
```javascript
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
onError: function(err) {
console.log('App Err', err)
}
}
</script>
```
你还可以在 `<style>` 标签中编写公共的 CSS 样式,以供各个页面使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uni-app的生命周期](https://blog.csdn.net/atu1111/article/details/118990349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [uniapp笔记.rar](https://download.csdn.net/download/weixin_43167546/12691276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
uniapp生命周期函数
uni-app中的生命周期函数包括应用生命周期和组件生命周期。
应用生命周期函数包括:
- onLaunch: 当uni-app初始化完成时触发,全局只触发一次。
- onShow: 当uni-app启动,或从后台进入前台显示时触发。
- onHide: 当uni-app从前台进入后台时触发。
- onError: 当uni-app报错时触发。
- onUniNViewMessage: 对nvue页面发送的数据进行监听。
- onUnhandledRejection: 对未处理的Promise拒绝事件进行监听。
- onPageNotFound: 页面不存在时的监听函数。
- onThemeChange: 监听系统主题变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uni-app的三种生命周期函数整理](https://blog.csdn.net/symbool_ly/article/details/118086517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
阅读全文
相关推荐
















