当前位置：首页 > uni-app

uniapp全局页面

2026-03-05 01:54:01uni-app

全局页面配置

在uniapp中，全局页面配置主要通过pages.json文件实现。该文件用于设置应用的状态栏、导航条、标题、窗口背景色等属性，以及定义应用的页面路由。

页面路由配置

pages.json中的pages数组用于配置页面路由，每个页面需要配置path和style属性。path为页面路径，style用于设置页面的窗口表现。

uniapp全局页面

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

全局窗口样式

globalStyle对象用于设置所有页面的默认窗口样式。如果某个页面单独配置了样式，会覆盖全局配置。

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uniapp全局配置",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#FFFFFF"
  }
}

底部标签栏配置

tabBar对象用于配置应用的底部标签栏。需要设置list数组，每个标签页配置pagePath、text和iconPath。

uniapp全局页面

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#F8F8F8",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ]
  }
}

页面样式覆盖

在单个页面的style配置中可以覆盖全局样式。例如修改导航栏标题或背景色。

{
  "path": "pages/detail/detail",
  "style": {
    "navigationBarTitleText": "详情页",
    "navigationBarBackgroundColor": "#007AFF",
    "enablePullDownRefresh": true
  }
}

条件编译

pages.json支持条件编译，可以根据不同平台配置不同的样式。使用#ifdef和#endif包裹平台特定配置。

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "#ifdef H5": {
      "titleNView": false
    },
    "#ifdef MP-WEIXIN": {
      "navigationBarTitleText": "微信小程序"
    }
  }
}