uni-app項目是通過pages節點配置應用由哪些頁面組成，pages節點接收一個數組，數組每個項都是一個對象，其屬性值如下：(1)?屬性：path類型：String描述：配置頁面路徑(2)?屬性：style類型：Object描述：配置頁面窗口樣式注意點：(1)pages節點的第一項為應用入口頁(即首頁)(2)應用中新增/減少頁面，都需要對?pages?數組進行修改(3)文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源開發目錄為：

代碼示例：需要在pages.json中編寫{ "pages":[ { "path":"pages/index/index", "style":{...} },{ "path":"pages/login/login", "style":{...} } ]}style

用于設置每個頁面的狀態欄、導航條、標題、窗口背景色等。

頁面中配置項會覆蓋?globalStyle?中相同的配置項

屬性	類型	默認值	描述	平臺差異說明
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色(同狀態欄背景色)，如"#000000"
navigationBarTextStyle	String	white	導航欄標題顏色及狀態欄前景顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
navigationBarShadow	Object		導航欄陰影
navigationStyle	String	default	導航欄樣式，僅支持 default/custom。custom即取消默認的原生導航欄	微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
backgroundColor	HexColor	#ffffff	窗口的背景色	微信小程序、百度小程序、字節跳動小程序
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啟下拉刷新

以上是一些style的屬性，更多屬性可以去官網查看。

代碼示例：

{ "pages":[{ "path":"pages/index/index", "style":{ "navigationBarTitleText":"首頁",//設置頁面標題文字 "enablePullDownRefresh":true//開啟下拉刷新 } }, ... ]}自定義導航欄使用注意當navigationStyle設為custom或titleNView設為false時，原生導航欄不顯示，此時要注意幾個問題：(1)非H5端，手機頂部狀態欄區域會被頁面內容覆蓋。這是因為窗體是沉浸式的原因，即全屏可寫內容。uni-app提供了狀態欄高度的css變量--status-bar-height，如果需要把狀態欄的位置從前景部分讓出來，可寫一個占位div，高度設為css變量。

(2)如果原生導航欄不能滿足需求，推薦使用uni ui的自定義導航欄NavBar。這個前端導航欄自動處理了狀態欄高度占位問題。(3)前端導航欄搭配原生下拉刷新時，會有問題，包括微信小程序下iOS需要拉更長才能看到下拉刷新的三個點，而Android是從屏幕頂部下拉，無法從導航欄下方下拉。如果一定要從前端導航欄下拉，小程序下只能放棄原生下拉刷新，純前端模擬，參考mescroll插件，但這樣很容易產生性能問題。目前小程序平臺自身沒有提供更好的方案App和H5下，原生下拉刷新提供了circle樣式，可以指定offset偏移量(pages.json的app-plus下配置)，自定義下拉圈出現的位置。在hello uni-app的擴展組件中有示例。(4)非H5端，前端導航蓋不住原生組件。如果頁面有video、map、textarea(僅小程序)等原生組件，滾動時會覆蓋住導航欄如果是小程序下，可以使用cover-view來做導航欄，避免覆蓋問題如果是App下，建議使用titleNView或subNVue，體驗更好(5)前端組件在渲染速度上不如原生導航欄，原生導航可以在動畫期間渲染，保證動畫期間不白屏，但使用前端導航欄，在新窗體進入的動畫期間可能會整頁白屏，越低端的手機越明顯。(6)以上討論的是前端自定義導航欄，但在App側，原生導航欄也提供了比小程序導航更豐富的自定義性titleNView：給原生導航欄提供更多配置，包括自定義按鈕、滾動漸變效果、搜索框等。subNView：使用nvue原生渲染，所有布局自己開發，具備一切自定義靈活度。(7)頁面禁用原生導航欄后，想要改變狀態欄的前景字體樣式，仍可設置頁面的 navigationBarTextStyle 屬性(只能設置為 black或white)。如果想單獨設置狀態欄顏色，App端可使用plus.navigator.setStatusBarStyle設置。注意部分低端Android手機(4.4)自身不支持設置狀態欄前景色。鑒于以上問題，在原生導航能解決業務需求的情況下，盡量使用原生導航。甚至有時需要犧牲一些不是很重要的需求。在App和H5下，uni-app提供了靈活的處理方案：titleNView、subNVue、或整頁使用nvue。但在小程序下，因為其自身的限制，沒有太好的方案。有必要的話，也可以用條件編譯分端處理。

總結

以上是生活随笔為你收集整理的android string数组转json_移动端开发基础【20】pages.json的配置项pages的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。