生命周期、语法介绍-uniapp入门教程

当前位置:　首页>> 技术小册>> uniapp入门教程

### 1. 前言
本小节我们一起来了解 uni-app 生命周期以及生命周期函数的语法。包括生命周期的几个阶段、触发机制和执行顺序。同学们不仅要理解生命周期的概念，还要知道生命周期从创建到销毁是怎样的一个过程。

### 2. 什么是生命周期
生命周期就是指一个对象生老病死的过程，针对 uni-app 来说，生命周期就是 uni-app 实例从创建、运行到销毁的过程。

**2.1 生命周期分类**
uni-app 生命周期包括应用生命周期和页面生命周期。

应用生命周期：是控制应用全局的生命周期，监听应用初始化、启动、报错等状态。只在 App.vue 文件中有效，App.vue 文件是应用配置文件，用来配置 App 全局样式以及监听应用生命周期。

页面生命周期：是控制单个页面的生命周期，监听页面渲染、加载、显示、下拉、滚动、分享等状态。

**2.2 生命周期函数**
在生命周期中的每个阶段都会伴随着一个函数的触发，从而执行生命周期函数中的具体逻辑代码，这些函数就被称为生命周期函数。

下面我们来看一下 uni-app 中都包括哪些生命周期函数。

### 3. 生命周期函数汇总
**3.1 应用生命周期**

| 函数名       | 说明                            | 应用场景                    |
|-----------|-------------------------------|-------------------------|
|  onLaunch |  当 uni-app 应用初始化完成时触发，全局只触发一次 | 一般用于查看用户是否授权、获取用户的设备信息等 |
|  onShow   |  当应用启动，或从后台进入前台显示时触发，可以触发多次   | 一般用于重新进入应用的消息提示或者数据刷新   |
|  onHide   |  监听应用从前台进入后台                  | 一般用于退出应用时的消息提示          |
|  onError  |  应用报错时被触发                     | 用于监测并处理错误               |

当我们离开应用时，应用不会被直接销毁，而是进入了后台。当我们再次进入到应用时，应用就会从后台进入前台。

那应用什么时候会被真正销毁呢？

当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。

**3.2 页面生命周期**

| 函数名                                 | 说明                                        | 支持平台                       |
|-------------------------------------|-------------------------------------------|----------------------------|
|  onLoad                             |  页面加载时触发，一个页面只会调用一次。可以传递参数，参数说明查看示例 3.2.1 |  所有                        |
|  onShow                             |  页面显示时触发，每次打开页面都会调用一次                     | 所有                         |
|  onReady                            |  页面初次渲染完成后触发，一个页面只会调用一次                   | 所有                         |
|  onHide                             |  页面隐藏时触发，每次隐藏页面都会被触发                      | 所有                         |
|  onUnload                           |  页面卸载时触发                                  | 所有                         |
|  onResize                           |  页面每次窗口尺寸变化时会被触发，                         | App、微信小程序                  |
|  onPullDownRefresh                  |  用户下拉页面时触发，一般用于页面下拉刷新，查看实例 3.2.2          |  所有                        |
|  onReachBottom                      |  页面上拉滚动触底时触发                              | 所有                         |
|  onTabItemTap                       |  点击底部 tab 栏时触发，参数为 Object，参数说明查看实例 3.2.3  |  微信小程序、百度小程序、H5、App        |
| onShareAppMessage                   |  点击右上角分享时触发                               | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
|  onPageScroll                       |  页面滚动时触发，只监听页面垂直滚动                        | 所有                         |
|  onNavigationBarButtonTap           |  监听原生标题栏按钮点击事件，参数说明查看实例 3.2.4             | App、H5                     |
| onBackPress                         |  页面返回时触发，查看实例 3.2.5                       | App、H5                     |
| onNavigationBarSearchInputChanged   |  监听原生标题栏搜索输入框输入内容变化事件                     |  App、H5                    |
| onNavigationBarSearchInputConfirmed |  监听原生标题栏搜索输入框搜索事件                         |  App、H5                    |
| onNavigationBarSearchInputClicked   |  监听原生标题栏搜索输入框点击事件                         |  App、H5                    |

**3.2.1 onLoad 参数说明**
页面生命周期函数 onLoad，是页面最先执行的生命周期函数，如果从上个页面跳转到本页面，可以通过参数 option 传递上个页面的数据。

我们来看一下实例，比如要从首页（index.vue）跳转到个人中心页面（me.vue）。
实例：
```html
//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.reLaunch({
    url: 'test?name=我是首页的数据'
});

//me.vue
export default {
    //options参数就是上个页面传递过来的数据
    onLoad: function (options) {
        console.log(options.name);
    }
}

//打印出来的结果
我是首页的数据

```
**3.2.2 onPullDownRefresh 函数**
用于监听该页面用户下拉页面的动作。

普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在 style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。

下面来看一下实例，比如我们想开启首页（index.vue）的下拉动作。
实例：
```html
//pages.json
{
    "path": "pages/index/index.vue",
    "style": {
        "enablePullDownRefresh": true
    }
}

```
调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。
实例：
```html
export default{
    onPullDownRefresh(){
        console.log('用户下拉页面时触发')
        uni.stopPullDownRefresh()
    }
}

```
**3.2.3 onTabItemTap 参数说明**

| 属性        | 类型     | 说明                      |
|-----------|--------|-------------------------|
|  index    | String |  被点击 tabItem 的序号，从 0 开始 |
|  pagePath | String |  被点击 tabItem 的页面路径      |
|  text     | String |  被点击 tabItem 的按钮文字      |

实例：
```html
export default {
    onTabItemTap(options) {
        console.log('被点击tabItem的序号index:' + options.index)
        console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)
        console.log('被点击tabItem的按钮文字text:' + options.text)
    }
}

```
注意以下几点：

onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。

如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。

在 App 端，从 HBuilderX 1.9 的自定义组件编译模式才开始支持 onTabItemTap。

**3.2.4 onNavigationBarButtonTap 参数说明**

| 属性     | 类型     | 说明            |
|--------|--------|---------------|
|  index | Number |  原生标题栏按钮数组的下标 |

实例：
```
export default {
    onNavigationBarButtonTap(options) {
        console.log('index:' + options.index)
    }
}

```

**3.2.5 onBackPress 参数说明**
返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。

| 属性    | 类型     | 说明                                                                              |
|-------|--------|---------------------------------------------------------------------------------|
|  from | String |  触发返回行为的来源：‘backbutton’—— 左上角导航栏按钮及安卓返回键；‘navigateBack’——uni.navigateBack () 方法 |

实例：
```json
export default {
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

```
### 4. 函数执行顺序
我们将生命周期函数放在一起执行，看一下生命周期函数的执行顺序是怎样的

**4.1 实例**
```javascript
//App.vue
<script>
    export default {
        onLaunch: function() {
           console.log('应用生命周期onLaunch：应用初始化完成');
        },
        onShow: function() {
            console.log('应用生命周期onShow：应用启动完成')
        },
        onHide: function() {
            console.log('应用生命周期onHide：应用进入到后台状态')
        }
    }
</script>

//首页index.vue
<template></template>
<script>
    export default {
        onLoad() {
            console.log('页面生命周期onLoad：页面加载')
        },
        onShow() {
            console.log('页面生命周期onShow：页面显示')
        },
        onReady(){
            console.log('页面生命周期onReady：页面初次渲染完成')
        },
        onHide() {
            console.log('页面生命周期onHide：页面隐藏')
        },
        onUnload() {
            console.log('页面生命周期onUnload：页面卸载')
        },
        onBackPress(){
            console.log('页面生命周期onBackPress：页面返回')
        },
        onShareAppMessage() {
            console.log('页面生命周期onShareAppMessage：分享页面')
        },
        onReachBottom() {
            console.log('页面生命周期onReachBottom：上拉页面触底')
        },
        onPageScroll(){
            console.log('页面生命周期onPageScroll：页面滚动')
        },
        onPullDownRefresh() {
            console.log('页面生命周期onPullDownRefresh：下拉页面')
            uni.stopPullDownRefresh();
        },
        onNavigationBarButtonTap(){
            console.log('页面生命周期onNavigationBarButtonTap：标题栏按钮点击')
        }
    }
</script>

```
打印结果如下：
```javascript
应用生命周期onLaunch：应用初始化完成
应用生命周期onShow：应用启动完成
页面生命周期onLoad：页面加载
页面生命周期onShow：页面显示
页面生命周期onReady：页面初次渲染完成

```
切换到其他页面，再切换回首页。
```javascript
应用生命周期onHide：应用进入到后台状态
页面生命周期onHide：页面隐藏
应用生命周期onShow：应用启动完成
页面生命周期onShow：页面显示

```
**4.2 执行顺序总结**
应用生命周期函数要先于页面生命周期函数执行。

**4.2.1 应用生命周期执行顺序**
onLaunch > onShow > onHide，其他生命周期函数需要相应动作触发才会执行。比如 onError 函数在应用出现错误才会被触发。

**4.2.2 页面生命周期执行顺序**
onLoad > onShow > onReady > onHide，其他生命周期函数需要相应动作触发才会执行。比如 onPullDownRefresh 函数在页面下拉的时候才会被触发。

### 5. 小结
本节课程我们主要学习了 uni-app 生命周期。本节课程的重点如下：

生命周期概念的理解；
各个生命周期函数的触发机制以及语法；
生命周期函数的执行顺序。

该分类下的相关小册推荐：

uni-app零基础入门