多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
`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" } ```