在标准版开发的实际使用中,随着用户移动端的产品和信息内容不断增多,新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容,可以新增子页面构建多级模块结构,帮助用户快速定位。
下面就如何新增页面做一讲解:
1.在pages目录下新增页面组件文件夹及文件,例如:
pages/newPage/NewPage.vue
2.添加对应路由
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。
- 如果是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中增加自定义页面。