全局配置文件（pages.json）

前言

pages.json 是 uni-app 项目中的核心配置文件之一，负责控制应用的页面结构、窗口样式、导航栏、tabBar 等内容。它相当于整个应用的“地图”和“样式控制中心”，用于定义应用的整体表现方式和页面间的导航逻辑。

一、全局样式(globalStyle)

globalStyle 节点用于设置整个应用的全局窗口样式，包括状态栏、导航栏、标题、窗口背景色等。通过全局样式配置，你可以统一管理应用所有页面的整体视觉风格和行为。如果页面有单独的样式配置，则页面的配置会优先于全局配置。

ps：以下我都只列举了个人认为比较常见的属性，如果有需要强烈建议去官网看，最全。

官网地址：pages.json 页面路由 (opens new window)

1.1 背景颜色、标题颜色、标题文本

导航栏通常显示在页面的顶部，用于显示当前页面的标题和操作按钮。通过全局配置可以统一设置所有页面的导航栏样式，如背景颜色、标题文字颜色、导航栏样式等。

常见属性及详细说明

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F8F8F8	设置导航栏的背景颜色，背景颜色通常与状态栏颜色一致。	在 APP 和 H5 平台上，默认背景颜色为 #F8F8F8，在小程序平台可能有所不同，具体参考相应小程序文档。
navigationBarTextStyle	String	black	设置导航栏的文字颜色，仅支持 black 和 white 两种值。	支付宝小程序不支持此配置项，请使用 my.setNavigationBar (opens new window)。
navigationBarTitleText	String	无	设置导航栏的标题内容，显示在导航栏中央。	适用于所有平台。
navigationStyle	String	default	设置导航栏样式，支持 default 和 custom。 custom 样式表示隐藏原生导航栏，由开发者自定义实现。	微信小程序 7.0+、百度小程序、H5 和 App（2.0.3+）支持 custom 样式。

1.1.1 配置全局导航栏样式

{
  "globalStyle": {
    "navigationBarBackgroundColor": "#ffffff",  // 设置导航栏背景颜色为白色
    "navigationBarTextStyle": "black",  // 设置导航栏标题的文字颜色为黑色
    "navigationBarTitleText": "我的应用",  // 设置导航栏的默认标题
    "navigationStyle": "default"  // 使用默认的原生导航栏样式
  }
}

在上面的配置中，导航栏的背景颜色统一为白色 (#ffffff)，导航栏的文字颜色设置为黑色 (black)，并且默认显示导航栏标题为“我的应用”。所有页面都会使用这个配置，除非页面有单独配置。

演示效果：

1.1.2 页面样式优先级

全局样式会应用到所有页面上，但如果某个页面有单独的样式定义，该页面的样式将优先于全局配置。页面配置的优先级高于全局配置。你可以通过在页面的 style 中重新定义某些样式，覆盖全局样式。

{
  "pages": [
    {
      "path": "pages/home/home",  // 配置首页路径
      "style": {
        "navigationBarBackgroundColor": "#ff0000"  // 覆盖全局样式，为首页设置红色的导航栏背景
      }
    }
  ]
}

在上面的例子中，虽然全局配置将导航栏背景设置为白色，但 home 页面中的导航栏背景被设置为红色，因为页面级的配置优先于全局配置。

注意： 如果发现全局样式没有生效，检查页面中是否有单独的样式覆盖了全局样式。删除页面的样式配置，可以恢复全局样式的作用。

示例图：

1.2 开启下拉刷新、下拉背景、下拉样式

在部分小程序平台（如微信小程序），可以使用 globalStyle 配置下拉刷新功能。下拉刷新是一种常见的交互行为，用户可以通过下拉页面刷新数据。通过配置下拉刷新相关的属性，你可以控制下拉区域的背景颜色、loading 样式等。

1.2.1 下拉常见属性设置

属性	类型	默认值	描述	平台差异说明
backgroundColor	HexColor	#ffffff	设置下拉刷新时显示的窗口背景颜色。	微信小程序
backgroundTextStyle	String	dark	下拉刷新时的 loading 样式，仅支持 dark 和 light 两种值。	微信小程序
enablePullDownRefresh	Boolean	false	是否启用下拉刷新功能，默认不开启。	微信小程序和部分其他平台支持
onReachBottomDistance	Number	50	页面上拉触底事件触发的距离，单位为 px。	微信小程序

1.2.2 启用下拉刷新功能

{
  "globalStyle": {
    "enablePullDownRefresh": true,  // 启用下拉刷新功能
    "backgroundColor": "#ffffff",  // 设置下拉区域的背景颜色为白色
    "backgroundTextStyle": "dark"  // 设置下拉刷新时 loading 的样式为深色
  }
}

该配置开启了下拉刷新功能，背景颜色为白色，loading 样式为深色。用户在页面中下拉时，会看到背景颜色变为白色，加载动画为深色。该功能通常适用于小程序中。

演示效果：

二、页面路由(pages)

pages.json 文件中的 pages 节点用于配置应用的页面路由结构。每个页面都需要在 pages 数组中定义，否则无法访问。pages 数组中的第一个页面是应用的启动页（即首页），当用户打开应用时，会首先显示这个页面。

pages 节点属性说明

属性	类型	默认值	描述
path	String		配置页面路径，文件路径不需要写文件后缀，框架会自动寻找对应的 .vue 文件。
style	Object		定义页面的窗口样式，包括导航栏标题、背景颜色等。

重要提示：

• pages 数组中的第一个页面是应用的启动页面（即首页）。
• 新增或删除页面时，需要同步修改 pages 数组，确保页面的结构和路径正确。

示例：配置页面路由

{
  "pages": [
    {
      "path": "pages/index/index",  // 配置首页的路径
      "style": {
        "navigationBarTitleText": "首页",  // 设置首页的导航栏标题
        "enablePullDownRefresh": true  // 启用首页的下拉刷新功能
      }
    },
    {
      "path": "pages/about/about",  // 配置"关于我们"页面的路径
      "style": {
        "navigationBarTitleText": "关于我们"  // 设置"关于我们"页面的导航栏标题
      }
    }
  ]
}

在这个示例中，应用的首页路径为 pages/index/index，并且首页启用了下拉刷新功能。第二个页面为“关于我们”页面，导航栏标题显示为“关于我们”。

示例图：

三、底部导航栏(tabBar)

tabBar 节点用于配置应用底部的导航栏，适用于多 tab 应用。tabBar 配置允许定义多个底部导航栏选项，用户可以通过 tabBar 在不同页面之间切换。每个 tab 项对应一个页面，点击 tab 后会跳转到指定页面。

tabBar 的详细配置会在第七章中介绍。

四、开发启动模式(condition)

condition 节点仅在开发阶段生效，允许开发者模拟应用从不同页面启动的场景。通过设置 condition，你可以在开发过程中直接跳转到指定页面进行调试，常用于模拟分享、转发等场景的直达页面功能。

condition 属性说明

属性	类型	是否必填	描述
current	Number	是	当前激活的启动模式，值为 list 数组中的索引，表示使用哪个启动模式。
list	Array	是	启动模式列表，定义了多个启动场景，开发时可以模拟不同的启动场景。

list 节点属性说明

属性	类型	是否必填	描述
name	String	是	启动模式名称，方便开发者识别不同的启动场景。
path	String	是	启动时直接打开的页面路径。
query	String	否	启动时传递的参数，可以在页面的 onLoad 函数中获取。

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式。

示例：配置开发启动模式

{
  "condition": {
    "current": 0,  // 设置默认启动的模式为第一个
    "list": [
      {
        "name": "首页模式",  // 启动模式名称
        "path": "pages/index/index",  // 启动时直接打开首页页面
        "query": "id=123"  // 启动时传递参数 id=123
      },
      {
        "name": "关于我们模式",  // 第二个启动模式
        "path": "pages/about/about"  // 启动时直接打开"关于我们"页面
      }
    ]
  }
}

在上面的示例中，condition 配置了两个开发启动模式：

• “首页模式”：启动时直接打开 pages/index/index 页面，并传递参数 id=123。
• “关于我们模式”：启动时直接打开 pages/about/about 页面。

通过修改 current 的值，你可以选择激活的启动模式。在开发者工具或调试工具中，这个功能非常方便，可以快速测试不同页面的启动场景。

演示图：

再创建一个测试页测试一下

配置condition条件：

总结

pages.json 是 uni-app 中的核心配置文件，它决定了应用的整体样式、页面路由、底部导航栏配置以及开发调试时的启动模式。通过灵活使用 globalStyle、pages 和 condition 等配置项，开发者可以高效地管理应用的结构和样式，提高开发效率和调试体验。