【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期

2023-12-11 00:06:46 浏览数 (3)

前言

  • 好，经过上个章节的介绍完毕之后，了解了一下 uni-app-修改组件主题和样式
  • 那么了解完了uni-app-修改组件主题和样式之后，这篇文章来给大家介绍一下 uni-app-OptionAPI应用生命周期和页面生命周期
  • 首先不管三七二十一，先来新建一个项目

搭建演示环境

创建一个全新的项目：

然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可。

  • 经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境
  • 接下来就可以开始进行介绍 uni-app-OptionAPI应用生命周期和页面生命周期内容了

步入正题

应用生命周期

  • 在看这个应用生命周期之前，你们肯定或许有这么一个疑问就是在哪监听应用的生命周期呢？其实很简单，就是在 App.vue 文件中
  • 打开 App.vue 文件，可以看到分别有 onLaunch、onShow、onHide 这几个生命周期函数，分别对应的是应用的生命周期函数

那么我是怎么知道的呢？其实很简单，我们可以去官网查看一下，uni-app-应用生命周期

官方文档中介绍了很多，比较常用的就是 onLaunch、onShow、onHide 这几个生命周期函数, 所以我们就来看一下这几个生命周期函数的作用就可以了，其他的自己去试一下就可以了。

  • onLaunch：当uni-app初始化完成时触发（全局只触发一次）
  • onShow：当uni-app启动，或从后台进入前台显示
  • onHide：当uni-app从前台进入后台

演示方式非常简单，我们直接将项目以微信小程序的方式运行起来，然后在微信小程序中进行操作，当我运行起来之后，微信小程序控制台中就打印出来了我们在生命周期函数中打印的内容，如下图所示：

那么 onHide 的内容咋没有打印出来呢？其实很简单，因为 onHide 是当 uni-app 从前台进入后台的时候才会触发，所以我们需要将微信小程序切换到后台，之所以用微信小程序运行的原因就是有这么一个功能，可以将微信小程序切换到后台，如下图所示：

当我点击之后，就可以看到 onHide 的内容也打印出来了，如下图所示：

页面生命周期

在看页面生命周期之前，我们先配置一下 tabBar：

代码语言：json复制
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
    }, {
        "pagePath": "pages/account/account",
        "text": "账号"
    }]
}

然后在 pages 目录下新建一个账号页面：

index.vue 页面中的代码如下所示：

代码语言：html复制
<template>
	<view>
		首页
	</view>
</template>

<script>
	export default {
	}
</script>

<style>
</style>

account.vue 页面中的代码如下所示：

代码语言：html复制
<template>
	<view>
		账号
	</view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

搭建完毕之后，我们就可以来看一下页面生命周期了，页面生命周期的介绍可以去官网查看一下，uni-app-页面生命周期

官方文档中介绍了很多，说什么支持 Vue 的组件生命周期还扩展了一些额外的生命周期函数，我给大家介绍一部分，其他的自己去试一下就可以了。

  1. onLoad：监听页面加载
  2. onShow：监听页面显示
  3. onReady：监听页面初次渲染完成
  4. onHide：监听页面隐藏
  5. onPullDownRefresh：监听用户下拉动作
  6. onReachBottom：页面上拉触底事件的处理函数

那么我们就来看一下这几个生命周期函数的作用就可以了，其他的自己去试一下就可以了。

更改 index.vue 页面中的代码如下所示：

代码语言：html复制
<script>
	export default {
		onLoad() {
			console.log("首页 onLoad");
		},
		onShow() {
			console.log("首页 onShow");
		},
		onReady() {
			console.log("首页 onReady");
		},
		onHide() {
			console.log("首页 onHide");
		},
		onPullDownRefresh() {
			console.log("首页 onPullDownRefresh");
		},
		onReachBottom() {
			console.log("首页 onReachBottom");
		},
	}
</script>

更改 account.vue 页面中的代码如下所示：

代码语言：html复制
<script>
    export default {
        onLoad() {
            console.log("账号 onLoad");
        },
        onShow() {
            console.log("账号 onShow");
        },
        onReady() {
            console.log("账号 onReady");
        },
        onHide() {
            console.log("账号 onHide");
        },
        onPullDownRefresh() {
            console.log("账号 onPullDownRefresh");
        },
        onReachBottom() {
            console.log("账号 onReachBottom");
        },
    }
</script>

然后我们就可以运行起来，然后在微信小程序控制台中就可以看到我们在生命周期函数中打印的内容，我这里录制一个视频，大家可以看一下：

通过观察发现是不是还有我们的上拉刷新和下拉加载的生命周期函数没有打印出来呢？其实很简单，我来改造一下首页的代码，如下所示：

代码语言：html复制
<template>
    <view>
        <text>首页</text>
        <view class="content">
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 88</view>
            <view class="item">item 99</view>
        </view>
    </view>
</template>

<style>
    .item {
        width: 100%;
        height: 200rpx;
    }
</style>

改造之后还不够，如果要想实现下拉加载和上拉刷新，还需要更改 pages.json 文件，我这里是以首页页面为例，需要在首页对象的 style 中配置 enablePullDownRefresh 和 onReachBottomDistance 属性。

  • enablePullDownRefresh：是否开启下拉刷新
  • onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位为px（设置上拉加载更多的距离）

onReachBottomDistance 有默认值，所以我们不需要配置，直接配置 enablePullDownRefresh 属性即可，如下所示：

代码语言：json复制
{
    "path": "pages/index/index",
    "style": {
        "enablePullDownRefresh": true
    }
}

然后我们就可以运行起来，然后在微信小程序控制台中就可以看到我们在 onPullDownRefresh 和 onReachBottom 生命周期函数中打印的内容，我这里录制一个视频，大家可以看一下：

总结

好，经过上面的介绍完毕之后，我们就可以来总结一下 uni-app-OptionAPI应用生命周期和页面生命周期的内容了。

  • 应用生命周期：onLaunch、onShow、onHide
  • 页面生命周期：onLoad、onShow、onReady、onHide、onPullDownRefresh、onReachBottom

其他的生命周期函数，大家可以去官网查看一下，自己去试一下就可以了。

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 JavaBoyL，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

2023腾讯·技术创作特训营第四期 前端 移动端多端开发 UniApp

0 人点赞