在標(biāo)準(zhǔn)版開發(fā)的實(shí)際使用中，隨著用戶移動(dòng)端的產(chǎn)品和信息內(nèi)容不斷增多，新增頁面來展示對(duì)應(yīng)的產(chǎn)品詳情、模塊等內(nèi)容。針對(duì)一些概念或者步驟較多的內(nèi)容，可以新增子頁面構(gòu)建多級(jí)模塊結(jié)構(gòu)，幫助用戶快速定位。

下面就如何新增頁面做一講解：

1.在pages目錄下新增頁面組件文件夾及文件,例如:

pages/newPage/NewPage.vue

2.添加對(duì)應(yīng)路由

pages.json 文件用來對(duì) uni-app 進(jìn)行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。

它類似微信小程序中app.json的頁面管理部分。注意定位權(quán)限申請(qǐng)等原屬于app.json的內(nèi)容，在uni-app中是在manifest中配置。

1) 如果是tab頁

現(xiàn)在頂部添加路由地址

"pages": [
  {
    "path":"pages/newPage/newPage",
    "style": {
      "navigationBarTitleText": "新頁面"
    } 
  }
]

2.在底部tabBar中的list數(shù)組中添加對(duì)應(yīng)配置

2. 如果是正常模塊內(nèi)容

1）存在對(duì)應(yīng)模塊

在對(duì)應(yīng)模塊的分包中添加對(duì)應(yīng)路由即可。

2）不存在模塊需在subPackages中新增分包模塊，在按照上一步進(jìn)行創(chuàng)建頁面路由。

到這里創(chuàng)建頁面介紹完了，還需要給大家介紹一下pages.json其中的兩個(gè)屬性，以便大家可以調(diào)整標(biāo)題及狀態(tài)欄。

第一個(gè) globalStyle 用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。（全局的喔）

表1

第二個(gè) style 用于設(shè)置每個(gè)頁面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。

頁面中配置項(xiàng)會(huì)覆蓋 globalStyle 中相同的配置項(xiàng)

【表1.2引自u(píng)niapp官方文檔】

以上步驟即可在CRMEB標(biāo)準(zhǔn)版商城uni-app中增加自定義頁面。