全局配置
原创2026/3/5大约 3 分钟
tarBar 💎
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页
提示
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad
顶部的 tabbar 目前仅微信小程序上支持
"tabBar": {
"color":"#8a8a8a", // tab 上的文字默认颜色
"selectedColor":"#ff0000", // tab 上的文字选中时的颜色
"backgroundColor":"#ffffff",// tab 的背景色
"borderStyle":"black", // tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值
"position":"bottom", // 可选值 bottom、top
"fontSize":"10px", // 文字默认大小
"iconWidth":"24px", // 图标默认宽度（高度等比例缩放）
"spacing":"3px", // 图标和文字的间距
"height":"50px", // tabBar 默认高度
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/home.png",
"selectedIconPath": "static/home_select.png"
},
{
"pagePath":"pages/cart/cart",
"text":"购物车",
"iconPath":"static/other.png",
"selectedIconPath": "static/other_select.png"
},
{
"pagePath":"pages/user/user",
"text":"我的",
"iconPath":"static/authorization.png",
"selectedIconPath": "static/authorization_select.png"
}
]
}单页面自定义tarBar
使用官方定义的tarBar虽然操作简单，但是结构单一，无法满足复杂的页面结构布局，因此可以自定义tarBar布局和样式，只需要简单修改页面文件夹下的json文件即可
"tarBar": {
"custom": true,
}窗口表现 💎
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
"globalStyle": {
"navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
"navigationBarTitleText": "百战", // 导航栏标题文字内容
"navigationBarBackgroundColor": "#ff0000", // 导航栏背景颜色（同状态栏背景色），如"#000000"
"backgroundColor": "#ff0000", // 窗口的背景色
"pageOrientation": "auto", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px
"rpxCalcIncludeWidth": 750 ,// rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx
"enablePullDownRefresh":true, // 开启下拉刷新
"backgroundTextStyle":"dark" ,// 下拉 loading 的样式，仅支持 dark / light
"onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部距离，单位只支持px
}单页面的窗口表现
"style": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "百战",
"navigationBarBackgroundColor": "#ff0000",
"backgroundColor": "#ff0000",
"pageOrientation": "auto",
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcIncludeWidth": 750 ,
"enablePullDownRefresh":true,
"backgroundTextStyle":"dark" ,
"onReachBottomDistance":50
}单页面自定义窗口表现
使用官方定义的窗口表现虽然操作简单，但是结构单一，无法满足复杂的页面结构布局，因此可以自定义头部窗口的布局和样式，只需要简单修改页面文件夹下的json文件即可
"navigationStyle": "custom",至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。