pages.json的pages中，设置页面路径（path）和窗口表现（style）-EW帮帮网

📝 Uniapp pages.json配置全攻略：页面路径与窗口表现详解 🚀

✨ 欢迎来到本篇技术分享！✨

各位开发者朋友们，大家好！👋 今天我们要一起深入探讨 Uniapp 中 pages.json 的核心配置——页面路径（path） 与 窗口表现（style）。无论你是刚接触 Uniapp 的小白 🐣，还是有一定经验的老手 🦸‍♂️，相信这篇文章都能为你带来新的收获！

🎯 本文亮点速览 🌟

🔹 pages.json 是什么？ —— 多端统一的页面管理神器！
🔹 页面路径（path） 配置详解 📂 —— 从基础到高阶用法
🔹 窗口表现（style） 深度解析 🎨 —— 导航栏、背景色、下拉刷新等
🔹 实战技巧 💻 —— 避坑指南 + 性能优化建议
🔹 代码示例 📋 —— 即学即用的配置模板

🌈 为什么要关注pages.json？

在 Uniapp 中，pages.json 是全局页面配置文件，相当于小程序的 app.json 或 Web 的路由表。它决定了：

✅ 页面注册与路由跳转 ➡️ "pages": [...]
✅ 窗口UI风格 🖌️ "globalStyle": {...}
✅ 底部Tab栏 ⚡ "tabBar": {...}
✅ 条件编译差异化配置 🔧 "condition": {...}

举个栗子 🌰：

json

换行复制代码
1{
2  "pages": [
3    {
4      "path": "pages/index/index",
5      "style": {
6        "navigationBarTitleText": "首页",
7        "enablePullDownRefresh": true
8      }
9    }
10  ]
11}
📌 核心一：页面路径（path）配置

1️⃣ 基础规则 📖

必须放在pages数组首位的是首页（启动页）

路径无需写后缀（如 .vue 或 .nvue）

支持子目录："pages/user/settings/index"

2️⃣ 动态路由技巧 🎭

通过uni.navigateTo传递参数：

javascript

换行复制代码
1uni.navigateTo({
2  url: '/pages/detail/detail?id=123'
3})
3️⃣ 优先级规则 ⚖️

当同名页面存在于不同目录时，靠前的配置优先级更高！

🖼️ 核心二：窗口表现（style）配置

1️⃣ 全局样式 vs 页面样式

json

换行复制代码
1{
2  "globalStyle": { /* 所有页面生效 */ },
3  "pages": [
4    {
5      "path": "...",
6      "style": { /* 仅当前页面生效 */ }
7    }
8  ]
9}
2️⃣ 高频配置项 🔧

属性作用示例值

navigationBarTitleText 标题文字 "订单详情"

navigationBarBackgroundColor 标题栏背景色 "#FF0000"

backgroundColor 页面背景色 "#F5F5F5"

enablePullDownRefresh 开启下拉刷新 true

transparentTitle 透明导航栏（H5） "always"

3️⃣ 特殊平台配置 📱

json

换行复制代码
1"style": {
2  "app-plus": { /* 专供APP的配置 */ },
3  "h5": { /* H5特有配置 */ }
4}
💡 实战避坑指南

⚠️ 坑点1：页面路径修改后必须重新编译才能生效！
⚠️ 坑点2：navigationBarTextStyle 只支持 black/white 两种颜色
⚠️ 坑点3：安卓手机导航栏字体颜色可能受系统主题影响

优化建议 🚀：

使用 "rpx" 单位保证多端适配

复杂样式建议通过CSS实现而非JSON配置

Happy Coding! 🎉

属性	作用	示例值
`navigationBarTitleText`	标题文字	`"订单详情"`
`navigationBarBackgroundColor`	标题栏背景色	`"#FF0000"`
`backgroundColor`	页面背景色	`"#F5F5F5"`
`enablePullDownRefresh`	开启下拉刷新	`true`
`transparentTitle`	透明导航栏（H5）	`"always"`