Navbar 图标定制与页面概览
首页的 tabBar 是小程序底部导航栏的核心配置。本节介绍 tabBar 图标的准备要求和配置方法，并对后续要实现的业务页面（微课详情、学习小组、音频/视频模板等）进行概览说明。
tabBar 图标准备
图标要求
每个 tab 需要两张图片：选中状态和未选中状态。本项目的四个 tab 分别是：
| Tab | 未选中图标 | 选中图标 |
|---|---|---|
| 首页 | home_no_select.png | home_select.png |
| 消息 | message_no_select.png | message_select.png |
| 学习 | book_no_select.png | book_select.png |
| 我的 | user_no_select.png | user_select.png |
图标格式要求：
- PNG 或 JPG 格式
- 建议尺寸：81px x 81px（推荐）
- 图标大小不超过 40KB
资源位置
图标资源放在 static/icons/ 目录下，可在课程资料文件夹或 Git 仓库中获取。
pages.json 配置
在 pages.json 末尾的 tabBar 节点中配置：
{
"tabBar": {
"color": "#999",
"selectedColor": "#333",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/home/index",
"iconPath": "static/icons/home_no_select.png",
"selectedIconPath": "static/icons/home_select.png",
"text": "首页"
},
{
"pagePath": "pages/message/index",
"iconPath": "static/icons/message_no_select.png",
"selectedIconPath": "static/icons/message_select.png",
"text": "消息"
},
{
"pagePath": "pages/learn/index",
"iconPath": "static/icons/book_no_select.png",
"selectedIconPath": "static/icons/book_select.png",
"text": "学习"
},
{
"pagePath": "pages/user/index",
"iconPath": "static/icons/user_no_select.png",
"selectedIconPath": "static/icons/user_select.png",
"text": "我的"
}
]
}
}
json
配置注意事项
iconPath和selectedIconPath的路径不能重复，重复会导致图标不渲染- 路径前不需要加
/ pagePath必须在pages数组中已注册
后续页面概览
微课详情页
- 顶部：tabBar 切换（章节、评论、问答）
- 中部：课程内容区域
- 底部：评论列表（可使用 uview-plus 的评论模板）
学习页面
- 学习计划定制与统计
- 添加计划功能
- 学习小组（含渐变色按钮和模态框）
精品微课
- tabBar + 列表
- 复用 vp-item 和 vp-course-item 基础组件
每日一刻
- 集成 uni-cms-article 组件
- 文章列表 + 搜索 + 详情
音视频模板
- 音频：使用
createInnerAudioContextAPI - 视频：使用
video组件
默认模板（课程详情）
- 图文详情
- 课程目录（展开/收起）
- 作者介绍
- 音视频章节（试看/付费锁定）
uview-plus 评论模板
uview-plus 提供了评论列表模板，可以直接复制到项目中使用：
- 评论展示
- 评论回复
- 点赞功能
在模板基础上增加评论输入、收藏和分享按钮即可满足需求。
开发策略
后续页面开发建议：
- 优先复用组件：已封装的 vp-item、vp-course-item、vp-card 可直接复用
- 参考 uview-plus 模板：评论、表单等常见功能直接使用模板
- 先搭结构再调样式：保持与首页开发相同的策略
- 关注音视频：这是本课程的技术重点
↑