`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"
}
```