uniapp从零开始-应用及页面的生命周期函数

uniapp支持应用级生命周期钩子函数以及组件级生命周期钩子函数，同时uniapp应用基于vue.js开发，因此所有vue页面的生命周期钩子函数在uniapp中同样有效。

1.应用生命周期函数

uniapp支持以下应用生命周期函数

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

值得注意的是应用生命周期函数是整个uniapp应用的钩子函数，只能写在App.vue或者App.nvue中

下面以代码举例

js 复制代码

App.vue
<script>
    export default {
        // 应用生命周期只能在App.vue中进行监听
        onLaunch: function(lanuchOptions) {
            console.log('App Launch')
            console.log(lanuchOptions)
        },
        onShow: function(lanuchOptions) {
            console.log('App Show')
            console.log(lanuchOptions);
        },
        onHide: function() {
            console.log('App Hide')
        },
        onError:function(){
            console.log("App Error");
        },
        onUniNViewMessage:function(){
            console.log("App SendMessage");
        },
        onUnhandledRejection:function(){
            console.log("App Reject");
        },
        onPageNotFound:function(){
            console.log("App 404");
        },
        onThemeChange:function(){
            console.log("App ThemeChange");
        },
        onLastPageBackPress:function(){
            console.log("App Back");
        },
        onExit:function(){
            console.log("App Exit");
        }
    }
</script>

onLanuch：当应用启动后则立即触发此函数

onShow：应用首页打开显示则触发执行此函数

onHide：当应用进入后台则立即触发此函数

点击图中按钮则应用会进入后台运行，此时将触发onHide函数

onError：当应用出错时则立即触发此函数

例如我将一段css代码的右括号删掉

这段代码已经成为错误的代码，运行会报错，同时将会触发onError函数

onPageNotFound:当访问的页面在应用中不存在时则触发这个函数

onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

例如我们在微信开发者工具中访问应用不存在的一个页面

访问不存在的页面触发onPageNotFound函数

另外的几个钩子函数

onUniNViewMessage， onUnhandledRejection， onThemeChange， onLastPageBackPress， onExit

均不太常用，在此不做过多描述

2.页面生命周期函数

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的"搜索"按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

以index.vue首页代码为例

js 复制代码

<template>
    <view class="content">
        <view class="text-area">
            <text class="title">首页</text>
        </view>
    </view>
</template>
<script>
    export default {
        onInit:function(object) {
            console.log("page init");
            console.log(object)
        },
        onLoad:function(object){
            console.log("page load");
            console.log(object)
        },
        onShow(){
            console.log('page show');
        },
        onReady(){
            console.log("page ready");
        },
        onHide(){
            console.log("page hide");
        },
        onUnload(){
            console.log("page unload");
        },
        onResize(){
            console.log("page resize");
        },
        onPullDownRefresh(){
            console.log("page pulldown");
        },
        onReachBottom(){
            console.log("page reach bottom");
        },
        onTabItemTap(object){
            console.log("page tab change");
            console.log(object);
        },
        onShareAppMessage(res){
            console.log(res);
            console.log("page Share")
            let pages = getCurrentPages();
            let currentPage = pages[pages.length - 1];
            return {
              title: '自定义分享标题',
              path:currentPage.route
            }
        },
        onPageScroll(object){
            console.log("page scroll");
            console.log(object);
        },
        onShareTimeline(){
            console.log("page shareOut");
            return {
                title: '分享标题',
                path: '/pages/index/index'
            }
        },
        onAddToFavorites(){
            console.log("page collect");
        }
    }
</script>

onInit：页面初始化函数，在百度小程序中当页面被点击初始化时触发此函数

onLoad：当页面加载完毕后执行onLoad中的代码

进入首页触发了三个函数onLoad，onShow，onReady。

onHide：当页面进入后台后触发此函数，当底部导航条切换到其他页面时，onHide被触发，此时首页并未销毁而是被隐藏了

onUnload：在页面卸载时触发，比如通过 uni.navigateBack 返回上一页或页面被关闭。

onResize：当页面的尺寸发生变化时触发，例如设备横屏和竖屏切换。

onPullDownRefresh：使用此函数需要

需要在 pages.json 里，找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

onReachBottom：当页面下来到底部时触发此函数，一般用于瀑布流数据触底刷新

onTabItemTap:当点击底部tab时触发此函数

onShareAppMessage：当用户点击右上角三个点的分享按钮并点击发送给朋友时会触发此函数 onPageScroll：当页面中的内容进行滚动时触发此函数，参数为滚动的距离顶部的距离scrollTop onShareTimeline：分享到朋友圈，当点击右上角分享并点击分享到朋友圈时触发此函数

onAddToFavorites：添加小程序到收藏，当右上角点击分享并点击收藏时触发此函数。

通过此章节，我们了解到了在uniapp开发中主要使用到的应用生命周期函数和页面生命周期函数。在uniapp应用构建过程中，钩子函数的内容将跟随应用的启动运行退出等过程而执行**。**