qt_books/图标说明.md

TabBar 图标配置说明

当前状态

为了快速启动小程序，目前 tabBar 配置中暂时移除了图标路径，只保留了文字标签。小程序可以正常运行，但底部导航栏只显示文字。

如何添加图标

方案1：使用图标字体（推荐，简单快速）

1. 在微信开发者工具中，tabBar 可以不配置图标，只显示文字即可正常使用。

2. 如果需要图标，可以：

   • 使用小程序内置的 icon 组件
   • 或者使用 iconfont 图标字体
   • 或者使用网络图标（需要配置合法域名）

方案2：添加本地图标文件

如果需要使用本地图标文件，需要：

1. 在项目根目录创建 images 文件夹

2. 准备以下图标文件（建议尺寸：81px × 81px）：

   • home.png - 首页未选中图标
   • home-active.png - 首页选中图标
   • bookshelf.png - 书架未选中图标
   • bookshelf-active.png - 书架选中图标
   • profile.png - 我的未选中图标
   • profile-active.png - 我的选中图标

3. 然后在 app.json 中恢复图标路径配置：

   "tabBar": {
   "color": "#7A7E83",
   "selectedColor": "#667eea",
   "borderStyle": "black",
   "backgroundColor": "#ffffff",
   "list": [
   {
     "pagePath": "pages/index/index",
     "iconPath": "images/home.png",
     "selectedIconPath": "images/home-active.png",
     "text": "首页"
   },
   {
     "pagePath": "pages/bookshelf/bookshelf",
     "iconPath": "images/bookshelf.png",
     "selectedIconPath": "images/bookshelf-active.png",
     "text": "书架"
   },
   {
     "pagePath": "pages/profile/profile",
     "iconPath": "images/profile.png",
     "selectedIconPath": "images/profile-active.png",
     "text": "我的"
   }
   ]
   }
   

图标资源推荐

可以免费获取图标的地方：

1. IconFont (https://www.iconfont.cn/) - 阿里巴巴图标库
2. Iconfinder (https://www.iconfinder.com/) - 图标搜索
3. Flaticon (https://www.flaticon.com/) - 免费图标库

图标要求

• 尺寸：建议 81px × 81px（小程序会自动缩放）
• 格式：PNG 格式，支持透明背景
• 大小：建议单个图标文件不超过 40KB
• 颜色：未选中状态使用灰色，选中状态使用主题色（#667eea）

当前配置

目前 tabBar 配置为仅文字模式，功能完全正常，只是没有图标。如果需要添加图标，按照上述方案操作即可。