一个uni-app项目中用来进行全局配置的文件就是pages.json,它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。它与微信小程序中app.json的页面管理部分相似。需要注意的是定位权限申请等内容原本是属于app.json的,但在uni-app中它是在manifest中配置的。
一.配置项列表
属性 |
类型 |
必填 |
描述 |
平台兼容 |
globalStyle |
Object |
否 |
设置默认页面的窗口表现 |
|
pages |
Object Array |
是 |
设置页面路径及窗口表现 |
|
easycom |
Object |
否 |
组件自动引入规则 |
2.5.5+ |
tabBar |
Object |
否 |
设置底部 tab 的表现 |
|
condition |
Object |
否 |
启动模式配置 |
|
subPackages |
Object Array |
否 |
分包加载配置 |
|
preloadRule |
Object |
否 |
分包预下载规则 |
微信小程序 |
workers |
String |
否 |
Worker 代码放置的目录 |
微信小程序 |
二、globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。
(1)设置导航栏背景颜色(同状态栏背景色)
属性:navigationBarBackgroundColor
类型:HexColor
默认值:#F7F7F7
平台差异说明:APP与H5为#F7F7F7,小程序平台请参考相应小程序文档
(2)设置导航栏标题颜色及状态栏前景颜色,仅支持 black/white
属性:navigationBarTextStyle
类型:String
默认值:white
(3)设置导航栏标题文字内容
属性:navigationBarTitleText
类型:String
(4)设置导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏
属性:navigationStyle
类型:String
默认值:default
(5)设置下拉显示出来的窗口的背景色
属性:backgroundColor
类型:HexColor
默认值:#ffffff
平台差异性:微信小程序
(6)设置下拉 loading 的样式,仅支持 dark / light
属性:backgroundTextStyle
类型:String
默认值:dark
平台差异性:微信小程序
(7)设置是否开启下拉刷新
属性:enablePullDownRefresh
类型:Boolean
默认值:false
(8)设置页面上拉触底事件触发时距页面底部距离,单位只支持px
属性:onReachBottomDistance
类型:Number
默认值:50
(9) 设置窗口显示的动画效果
属性:animationType
类型:String
默认值:pop-in
平台差异性:App
(10) 设置窗口显示动画的持续时间,单位为 ms
属性:animationDuration
类型:Number
默认值:300
平台差异性:App
globalStyle的属性还有很多,以上介绍的只是其中的一部分,如果想了解更多,可以去官网。
以下是一段包含globalStyle配置选项的 pages.json
文件的代码:
{
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "测试",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
},
}