UniApp中的pages.json 和 tabBar

一、pages.json 和 tabBar 案例

pages.json作用：配置页面路由、导航栏、tabBar等页面类信息
静态资源存放要求：必须放在static目录中才能被打包
页面存放位置：业务页面必须放在pages目录下

1. 修改 pages.json
   1）pages配置

路径写法：只需写路径不需要.vue后缀，如"pages/index/index"
启动页规则：pages数组中第一项表示应用启动页
标题修改：通过navigationBarTitleText属性修改页面标题
2）页面样式配置
导航栏颜色：使用navigationBarBackgroundColor属性修改
文字颜色：通过navigationBarTextStyle设置，仅支持white/black两种
全局背景色：backgroundColor属性控制页面背景颜色
3）全局样式配置

globalStyle作用：统一修改所有页面的窗口表现
颜色取值技巧：可使用截图工具吸取颜色值
样式继承规则：页面样式会覆盖全局样式配置
2. 新建页面

必要操作：必须勾选"在pages.json中注册"选项
目录规范：会自动创建同名目录存放页面文件
标题预设：可在创建时直接设置navigationBarTitleText
3. 配置 tabBar
1）配置一项错误示例

最少项数：list数组必须包含至少2个配置项
错误提示：编译时会明确提示缺少配置项数量
2）配置两项成功示例

pagePath：必须指向pages目录下的页面路径
text规范：建议控制在2-4个汉字长度
图标路径：需使用static目录下的资源路径
3）配置图标

两种状态：需同时配置iconPath和selectedIconPath
颜色搭配：selectedColor应与主题色保持一致
尺寸建议：推荐使用81px*81px的图标尺寸
4. 修改 manifest.json

APP ID位置：在微信小程序配置项中填写
调试限制：未配置APP ID时只能使用游客模式
多端适配：可分别配置不同平台的打包信息
二、内容总结

三大配置块：pages路由、globalStyle全局样式、tabBar底部导航
目录规范：
页面→pages目录
静态资源→static目录
调试准备：manifest.json中必须配置有效的APP ID
样式优先级：页面样式 > 全局样式 > 默认样式
三、知识小结
知识点
核心内容
考试重点/易混淆点
难度系数
pages.json文件作用
配置页面路由、导航栏、tab等页面类信息
路由配置必须包含完整路径但不写文件后缀
⭐⭐
全局样式配置
通过globalStyle修改导航栏背景色、文字颜色等
文字颜色仅支持黑白两色
⭐
tabBar配置规范
需包含至少2个tab项，每个tab需配置pagePath和text
路径错误会导致页面无法跳转
⭐⭐⭐
静态资源存放规则
图标等资源必须放在static目录
非static目录资源打包时会丢失
⭐⭐⭐⭐
页面创建流程
在pages目录新建页面时需勾选自动注册路由
未注册页面无法被访问
⭐⭐
manifest.json配置
小程序项目需在此文件配置APPID才能真机预览
安卓/iOS配置可忽略
⭐⭐⭐