## pages.json pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口表現、設置多 tab 等。 ## pages.json 配置項列表 globalStyle Object 否 設置默認頁面的窗口表現 pages Object Array 是 設置頁面路徑及窗口表現 tabBar Object 否 設置底部 tab 的表現 condition Object 否 啟動模式配置 以下是一個包含了所有配置選項的 pages.json ： ``` { "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "組件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "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": "接口" }] } } ``` ## **globalStyle** **用于設置應用的狀態欄、導航條、標題、窗口背景色等。** navigationBarBackgroundColor HexColor #000000 導航欄背景顏色 navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white navigationBarTitleText String 導航欄標題文字內容 navigationStyle String default 導航欄樣式，僅支持 default/custom。 backgroundColor HexColor #ffffff 窗口的背景色 微信小程序 注意：navigationStyle 只在 pages.json->globalStyle 中設置生效。開啟 custom 后，所有窗口均無導航欄。 ## pages 接收一個數組，來指定應用由哪些頁面組成。每一項代表對應頁面的信息，應用中新增/減少頁面，都需要對 pages 數組進行修改。 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源。 **注意：pages節點的第一項為應用入口頁（即首頁）。** 代碼示例： 開發目錄為： ``` pages/ pages/index/index.vue pages/login/login.vue mainfest.json pages.json ``` 則需要在 pages.json 中填寫 ``` { "pages": [{ "index": { "path": "pages/index/index" } }, { "login": { "path": "pages/login/login" } } ] } ``` ## pages.style **用于設置每個頁面的狀態欄、導航條、標題、窗口背景色等。** navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如"#000000" navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white navigationBarTitleText String 導航欄標題文字內容 backgroundColor HexColor #ffffff 窗口的背景色 微信小程序 backgroundTextStyle String dark 下拉 loading 的樣式，僅支持 dark/light enablePullDownRefresh Boolean false 是否開啟下拉刷新，詳見頁面相關事件處理函數 onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離，單位為px navigationStyle String default 導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕。 微信小程序 backgroundColorTop String #ffffff 頂部窗口的背景色。 微信小程序且為 iOS backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且為 iOS 代碼示例： ``` { "pages": [{ "index": { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁",//設置頁面標題文字 "enablePullDownRefresh":true//開啟下拉刷新 } } }, ... ] } ``` ## tabBar 如果應用是一個多 tab 應用，可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁。 ### Tips 當設置 position 為 top 時，將不會顯示 icon tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。 **屬性說明：** color HexColor 是 tab 上的文字默認顏色 selectedColor HexColor 是 tab 上的文字選中時的顏色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar 上邊框的顏色，僅支持 black/white list Array 是 tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab position String 否 bottom 可選值 bottom、top 其中 list 接收一個數組，數組中的每個項都是一個對象，其屬性值如下： pagePath String 是 頁面路徑，必須在 pages 中先定義 text String 是 tab 上按鈕文字 iconPath String 否 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效，不支持網絡圖片 selectedIconPath String 否 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數無效 ## condition 啟動模式配置，僅開發期間生效，用于模擬直達頁面的場景，如：小程序轉發后，用戶點擊所打開的頁面。 **屬性說明**： current Number 是 當前激活的模式，list節點的索引值 list Array 是 啟動模式列表 list說明： name String 是 啟動模式名稱 path String 是 啟動頁面路徑 query String 否 啟動參數，可在頁面的 onLoad 函數里獲得 注意： 在5+app里真機運行可直接打開配置的頁面，微信開發者工具里需要手動改變編譯模式： 代碼示例： ``` "condition": { //模式配置，僅開發期間生效 "current": 0, //當前激活的模式（list 的索引項） "list": [{ "name": "swiper", //模式名稱 "path": "pages/component/swiper/swiper", //啟動頁面，必選 "query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "test", "path": "pages/component/switch/switch" } ] } ``` 自行測試 1、改變導航背景顏色及標題 2、創建頁面 3、創建 tabbar