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作用:统一修改所有页面的窗口表现

颜色取值技巧:可使用截图工具吸取颜色值

样式继承规则:页面样式会覆盖全局样式配置

  1. 新建页面

必要操作:必须勾选"在pages.json中注册"选项

目录规范:会自动创建同名目录存放页面文件

标题预设:可在创建时直接设置navigationBarTitleText

  1. 配置 tabBar

1)配置一项错误示例

最少项数:list数组必须包含至少2个配置项

错误提示:编译时会明确提示缺少配置项数量

2)配置两项成功示例

pagePath:必须指向pages目录下的页面路径

text规范:建议控制在2-4个汉字长度

图标路径:需使用static目录下的资源路径

3)配置图标

两种状态:需同时配置iconPath和selectedIconPath

颜色搭配:selectedColor应与主题色保持一致

尺寸建议:推荐使用81px*81px的图标尺寸

  1. 修改 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配置可忽略

⭐⭐⭐

相关推荐
Vic101011 天前
Hutool 的完整 JSON 工具类示例
开发语言·json
电商数据girl1 天前
如何利用API接口与网页爬虫协同进行电商平台商品数据采集?
大数据·开发语言·人工智能·python·django·json
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app
拷斤锟2 天前
使用Excel解析从OData API获取到的JSON数据
数据库·json·excel
随笔记2 天前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的2 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
随笔记2 天前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨2 天前
uniapp上传文件
前端·uni-app