标准版/开源版 移动端新增页面使用文档

在标准版开发的实际使用中，随着用户移动端的产品和信息内容不断增多，新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容，可以新增子页面构建多级模块结构，帮助用户快速定位。

下面就如何新增页面做一讲解：

1.在pages目录下新增页面组件文件夹及文件,例如:

pages/newPage/NewPage.vue

2.添加对应路由

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

第二个 style 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

【表1.2引自uniapp官方文档】

以上步骤即可在CRMEB标准版商城uni-app中增加自定义页面。