# 垃圾分类小程序

**Repository Path**: mic-xiaoxin121/garbage-sorting-mini-program

## Basic Information

- **Project Name**: 垃圾分类小程序
- **Description**: 《这是一款基于微信小程序的垃圾分类助手，提供拍照、相册、语音三种智能识别方式，帮助用户快速查询垃圾类别。小程序包含六大核心功能模块，按照厨余（绿）、可回收（蓝）、有害（红）、其他（灰）四类标准进行垃圾分类，并设有积分激励体系。UI设计采用环保绿为主色调，包含8个功能页面，通过本地数据存储实现历史记录功能。该小程序旨在通过便捷的识别方式和奖励机制，提升城市居民的垃圾分类参与度。
- **Primary Language**: 微信
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. 项目概述

- **项目名称**: 环保分类通
- **项目类型**: 微信小程序
- **核心功能**: 通过拍照、相册、语音等方式识别垃圾类型，提供分类指南和积分激励
- **目标用户**: 追求环保、关注垃圾分类的城市居民

## 2. 功能模块

### 2.1 六大核心功能

| 功能模块     | 描述                                 |
| ------------ | ------------------------------------ |
| 拍照识别     | 调用相机拍摄垃圾，AI识别分类         |
| 相册识别     | 从相册选择图片进行识别               |
| 语音输入查询 | 通过语音输入垃圾名称进行查询         |
| 分类指南     | 展示四类垃圾的详细分类标准和常见物品 |
| 积分激励     | 记录用户分类行为，累积积分奖励       |
| 历史记录     | 查看历次识别和查询的历史             |

### 2.2 垃圾分类标准

| 类别       | 标识色 | 说明                                     |
| ---------- | ------ | ---------------------------------------- |
| 厨余垃圾   | 绿色   | 食物残渣、果皮等易腐垃圾                 |
| 可回收垃圾 | 蓝色   | 纸类、塑料、金属、玻璃等可再利用垃圾     |
| 有害垃圾   | 红色   | 电池、灯管、药品等对人体或环境有害的垃圾 |
| 其他垃圾   | 灰色   | 除以上三类外的其他生活垃圾               |

## 3. 页面结构

```
├── pages/
│   ├── index/          # 首页 - 功能入口 + 导航
│   ├── camera/         # 拍照识别页
│   ├── album/          # 相册识别页
│   ├── voice/          # 语音查询页
│   ├── guide/          # 分类指南页
│   ├── points/         # 积分激励页
│   ├── history/        # 历史记录页
│   └── result/         # 识别结果页
├── utils/
│   ├── garbageData.js   # 垃圾数据
│   └── helpers.js       # 工具函数
└── components/          # 公共组件
```

## 4. UI/UX 设计规范

### 4.1 颜色系统

| 用途       | 颜色   | 十六进制 |
| ---------- | ------ | -------- |
| 主色       | 环保绿 | #07C160  |
| 厨余垃圾   | 绿色   | #3EB55A  |
| 可回收垃圾 | 蓝色   | #4A90E2  |
| 有害垃圾   | 红色   | #E24D4D  |
| 其他垃圾   | 灰色   | #8E8E93  |
| 背景色     | 浅灰   | #F5F5F5  |
| 文字主色   | 深灰   | #333333  |
| 文字副色   | 中灰   | #666666  |
| 边框色     | 边框灰 | #E5E5E5  |

### 4.2 字体规范

- 标题: 36rpx, font-weight: 600
- 正文: 28rpx, font-weight: 400
- 辅助文字: 24rpx, font-weight: 400

### 4.3 间距规范

- 页面内边距: 30rpx
- 模块间距: 24rpx
- 元素间距: 16rpx
- 圆角: 16rpx (卡片), 50% (头像/按钮)

### 4.4 图标规范

- 使用微信小程序内置图标或自定义 SVG
- 功能图标尺寸: 80rpx × 80rpx
- 分类图标尺寸: 60rpx × 60rpx

## 5. 功能详细设计

### 5.1 首页 (index)

- 顶部: 小程序名称 + 积分显示
- 中部: 四个识别入口卡片 (拍照/相册/语音/指南)
- 底部: 快捷功能入口 (积分/历史)
- 每个入口卡片: 图标 + 标题 + 简短描述

### 5.2 拍照识别 (camera)

- 全屏相机预览
- 底部拍照按钮
- 切换闪光灯按钮
- 拍照后跳转结果页

### 5.3 相册识别 (album)

- 选择图片按钮
- 图片预览区域
- 确认识别按钮
- 识别后跳转结果页

### 5.4 语音查询 (voice)

- 语音输入按钮 (长按录音)
- 语音波形动画
- 识别文字展示
- 查询结果列表

### 5.5 分类指南 (guide)

- 四分类 tab 切换
- 分类说明卡片
- 常见物品列表 (图文)
- 投放要求说明

### 5.6 积分激励 (points)

- 当前积分展示
- 积分获取规则
- 积分任务列表
- 积分排行榜入口

### 5.7 历史记录 (history)

- 日期分组列表
- 每条记录: 图片/名称 + 分类结果 + 时间
- 支持删除操作
- 清空全部按钮

### 5.8 识别结果 (result)

- 原始图片展示
- 识别结果: 垃圾名称 + 分类
- 分类详情说明
- 积分奖励提示
- 添加到记录按钮

## 6. 数据结构

### 6.1 垃圾数据模型

```javascript
{
  id: 'string',
  name: 'string',
  category: 'kitchen' | 'recyclable' | 'hazardous' | 'other',
  tips: 'string',           // 投放提示
  examples: ['string'],     // 相关物品
  points: number            // 积分奖励
}
```

### 6.2 历史记录模型

```javascript
{
  id: 'string',
  type: 'camera' | 'album' | 'voice',
  query: 'string',          // 查询关键词或图片路径
  result: GarbageData,
  timestamp: number
}
```

### 6.3 积分模型

```javascript
{
  total: number,
  today: number,
  history: [
    { action: 'string', points: number, time: number }
  ]
}
```

## 7. 技术实现

- **框架**: 原生微信小程序
- **数据存储**: localStorage (历史记录/积分)
- **图片处理**: wx.chooseImage / camera 组件
- **语音**: wx.authorize + innerAudioContext
- **模拟 AI**: 本地垃圾数据库匹配
![输入图片说明](1.jpg)