移動端開發基礎【19】pages.json的配置項globalStyle
一個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
},
}