uni-app 生命周期、语法

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）。
实例：

//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）的下拉动作。
实例：

//pages.json
{
    "path": "pages/index/index.vue",
    "style": {
        "enablePullDownRefresh": true
    }
}

调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。
实例：

export default{
    onPullDownRefresh(){
        console.log('用户下拉页面时触发')
        uni.stopPullDownRefresh()
    }
}

3.2.3 onTabItemTap 参数说明

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

实例：

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 () 方法

实例：

export default {
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

4. 函数执行顺序

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

4.1 实例

//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>

打印结果如下：

应用生命周期onLaunch：应用初始化完成
应用生命周期onShow：应用启动完成
页面生命周期onLoad：页面加载
页面生命周期onShow：页面显示
页面生命周期onReady：页面初次渲染完成

切换到其他页面，再切换回首页。

应用生命周期onHide：应用进入到后台状态
页面生命周期onHide：页面隐藏
应用生命周期onShow：应用启动完成
页面生命周期onShow：页面显示

4.2 执行顺序总结

应用生命周期函数要先于页面生命周期函数执行。

4.2.1 应用生命周期执行顺序

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

4.2.2 页面生命周期执行顺序

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

5. 小结

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

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