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

最新推荐文章于 2024-07-23 13:47:45 发布

偷米偷米

最新推荐文章于 2024-07-23 13:47:45 发布

阅读量1.2k

点赞数 22

分类专栏： uniapp 文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/mingzihaonanqua/article/details/136382600

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

1.应用生命周期函数

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

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

值得注意的是应用生命周期函数是整个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 组件生命周期外还支持下方页面生命周期函数

函数名	说明	平台差异说明	最低版本
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首页代码为例

<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中的代码