uniapp应用生命周期,uni-app生命周期函数
uni-app开发教程栏目介绍页面样式、配置文件和生命周期
UNI-APP开发(仿饿)开发课程：进入学习
推荐(免费):uni-app开发教程
文章目录
简介：页面风格和布局1。尺寸单位2。风格导入3。内嵌样式4。选择器5。全球风格和地方风格2。配置文件1。页面配置页面。jsonglobalstylepagestabbarction 2。显示配置清单。生命周期摘要前言
本文首先介绍了uni-app的页面样式和布局，包括大小单位、样式导入、内嵌样式和选择器等。然后介绍pages.json和manifest.json两个配置文件的配置项和基本使用；最后简单介绍了生命周期的基本用途。
一、页面样式与布局
1.尺寸单位
Uni-app框架目前只支持长度单位px和%。与传统网页不同的是，px是相对于基准宽度(Uni-App的基准宽度是750px)的一个单位，它已经适应了移动屏幕。其原理类似于rem，开发者无需适应不同屏幕尺寸的设备，只需根据设计稿确定边框样式中的px值即可。
设计1px与框架样式1px的换算公式为：设计1px/设计参考宽度=框架样式1px/750px，换句话说，uni-app中页面元素宽度的宽度计算公式为750px *设计稿中元素的宽度/设计参考宽度。
例子如下：
如果设计稿的宽度是640px，设计稿上A元素的宽度是100px，那么uni-app中A元素的宽度应该设置为750 * 100/640，即117px；
如果设计稿的宽度是375px，设计稿上B元素的宽度是200px，那么uni-app中B元素的宽度应该设置为750 * 200/375，即400px。
2.样式导入
使用@import语句导入外部样式表，@import后跟要导入的外部样式表的相对路径，并使用；结束语句。
例如：
风格
@导入././common/uni . CSS ；单一卡{
箱形阴影：无；
}/style3.内联样式
在框架上，支持样式和类属性来控制组件的样式：
(1)班级
用于指定样式规则，其属性值是样式规则中类选择器名称(样式类名)的集合。样式类名不需要带有。和样式类名由空格分隔。
一般静态的样式会统一写入类中。
例如：
class= normal _ view /在前面的hello uniapp项目中，App.vue如下所示：
脚本
导出默认值{
onLaunch: function() {
console.log(“应用程序启动”)
},
onShow: function() {
console.log(“应用程序显示”)
},
onHide: function() {
console.log(“应用程序隐藏”)
}
}/脚本样式
/*每个页面的通用CSS */。红色{
颜色：# 007AFF
}/stylepages/index/index.vue如下：
模板
view class=content
image class= logo src=/static/logo . png /image
view class=text-area
text class= title“{ title } }/text
/查看
查看class=red
你好，科利/观点
/view/templatescript
导出默认值{
data() {
返回{
标题：“你好”
}
},
onLoad() {
},
方法：{
}
}/脚本样式。内容{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
justify-content:居中；
}。徽标{
身高：200rpx
宽度：200rpx
页边距-顶部：200rpx
左边距：自动；
右边距：自动；
边距-底部：50rpx
}。文本区域{
显示器：flex
justify-content:居中；
}。标题{
字体大小：36rpx
颜色：# 8f8f94
}/style修改，重新编译运行，微信开发者工具模拟器小程序页面如下：
可以看到，App.vue中定义的样式对索引页面有影响。
(2)风格
样式动态的样式被接收，它将在运行时被解析。应该避免将静态样式写入样式，以免影响渲染速度。
例如：
view style= color:{ { color } }；/4.选择器
当前支持的选择器有：
选择器重要性备注。class=" intro Select all components with class=" intro " No # id # first name Select components with id=" first name " No elementview Select all view components No element，element view，Checkbox选择所有文档的视图组件和所有复选框组件None: afterview:after在视图组件后面插入内容。只有微信小程序和5 App生效：beforeview:before在视图组件前面插入内容只有微信小程序和5 App生效。5.全局样式与局部样式
在App.vue中定义样式为全局样式，应用于每一页。比如App.vue中定义的全局样式对索引页也有效；
pages目录下vue文件中定义的样式是局部样式，只对相应的页面有效，会覆盖App.vue中相同的选择器，比如索引页面中的自定义样式。
同时，你也可以通过@import语句导入App.vue中的外联样式，这个语句也适用于每一个页面。
二、配置文件
Uni-App一般以json的形式定义配置文件，如pages.json、manifest.json等。其中pages.json更偏向于小程序，manifest.json更偏向于app。
1.页面配置pages.json
Pages.json文件用于在uni-app上执行全局配置，主要是对接小程序、确定页面文件路径、窗口性能、设置多个标签等。
pages.json的常见配置项列表如下：
类型必需或不必需说明globalStyleObject No设置默认页面的窗口表示形式pages ObjectArray Yes设置页面路径和窗口表示形式tabBarObject No设置底部选项卡的表示形式conditionObject No Start mode配置一个pages.json示例，该示例包括所有上述配置选项，如下所示：
{
页面:[{
路径:页面/组件/索引，
样式:{
NavigationBarTitleText“:”组件
}
}, {
路径:页面/API/索引，
样式:{
NavigationBarTitleText :接口
}
}, {
路径:页面/组件/视图/索引，
样式:{
navigationBarTitleText :查看
}
}],
globalStyle: {
navigationBarTextStyle :黑色，
NavigationBarTitleText :演示文稿，
navigationBarBackgroundColor : # f8f8f 8 ，
backgroundColor: #F8F8F8
},
tabBar: {
颜色: #7A7E83 ，
selectedColor: #3cc51f ，
边框样式:黑色，
backgroundColor: #ffffff ，
列表:[{
pagePath :页面/组件/索引，
icon path : static/image/icon _ component . png ，
selectedIconPath : static/image/icon _ component _ HL . png ，
文本:组件
}, {
pagePath :页面/API/索引，
iconPath : static/image/icon _ API . png ，
selectedIconPath : static/image/icon _ API _ HL . png ，
文本:接口
}]
},
条件:{
当前:0，
列表:[
{
姓名: ，
路径“:”，
查询“:”
}
]
}}下面进一步解释每个配置项的含义。
globalStyle
用于设置状态栏、导航栏、标题、窗口背景颜色等。对所有页面都有效。
具体参数及含义如下：
参数默认值含义navigationbarbackgroundcolorxcolor # 000000导航栏背景色navigationbartextstylestringwhite导航栏标题色，只支持没有导航栏标题文字内容的black/whitenavigationbartitletextstring导航栏样式，只支持default/custombackgroundcolorxcolor # ffffff窗口的背景色。微信小程序的有效描述：navigationStyle只有在pages.json-globalStyle中设置时才有效，并且该参数设置为custom后，所有窗口都没有导航栏。
Pages.json修改如下：
{
pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText :单一应用程序
}
}
],
globalStyle: {
navigationBarTextStyle :白色，
navigationBarTitleText :你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
条件:{//模式配置，只在开发时生效。
Current: 0，//当前激活的模式(列表的索引项)
列表:[
{
名称: ，//模式名称
Path :，//开始页面，必选。
Query: //启动参数，在页面的onLoad函数中获取。
}
]
}}显示：
很明显，导航栏的背景色已经生效了。
pages
接收数组以指定应用程序由哪些页面组成。表示相应页面的每一项信息，在应用程序中添加、减少或修改页面，都需要同步修改页面数组。
描述：
指定路径时，文件名不需要加后缀，框架会自动找到路径下的页面资源；
pages节点的第一项是应用入口页面(即首页)，所以在开发多个页面时，可以将当前开发的页面放在第一项，方便在微信开发者工具中查看和调试。
创建新页面的过程如下：
在pages目录下新建一个about目录，新建一个about.vue，如下所示：
模板
view class=content
关于；在…各处；大约./view/templatescript
导出默认值{
data() {
返回{
标题：“关于”
}
},
onLoad() {
},
方法：{
}
}/脚本样式。内容{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
justify-content:居中；
}。徽标{
身高：200rpx
宽度：200rpx
页边距-顶部：200rpx
左边距：自动；
右边距：自动；
边距-底部：50rpx
}。文本区域{
显示器：flex
justify-content:居中；
}。标题{
字体大小：36rpx
颜色：# 8f8f94
}/style用pages.json注册它，如下所示：
{
pages :[//pages数组中的第一项表示应用程序启动页面。
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText: Uni索引
}
},
{
路径: pages/about/about ，
样式:{
navigationBarTitleText : Uni About
}
}
],
globalStyle: {
navigationBarTextStyle :白色，
navigationBarTitleText :你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
条件:{//模式配置，只在开发时生效。
Current: 0，//当前激活的模式(列表的索引项)
列表:[
{
名称: ，//模式名称
Path :，//开始页面，必选。
Query: //启动参数，在页面的onLoad函数中获取。
}
]
}}其中，pages数组中的每一页还可以通过style参数定义当前页面的样式来设置状态栏、导航栏、标题、窗口背景色等。每一页。具体参数如下：
参数默认值含义navigationbarbackgroundcolorxcolor # 000000导航条背景色，如 # 00000 导航bartextstylestringwhite导航条标题色，只支持黑色/whitenavigationpartitletextstring。无导航栏标题文字内容backgroundColorHexColor#ffffff窗口背景色，BackgroundTextStyleStringdark下拉加载样式对微信小程序、百度小程序、字节跳动小程序有效，仅支持dark/lightenablepulldownresh BooleanFirst。是否要在ReachBottomDistanceNumber50页上打开下拉刷新？触发下拉触底事件时距页面底部的距离，单位为pxnavigationStyleStringdefault导航栏样式。仅支持默认/自定义。自定义模式可以自定义导航栏，只保留右上角的按钮。是backgroundcolortopstring # ffffff顶部窗口的背景色，对微信小程序7.0、百度小程序、H5、App(2.0.3)有效。BackgroundColorBottomString # ffffff底部窗口的背景色只在iOS平台有效，页面在pages.json中定义如下：
{
pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText : Uni Index ，
backgroundColor: #F0AD4E ，
navigationBarTextStyle:black
}
},
{
路径: pages/about/about ，
样式:{
navigationBarTitleText : Uni About
}
}
],
globalStyle: {
navigationBarTextStyle :白色，
navigationBarTitleText :你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
条件:{//模式配置，只在开发时生效。
Current: 0，//当前激活的模式(列表的索引项)
列表:[
{
名称: ，//模式名称
Path :，//开始页面，必选。
Query: //启动参数，在页面的onLoad函数中获取。
}
]
}}显示：
tabBar
如果应用程序是多选项卡应用程序，您可以指定选项卡栏的性能以及通过选项卡栏配置项切换选项卡时显示的相应页面。
常见参数和含义如下：
Type必选或不选默认值含义colorHexColor是不带制表符的文本默认颜色selectedColorHexColor是选中不带制表符的文本时的颜色backgroundColorHexColor是不带制表符的背景颜色borderStyleString否黑色标签栏的上边框的颜色，仅支持黑色/白名单。它是一个tabless列表，至少有2个tabpositionstring，最多有5个tabpositionstring。无底部可选值底部和顶部描述：
当位置设置为顶部时，图标；将不显示；
tabBar中的列表是一个数组，只能配置最少2个选项卡，最多5个选项卡。选项卡按数组的顺序排序，数组中的每一项都是具有以下属性值的对象：
该属性是否是必需的，表明pagePathString是页面路径，必须首先在pages中定义。textString是tabiconPathString，没有图片路径。图标大小限制为40kb，推荐大小为81px * 81px。当位置在顶部时，该参数无效。不支持网络映像selectedIconPathString。选择图像路径时，图标大小限制为40kb，推荐大小为81px * 81px。当位置在顶部时，该参数无效。在静态目录下新建一个imgs目录保存图片资源，下面放4张图片，然后在pages.json中定义tabBar如下：
{
pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText : Uni Index ，
backgroundColor: #F0AD4E ，
navigationBarTextStyle:black
}
},
{
路径: pages/about/about ，
样式:{
navigationBarTitleText : Uni About
}
}
],
globalStyle: {
navigationBarTextStyle :白色，
navigationBarTitleText :你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
tabBar: {
颜色: #F0AD4E ，
selectedColor:#007AFF ，
backgroundColor:#FFFFFF ，
列表:[
{
页面路径:页面/索引/索引，
iconPath : static/imgs/index _ 0 . png ，
selectedIconPath : static/imgs/index _ 1 . png ，
文本:主页
},
{
pagePath:pages/about/about ，
iconPath : static/imgs/about _ 0 . png ，
selectedIconPath : static/imgs/about _ 1 . png ，
文本:关于我们
}
]
},
条件:{//模式配置，只在开发时生效。
Current: 0，//当前激活的模式(列表的索引项)
列表:[
{
名称: ，//模式名称
Path :，//开始页面，必选。
Query: //启动参数，在页面的onLoad函数中获取。
}
]
}}}将显示以下内容：
如你所见，此时可以显示不同的选项卡，并且可以切换。
如果需要图标等静态资源，可以直接点击添加QQ群。
63624318，从群文件夹uni-app入门教程下载就行了。
condition
启动模式配置，仅在开发期间有效，用于模拟直接访问页面的场景。
比如小程序转发后，用户点击打开的页面。
和属性具有以下含义：
该属性是否必选描述当前编号是当前激活的模式，列表节点的索引值listArray是启动模式列表，其中列表属性如下：
该属性是否是必需的描述名称字符串是启动模式名称路径字符串是启动页面路径查询字符串不能在页面的onLoad函数中解释任何启动参数：
在App中运行真机时可以直接打开配置好的页面，需要在微信开发者工具中手动更改编译模式。
例如，pages.json如下所示：
{
pages :[//pages数组中的第一项表示应用程序启动页面。
{
路径:页面/索引/索引，
样式:{
navigationBarTitleText : Uni Index ，
backgroundColor: #F0AD4E ，
navigationBarTextStyle:black
}
},
{
路径: pages/about/about ，
样式:{
navigationBarTitleText : Uni About
}
}
],
globalStyle: {
navigationBarTextStyle :白色，
navigationBarTitleText :你好uniapp ，
navigationBarBackgroundColor : # ff 557 f ，
backgroundColor: #fffae8
},
tabBar: {
颜色: #F0AD4E ，
selectedColor:#007AFF ，
backgroundColor:#FFFFFF ，
列表:[
{
页面路径:页面/索引/索引，
iconPath : static/imgs/index _ 0 . png ，
selectedIconPath : static/imgs/index _ 1 . png ，
文本:主页
},
{
pagePath:pages/about/about ，
iconPath : static/imgs/about _ 0 . png ，
selectedIconPath : static/imgs/about _ 1 . png ，
文本:关于我们
}
]
},
条件:{//模式配置，只在开发时生效。
Current: 0，//当前激活的模式(列表的索引项)
列表:[{
Name: index ，//架构名称
Path: pages/index/index ，//开始页面，必选
query : interval=4000 autoplay=false //startup参数，在页面的onLoad函数中获取。
},
{
Name: about ，//架构名称
Path: pages/about/about ，//开始页面，必选
query : interval=4000 autoplay=false //startup参数，在页面的onLoad函数中获取。
}
]
}}显示：
很明显，此时可以根据微信开发者工具中定义的启动模式名称选择页面，同时传递参数值。
2.显示配置manifest.json
Manifest.json文件是应用程序的配置文件，用于指定名称、图标、权限等。的应用，而且更倾向于Android、iOS等app配置。
常见配置项目列表如下：
属性描述nameString应用名称appidString应用标识，新建uni-app项目时，DCloud的云端分配descriptionString应用描述versionNameString版本名称，如版本号1.0.0versionCodeString，例如36app-plusObjectApp特定配置quickappObject特定配置会支持mp-weixinObject微信小程序特定配置MP-百度小程序特定配置mp-alipayObject支付宝小程序不提供可配置项。其中，app-plus的常见属性和含义如下：
类型含义模块对象权限模块distributeObjectApp发布信息。模块属性中常见的可配置权限模块如下：
描述联系人系统通讯录指纹识别地图地图消息短消息OAuth登录授权支付支付推送消息推送分享社交分享语音识别统计VideoPlayer视频播放LivePusher直播分发属性常见配置如下：
类型描述androidObjectAndroid应用程序配置iosObjectiOS应用程序配置sdkConfigsObjectSDK配置描述：
manifest.json文件的配置建议在HBuilderX提供的可视化操作界面完成；
完成打包时配置的部分操作界面，如证书等信息；
Native.js权限段会根据配置的模块权限在打包后自动填充；
有些模块是默认的，不需要配置。
mp-weixin的常见配置项目和含义如下：
属性含义微信小程序的AppIDString appid，需要登录https://mp.weixin.qq.com/申请usingComponentsBoolean启用自定义组件模式，v1.8.0，设置functionalPagesBoolean微信小程序是否为默认的falsesettingObject微信小程序项目启用插件功能页面，默认关闭在BuilderX编辑器中查看manifest.json文件如下：
可以看到，除了通过source视图定义manifest.json配置项，还可以使用可视化界面进行操作。
三、生命周期
无论是app还是小程序，生命周期都是一个很重要的特性，也就是一个对象从创建到最后销毁的全过程。
Uni-app支持以下页面生命周期功能：
onLoad函数监控页面加载，它的参数是上一页传递的数据。参数是对象(用于页面引用)。在显示监控页面上显示在显示监控页面上。第一次渲染完成。隐藏监控页面隐藏空载监控页面。卸载onPullDownRefresh监视用户的下拉操作。onShareAppMessage，onReachBottom页面上的bottoming事件的处理函数。用户点击右上角分享。微信小程序onPageScroll听页面滚动。当onTabItemTap当前为选项卡页面时，单击选项卡会触发index.vue，如下所示：
模板
view class=content
image class= logo src=/static/logo . png /image
view class=text-area
text class= title“{ title } }/text
/查看
查看class=red
你好，科利/观点
/view/templatescript
导出默认值{
data() {
返回{
标题：“你好”
}
},
onLoad() {
console.log(index onload )
},
昂秀(){
console.log(索引onshow )
},
onHide() {
console . log( ide上的索引)
},
方法：{
}
}/脚本样式。内容{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
justify-content:居中；
}。徽标{
身高：200rpx
宽度：200rpx
页边距-顶部：200rpx
左边距：自动；
右边距：自动；
边距-底部：50rpx
}。文本区域{
显示器：flex
justify-content:居中；
}。标题{
字体大小：36rpx
颜色：# 8f8f94
}/styleabout.vue如下；
模板
view class=content
关于；在…各处；大约./view/templatescript
导出默认值{
data() {
返回{
标题：“关于”
}
},
onLoad() {
console.log(关于加载)
},
昂秀(){
console.log(“关于onshow”)
},
方法：{
}
}/脚本样式。内容{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
justify-content:居中；
}。徽标{
身高：200rpx
宽度：200rpx
页边距-顶部：200rpx
左边距：自动；
右边距：自动；
边距-底部：50rpx
}。文本区域{
显示器：flex
justify-content:居中；
}。标题{
字体大小：36rpx
颜色：# 8f8f94
}/style按如下方式运行测试：
很明显，在不同页面之间切换时，会调用相应的生命周期函数打印出不同的日志信息。
总结
Uni-app对样式有自己的规则，比如大小单位，但也和HTML5有很多共同点，包括样式导入、选择器、全局样式和局部样式。同时，还有小程序和应用程序的特定配置文件。生命周期可以用来定义页面在不同阶段和情况下的操作。
更多编程知识请访问：编程教学！那就是uni-app解释的页面风格、配置文件、生命周期的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。