简体中文
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节点里是所有页面都生效的全局样式配置。它的配置与页面级style基本相同,但优先级低于页面级style配置。
默认页面的窗口表现
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
navigationBarBackgroundColor | string (string.ColorString) | app : #F8F8F8web : #F8F8F8mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-lark、mp-jd : #000000mp-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 特有配置
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
titleNView | titleNView 配置项列表 | - | 否 | 导航栏设置 |
pullToRefresh | pullToRefresh 配置项列表 | - | 否 | 下拉刷新 |
h5 兼容性
Android | iOS | web | |
---|---|---|---|
titleNView | x | x | 4.0 |
pullToRefresh | x | x | 4.0 |
导航栏设置
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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。 |
下拉刷新
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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 配置项列表 | - | 否 | 在正在刷新状态时下拉刷新控件显示的内容 |
在下拉可刷新状态时下拉刷新控件显示的内容
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
caption | string | - | 否 | 下拉刷新控件上显示的标题内容 |
在释放可刷新状态时下拉刷新控件显示的内容
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
caption | string | - | 否 | 下拉刷新控件上显示的标题内容 |
在正在刷新状态时下拉刷新控件显示的内容
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
caption | string | - | 否 | 下拉刷新控件上显示的标题内容 |
上窗体
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
path | string | - | 否 | 配置页面路径 |
style | object | - | 否 | 配置页面窗口表现,配置项参考下方 pageStyle |
matchMedia | matchMedia 配置项列表 | - | 否 | 配置显示该窗口的规则,配置项参考下方 matchMedia |
配置显示该窗口的规则,配置项参考下方 matchMedia
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
minWidth | number | 768 | 否 | 当设备可见区域宽度 minWidth 时,显示该 window+ |
左窗体
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
path | string | - | 否 | 配置页面路径 |
style | object | - | 否 | 配置页面窗口表现,配置项参考下方 pageStyle |
matchMedia | matchMedia 配置项列表 | - | 否 | 配置显示该窗口的规则,配置项参考下方 matchMedia |
配置显示该窗口的规则,配置项参考下方 matchMedia
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
minWidth | number | 768 | 否 | 当设备可见区域宽度 minWidth 时,显示该 window+ |
右窗体
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
path | string | - | 否 | 配置页面路径 |
style | object | - | 否 | 配置页面窗口表现,配置项参考下方 pageStyle |
matchMedia | matchMedia 配置项列表 | - | 否 | 配置显示该窗口的规则,配置项参考下方 matchMedia |
配置显示该窗口的规则,配置项参考下方 matchMedia
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
minWidth | number | 768 | 否 | 当设备可见区域宽度 minWidth 时,显示该 window+ |
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
│ ├─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": { ... }
}
]
}
用于设置每个页面的状态栏、导航条的颜色、文字等信息。
页面中配置项会覆盖 globalStyle 中相同的配置项
配置页面窗口表现,配置项参考下方 pageStyle。
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
navigationBarBackgroundColor | string (string.ColorString) | app : #F8F8F8web : #F8F8F8mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-lark、mp-jd : #000000mp-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
style示例
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",//设置页面标题文字
"enablePullDownRefresh":true//开启下拉刷新
}
},
...
]
}
导航栏阴影,配置参考下方 导航栏阴影
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
colorType | 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | - | 否 | 阴影的颜色,支持:grey、blue、green、orange、red、yellow |
编译到 H5 平台的特定样式
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
titleNView | titleNView 配置项列表 | - | 否 | 导航栏设置 |
pullToRefresh | pullToRefresh 配置项列表 | - | 否 | 下拉刷新 |
h5 兼容性
Android | iOS | web | |
---|---|---|---|
titleNView | x | x | 4.0 |
pullToRefresh | x | x | 4.0 |
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 |
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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": "接口"
}]
}
字体图标,优先级高于 iconPath
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
text | string | - | 否 | 字库 Unicode 码 |
selectedText | string | - | 否 | 选中后字库 Unicode 码 |
fontSize | string | - | 否 | 字体图标字号(px) |
color | string (string.ColorString) | - | 否 | 字体图标颜色 |
selectedColor | string (string.ColorString) | - | 否 | 字体图标选中颜色 |
中间按钮 仅在 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 |
启动模式配置,仅开发期间生效,用于模拟直达页面的场景。教程详见
启动模式
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
current | number | - | 是 | 当前激活的模式,list节点的索引值。 |
list | Array<PagesConditionItem> | - | 是 | 启动模式列表 |
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
name | string | - | 是 | 启动模式名称 |
path | string (string.PageURIString) | - | 是 | 启动页面路径 |
query | string | - | 否 | 启动参数,可在页面的 onLoad 函数里获得 |
easycom是uni-app提供的一种简化组件使用的方式。一般情况下组件放置在符合规范的位置时即可自动引用。
但有时组件的路径或文件名无法满足easycom默认规范要求,可以在pages.json里进行规则的自定义。
自定义easycom的详细教程详见
组件自动引入规则
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
autoscan | boolean | true | 否 | 是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue/uvue目录结构的组件 |
custom | object | - | 否 | 以正则方式自定义组件匹配规则。如果autoscan不能满足需求,可以使用custom自定义匹配规则 |
根据用户登录状态、页面是否要求登录、以及接口返回的用户token验证状态自动跳转登录页面。详细教程:详见
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
loginPage | string (string.PageURIString) | - | 否 | 登录页面路径 |
resToLogin | boolean | - | 否 | 是否开启自动根据响应体判断跳转登录页面,默认true(开启) |
needLogin | Array<string,string.PageURIString> | - | 否 | - |