pages.json概述
pages.json 文件用来对uni-app进行全局配置,决定页面文件的路径、窗口表现、设置多tab页(底部导航)等。
pages.json 配置内容
(1)globalStyle Object
可选,设置默认页面的窗口表现。
(2)pages Object Array
必选,设置页面路径及窗口表现。
(3)tabBar Object
可选,设置底部tab(底部导航)的表现。
(4)condition Object
可选,启动模式配置
创建uni-app程序
下面通过新创建一个uni-app项目来记录pages.json文件的配置。
如果有uni-app项目,可以跳过该步骤,直接查看pages.json文件即可。
创建项目
目标是在多平台运行,选择uni-app(U)
项目创建完毕,会在根目录自动生成pages.json文件。
创建页面-pages
选中pages目录,右键“新建页面”,创建的页面会自动在page.json文件的pages里注册。
如下图新增了list、publish、me页面等。
此时pages.json文件会自动添加新增的页面信息。
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/publish/publish",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/me/me",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
配置pages
上面介绍的是新增页面时自动注册pages.json文件,下面对pages进行个性化修改。
pages接收一个数组,来指定应用由哪些页面组成。每一项代表对应页面的信息,应用中新增/减少页面,都需要对 pages 数组进行修改。
文件名不需要写后缀,如“.vue”,框架会自动寻找路径下的页面资源。
注意:pages节点的第一项为应用入口页(即首页)。
pages结构:
"pages":[
{
// 每个页面
},
{
// 每个页面
},
]
pages.style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
navigationBarBackgroundColor
HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle
String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText
String 导航栏标题文字内容
backgroundColor
HexColor #ffffff 窗口的背景色 微信小程序
backgroundTextStyle
String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh
Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance
Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
navigationStyle
设置导航栏样式。String类型,默认default,仅支持 default/custom。
custom模式可自定义导航栏,只保留右上角胶囊状的按钮。
注意当值为custom时,会产生uniapp移除原生导航栏后页面与手机状态栏重叠问题。也就是页面会直通手机顶部状态栏,页面与手机状态栏重叠。
解决:配置mainfest.json来关闭沉浸式,打开应用的manifest.json文件,打开源码视图,如下代码所示,在 app-plus 下添加 statusbar ,并将其下 immersed 的值设为 false。
"app-plus" : {
//"usingComponents" : true,
//"nvueStyleCompiler" : "uni-app",
//"compilerVersion" : 3,
"statusbar": {
"immersed": false
},
}
backgroundColorTop
String #ffffff 顶部窗口的背景色。 微信小程序且为 iOS
backgroundColorBottom
String #ffffff 底部窗口的背景色。 微信小程序且为 iOS
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
// 导航栏标题文字内容
"navigationBarTitleText": "自由写作网",
// 导航栏样式,仅支持 default/custom,custom就会取消导航栏
"navigationStyle": "custom"
}
}
,{
"path" : "pages/publish/publish",
"style" :
{ // 导航栏标题文字内容
"navigationBarTitleText": "发布",
// 是否开启下拉刷新,true开启
"enablePullDownRefresh": false,
// 导航栏样式,仅支持 default/custom,custom就会取消导航栏
"navigationStyle": "custom"
}
}
,{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false,
// 导航栏样式,仅支持 default/custom,custom就会取消导航栏
"navigationStyle": "custom"
}
}
,{
"path" : "pages/me/me",
"style" :
{
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
// 导航栏样式,仅支持 default/custom,custom就会取消导航栏
"navigationStyle": "custom"
}
}
],
配置全局样式-globalStyle
"globalStyle": {
// 导航栏标题颜色,仅支持 black/white
"navigationBarTextStyle": "black",
// 导航栏标题文字内容
"navigationBarTitleText": "uni-app",
// 导航栏背景颜色
"navigationBarBackgroundColor": "#F8F8F8",
// 窗口的背景色
"backgroundColor": "#F8F8F8"
}
配置底部导航-tabBar
tabBar 中的list是一个数组,只能配置最少2个、最多5个 tab,tab按数组的顺序排序。
配置导航栏需要先准备导航的页面,上面已创建了publish、list、me等页面。
需要准备导航每一个按钮的两个图标:默认图标和选中图标。
结构:
"tabBar": {
//tabBar属性
"list": [
{
// 每个导航按钮
},
{
// 每个导航按钮
},
]
}
tabBar整体属性
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar 上边框的颜色,仅支持 black/white
list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top
每个导航按钮属性
pagePath String 是 页面路径,必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPath String 否 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
tabBar示例:
"tabBar": {
// 导航按钮文字默认颜色
"color": "#A6A6A6",
// 导航按钮文字被选中颜色
"selectedColor": "#74ADFC",
// 导航栏上边框的颜色,仅支持 black/white
"borderStyle": "black",
// 导航栏背景色
"backgroundColor": "#F8F8F8",
// 导航栏列表
"list": [{
// 页面路径,必须在pages内已经定义
"pagePath": "pages/index/index",
// 导航默认按钮,图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片
"iconPath": "static/images/tabBarImg/index.png",
// 导航选中时按钮
"selectedIconPath": "static/images/tabBarImg/index_select.png",
// 导航按钮文字
"text": "首页"
},
{
"pagePath": "pages/list/list",
"iconPath": "static/images/tabBarImg/list.png",
"selectedIconPath": "static/images/tabBarImg/list_select.png",
"text": "列表"
},
{
"pagePath": "pages/publish/publish",
"iconPath": "static/images/tabBarImg/publish.png",
"selectedIconPath": "static/images/tabBarImg/publish_select.png",
"text": "发布"
},
{
"pagePath": "pages/me/me",
"iconPath": "static/images/tabBarImg/me.png",
"selectedIconPath": "static/images/tabBarImg/me_select.png",
"text": "我的"
}
]
}