在標準版開發的實際使用中，隨著用戶移動端的產品和信息內容不斷增多，新增頁面來展示對應的產品詳情、模塊等內容。針對一些概念或者步驟較多的內容，可以新增子頁面構建多級模塊結構，幫助用戶快速定位。
下面就如何新增頁面做一講解：
1.在pages目錄下新增頁面組件文件夾及文件,例如:
pages/newPage/NewPage.vue2.添加對應路由
pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。
它類似微信小程序中app.json的頁面管理部分。注意定位權限申請等原屬于app.json的內容，在uni-app中是在manifest中配置。
1) 如果是tab頁
現在頂部添加路由地址
"pages": [
{
"path":"pages/newPage/newPage",
"style": {
"navigationBarTitleText": "新頁面"
}
}
]2.在底部tabBar中的list數組中添加對應配置
2. 如果是正常模塊內容
1）存在對應模塊
在對應模塊的分包中添加對應路由即可。
2）不存在模塊需在subPackages中新增分包模塊，在按照上一步進行創建頁面路由。
到這里創建頁面介紹完了，還需要給大家介紹一下pages.json其中的兩個屬性，以便大家可以調整標題及狀態欄。
第一個 globalStyle 用于設置應用的狀態欄、導航條、標題、窗口背景色等。（全局的喔）
表1
| 屬性 | 類型 | 默認值 | 描述 | 平臺差異說明 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F8F8F8 | 導航欄背景顏色（同狀態欄背景色） | APP與H5為#F8F8F8，小程序平臺請參考相應小程序文檔 |
| navigationBarTextStyle | String | black | 導航欄標題顏色及狀態欄前景顏色，僅支持 black/white | 支付寶小程序不支持，請使用 my.setNavigationBar |
| navigationBarTitleText | String | 導航欄標題文字內容 | ||
| 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 | 是否開啟下拉刷新，詳見頁面生命周期。 | |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位只支持px，詳見頁面生命周期 | |
| backgroundColorTop | HexColor | #ffffff | 頂部窗口的背景色（bounce回彈區域） | 僅 iOS 平臺 |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce回彈區域） | 僅 iOS 平臺 |
| titleImage | String | 導航欄圖片地址（替換當前文字標題），支付寶小程序內必須使用https的圖片鏈接地址 | 支付寶小程序、H5、APP | |
| transparentTitle | String | none | 導航欄整體（前景、背景）透明設置。支持 always 一直透明 / auto 滑動自適應 / none 不透明 | 支付寶小程序、H5、APP |
| titlePenetrate | String | NO | 導航欄點擊穿透 | 支付寶小程序、H5 |
| pageOrientation | String | portrait | 橫屏配置，屏幕旋轉設置，僅支持 auto / portrait / landscape 詳見 響應顯示區域變化 | App 2.4.7+、微信小程序、QQ小程序 |
| animationType | String | pop-in | 窗口顯示的動畫效果，詳見：窗口動畫 | App |
| animationDuration | Number | 300 | 窗口顯示動畫的持續時間，單位為 ms | App |
| app-plus | Object | 設置編譯到 App 平臺的特定樣式，配置項參考下方 app-plus | App | |
| h5 | Object | 設置編譯到 H5 平臺的特定樣式，配置項參考下方 H5 | H5 | |
| mp-alipay | Object | 設置編譯到 mp-alipay 平臺的特定樣式，配置項參考下方 MP-ALIPAY | 支付寶小程序 | |
| mp-weixin | Object | 設置編譯到 mp-weixin 平臺的特定樣式，配置項參考下方 MP-WEIXIN | 微信小程序 | |
| mp-baidu | Object | 設置編譯到 mp-baidu 平臺的特定樣式，配置項參考下方 MP-BAIDU | 百度小程序 | |
| mp-toutiao | Object | 設置編譯到 mp-toutiao 平臺的特定樣式 | 抖音小程序 | |
| mp-lark | Object | 設置編譯到 mp-lark 平臺的特定樣式 | 飛書小程序 | |
| mp-qq | Object | 設置編譯到 mp-qq 平臺的特定樣式 | QQ小程序 | |
| mp-kuaishou | Object | 設置編譯到 mp-kuaishou 平臺的特定樣式 | 快手小程序 | |
| mp-jd | Object | 設置編譯到 mp-jd 平臺的特定樣式 | 京東小程序 | |
| usingComponents | Object | 引用小程序組件，參考 小程序組件 | ||
| renderingMode | String | 同層渲染，webrtc(實時音視頻) 無法正常時嘗試配置 seperated 強制關掉同層 | 微信小程序 | |
| leftWindow | Boolean | true | 當存在 leftWindow 時，默認是否顯示 leftWindow | H5 |
| topWindow | Boolean | true | 當存在 topWindow 時，默認是否顯示 topWindow | H5 |
| rightWindow | Boolean | true | 當存在 rightWindow 時，默認是否顯示 rightWindow | H5 |
| rpxCalcMaxDeviceWidth | Number | 960 | rpx 計算所支持的最大設備寬度，單位 px | App（vue2 且不含 nvue）、H5（2.8.12+） |
| rpxCalcBaseDeviceWidth | Number | 375 | rpx 計算使用的基準設備寬度，設備實際寬度超出 rpx 計算所支持的最大設備寬度時將按基準寬度計算，單位 px | App（vue2 且不含 nvue）、H5（2.8.12+） |
| rpxCalcIncludeWidth | Number | 750 | rpx 計算特殊處理的值，始終按實際的設備寬度計算，單位 rpx | App（vue2 且不含 nvue）、H5（2.8.12+） |
| dynamicRpx | Boolean | false | 動態 rpx，屏幕大小變化會重新渲染 rpx | App-nvue（vue3 固定值為 true） 3.2.13+ |
| maxWidth | Number | 單位px，當瀏覽器可見區域寬度大于maxWidth時，兩側留白，當小于等于maxWidth時，頁面鋪滿；不同頁面支持配置不同的maxWidth；maxWidth = leftWindow(可選)+page(頁面主體)+rightWindow(可選) | H5（2.9.9+） | |
第二個 style 用于設置每個頁面的狀態欄、導航條、標題、窗口背景色等。
頁面中配置項會覆蓋 globalStyle 中相同的配置項
| 屬性 | 類型 | 默認值 | 描述 | 平臺差異說明 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F8F8F8 | 導航欄背景顏色（同狀態欄背景色） | APP與H5為#F8F8F8，小程序平臺請參考相應小程序文檔 |
| navigationBarTextStyle | String | black | 導航欄標題顏色及狀態欄前景顏色，僅支持 black/white | |
| navigationBarTitleText | String | 導航欄標題文字內容 | ||
| navigationBarShadow | Object | 導航欄陰影，配置參考下方 導航欄陰影 | ||
| navigationStyle | String | default | 導航欄樣式，僅支持 default/custom。custom即取消默認的原生導航欄，需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+） |
| disableScroll | Boolean | false | 設置為 true 則頁面整體不能上下滾動（bounce效果），只在頁面配置中有效，在globalStyle中設置無效 | 微信小程序（iOS）、百度小程序（iOS） |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信小程序、百度小程序、抖音小程序、飛書小程序、京東小程序 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支持 dark/light | |
| enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新，詳見頁面生命周期。 | |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位只支持px，詳見頁面生命周期 | |
| backgroundColorTop | HexColor | #ffffff | 頂部窗口的背景色（bounce回彈區域） | 僅 iOS 平臺 |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce回彈區域） | 僅 iOS 平臺 |
| disableSwipeBack | Boolean | false | 是否禁用滑動返回 | App-iOS（3.4.0+） |
| titleImage | String | 導航欄圖片地址（替換當前文字標題），支付寶小程序內必須使用https的圖片鏈接地址 | 支付寶小程序、H5、App | |
| transparentTitle | String | none | 導航欄透明設置。支持 always 一直透明 / auto 滑動自適應 / none 不透明 | 支付寶小程序、H5、APP |
| titlePenetrate | String | NO | 導航欄點擊穿透 | 支付寶小程序、H5 |
| app-plus | Object | 設置編譯到 App 平臺的特定樣式，配置項參考下方 app-plus | App | |
| h5 | Object | 設置編譯到 H5 平臺的特定樣式，配置項參考下方 H5 | H5 | |
| mp-alipay | Object | 設置編譯到 mp-alipay 平臺的特定樣式，配置項參考下方 MP-ALIPAY | 支付寶小程序 | |
| mp-weixin | Object | 設置編譯到 mp-weixin 平臺的特定樣式 | 微信小程序 | |
| mp-baidu | Object | 設置編譯到 mp-baidu 平臺的特定樣式 | 百度小程序 | |
| mp-toutiao | Object | 設置編譯到 mp-toutiao 平臺的特定樣式 | 抖音小程序 | |
| mp-lark | Object | 設置編譯到 mp-lark 平臺的特定樣式 | 飛書小程序 | |
| mp-qq | Object | 設置編譯到 mp-qq 平臺的特定樣式 | QQ小程序 | |
| mp-kuaishou | Object | 設置編譯到 mp-kuaishou 平臺的特定樣式 | 快手小程序 | |
| mp-jd | Object | 設置編譯到 mp-jd 平臺的特定樣式 | 京東小程序 | |
| usingComponents | Object | 引用小程序組件，參考 小程序組件 | App、微信小程序、支付寶小程序、百度小程序、京東小程序 | |
| leftWindow | Boolean | true | 當存在 leftWindow時，當前頁面是否顯示 leftWindow | H5 |
| topWindow | Boolean | true | 當存在 topWindow 時，當前頁面是否顯示 topWindow | H5 |
| rightWindow | Boolean | true | 當存在 rightWindow時，當前頁面是否顯示 rightWindow | H5 |
| maxWidth | Number | 單位px，當瀏覽器可見區域寬度大于maxWidth時，兩側留白，當小于等于maxWidth時，頁面鋪滿；不同頁面支持配置不同的maxWidth；maxWidth = leftWindow(可選)+page(頁面主體)+rightWindow(可選) | H5（2.9.9+） | |
【表1.2引自uniapp官方文檔】
以上步驟即可在CRMEB標準版商城uni-app中增加自定義頁面。
