pages.json

这是配置路由的文件, 基本结构为：

  1. {
  2.     "pages": [
  3.       {
  4.         "path": "pages/Login",
  5.         "style": {
  6.           "navigationBarTitleText": "登录",
  7.           "navigationStyle": "custom"
  8.         }
  9.       },
  10.       {
  11.         "path": "pages/Home",
  12.         "style": {
  13.           "navigationBarTitleText": "首页",
  14.           "navigationStyle": "custom"
  15.         }
  16.       },
  17.       {
  18.         "path": "pages/Ucenter",
  19.         "style": {
  20.           "navigationBarTitleText": "我的",
  21.           "navigationStyle": "custom"
  22.         }
  23.       }
  24.     ],
  25.   "subPackages": [{
  26.     "root": "package1",
  27.     "pages": [{
  28.       "path": "page1",
  29.       "style": {
  30.         "navigationBarTitleText": "page1"
  31.       }
  32.     }]
  33.   }],
  34.   "tabBar": {
  35.     "color": "#7A7E83",
  36.     "selectedColor": "#3cc51f",
  37.     "borderStyle": "black",
  38.     "backgroundColor": "#ffffff",
  39.     "list": [{
  40.       "pagePath": "pages/Home",
  41.       "iconPath": "static/tabbar/home1.svg",
  42.       "selectedIconPath": "static/tabbar/home2.svg",
  43.       "text": "首页"
  44.     }, {
  45.       "pagePath": "pages/Ucenter",
  46.       "iconPath": "static/tabbar/my1.svg",
  47.       "selectedIconPath": "static/tabbar/my2.svg",
  48.       "text": "我的"
  49.     }]
  50.   },
  51.     "globalStyle": {
  52.         "navigationBarTextStyle": "black",
  53.         "navigationBarTitleText": "uni-app",
  54.         "navigationBarBackgroundColor": "#F8F8F8",
  55.         "backgroundColor": "#F8F8F8"
  56.     }
  57. }

各节点的属性包括：

页面配置

通过 pages 进行页面配置

包括以下属性

  • path 页面路径
  • style 页面默认样式

其中 style 包括以下属性：

  • navigationBarTitleText 标题栏文字
  • navigationStyle 可选 default/custom, 默认 default, custom 即取消默认的原生导航栏
  • disableScroll 是否允许页面滚动, 默认true
  • enablePullDownRefresh 是否开启下拉刷新, 默认false
  • onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px

子包

通过 subPackages 进行子包配置，主要针对于微信小程序

包括以下属性：

  • root 子包根目录
  • pages 同根下的pages

底部导航

通过 tabBar 配置底部导航

包括以下属性：

  • color 未被选择的tab文字颜色
  • selectedColor 被选择的tab文字颜色
  • borderStyle 边框色
  • backgroundColor 背景色
  • list 底部导航的页面

其中 list 包括以下属性：

  • pagePath 页面路径
  • iconPath 未激活的图标路径
  • selectedIconPath 激活的图标路径
  • text 文字

全局样式

globalStyle 用于配置默认的全局页面样式，可被 pages[].style 覆盖

包括以下属性：

  • navigationBarBackgroundColor 导航栏背景颜色 (同状态栏背景色)
  • navigationBarTextStyle 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
  • navigationBarTitleText 导航栏标题文字内容
  • backgroundColor 窗口的背景色 (仅微信小程序支持)
  • enablePullDownRefresh 是否开启下拉刷新, 默认false
  • onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px

详见: uniapp pages.json

manifest.json

详见: uniapp manifest.json