微信小程序使用说明

项目概述

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

已完成的功能

1. 自定义字体图标系统

• 使用 style/icon.wxss 中的字体图标
• 支持丰富的图标集合，包括 ic-home、ic-comment、ic-me 等
• 无需外部依赖，性能更优

1. 自定义 TabBar

• 使用原生组件结合字体图标实现
• 支持字体图标，无需 PNG 图片
• 包含三个页面：首页、消息、我的

1. 页面图标集成

• 在各个页面中使用字体图标
• 统一的图标风格和样式
• 替换了原有的 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>

/* 在 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 方法中初始化