dg-publish: “true” tags:
- 文件-文档-txt文件-笔记 电脑-PC-桌面端-计算机 部署-配置-安装-调好-设置-初始化 导入的同义词
- father::uniapp
梗概
pages.json 是 Uni App 的核心配置文件，控制应用的整体结构、页面路由、窗口样式和跨平台适配。主要包含页面路径配置、全局样式设置、Tab栏配置和分包优化等功能。
核心配置项概览
| 配置项 | 功能 | 必需 |
|---|---|---|
pages | 页面路径及样式配置 | ✓ |
globalStyle | 全局窗口样式 | - |
tabBar | 底部Tab栏配置 | - |
condition | 启动模式配置 | - |
subPackages | 分包配置 | - |
preloadRule | 分包预加载规则 | - |
详细配置说明
pages - 页面配置
定义所有页面路径及单页样式
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"backgroundColor": "#f8f8f8",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
},
{
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表页",
"navigationStyle": "custom"
}
}
]
}pages.style 常用属性
navigationBarTitleText: 导航栏标题navigationBarBackgroundColor: 导航栏背景色navigationBarTextStyle: 导航栏文字颜色（black/white）navigationStyle: 导航栏样式（default/custom）backgroundColor: 页面背景色enablePullDownRefresh: 是否开启下拉刷新onReachBottomDistance: 页面上拉触底事件触发时距页面底部距离
globalStyle - 全局样式
设置所有页面的默认窗口样式
{
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"enablePullDownRefresh": false,
"maxWidth": 375,
"rpxCalcMaxDeviceWidth": 960,
"backgroundTextStyle": "dark"
}
}全局样式特点
- 可被单个页面的
style覆盖 - 适用于设置应用的默认外观
- 支持响应式适配配置
tabBar - Tab栏配置
配置底部或顶部Tab栏
{
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position": "bottom",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "首页"
},
{
"pagePath": "pages/profile/profile",
"iconPath": "static/profile.png",
"selectedIconPath": "static/profile-active.png",
"text": "我的"
}
]
}
}tabBar 配置说明
position: Tab位置（bottom/top）list: Tab项列表（2-5个）- 每个Tab项需配置
pagePath、iconPath、selectedIconPath、text - Tab页面只能通过uni.switchTab()或uni.reLaunch()跳转
condition - 启动模式
配置开发调试时的启动页面
{
"condition": {
"current": 0,
"list": [
{
"name": "详情页",
"path": "pages/detail/detail",
"query": "id=123&name=test"
}
]
}
}- 仅在开发环境生效
- 方便调试特定页面和参数
subPackages - 分包配置
配置分包加载优化大型项目启动速度
{
"subPackages": [
{
"root": "packageA",
"name": "pack1",
"pages": [
{
"path": "pages/cat/cat",
"style": {
"navigationBarTitleText": "分包页面"
}
}
]
}
]
}分包优势
- 减少主包大小，提升启动速度
- 按需加载，优化用户体验
- 单个分包不能超过2M，总包不能超过20M
preloadRule - 分包预加载
设置分包预加载规则
{
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["packageA"]
}
}
}- 在特定页面加载时提前加载指定分包
network: 预加载网络条件（all/wifi）
navigationBarFit - 导航栏适配
配置导航栏与页面内容的适配方式
{
"globalStyle": {
"navigationBarFit": "float"
}
}float: 浮动模式，支持沉浸式导航squeezed: 挤压模式，传统适配方式
平台特有配置
H5平台配置
{
"h5": {
"router": {
"mode": "hash",
"base": "/my-app/"
},
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}小程序平台配置
{
"mp-weixin": {
"appid": "wx1234567890",
"setting": {
"urlCheck": false
}
}
}配置文件示例
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "首页"
}
]
}
}注意事项
- 与页面内部CSS样式分工不同，主要控制窗口框架
- 配置修改后需要重新编译才能生效
- 不同平台可能有特定的配置限制
- 路径配置不需要
.vue后缀