1. 项目背景与核心价值
垃圾分类系统在移动端的实现一直是智慧城市建设的重点需求。基于微信小程序的解决方案具有天然的用户触达优势,结合SpringBoot后端服务可以构建完整的业务闭环。这个系统本质上解决的是居民日常垃圾分类的便捷性问题,同时为城市管理者提供数据支撑。
微信小程序作为载体,免安装、即用即走的特性完美契合垃圾分类这类低频但刚需的场景。而SpringBoot框架的快速开发能力,特别适合处理垃圾分类业务中复杂的规则引擎和数据分析需求。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 整体技术栈选型
采用前后端分离架构:
- 前端:微信小程序 + Vant Weapp组件库
- 后端:SpringBoot 2.7 + MyBatis Plus
- 数据库:MySQL 8.0 + Redis缓存
- 辅助工具:HanLP分词、OpenCV图像识别
选择这套技术栈主要基于三个考量:
- 微信生态的普及度确保用户覆盖
- SpringBoot的自动配置特性简化后端开发
- 成熟的组件库减少UI开发成本
2.2 核心功能模块
系统包含以下核心模块:
- 垃圾智能识别:支持文字查询和图像识别双通道
- 分类知识库:包含2000+垃圾类目的详细分类规则
- 投放记录:用户历史记录查询与统计
- 积分系统:正确分类可获得环保积分
- 管理后台:数据看板与规则配置
3. 关键技术实现
3.1 微信小程序端实现
3.1.1 环境判断与适配
javascript复制// 判断是否在小程序环境
const isMiniProgram = () => {
return typeof wx !== 'undefined' &&
typeof wx.getSystemInfoSync === 'function'
}
// 导航栏高度适配
const getNavBarHeight = () => {
const systemInfo = wx.getSystemInfoSync()
const menuButton = wx.getMenuButtonBoundingClientRect()
return menuButton.bottom + menuButton.top - systemInfo.statusBarHeight
}
3.1.2 图像识别接口封装
javascript复制wx.chooseImage({
success(res) {
wx.uploadFile({
url: 'https://api.example.com/classify',
filePath: res.tempFilePaths[0],
name: 'image',
success(res) {
const data = JSON.parse(res.data)
// 处理识别结果
}
})
}
})
3.2 SpringBoot后端实现
3.2.1 多模态识别接口
java复制@RestController
@RequestMapping("/api/classify")
public class ClassifyController {
@PostMapping("/image")
public Result imageClassify(@RequestParam MultipartFile image) {
// 使用OpenCV进行图像预处理
Mat processed = ImageProcessor.preprocess(image);
// 调用模型识别
return classificationService.classify(processed);
}
@PostMapping("/text")
public Result textClassify(@RequestParam String text) {
// 使用HanLP分词
List<Term> terms = HanLP.segment(text);
// 规则匹配
return ruleEngine.match(terms);
}
}
3.2.2 规则引擎设计
java复制public class RuleEngine {
private static final Map<String, String> KEYWORD_MAP =
loadKeywords(); // 加载关键词库
public String match(List<Term> terms) {
return terms.stream()
.map(term -> KEYWORD_MAP.get(term.word))
.filter(Objects::nonNull)
.findFirst()
.orElse("其他垃圾");
}
}
4. 数据存储方案
4.1 数据库设计
主要表结构:
- 用户表(user):openid、昵称、积分等
- 垃圾类目表(waste_category):名称、分类规则等
- 投放记录表(record):用户ID、类目ID、时间等
sql复制CREATE TABLE `waste_category` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`type` enum('可回收','有害','厨余','其他') NOT NULL,
`keywords` json DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
4.2 缓存策略
使用Redis缓存高频访问数据:
- 热门搜索关键词TOP50
- 用户当日投放记录
- 分类规则变更日志
配置示例:
properties复制spring.redis.host=127.0.0.1
spring.redis.port=6379
spring.redis.timeout=3000
spring.cache.type=redis
5. 开发注意事项
5.1 微信小程序限制规避
- 域名备案:所有接口域名必须完成ICP备案
- 图片安全:内容安全API过滤违规图片
- 用户隐私:获取用户信息需二次确认
5.2 SpringBoot优化要点
- 文件上传配置:
properties复制spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=20MB
- 大文件分块上传实现:
java复制@PostMapping("/upload/chunk")
public Result uploadChunk(
@RequestParam MultipartFile file,
@RequestParam String md5,
@RequestParam Integer chunk,
@RequestParam Integer chunks) {
// 分片存储逻辑
}
6. 典型问题解决方案
6.1 微信环境判断异常
现象:H5页面在小程序web-view中环境判断失效
解决方案:
javascript复制// 通过userAgent补充判断
const isWechatMiniProgram = navigator.userAgent.includes('MiniProgram')
6.2 图像识别准确率提升
采用多模型融合策略:
- 先进行颜色特征匹配(垃圾桶颜色识别)
- 再用CNN模型进行物体识别
- 最后用关键词匹配兜底
6.3 高并发场景优化
- 使用Guava缓存热点数据
- 对分类查询接口做请求合并
- 数据库读写分离配置:
properties复制spring.datasource.slave.url=jdbc:mysql://slave:3306/waste
spring.datasource.slave.username=root
spring.datasource.slave.password=123456
7. 部署上线流程
7.1 小程序提审要点
- 内容安全:确保无违规关键词
- 权限声明:明确用户信息使用范围
- 测试账号:提供审核人员测试凭证
7.2 服务端部署方案
推荐使用Docker Compose部署:
yaml复制version: '3'
services:
app:
image: waste-classification:latest
ports:
- "8080:8080"
environment:
- SPRING_PROFILES_ACTIVE=prod
mysql:
image: mysql:8.0
volumes:
- ./data:/var/lib/mysql
8. 扩展优化方向
- AR识别:通过小程序相机实现AR垃圾分类指引
- 语音查询:集成语音识别接口
- 社区互动:添加垃圾分类挑战赛功能
- IoT对接:与智能垃圾桶硬件联动
实际开发中发现,图像识别模块的响应速度对用户体验影响最大。我们最终通过以下优化将识别耗时从3s降低到800ms:
- 使用OpenCV的DNN模块加载量化后的TensorFlow Lite模型
- 对输入图像先进行尺寸归一化
- 启用SpringBoot的响应式编程模型
