# 微信小程序使用说明

## 项目概述
这是一个使用自定义字体图标的微信小程序项目，已经完成了以下功能：

### 已完成的功能
1. **自定义字体图标系统**
   - 使用 `style/icon.wxss` 中的字体图标
   - 支持丰富的图标集合，包括 ic-home、ic-comment、ic-me 等
   - 无需外部依赖，性能更优

2. **自定义 TabBar**
   - 使用原生组件结合字体图标实现
   - 支持字体图标，无需 PNG 图片
   - 包含三个页面：首页、消息、我的

3. **页面图标集成**
   - 在各个页面中使用字体图标
   - 统一的图标风格和样式
   - 替换了原有的 emoji 图标为专业的字体图标

## 预览方法

### 1. 使用微信开发者工具预览
1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录：`d:\code\new-ryc\wx`
4. 点击"导入"

### 2. 字体图标使用
项目使用自定义字体图标，无需额外构建步骤：

**字体图标特点：**
- 所有图标都在 `style/icon.wxss` 中定义
- 使用 `.icon` 基础类和具体图标类（如 `.ic-home`）
- 支持 CSS 样式自定义（颜色、大小等）

**使用方法：**
```xml
<!-- 在 wxml 中使用 -->
<text class="icon ic-home"></text>
<text class="icon ic-comment"></text>
<text class="icon ic-me"></text>
```

```css
/* 在 wxss 中自定义样式 */
.icon {
  font-size: 16px;
  color: #1989fa;
}
```

### 预览效果
导入项目后，您将看到：
- **TabBar**: 底部导航栏使用字体图标，支持主题色切换
- **消息页面**: 筛选、选择、标记按钮使用字体图标
- **我的页面**: 所有菜单项使用字体图标，包括编辑、功能菜单等

## 技术特点
- ✅ 使用字体图标，无需管理图片文件
- ✅ 无外部依赖，加载速度快
- ✅ 统一的视觉风格和主题色
- ✅ 响应式设计，适配不同屏幕尺寸
- ✅ 易于维护和扩展

## 可用图标
项目包含丰富的图标集合，主要包括：
- `ic-home`: 首页图标
- `ic-comment`: 消息图标
- `ic-me`: 个人中心图标
- `ic-edit`: 编辑图标
- `ic-filter`: 筛选图标
- `ic-choose`: 选择图标
- `ic-close`: 关闭图标
- `ic-arrow-right`: 右箭头图标
- `ic-list`: 列表图标
- `ic-setting`: 设置图标
- `ic-chart`: 图表图标
- `ic-calendar`: 日历图标
- `ic-user`: 用户图标
- `ic-star`: 星标图标
- `ic-award`: 奖项图标

## 注意事项
1. 确保微信开发者工具版本支持自定义 TabBar
2. 如需修改图标样式，请在对应页面的 wxss 文件中自定义
3. 新增图标需要在 `style/icon.wxss` 中添加对应的字体图标定义
4. 自定义 TabBar 需要在每个页面的 `onShow` 方法中初始化