pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。

配置项列表

属性 类型 必填 描述 平台兼容
globalStyle Object 设置默认页面的窗口表现
pages Object Array 设置页面路径及窗口表现
easycom Object 组件自动引入规则 2.5.5+
tabBar Object 设置底部 tab 的表现
condition Object 启动模式配置
subPackages Object Array 分包加载配置
preloadRule Object 分包预下载规则 微信小程序
workers String Worker 代码放置的目录 微信小程序
leftWindow Object 大屏左侧窗口 H5
topWindow Object 大屏顶部窗口 H5
rightWindow Object 大屏右侧窗口 H5

以下是 pages.json 的部分配置:

pages.json 配置路由

  1. "pages": [ //pages数组中第一项表示应用启动页
  2. {
  3. "path": "pages/index/index",
  4. "style": {
  5. "navigationBarTitleText": "首页"
  6. }
  7. }
  8. ]

pages.json 配置tabBar

  1. "tabBar": {
  2. "color":"#c5c5c5",
  3. "selectedColor": "#4ca1fc",
  4. "borderStyle": "black",
  5. "backgroundColor": "#ffffff",
  6. "list": [
  7. {
  8. "pagePath": "pages/index/index",
  9. "iconPath": "static/images/tabbar/home_icon.png",
  10. "selectedIconPath": "static/images//tabbar/home_icon_sel.png",
  11. "text": "首页"
  12. },
  13. {
  14. "pagePath": "pages/apply/apply",
  15. "iconPath": "static/images/tabbar/apply_icon.png",
  16. "selectedIconPath": "static/images//tabbar/apply_icon_sel.png",
  17. "text": "申请"
  18. },
  19. {
  20. "pagePath": "pages/user/user",
  21. "iconPath": "static/images/tabbar/user_icon.png",
  22. "selectedIconPath": "static/images//tabbar/user_icon_sel.png",
  23. "text": "我的"
  24. }
  25. ]
  26. }

参考资料

uni-app官方文档之 pages.json