第一天学习uni-app,先了解pages.json如何进行全局配置,页面文件的路径、窗口样式、原生导航栏、底部tabbar。类似于微信小程序app.json
**
**分为三块:pages、globalStyle、 tabBar
先看下效果图和代码:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},{
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh":true,
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"black",
"navigationStyle":"default"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black", //导航栏标题颜色,仅支持black/white
"navigationBarTitleText": "标题内容", //导航栏标题内容
"navigationBarBackgroundColor": "#f4f4f4", //导航栏背景色
"backgroundColor" : "#eeeeee", //窗口背景色
"enablePullDownRefresh" : true, //开启下拉刷新
},
"tabBar":{
"color":"#666",// 文字默认颜色
"selectedColor":"#ffaa00", //选中时的颜色
"backgroundColor":"#F4f4f4", //背景色
"position": "bottom/top" // tabbar居顶,目前只有微信小程序支持。
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/icon-1.png",
"selectedIconPath":"static/icon-1-1.png"
},
{
"pagePath":"pages/list/list",
"text":"列表",
"iconPath":"static/icon-2.png",
"selectedIconPath":"static/icon-2-1.png"
}
]
}
个人感觉uni-app配置和小程序app.json配置几乎差不多。tabbar最多可配置5个。
需要注意的:
1、tabar页面打开一次就保留内存中,再次切换tabbar时只会触发每个页面的onShow, 不会再次触发onLoading
2、uni-app支持在css里面设置背景图片,使用本地路径背景图片需要注意:图片小于40kb,如果图片大于40kb,需要将图片放到服务器,引用网络地址。本地背景图片引用路径仅支持以 ~@ 开头的绝对路径。 例如:background-image:url(’~@/static/logo.png’), 不支持相对路径
uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面
uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面
uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面
uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
uni.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面
个人理解:
navigateTo 与 redirectTo 只能打开非tabBar页面
switchTab 只能打开tabBar页面
reLaunch 可以打开任意页面
uni-app页面打开方式和小程序打开方式一样,唯一的区别在于前缀不一样。