uniapp从零开始-应用及组件的生命周期函数应用_uniapp组件生命周期函数

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

1.应用生命周期函数

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

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

下面以代码举例

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 组件生命周期外还支持下方页面生命周期函数

以index.vue首页代码为例

<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应用构建过程中，钩子函数的内容将跟随应用的启动运行退出等过程而执行。

更多uniapp小程序，H5，App知识欢迎关注公众号 学习半生