# pages.json

pages.json 文件是 uni-app x 的页面管理配置文件,决定应用的首页、页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

所有页面,均需在pages.json中注册,否则不会被打包到应用中。

在HBuilderX中新建页面,默认会在pages.json中自动注册。在HBuilderX中删除页面文件,也会在状态栏提示从pages.json中移除注册。

除了管理页面,pages.json支持对页面进行特殊配置,比如应用首页的tabbar、每个页面的顶部导航栏设置。

但这些uni-app中设计的功能,主要是为了解决页面由webview渲染带来的性能问题,由原生提供一些配置来优化。

uni-app x的app平台,页面不再由webview渲染,其实不需要原生提供特殊配置来优化。但为了开发的便利和多端的统一,也支持了tabbar和导航栏设置。
但不再支持uni-app的app-plus专用配置以及tabbar的midbutton。

如pages.json中配置的导航栏和tabbar功能无法满足你的需求,可以不在pages.json中配置,自己用view做导航栏和tabbar。
hello uni-app x有相关示例,参考:

# 配置项列表

属性 类型 默认值 必填 描述
globalStyle globalStyle 配置项列表 - 默认页面的窗口表现
topWindow topWindow 配置项列表 - 上窗体
leftWindow leftWindow 配置项列表 - 左窗体
rightWindow rightWindow 配置项列表 - 右窗体
pages Array<PagesOptionsPage> - 页面路径及窗口表现
tabBar tabBar 配置项列表 - 底部 tab 的表现
condition condition 配置项列表 - 启动模式
subPackages Array<PagesSubPackages> - 分包加载配置
workers string - 使用 Worker 处理多线程任务时,设置 Worker 代码放置的目录
preloadRule object - 声明分包预下载的规则
easycom easycom 配置项列表 - 组件自动引入规则
uniIdRouter uniIdRouter 配置项列表 - 根据用户登录状态、页面是否要求登录、以及接口返回的用户token验证状态自动跳转登录页面。详细教程:详见
entryPagePath string - 默认启动首页,新增于HBuilderX 3.7.0

pages.json 兼容性

Android iOS web
globalStyle 3.9 4.11 4.0
topWindow x x 4.0
leftWindow x x 4.0
rightWindow x x 4.0
pages 3.9 4.11 4.0
tabBar 3.9 4.11 4.0
condition 3.9 4.11 4.0
subPackages x x 4.0
workers x x 4.0
preloadRule x x 4.0
easycom 3.9 4.11 4.0
uniIdRouter 3.99 4.11 4.0
entryPagePath x x 4.0

# globalStyle 配置项列表

globalStyle节点里是所有页面都生效的全局样式配置。它的配置与页面级style基本相同,但优先级低于页面级style配置。

默认页面的窗口表现

属性 类型 默认值 必填 描述
navigationBarBackgroundColor string (string.ColorString) app: #F8F8F8
web: #F8F8F8
mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-lark、mp-jd: #000000
mp-alipay、mp-kuaishou: #ffffff
导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle 'white' | 'black' "black" 导航栏标题颜色,仅支持 black/white(支付宝小程序不支持,请使用 my.setNavigationBar)。
navigationBarTitleText string - 导航栏标题文字内容
navigationStyle 'default' | 'custom' "default" 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意
backgroundColor string (string.ColorString) "#ffffff" 下拉刷新显示出来的窗口的背景色(无下拉刷新时,此颜色无效果)
backgroundColorContent string (string.ColorString) "#ffffff" 页面容器背景色
enablePullDownRefresh boolean false 是否开启下拉刷新,详见页面生命周期
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
backgroundColorTop string (string.ColorString) "#ffffff" 顶部窗口的背景色(bounce回弹区域), 仅 iOS 平台
backgroundColorBottom string (string.ColorString) "#ffffff" 底部窗口的背景色(bounce回弹区域), 仅 iOS 平台
titleImage string (string.ImageURIString) - 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址
transparentTitle 'always' | 'auto' | 'none' "none" 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明
titlePenetrate 'YES' | 'NO' "NO" 导航栏点击穿透
pageOrientation 'auto' | 'portrait' | 'landscape' "portrait" 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化
usingComponents object - 引用小程序组件,参考 小程序组件
leftWindow boolean true 当存在 leftWindow时,默认是否显示 leftWindow
topWindow boolean true 当存在 topWindow时,默认是否显示 topWindow
rightWindow boolean true 当存在 rightWindow时,默认是否显示 rightWindow
rpxCalcMaxDeviceWidth number 960 rpx 计算所支持的最大设备宽度,单位 px
rpxCalcBaseDeviceWidth number 375 rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px
rpxCalcIncludeWidth number 750 rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx
maxWidth number - 单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)
h5 h5 配置项列表 - H5 特有配置

globalStyle 兼容性

Android iOS web
navigationBarBackgroundColor 3.9 4.11 4.0
navigationBarTextStyle 3.9 4.11 4.0
navigationBarTitleText 3.9 4.11 4.0
navigationStyle 3.9 4.11 4.0
backgroundColor 3.99 x x
backgroundColorContent 4.0 4.11 4.11
enablePullDownRefresh 3.9 4.11 4.0
onReachBottomDistance x x 4.0
backgroundColorTop x x 4.0
backgroundColorBottom x x 4.0
titleImage x x 4.0
transparentTitle x x 4.0
titlePenetrate x x 4.0
pageOrientation 4.13 x x
usingComponents x x 4.0
leftWindow x x 4.0
topWindow x x 4.0
rightWindow x x 4.0
rpxCalcMaxDeviceWidth x x 4.0
rpxCalcBaseDeviceWidth x x 4.0
rpxCalcIncludeWidth x x 4.0
maxWidth x x 4.0
h5 x x 4.0

# h5 配置项列表

H5 特有配置

属性 类型 默认值 必填 描述
titleNView titleNView 配置项列表 - 导航栏设置
pullToRefresh pullToRefresh 配置项列表 - 下拉刷新

h5 兼容性

Android iOS web
titleNView x x 4.0
pullToRefresh x x 4.0
# titleNView 配置项列表

导航栏设置

属性 类型 默认值 必填 描述
backgroundColor string (string.ColorString) "#f7f7f7" 背景颜色,颜色值格式为"#RRGGBB"。
buttons array - 自定义按钮,参考 buttons
titleColor string (string.ColorString) "#000000" 标题文字颜色
titleText string - 标题文字内容
titleSize string - 标题文字字体大小
type 'defaultValue' | 'transparent' "defaultValue" 导航栏样式。"default"-默认样式;"transparent"-透明渐变。
searchInput object - 导航栏上的搜索框样式,详见:searchInput
# pullToRefresh 配置项列表

下拉刷新

属性 类型 默认值 必填 描述
support boolean - 是否开启窗口的下拉刷新功能
color string (string.ColorString) - 颜色值格式为"#RRGGBB",仅"circle"样式下拉刷新支持此属性。
type 'defaultValue' | 'circle' - 下拉刷新控件样式
height string - 窗口的下拉刷新控件进入刷新状态的拉拽高度。支持百分比,如"10%";像素值,如"50px"。
range string - 窗口可下拉拖拽的范围。支持百分比,如"10%";像素值,如"50px"。
offset string - 下拉刷新控件的起始位置。仅对"circle"样式下拉刷新控件有效,用于定义刷新控件下拉时的起始位置。支持百分比,如"10%";像素值,如"50px"。
contentdown contentdown 配置项列表 - 在下拉可刷新状态时下拉刷新控件显示的内容
contentover contentover 配置项列表 - 在释放可刷新状态时下拉刷新控件显示的内容
contentrefresh contentrefresh 配置项列表 - 在正在刷新状态时下拉刷新控件显示的内容
# contentdown 配置项列表

在下拉可刷新状态时下拉刷新控件显示的内容

属性 类型 默认值 必填 描述
caption string - 下拉刷新控件上显示的标题内容
# contentover 配置项列表

在释放可刷新状态时下拉刷新控件显示的内容

属性 类型 默认值 必填 描述
caption string - 下拉刷新控件上显示的标题内容
# contentrefresh 配置项列表

在正在刷新状态时下拉刷新控件显示的内容

属性 类型 默认值 必填 描述
caption string - 下拉刷新控件上显示的标题内容

# topWindow 配置项列表

上窗体

属性 类型 默认值 必填 描述
path string - 配置页面路径
style object - 配置页面窗口表现,配置项参考下方 pageStyle
matchMedia matchMedia 配置项列表 - 配置显示该窗口的规则,配置项参考下方 matchMedia

# matchMedia 配置项列表

配置显示该窗口的规则,配置项参考下方 matchMedia

属性 类型 默认值 必填 描述
minWidth number 768 当设备可见区域宽度 minWidth 时,显示该 window+

# leftWindow 配置项列表

左窗体

属性 类型 默认值 必填 描述
path string - 配置页面路径
style object - 配置页面窗口表现,配置项参考下方 pageStyle
matchMedia matchMedia 配置项列表 - 配置显示该窗口的规则,配置项参考下方 matchMedia

# matchMedia 配置项列表

配置显示该窗口的规则,配置项参考下方 matchMedia

属性 类型 默认值 必填 描述
minWidth number 768 当设备可见区域宽度 minWidth 时,显示该 window+

# rightWindow 配置项列表

右窗体

属性 类型 默认值 必填 描述
path string - 配置页面路径
style object - 配置页面窗口表现,配置项参考下方 pageStyle
matchMedia matchMedia 配置项列表 - 配置显示该窗口的规则,配置项参考下方 matchMedia

# matchMedia 配置项列表

配置显示该窗口的规则,配置项参考下方 matchMedia

属性 类型 默认值 必填 描述
minWidth number 768 当设备可见区域宽度 minWidth 时,显示该 window+

# pages 配置项列表

pages节点里注册页面,数据格式是数组,数组每个项都是一个对象,通过path属性指定页面路径,通过style指定该页面的样式配置。

属性 类型 默认值 必填 描述
path string (string.PageURIString) - 配置页面路径
style style 配置项列表 - 配置页面窗口表现,配置项参考下方 pageStyle
needLogin boolean false 是否需要登录才可访问

PagesOptionsPage 兼容性

Android iOS web
path 3.9 4.11 4.0
style 3.9 4.11 4.0
needLogin 3.99 4.11 4.0

Tips:

  • pages节点的第一项为应用入口页(即首页)
  • 应用中新增/减少页面,都需要对 pages 数组进行修改
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源
  • 页面路径必须与真实的文件路径大小写保持一致,即大小写敏感

示例

假使开发目录为:

	
┌─pages
│  ├─index
│  │  └─index.uvue
│  └─login
│     └─login.uvue
├─static
├─main.uts
├─App.uvue
├─manifest.json
└─pages.json
	

则需要在 pages.json 中填写

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

# style 配置项列表

用于设置每个页面的状态栏、导航条的颜色、文字等信息。

页面中配置项会覆盖 globalStyle 中相同的配置项

配置页面窗口表现,配置项参考下方 pageStyle

属性 类型 默认值 必填 描述
navigationBarBackgroundColor string (string.ColorString) app: #F8F8F8
web: #F8F8F8
mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-lark、mp-jd: #000000
mp-alipay、mp-kuaishou: #ffffff
导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle 'white' | 'black' "black" 导航栏标题颜色,仅支持 black/white
navigationBarTitleText string - 导航栏标题文字内容
navigationBarShadow navigationBarShadow 配置项列表 - 导航栏阴影,配置参考下方 导航栏阴影
navigationStyle 'default' | 'custom' "default" 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意
backgroundColor string (string.ColorString) "#ffffff" 下拉刷新显示出来的窗口的背景色(无下拉刷新时,此颜色无效果)
backgroundColorContent string (string.ColorString) "#ffffff" 页面容器背景色
backgroundTextStyle 'dark' | 'light' "dark" 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh boolean false 是否开启下拉刷新,详见页面生命周期
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
pageOrientation 'auto' | 'portrait' | 'landscape' "portrait" 页面旋转设置,支持 auto 设备自适应 / portrait 竖向 / landscape 横向
backgroundColorTop string (string.ColorString) "#ffffff" 顶部窗口的背景色(bounce回弹区域), 仅 iOS 平台
backgroundColorBottom string (string.ColorString) "#ffffff" 底部窗口的背景色(bounce回弹区域), 仅 iOS 平台
titleImage string (string.ImageURIString) - 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址
transparentTitle 'always' | 'auto' | 'none' "none" 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明
titlePenetrate 'YES' | 'NO' "NO" 导航栏点击穿透
h5 h5 配置项列表 - 编译到 H5 平台的特定样式
usingComponents object - 引用小程序组件,参考 [小程序组件https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#小程序自定义组件支持)。
leftWindow boolean true 当存在 leftWindow时,当前页面是否显示 leftWindow
topWindow boolean true 当存在 topWindow时,当前页面是否显示 topWindow
rightWindow boolean true 当存在 rightWindow时,当前页面是否显示 rightWindow
maxWidth number - 单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)

style 兼容性

Android iOS web
navigationBarBackgroundColor 3.9 4.11 4.0
navigationBarTextStyle 3.9 4.11 4.0
navigationBarTitleText 3.9 4.11 4.0
navigationBarShadow x x 4.0
navigationStyle 3.9 4.11 4.0
backgroundColor 3.99 4.11 x
backgroundColorContent 4.0 4.11 4.11
backgroundTextStyle x x 4.0
enablePullDownRefresh 3.9 4.11 4.0
onReachBottomDistance x x 4.0
pageOrientation 4.13 x x
backgroundColorTop x x 4.0
backgroundColorBottom x x 4.0
titleImage x x 4.0
transparentTitle x x 4.0
titlePenetrate x x 4.0
usingComponents x x 4.0
leftWindow x x 4.0
topWindow x x 4.0
rightWindow x x 4.0
maxWidth x x 4.0

Tips

  • 横屏
    • Web:横竖屏由手机浏览器控制,无法在pages.json中指定。uni-app x的页面和基础组件都支持自适应宽屏界面
    • Android:默认是竖屏。从4.13起支持配置pageOrientation实现横屏或自动旋转适应
    • iOS:在手机上目前只能竖屏。在ipad上只能自适应,ipad旋转为横屏后uni-app x应用也会横屏。可以在info.plist中调整。uni-app x的页面和基础组件都支持自适应宽屏界面
  • 状态栏
    • 手机顶部状态栏的背景色、前景色(white/black)与navigationBarBackgroundColor和navigationBarTextStyle相同
    • 小程序平台,pages.json中各个颜色的设置仅支持普通的16进制数值。App和Web支持设为transparent,即透明。
    • 如需动态设置状态栏颜色,使用api uni.setNavigationBarColor
    • 当navigationStyle设为custom时,原生导航栏不显示。此时需要注意系统状态栏背景色恒为透明。
    • 注意不同手机的状态栏高度并不相同,如需获取本机的状态栏高度,使用api uni.getWindowInfo 或 css变量 --status-bar-height
  • 下拉刷新
    • pages.json中下拉刷新是页面级配置,方便使用但灵活度有限。
    • 如需自定义下拉刷新,请使用scroll-viewlist-view的下拉刷新。

style示例

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}
# navigationBarShadow 配置项列表

导航栏阴影,配置参考下方 导航栏阴影

属性 类型 默认值 必填 描述
colorType 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' - 阴影的颜色,支持:grey、blue、green、orange、red、yellow

# 页面背景色

  • 页面容器背景色:可在页面 json 文件中通过 backgroundColorContent 属性配置,支持 #RRGGBB 写法,默认为白色
  • 窗口背景色:可在页面 json 文件中通过 backgroundColor 属性配置,支持 #RRGGBB 写法,默认为白色。被页面容器背景色覆盖,仅在页面设置下拉刷新时才可能看到此颜色
# h5 配置项列表

编译到 H5 平台的特定样式

属性 类型 默认值 必填 描述
titleNView titleNView 配置项列表 - 导航栏设置
pullToRefresh pullToRefresh 配置项列表 - 下拉刷新

h5 兼容性

Android iOS web
titleNView x x 4.0
pullToRefresh x x 4.0

# tabBar 配置项列表

tabbar节点用于配置应用的tabbar,仅支持配置一个。如需在更多页面配置tabbar,请使用view自行封装。

底部 tab 的表现

属性 类型 默认值 必填 描述
color string (string.ColorString) - tab 上的文字默认颜色
selectedColor string (string.ColorString) - tab 上的文字选中时的颜色
backgroundColor string (string.ColorString) - tab 的背景色
borderStyle string "black" tabbar 上边框的颜色,可选值 black、white(App、H5 也支持其他颜色值)。
blurEffect 'dark' | 'extralight' | 'light' | 'none' "none" IOS 高斯模糊效果,可选值 dark/extralight/light/none(参考:使用说明
list Array<PagesOptionsTabbarList> - tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
fontSize string "10px" 文字默认大小
iconWidth string "24px" 图标默认宽度(高度等比例缩放)
spacing string "3px" 图标和文字的间距
height string "50px" tabBar 默认高度
midButton midButton 配置项列表 - 中间按钮 仅在 list 项为偶数时有效
iconfontSrc string - list设置 iconfont 属性时,需要指定字体文件路径
backgroundImage string - 设置背景图片,优先级高于 backgroundColor
backgroundRepeat 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' "no-repeat" 设置标题栏的背景图平铺方式
redDotColor string (string.ColorString) - tabbar上红点颜色

tabBar 兼容性

Android iOS web
color 3.9 4.11 4.0
selectedColor 3.9 4.11 4.0
backgroundColor 3.9 4.11 4.0
borderStyle x x 4.0
blurEffect x x 4.0
list 3.9 4.11 4.0
fontSize x x 4.0
iconWidth x x 4.0
spacing x x 4.0
height x x 4.0
midButton x x 4.0
iconfontSrc x x 4.0
backgroundImage 3.9 4.11 x
backgroundRepeat 3.9 4.11 x
redDotColor 3.9 4.11 x

# PagesOptionsTabbarList 配置项列表

属性 类型 默认值 必填 描述
iconfont iconfont 配置项列表 - 字体图标,优先级高于 iconPath
pagePath string (string.PageURIString) - 页面路径,必须在 pages 中先定义
text string - tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath string (string.ImageURIString) - 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPath string (string.ImageURIString) - 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效
visible boolean - 该项是否显示,默认显示

PagesOptionsTabbarList 兼容性

Android iOS web
iconfont 3.9 4.11 4.0
pagePath 3.9 4.11 4.0
text 3.9 4.11 4.0
iconPath 3.9 4.11 4.0
selectedIconPath 3.9 4.11 4.0
visible 3.9 4.11 4.0

tabbar示例

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}
# iconfont 配置项列表

字体图标,优先级高于 iconPath

属性 类型 默认值 必填 描述
text string - 字库 Unicode 码
selectedText string - 选中后字库 Unicode 码
fontSize string - 字体图标字号(px)
color string (string.ColorString) - 字体图标颜色
selectedColor string (string.ColorString) - 字体图标选中颜色

# midButton 配置项列表

中间按钮 仅在 list 项为偶数时有效

属性 类型 默认值 必填 描述
width string "80px" 中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度
height string "80px" 中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果
text string - 中间按钮的文字
iconPath string (string.ImageURIString) - 中间按钮的图片路径
iconWidth string "24px" 图标默认宽度(高度等比例缩放)
backgroundImage string (string.ImageURIString) - 中间按钮的背景图片路径

midButton 兼容性

Android iOS web
width x x 4.0
height x x 4.0
text x x 4.0
iconPath x x 4.0
iconWidth x x 4.0
backgroundImage x x 4.0

# condition 配置项列表

启动模式配置,仅开发期间生效,用于模拟直达页面的场景。教程详见

启动模式

属性 类型 默认值 必填 描述
current number - 当前激活的模式,list节点的索引值。
list Array<PagesConditionItem> - 启动模式列表

# PagesConditionItem 配置项列表

属性 类型 默认值 必填 描述
name string - 启动模式名称
path string (string.PageURIString) - 启动页面路径
query string - 启动参数,可在页面的 onLoad 函数里获得

# easycom 配置项列表

easycom是uni-app提供的一种简化组件使用的方式。一般情况下组件放置在符合规范的位置时即可自动引用。

但有时组件的路径或文件名无法满足easycom默认规范要求,可以在pages.json里进行规则的自定义。

自定义easycom的详细教程详见

组件自动引入规则

属性 类型 默认值 必填 描述
autoscan boolean true 是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue/uvue目录结构的组件
custom object - 以正则方式自定义组件匹配规则。如果autoscan不能满足需求,可以使用custom自定义匹配规则

# uniIdRouter 配置项列表

根据用户登录状态、页面是否要求登录、以及接口返回的用户token验证状态自动跳转登录页面。详细教程:详见

属性 类型 默认值 必填 描述
loginPage string (string.PageURIString) - 登录页面路径
resToLogin boolean - 是否开启自动根据响应体判断跳转登录页面,默认true(开启)
needLogin Array<string,string.PageURIString> - -

# 参见

相关 Bug