qt_books/添加TabBar图标指南.md

TabBar 图标添加指南

当前状态

app.json 中已经配置了图标路径，但需要确保图标文件存在。

快速添加图标的方法

方法1：使用在线图标生成器（推荐）

1. 访问图标库网站：

   • IconFont: https://www.iconfont.cn/
   • Iconfinder: https://www.iconfinder.com/
   • Flaticon: https://www.flaticon.com/

2. 搜索并下载图标：

   • 首页：搜索 "home" 或 "首页"
   • 书架：搜索 "bookshelf" 或 "书架"
   • 我的：搜索 "user" 或 "profile" 或 "我的"

3. 准备图标文件（需要6个文件）：

   • images/home.png - 首页未选中（灰色，81x81px）
   • images/home-active.png - 首页选中（主题色 #667eea，81x81px）
   • images/bookshelf.png - 书架未选中（灰色，81x81px）
   • images/bookshelf-active.png - 书架选中（主题色 #667eea，81x81px）
   • images/profile.png - 我的未选中（灰色，81x81px）
   • images/profile-active.png - 我的选中（主题色 #667eea，81x81px）

方法2：使用微信开发者工具创建占位图标

1. 在微信开发者工具中，右键点击 images 文件夹
2. 选择"新建文件"
3. 创建6个PNG文件（可以是简单的占位图）

方法3：使用图片编辑工具

使用 Photoshop、GIMP 或在线编辑器创建 81x81px 的 PNG 图标。

图标要求

• 尺寸：81px × 81px（推荐）
• 格式：PNG（支持透明背景）
• 大小：单个文件不超过 40KB
• 颜色：
  • 未选中：灰色 (#7A7E83)
  • 选中：主题色 (#667eea)

配置检查

确保 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/)

   • 搜索：home, bookshelf, user
   • 有免费和付费图标

3. Flaticon (https://www.flaticon.com/)

   • 大量免费图标
   • 支持 PNG 格式下载

注意事项

• 图标文件必须放在 images 目录下
• 文件名必须与 app.json 中配置的路径完全一致
• 如果图标不显示，检查文件路径和文件名是否正确
• 建议使用透明背景的 PNG 图标