【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期
前言
- 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-OptionAPI应用生命周期和页面生命周期
- 那么了解完了uni-app-OptionAPI应用生命周期和页面生命周期之后,这篇文章来给大家介绍一下 uni-app-CompositionAPI应用生命周期和页面生命周期
- CompositionAPI 是 Vue3.0 中的一个新特性,uni-app 也支持 CompositionAPI,所以我们就来看一下 uni-app-CompositionAPI应用生命周期和页面生命周期的写法
- 首先不管三七二十一,先来新建一个项目
搭建演示环境
创建一个全新的项目:
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json
文件,然后选择微信小程序配置,复制一下即可。
- 经过如上的这么一顿操作之后,就可以搭建完毕运行环境,与编码环境
- 接下来就可以开始进行介绍 uni-app-CompositionAPI应用生命周期和页面生命周期内容了
步入正题
应用生命周期
如果想使用 CompositionAPI 的话,需要在 script 标签中添加 setup
, 添加了 setup 之后就不是导出一个默认对象了,而是导出一个函数,将原来 App.vue 中的内容全部转换为函数定义,代码如下所示:
<script setup>
onLaunch(() => {
console.log('App Launch')
})
onShow(() => {
console.log('App onShow')
})
onHide(() => {
console.log('App onHide')
})
</script>
改造完毕之后,我们就可以运行一下,看一下效果了,运行之后,可以看到控制台中报错了(我这里声明一下后面的启动都以微信小程序启动),如下图所示:
报错信息是 ReferenceError: onLaunch is not defined
, 也就是说 onLaunch 这个函数没有定义,因为我们使用的是 CompositionAPI,那么我们就需要在 setup
函数中导入 onLaunch 函数,onLaunch 从哪里导入呢?从 @dcloudio/uni-app
中导入,当然如果说 onLaunch 需要导入那么其他的生命周期函数也需要导入,所以我们直接将所有的生命周期函数都导入进来,代码如下所示:
<script setup>
import {onLaunch, onShow, onHide} from '@dcloudio/uni-app'
onLaunch(() => {
console.log('App Launch')
})
onShow(() => {
console.log('App onShow')
})
onHide(() => {
console.log('App onHide')
})
</script>
<style>
</style>
然后运行一下,可以看到控制台中打印出来了我们的生命周期函数,如下图所示:
这个就是在 UniApp 中 CompositionAPI 的写法。
页面生命周期
页面生命周期的写法和应用生命周期的写法是一样的,只不过是在页面中使用,我们快速搭建一下环境吧,配置一下 tabBar:
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/account/account",
"text": "账号"
}]
}
然后在 pages 目录下新建一个 account 目录,然后在 account 目录下新建一个 account.vue 文件,然后在 account.vue 文件中添加如下代码:
<template>
<view>
<text>账号</text>
</view>
</template>
<script setup>
import {onLoad, onShow, onReady, onHide, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
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>
<style>
</style>
index.vue 文件中添加如下代码:
<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>
<script setup>
import {onLoad, onShow, onReady, onHide, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
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>
<style lang="scss" scoped>
.item {
width: 100%;
height: 200rpx;
}
</style>
配置 pages.json 文件中 pages 相关内容:
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh" : true
}
},
{
"path" : "pages/account/account",
"style" :
{
"navigationBarTitleText" : "账号"
}
}
],
然后运行一下,我这里以一个视频的形式展示给大家,如下图所示:
总结
好,经过上面的介绍,我们就了解了 uni-app-CompositionAPI应用生命周期和页面生命周期的写法
最主要是就是要知道在使用 CompositionAPI 的时候,需要在 script 标签中添加 setup
,然后在 setup
函数中导入生命周期函数,然后在生命周期函数中添加我们的代码即可。
要知道导入生命周期函数的时候,需要从 @dcloudio/uni-app
中导入,然后在 setup
函数中使用即可。
最后
大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL
,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。