`pages.json`文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中`app.json`的**页面管理**部分。注意定位权限申请等原属于`app.json`的内容,在uni-app中是在manifest中配置
```
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
},
"condition":{
}
}
```
完整版
```
{
//设置页面路径及窗口表现
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",//dasd
//用于设置每个页面的状态栏、导航条、标题、窗口背景色等。 参数与globalStyle一样页面中配置项会覆盖 globalStyle 中相同的配置项
"style": {
"navigationBarTitleText": "uni-app",//导航栏标题文字内容 默认空
"navigationBarBackgroundColor": "#000000",//导航栏背景颜色(同状态栏背景色)
"navigationBarTextStyle": "white",//导航栏标题颜色及状态栏前景颜色,仅支持 black/white
"navigationBarShadow":{
"colorType":"",//阴影的颜色,支持:grey、blue、green、orange、red、yellow
},
"navigationStyle":"default"//导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏 @微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
"disableScroll":false,//设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效 @微信小程序(iOS)、百度小程序(iOS)
"backgroundColor":"#ffffff",//窗口的背景色 @微信小程序、百度小程序、头条小程序
"backgroundTextStyle":"dark",//下拉 loading 的样式,仅支持 dark/light
"enablePullDownRefresh":false,//是否开启下拉刷新,详见页面生命周期。
"onReachBottomDistance":50,//页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
"backgroundColorTop":"#ffffff",//顶部窗口的背景色(bounce回弹区域) @仅 iOS 平台
"backgroundColorBottom":"#ffffff",//底部窗口的背景色(bounce回弹区域)@仅 iOS 平台
"titleImage":"",//导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 @支付宝小程序、H5
"transparentTitle":"none",//导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 @支付宝小程序、H5、APP
"titlePenetrate":"NO",//导航栏点击穿透 @支付宝小程序、H5
"app-plus":{},
"h5":{},
"mp-alipay":{},
"mp-weixin":{},
"mp-baidu":{},
"mp-toutiao":{},
"mp-qq":{},
"usingComponents":{},
}
}//,{}
],
//设置默认页面的窗口表现
"globalStyle": {
"navigationBarBackgroundColor": "#F7F7F7",//导航栏背景颜色(同状态栏背景色)
"navigationBarTextStyle": "white",//导航栏标题颜色及状态栏前景颜色,仅支持 black/white
"navigationBarTitleText": "",//导航栏标题文字内容
"navigationStyle":"default",//导航栏样式,仅支持 default/custom。 @微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
"backgroundColor": "#ffffff",//窗口的背景色 @微信小程序
"backgroundTextStyle":"dark",//下拉 loading 的样式,仅支持 dark / light @微信小程序
"enablePullDownRefresh":false,//是否开启下拉刷新,详见页面生命周期
"onReachBottomDistance":50,//页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
"backgroundColorTop":#ffffff,//顶部窗口的背景色(bounce回弹区域) @仅 iOS 平台
"backgroundColorBottom":"#ffffff",//底部窗口的背景色(bounce回弹区域) @仅 iOS 平台
"titleImage":"",//导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址,需要真机调试才能看到效果;globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题. @支付宝小程序、H5、APP
"transparentTitle":"none",//导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 @支付宝小程序、H5、APP
"titlePenetrate":"NO",//导航栏点击穿透 @支付宝小程序、H5
"pageOrientation":"portrait",//横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化 @App 2.4.7+、微信小程序
"animationType":"pop-in",//窗口显示的动画效果,详见:窗口动画 @App
"animationDuration":300,//窗口显示动画的持续时间,单位为 ms @App
//设置编译到 App 平台的特定样式,配置项参考下方 app-plus @App
//部分常用配置 H5 平台也支持。以下仅列出常用,更多配置项参考 http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles
"app-plus":{
"titleNView":{//导航栏 ,详见:导航栏 @App、H5
"backgroundColor":"#F7F7F7",//背景颜色,在使用半透明标题栏时,也可以设置rgba格式
"buttons":[//自定义按钮 @纯nvue即render:native时暂不支持
"type":"none"//可选值 forward:前进按钮、back:后退按钮、share:分享按钮、favorite:收藏按钮、home:主页按钮、menu:菜单按钮、close:关闭按钮none 无样式,需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。
"fontSrc":"",//按钮上文字使用的字体文件路径。不支持网络地址,请统一使用本地地址。
"color":"默认与标题文字颜色一致",//按钮上文字颜色
"background":"默认值为灰色半透明",//按钮的背景颜色,仅在标题栏type=transparent时生效
"badgeText":"",//按钮上显示的角标文本,最多显示3个字符,超过则显示为...
"colorPressed":"默认值为 color 属性值自动调整透明度为 0.3",//按下状态按钮文字颜色
"float":"right",//钮在标题栏上的显示位置,可取值"left"、"right"
"fontWeight":"normal",//按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。
"fontSize":"",//按钮上文字大小
"select":"false",//是否显示选择指示图标(向下箭头),常用于城市选择
"text":"",//按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头,如 "\ue123"(注意不能写成"\e123")。
"width":"44px"//按钮的宽度,可取值: "*px" - 逻辑像素值,如"10px"表示10逻辑像素值,不支持rpx。按钮的内容居中显示; "auto" - 自定计算宽度,根据内容自动调整按钮宽度
],
"titleColor":"#000000",//标题文字颜色
"titleOverflow":"ellipsis",//标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪;"ellipsis"-超出显示区域时尾部显示省略标记(...)
"titleText":"",//标题文字内容
"titleSize":"",//标题文字字体大小
"type":"default",//导航栏样式。"default"-默认样式;"transparent"-滚动透明渐变;"float"-悬浮导航栏 @App-nvue 2.4.4+ 支持
"tags":[//原生 View 增强 http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles
],
//原生导航栏上的搜索框配置
"searchInput":{
"autoFocus":false,//是否自动获取焦点
"align":"center",//非输入状态下文本的对齐方式。可取值: "left" - 居左对齐; "right" - 居右对齐; "center" - 居中对齐
"backgroundColor":"rgba(255,255,255,0.5)",//背景颜色
"borderRadius":"0px",//输入框的圆角半径,取值格式为"XXpx",其中XX为像素值(逻辑像素),不支持rpx。
"placeholder":"",//提示文本。
"placeholderColor":"#CCCCCC",//提示文本颜色
"disabled":false//是否可输入
}
},
//原生子窗体 @App 1.9.10+
"subNVues":{
"id":"",//subNVue 原生子窗体的标识 //subNVue 的 id,可通过 uni.getSubNVueById('drawer') 获取
"path":"pages/index/drawer.nvue",//配置 nvue 文件路径,nvue 文件需放置到使用 subNvue 的页面文件目录下,
"type":"",//原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
//subNVue 原生子窗体的样式
"style":{
"position":"absolute",//原生子窗体的排版位置 排版位置决定原生子窗体在父窗口中的定位方式 static、absolute、dock除 popup 外,其他值域参考 5+ webview position 文档
"dock":"bottom",//原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效,可取值:top、right、left、bottom
"mask":"rgba(0,0,0,0.5)",//生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效
"width":"100%",//原生子窗体的宽度,支持百分比、像素值,默认为100%
"height":"100%",//原生子窗体的高度,支持百分比、像素值,默认为100%
"top":"0px",//原生子窗体垂直向下的偏移量,支持百分比、像素值,默认值为0px
"bottom":"",//原生子窗体垂直向上偏移量,支持百分比、像素值,默认值无值
"left":"0px",//原生子窗体水平向左的偏移量,支持百分比、像素值,默认值为0px
"right":"",//原生子窗体水平向右的偏移量,支持百分比、像素值,默认无值
"margin":"",//原生子窗体的边距,用于定位原生子窗体的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。
"zindex":1//原生子窗体的窗口的堆叠顺序值,拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面
}
},
"bounce":"",//页面回弹效果,设置为 "none" 时关闭效果
"softinputNavBar":"auto",//iOS软键盘上完成工具栏的显示模式,设置为 "none" 时关闭工具栏。 @仅ios生效
"softinputMode":"adjustPan",//软键盘弹出模式,支持 adjustResize、adjustPan 两种模式 @App
"pullToRefresh":{//下拉刷新 @App
},
"scrollIndicator":"", //滚动条显示策略,设置为 "none" 时不显示滚动条 @App
"animationType":"pop-in", //窗口显示的动画效果,详见:窗口动画。 @App
"animationDuration":300 //窗口显示动画的持续时间,单位为 ms。 @App
},
//设置编译到 H5 平台的特定样式,配置项参考下方 H5 @H5
"h5":{
//导航栏
"titleNView":{
},
//下拉刷新
"pullToRefresh":{
}
},
//设置编译到 mp-alipay 平台的特定样式,配置项参考下方 MP-ALIPAY @支付宝小程序
"mp-alipay":{
"allowsBounceVertical":"YES",//是否允许向下拉拽。支持 YES / NO
"titleImage":"",//导航栏图片地址(替换当前文字标题),内必须使用https的图片链接地址
"transparentTitle":"none",//导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明
"titlePenetrate":"NO",//导航栏点击穿透
"showTitleLoading":"NO",//是否进入时显示导航栏的 loading。支持 YES / NO
"backgroundImageUrl":"",//下拉露出显示的背景图链接
"backgroundImageColor":"",//下拉露出显示的背景图底色eg #FFFFFF
"gestureBack":"NO",//iOS 用,是否支持手势返回。支持 YES / NO @iOS
"enableScrollBar":"YES"//Android 用,是否显示 WebView 滚动条。支持 YES / NO @Android
},
"mp-weixin":{},//设置编译到 mp-weixin 平台的特定样式 @微信小程序
"mp-baidu":{},//设置编译到 mp-baidu 平台的特定样式 @百度小程序
"mp-toutiao":{},//设置编译到 mp-toutiao 平台的特定样式 @字节跳动小程序
"mp-mp-qq":{},//设置编译到 mp-qq 平台的特定样式 @QQ小程序
"usingComponents":{}//引用小程序组件,参考 小程序组件
},
//设置底部 tab 的表现
"tabBar":{
"color":"",//【必选】tab 上的文字默认颜色
"selectedColor":"",//【必选】tab 上的文字选中时的颜色
"backgroundColor":"",//【必选】tab 的背景色
"borderStyle";"black",//【可选】 tabbar 上边框的颜色,可选值 black/white @App 2.3.4+ 支持其他颜色值
"blurEffect":"none",//【可选】iOS 高斯模糊效果,可选值 dark/extralight/light/none App 2.4.0+ 支持
//tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
"list":[
"pagePath":"",//【必选】页面路径,必须在 pages 中先定义
"text":"",//【必选】tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
"iconPath":"",//【可选】图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
"selectedIconPath":""//【可选】选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
],
"position":"bottom",//可选值 bottom、top @top 值仅微信小程序支持
"fontSize":"10px",//可选值 文字默认大小 @App 2.3.4+
"iconWidth":"24px",//可选值 图标默认宽度(高度等比例缩放) @App 2.3.4+
"spacing":"3px",//可选值 图标和文字的间距 @App 2.3.4+
"height":"50px",//可选值 tabBar 默认高度 @App 2.3.4+
//中间按钮 仅在 list 项为偶数时有效 @App 2.3.4+
"midButton":{
//以下全可选
"width":"80px",//中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度
"height":"50px",//中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果
"text":"",//中间按钮的文字
"iconPath":"",//中间按钮的图片路径
"iconWidth":"24px",//图片宽度(高度等比例缩放)
"backgroundImage":""//中间按钮的背景图片路径
}
},
//组件自动引入规则 2.5.0+
"easycom":{
"autoscan":true,//是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
"custom":{//以正则方式自定义组件匹配规则。如果autoscan不能满足需求,可以使用custom自定义匹配规则
"uni-(.*)": "@/components/uni-$1.vue"
}
},
//启动模式配置
"condition":{
"current":0,//必选 当前激活的模式,list节点的索引值
"list":[//必选 启动模式列表
"name":"swiper",//必选 启动模式名称
"path":"pages/component/swiper/swiper",//必选 启动页面路径
"query":"interval=4000&autoplay=false"//启动参数,可在页面的 onLoad 函数里获得
]
},
//分包加载配置 此配置为小程序的分包加载机制。在App里始终为整包。
"subPackages":[
{
"root":"pagesA",//必选 子包的根目录
"pages":[//必选 子包由哪些页面组成,参数同 pages
"path":"list/list",
"style": { ...}
],
},
{
"root":"pagesB",//必选 子包的根目录
"pages":[//必选 子包由哪些页面组成,参数同 pages
"path":"detail/detail",
"style": { ...}
],
},
],
//分包预下载规则 key 是页面路径,value 是进入此页面的预下载配置 @微信小程序
"preloadRule":{
"pagesA/list/list": {
"network": "all",
"packages": ["__APP__"]
},
"pagesB/detail/detail": {
"network": "all",
"packages": ["pagesA"]
}
},
//多线程 Worker 的代码放置的目录
"workers":"workers"
}
```