uniapp pages.json介绍及使用

最新推荐文章于 2025-05-17 23:15:27 发布
最新推荐文章于 2025-05-17 23:15:27 发布
阅读量2.8k 收藏 32
点赞数 30
CC 4.0 BY-SA版权
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Waitfor_Me/article/details/141896581

pages.json页面路由，是对uniapp的全局设置，如设置页面路径，页面标题名称，原生导航栏样式，窗口样式等。

配置项

globalStyle

globalStyle设置的是页面默认的窗口表现，也可以说是全局样式，如果在pages里面的style里面没有对页面设置窗口表现的话，默认使用的就是globalStyle的窗口表现样式，主要设置的就是应用的状态栏、导航条、标题、窗口背景色等一系列操作

常用属性

navigationBarBackgroundColor：参数类型：HexColor，默认值：#F8F8F8设置的导航栏的背景颜色，也是状态栏的背景颜色

navigationBarTextStyle：参数类型：String，默认值：black，设置的是导航栏的标题文字颜色，以及状态栏的前景色，只支持设置white和black

navigationBarTitleText：参数类型是：String，设置的是导航栏的标题文字

navigationStyle：参数类型：String，默认值：default，设置的是导航栏的样式，只支持设置default/custom，设置default表示的是使用原生的导航栏，设置custom表示的是取消使用默认的原生导航栏，如果需要使用的话，需要看注意事项：pages.json 页面路由 | uni-app官网

backgroundColor：参数类型：HexColor，默认值：#ffffff，设置的是下拉刷新时显示的窗口背景颜色，它只能在微信小程序有效，其他平台设置这个属性无效

backgroundTextStyle：参数类型：String，默认值：dark，下拉刷新时，loading的样式，只支持设置dark和light

enablePullDownRefresh：参数类型：Boolean，默认值：false，设置此属性表示是否开启下拉刷新

onReachBottomDistance：参数类型：Number，默认值：50，设置的是上拉滚动时触底的事件，通过设置参数，当上拉滚动时，距离页面尾部的距离达到设定的参数时就会触发该事件，通常用于触底时重新从数据库加载数据到页面上显示

更多的属性以及使用介绍见：pages.json 页面路由 | uni-app官网

使用示例

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path" : "pages/index/demo2/demo2"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "未知页",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#09ae1e"
	},
	"uniIdRouter": {}
}
 页面效果

通过这样的一个示例可以看出来，如果pages里面的style设置了和globalStyle一样的属性，那么style将会覆盖globalStyle的属性，也就是说pages里面的style权重比globalStyle的权重高。

 可以看到我们通过navigationBarBackgroundColor属性进行设置之后状态栏的背景颜色也是跟着一起改变的。

如果设置了"navigationStyle": "custom"属性会发生什么呢？

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}

 可以通过这张效果图看到如果我们设置了"navigationStyle": "custom"的话，我们相应的设置导航栏的背景色、标题文字、标题文字颜色等属性都会失效

pages

pages设置的是页面的路径及窗口表现，pages是一个数组，数组中的每一项都是一个对象，这个对象包含的就是我们的一个页面的路径及窗口表现，如果想要一个新建的页面能够显示出来的话就必须再这里添加一个数组项并为其设置页面路径；pages中的属性有：

path：参数类型:String，使用来配置页面路径的

style：参数类型:Object，用来配置具体的窗口表现，其中style中的属性大致和globalStyle相同

needLogin：参数类型：Boolean，默认值是false，用来表示是否需要登录后才能访问此页面

使用示例

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}
	]

如果我想要运行demo2页面的话这是是运行不了的，因为pages里面没有注册demo2页面的信息

，我们只需要在pages里面注册demo2页面的信息即可，如：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		},{
			"path": "pages/index/demo2/demo2",
			"style": {
				"navigationBarTitleText": "demo2",
			}
		}
	]

如果想要让demo2作为项目首次运行时显示的页面，我们只需要把demo2的注册信息放到数组中的第一项即可，如：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/demo2/demo2",
			"style": {
				"navigationBarTitleText": "demo2"
			}
		},{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}
	]

tabBar

底部导航栏，如果我们的应用时多个tab的应用的话，我们可以通过tabBar设置一级导航栏，以及tab切换时显示的页面

常用属性

color：参数类型：HexColor，tab上的文字默认颜色
selectedColor：参数类型：HexColor，tab选中的时候显示的文字颜色

backgroundColor：参数类型：HexColor，tab的背景颜色

borderStyle：参数类型：String，tabBar的上边框颜色，只支持white和black

list：参数类型：Array，tab的列表，最少要有2个，最多5个

position：参数类型：String，tab显示的位置，可选的值时bottom、top，top值只支持在微信小程序显示

更多的tabBar属性见：pages.json 页面路由 | uni-app官网

 list

接受一个数组值，数组中的每一项都是一个对象

常用属性

pagePath：参数类型：String，点击tab跳转的页面路径，首先得在pages里面注册，且是设置tabBar必填的属性

text：参数类型：String，tab上显示的按钮文字，在App和H5平台是必填的，如果实在不知道放什么字可以放一个没有文字的+号的图标

iconPath：参数类型：String，图标图片路径，图标的大小限制为40kb，且图标的尺寸建议是81px*81px，不能是网络图标，或带字体的图标，如果我们设置了postion的值为top时，这个属性就不起作用了

selectedIconPath：参数类型：String，选中的时候的图标图片路径，要求同上

使用示例

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/classify/classify",
			"style" : 
			{
				"navigationBarTitleText" : "分类"
			}
		},
		{
			"path" : "pages/myInfo/myInfo",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#ccc",
		"backgroundColor": "#fffdf3",
		"selectedColor": "##00d064",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/tabBar/home.png",
				"selectedIconPath": "static/images/tabBar/home-h.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify",
				"iconPath": "static/images/tabBar/classify.png",
				"selectedIconPath": "static/images/tabBar/classify-h.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/myInfo/myInfo",
				"iconPath": "static/images/tabBar/user.png",
				"selectedIconPath": "static/images/tabBar/user-h.png",
				"text": "我的"
			}
		]
	},
	"uniIdRouter": {}
}
页面效果

切换tab效果 

 

加上postion属性值为top后的页面效果

"position": "top",

 

可以看到设置了postion值为top时，我们设置的图标图标就不会起作用了

Waitfor_Me
关注
Uniapp：pages.json页面路由
MMF博客园
04-21 565
Uniapp：pages.json页面路由
uni-app - 解决 pages.json 中写条件编译报错导致白屏的问题（在 pages.json 里写条件编译语法后小程序端控制台直接报错白屏了）编译时 pages.json 解析失败解决教程
前端开发大师鸭
11-25 3654
uni-app page.json 条件编译报错，uni-app之条件编译在pages.json里的写法，uniapp编译时pages.json 解析失败，uniapp在pages配置文件中写条件编译注释后在微信小程序端报错了编译过不了白屏，UNIAPP如何能让跨段兼容条件编译语法在pages.json中运行，条件编译时在H5端能通过，在其他平台就报错，pages.json条件编译在 APP 平台报错了错误，uniapp跨端兼容条件编译写法在pages.json中无法运行，uniapp条件编译可以在page
学习Uni-app开发小程序Day12
qq_34080064的博客
05-15 1178
uni-app页面路由设置 tabBar的使用 插件导入
uni-auto-pages:uni-app 自动配置pages.json
05-31
uni-auto-pages uni-app 开发中根据规则自动配置页面 pages，分包 subPackages,和 condition 生成 pages.josn 的 webpack 插件，使得开发者不需要手动的去维护 pages.json。类似 vue-auto-routing,使用非常简单。 安装 npm install uni-auto-pages 首先通过 vue-cli 创建 uni-app 项目 vue.config.js 配置 *注：template.json 参数是模版文件名 必须在 src 下，文件名可以自定义 默认名 template.json const UniAutoPagesPlugin = require('uni-auto-pages'); module.exports = { configureWebpack: { plugins: [new
uniapp自动构建pages.json的vite插件
最新发布
jl15988
05-17 1071
一个用于 UniApp 项目的插件，可以根据项目目录结构自动构建 pages.json 文件。
uni-app中pages.json详解
qdm13209211861的博客
01-16 9007
pages.json pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。 pages.json 配置项列表 globalStyle Object 否 设置默认页面的窗口表现 pages Object Array 是 设置页面路径及窗口表现 tabBar Object 否 设置底部 tab 的表现 condition Object 否 ...
uniapp之pages.json介绍
码奴一只猿
05-16 3838
Uniapp是一款跨平台的开发框架，可以同时开发小程序、H5、App等多个平台。在Uniapp中，pages.json是一个非常重要的配置文件，它用于配置小程序的页面路径、窗口表现、导航条样式等信息。本文将为大家介绍pages.json的使用方法。
深入解析 UniApp 的 pages.json 配置文件
前端开发探索之旅
03-12 1638
pages.json配置文件是 UniApp 开发中不可或缺的一部分，通过合理配置各个选项，能够实现应用的页面管理、分包优化、预加载策略、TabBar导航和全局样式设置等功能。开发者需要深入理解每个配置项的含义和用法，根据项目需求进行灵活配置，以提高应用的性能和用户体验。希望本文能够帮助你更好地掌握pages.json的配置方法，在 UniApp 开发中更加得心应手。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
uni-app、小程序项目对pages.json文件拆分、动态生成pages.json文件、动态生成分包配置pages.json文件的解决方案
积跬步，至千里。
10-27 8334
uni-app、小程序项目对pages.json文件拆分、动态生成pages.json文件、动态生成分包配置pages.json文件的解决方案
uni-read-pages:读取`pages.json`文件以生成路由表
05-12
通过 配合此库，可以随心所欲的读取 pages.json 下的所有配置 安装 您可以使用 Yarn 或 npm 安装该软件包（选择一个）： Yarn yarn add uni-read-pages npm npm install uni-read-pages 开始 配置 vue.config.js ...
UniApp 覆盖安装后首次进入 APP pages.json 不生效的解决方案
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-05 329
通过以上步骤，解决了缓存问题导致的首次加载异常。此方案的关键在于强制更新文件名，从根本上避免旧缓存的干扰。
uniapp框架配置项pages.json
前端开发工程师
11-12 2261
在 UniApp 框架中，pages.json 文件用于配置应用的页面路由、窗口样式等。如果你想要修改一个页面的名字（例如页面标题），通常是在 pages.json 中的 pages 配置项下，针对具体页面路径设置 style 属性中的 navigationBarTitleText 字段来实现。
uni-app page.json配置文件
记录点滴
12-26 6730
pages配置 pages节点中配置的是：应用由哪一些页面组成 "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/index/index", "style": { "navigationBarTitleText": "test" } } ], · pages 节点的第一项为应用入口页（首页） · 应用中的新增/减...
uni-app之page.json
qq_40551957的博客
04-06 2414
page.json必有属性只有一个page，其余都是非必要属性。 page属性有两大部分path和style path必有，是从项目根目录开始的路径（没有vue文件后缀） style必有，但是可以为空，是描述对应页面的样式的属性。 "pages": [ { "path": "pages/index/index", "style": { ... } }, { "path": "pages/login/lo
uniapp动态生成pages.json路由
哈哈大王
12-11 3803
uniapp动态配置json路由文件
Uni-App - 配置文件 - pages.json
热门推荐
02-19 1万+
pages.json pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。 pages.json 配置项列表 globalStyle Object 否 设置默认页面的窗口表现 pages Object Array 是 设置页面路径及窗口表现 tabBar Object 否 设置底部 tab 的表现 condition...
uni-app中pages.json管理页面路由、和manifest.json管理应用配置
阿金的博客
10-09 4499
uni-app中pages.json管理页面路由、和manifest.json管理应用配置
uniapp pages.json文件中 navigationBarTitleText加背景图
03-13
<think>好的，我现在需要帮助用户解决在UniApp的pages.json文件中同时设置navigationBarTitleText和导航栏背景图片的问题。首先，我得回顾一下用户提供的引用内容，确保解决方案符合他们的实际情况。 用户提到了引用[2]，指出在pages.json中修改导航栏颜色无效，这可能是因为版本更新导致的。另外，引用[3]中提到在app-plus的titleNView里配置自定义图标和背景图片。这说明在HBuilderX的不同版本中，配置方式可能有所变化，可能需要使用特定于平台的配置。 首先，用户想要同时设置标题和背景图片。根据UniApp的文档，navigationBarTitleText是全局或页面样式的常规配置项，可以直接在style里设置。而导航栏背景图片可能需要更高级的配置，比如在app-plus平台下的titleNView中设置。 接下来，我需要确认如何正确设置背景图片。在引用[3]的例子中，背景是通过backgroundImage属性设置的，但例子中使用的是颜色值#2E74EE，而不是图片路径。这可能是一个笔误，或者用户需要知道如何替换为图片路径。正确的做法应该是将backgroundImage的值设为图片的路径，如"/static/nav_bg.png"。 同时，用户可能需要区分不同平台的配置，因为H5和App（iOS/Android）可能有不同的设置方式。例如，在H5中，导航栏的背景图片可能需要使用CSS或者特定的H5配置项，而在App端则使用titleNView。需要检查是否需要在不同平台下分别配置，或者是否有全局配置可用。 另外，用户需要注意图片路径的正确性。引用[3]提到，H5需要绝对路径，如以/开头，而App可能支持相对路径。因此，在设置backgroundImage时，应使用绝对路径以确保所有平台都能正确加载图片。 还需要考虑版本兼容性问题。用户提到引用[2]中按老师的方法修改无效，可能因为新版本的UniApp要求更明确的平台配置，或者某些配置项的位置发生了变化。因此，解决方案需要基于最新的UniApp文档或社区推荐的方法。 最后，整合这些信息，给出一个具体的配置示例，确保同时设置标题和背景图片，并且分平台处理，特别是针对App和H5的可能差异。同时提醒用户检查图片路径和平台配置，避免常见错误。</think>在 UniApp 的 `pages.json` 中同时设置导航栏标题和背景图片，需要通过**分平台配置**实现。以下是具体实现步骤： ### 1. 基础标题配置 在页面 `style` 中直接设置通用属性： ```json { "path": "pages/demo/demo", "style": { "navigationBarTitleText": "我的页面", // 标题文字 "app-plus": { "titleNView": { "backgroundImage": "/static/nav_bg.png", // APP端背景图 "titleSize": "16px" // 标题字号 } } } } ``` ### 2. 多平台适配方案 #### 方案一：APP+H5 兼容写法 ```json { "path": "pages/demo/demo", "style": { "navigationBarTitleText": "我的页面", "app-plus": { "titleNView": { "backgroundImage": "/static/nav_bg.png", "titleColor": "#FFFFFF" // 确保标题可见 } }, "h5": { "titleNView": { "backgroundImage": "url(/static/nav_bg.png)", "textStyle": { "color": "#FFFFFF" } } } } } ``` #### 方案二：条件编译（推荐） ```json { "path": "pages/demo/demo", "style": { "navigationBarTitleText": "我的页面", // APP 专用配置 "app-plus": { "titleNView": { "backgroundImage": "/static/nav_bg_app.png", "titleColor": "#FFFFFF" } }, // H5 专用配置 "h5": { "navigationBarTextStyle": "white", // 强制设置标题颜色[^3] "navigationBarBackgroundColor": "transparent", "navigationStyle": "custom", // 启用自定义导航栏 "backgroundColor": "transparent" } } } ``` ### 关键注意事项： 1. **路径规范**： - APP 端：`/` 开头的绝对路径（如 `/static/img.png`） - H5 端：需要 `url()` 包裹路径（如 `url(/static/img.png)`） 2. **颜色对比**： 当使用深色背景图时，建议通过 `titleColor/textStyle.color` 设置白色标题： ```json "titleColor": "#FFFFFF" // APP端 "textStyle": { "color": "#FFFFFF" } // H5端 ``` 3. **H5适配要点**： - 需要额外设置 `navigationStyle: "custom"` 激活自定义样式 - 通过 `navigationBarBackgroundColor: "transparent"` 隐藏默认背景色 ### 调试建议： 1. 使用 Chrome 开发者工具审查 H5 端导航栏 DOM 结构 2. 在真机上测试 APP 端效果，模拟器可能渲染不准确 3. 检查控制台是否有图片加载错误提示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值