uniapp页面配置主要在pages.json文件中，这是uniapp的全局页面配置文件，用于定义页面路由路径、窗口样式（如导航栏标题、背景色）、页面标题等全局规则，若需对单个页面进行特定配置（如单独设置导航栏样式），可在对应页面的.vue文件中使用export default中的config选项补充配置，但核心页面路由及全局样式配置均依赖pages.json。
Uniapp页面配置到底写在哪？一文讲清楚
在Uniapp开发中，页面配置是控制页面外观、导航栏样式、路由跳转等核心功能的关键，许多新手开发者常常困惑：页面配置究竟该写在哪个文件里？是pages.json？manifest.json？还是页面组件的.vue文件中？Uniapp的页面配置实际上是一个"分层+多端适配"的体系，不同场景下配置文件的位置和作用各不相同，本文将详细拆解页面配置的存储位置、使用场景及最佳实践,帮你彻底理清思路。
核心配置文件：pages.json——页面路由与样式的"指挥中心"
pages.json是Uniapp项目的核心页面配置文件，每个Uniapp项目根目录下都必须有它，它主要用于定义页面的路由规则、全局样式、导航栏配置、底部标签栏等，是整个应用的"页面蓝图"。
pages.json的核心作用
- 路由配置：定义所有页面的路径、是否需要登录、页面样式等。
- 全局样式：设置导航栏标题、背景色、文字颜色等公共样式。
- 组件配置：配置原生组件（如导航栏、标签栏）的显示与隐藏。
- 页面生命周期：配置页面的下拉刷新、上拉加载等交互行为。
pages.json的常见配置项
以下是一个典型的pages.json示例，包含页面路由、全局导航栏和底部标签栏配置：
{
"pages": [
{
"path": "pages/index/index", // 页面路径（相对于src目录）
"style": {
"navigationBarTitleText": "首页", // 导航栏标题
"navigationBarBackgroundColor": "#FF6B6B", // 导航栏背景色
"navigationBarTextStyle": "white", // 导航栏文字颜色（仅支持white/black）
"enablePullDownRefresh": true, // 是否开启下拉刷新
"app-plus": {
"bounce": "none" // App端弹性效果设置
}
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom", // 自定义导航栏（隐藏原生导航栏）
"backgroundColor": "#F8F8F8" // 页面背景色
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#3C8AFF",
"backgroundColor": "#F8F8F8",NView": false // 是否开启原生标题栏
},
"tabBar": {
"color": "#7A7E83", // 未选中标签文字颜色
"selectedColor": "#3C8AFF", // 选中标签文字颜色
"backgroundColor": "#FFFFFF", // 标签栏背景色
"borderStyle": "black", // 标签栏上边框颜色
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tab-user.png",
"selectedIconPath": "static/tab-user-active.png"
}
]
}
}
关键配置说明
pages数组：每个元素代表一个页面，path是页面路径（无需写.vue后缀），style对象是页面独有的样式配置（会覆盖globalStyle中的全局配置）。globalStyle：全局样式，所有页面默认继承，单个页面可在style中覆盖。tabBar：底部标签栏配置，仅在多标签页应用中使用，定义标签的路径、文字、图标等。- 平台特定配置：通过
app-plus、mp-weixin、h5等字段可以为不同平台设置特定配置。
全局配置补充：manifest.json——跨端适配的"规则手册"
manifest.json是Uniapp的全局配置文件，主要用于配置应用的基础信息（如应用名称、图标）和跨端平台特有配置（如H5的域名、小程序的AppID、App的原生配置等），虽然它不直接定义页面路由，但部分页面级的全局样式（如导航栏高度、状态栏颜色）可能需要在这里配置。
manifest.json与页面配置的关系
- 导航栏高度适配：不同平台的导航栏高度可能不同（如H5默认44px，小程序默认48px），可通过
manifest.json的navigationStyle统一调整。 - 状态栏配置：如状态栏文字颜色（
statusbar字段）会影响导航栏的整体样式,间接影响页面顶部布局。 - 应用级权限配置：如地理位置、相机等权限的申请配置。
示例（多平台配置）：
{
"name": "Uniapp应用",
"appid": "__UNI__XXXXXXX",
"description": "这是一个Uniapp应用",
"transformPx": false, // 是否自动转换px为rpx（仅H5有效）
"mp-weixin": { // 小程序平台特有配置
"appid": "wx123456789",
"setting": {
"urlCheck": false
},
"usingComponents": true
},
"h5": { // H5平台特有配置: "H5页面标题",
"router": {
"mode": "hash",
"base": "/myapp/"
},
"navigationBar": {
"titleText": "H5全局导航栏标题",
"backgroundColor": "#3C8AFF",
"textColor": "white"
}
},
"app-plus": { // App平台特有配置
"usingComponents": true,
"nvueCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>"
]
}
}
}
}
注意：manifest.json不直接配置页面路由
虽然manifest.json能影响全局样式，但页面的路由、导航栏标题等核心页面配置仍需写在pages.json中。manifest.json更多是"辅助"和"跨端适配"的角色,主要用于处理平台差异和基础应用信息。
单页面精细化配置：.vue文件中的config对象
除了全局配置，Uniapp支持在每个页面组件的.vue文件中通过<script>标签的config对象进行单页面精细化配置，这种方式适合覆盖全局配置,或针对特定页面设置独立样式。
单页面配置的写法
在.vue文件的<script>中，通过export default导出一个config对象（需与data、methods同级）：
<template>
<view>页面内容</view>
</template>
<script>
export default {
data() {
return {
// 页面数据
}
},
config: {
// 页面配置（会覆盖pages.json和globalStyle中的配置）
navigationBarTitleText: "单页面配置标题",
navigationBarBackgroundColor: "#FF9F43",
enablePullDownRefresh: false,
// 仅H5生效的配置
"h5": {
"title": "H5专用标题"
},
// 仅App生效的配置
