HarmonyOS ArkTS 实战校园垃圾分类与回收完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习公益类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 700 行可直接运行通过本项目你将掌握垃圾分类查询与搜索功能实现积分系统与兑换商城的完整设计预约上门回收的订单流程管理四色分类标准的视觉化呈现环保数据统计与碳减排计算目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 垃圾条目模型 Garbage][2.2 回收订单模型 RecycleOrder][2.3 礼品模型 Gift][2.4 设计思路说明][三、核心功能实现详解][3.1 垃圾分类查询搜索][3.2 预约上门回收][3.3 积分兑换商城][3.4 回收记录与统计][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 四色分类标准的视觉设计][5.2 积分系统的经济模型设计][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值随着环保意识的提升和垃圾分类政策的推行校园垃圾分类成为绿色校园建设的重要内容。然而很多学生对分类标准不熟悉可回收物随意丢弃造成资源浪费同时旧物回收渠道不畅通也让很多有价值的物品被直接丢弃。本项目基于 HarmonyOS ArkTS 实现了一个校园垃圾分类与回收应用整合了垃圾分类查询、上门回收预约、环保积分、积分兑换、投放点地图等功能通过游戏化的积分机制激励学生参与垃圾分类助力绿色校园建设。项目核心价值教育价值普及垃圾分类知识降低分类门槛环保价值提高资源回收率减少碳排放激励价值通过积分兑换机制形成正向行为激励1.2 完整功能清单功能模块具体功能实现难度⭐分类查询垃圾搜索、分类详情、投放提示、常见问题⭐⭐回收服务上门预约、重量预估、时间选择、地址管理⭐⭐⭐积分系统积分获取、积分明细、积分兑换、积分排行⭐⭐⭐积分商城礼品浏览、库存展示、兑换记录、礼品详情⭐⭐投放指引投放点地图、营业时间、导航路线、实时状态⭐⭐⭐环保数据回收统计、碳减排计算、个人贡献、校园排行⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS类型安全适合多模型数据管理状态管理State 装饰器轻量响应式满足积分和订单状态更新搜索功能本地模糊匹配演示项目简化生产环境可接入搜索引擎数据存储内存状态演示简化生产环境需对接后端服务最低版本API 24兼容主流 HarmonyOS 设备⚠️ 注意本项目为前端演示版本积分计算、回收预约等均在本地模拟。真实环保项目需要对接学校后勤部门和回收企业确保回收流程真实可落地。二、数据结构设计2.1 垃圾条目模型 Garbage垃圾条目是分类查询的基础数据包含名称、分类和投放提示。/** * 垃圾条目数据模型 * 描述单个垃圾物品的分类信息 */interfaceGarbage{id:number;// 垃圾条目IDname:string;// 垃圾名称type:string;// 分类可回收物/厨余垃圾/有害垃圾/其他垃圾description:string;// 分类说明tip:string;// 投放小贴士}2.2 回收订单模型 RecycleOrder回收订单记录用户预约的上门回收服务关联积分奖励。/** * 回收订单数据模型 * 记录单次上门回收的完整信息 */interfaceRecycleOrder{id:number;// 订单IDgarbageType:string;// 回收物类型weight:number;// 预估重量公斤address:string;// 上门地址time:string;// 预约时间points:number;// 获得积分status:string;// 订单状态待上门/已完成/已取消}2.3 礼品模型 Gift礼品是积分商城的兑换商品用户使用环保积分进行兑换。/** * 积分商城礼品数据模型 */interfaceGift{id:number;// 礼品IDname:string;// 礼品名称points:number;// 所需积分stock:number;// 库存数量image:string;// 礼品图片}2.4 设计思路说明为什么采用四类垃圾分类标准本项目遵循国家统一的四分类标准可回收物蓝色废纸、塑料、玻璃、金属、织物等可循环利用物品厨余垃圾绿色剩菜剩饭、果皮等易腐烂的生物质废弃物有害垃圾红色废电池、废药品、废灯管等对健康或环境有害的物品其他垃圾灰色除以上三类之外的其他生活垃圾统一标准有助于学生毕业后进入社会也能正确分类具有长期教育价值。关于积分换算机制的设计积分与回收重量挂钩公式为积分 重量 × 单价系数。可回收物10积分/公斤旧衣物8积分/公斤旧书籍12积分/公斤不同品类设置不同系数体现回收价值差异引导用户分类投放。三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivatesearchText:string;// 搜索关键词StateprivateaddressText:string;// 上门地址StateprivateweightText:string1;// 预估重量StateprivateselectedType:string可回收物;// 回收物类型Stateprivatepoints:number120;// 用户积分余额StateprivatenextOrderId:number5;// 下一个订单IDStateprivategarbages:Garbage[][];// 垃圾数据库Stateprivateorders:RecycleOrder[][];// 回收订单列表Stateprivategifts:Gift[][];// 积分商城礼品3.2 垃圾分类查询搜索支持按名称模糊搜索快速定位垃圾所属分类。/** * 搜索垃圾分类 * 支持名称模糊匹配 */privatesearchGarbage():Garbage[]{constkeywordthis.searchText.trim().toLowerCase();if(keyword.length0){returnthis.garbages;}returnthis.garbages.filter(gg.name.toLowerCase().includes(keyword)||g.description.toLowerCase().includes(keyword));}/** * 按分类筛选垃圾 * param type 分类名称 */privatefilterByType(type:string):Garbage[]{if(type全部){returnthis.garbages;}returnthis.garbages.filter(gg.typetype);}3.3 预约上门回收用户填写回收物类型、重量、地址后提交回收预约。/** * 预约上门回收 * 自动计算积分并创建订单 */privatebookRecycle():void{// 1. 解析重量默认1公斤constweightparseFloat(this.weightText)||1;if(weight0)return;// 2. 地址校验if(this.addressText.trim().length0){// 生产环境提示用户填写地址return;}// 3. 计算积分不同类型不同单价constpointRatethis.getPointRate(this.selectedType);constearnedPointsMath.round(weight*pointRate);// 4. 创建订单constorder:RecycleOrder{id:this.nextOrderId,garbageType:this.selectedType,weight:weight,address:this.addressText,time:newDate().toLocaleString(),points:earnedPoints,status:待上门};// 5. 更新订单列表和积分this.orders[order,...this.orders];this.pointsearnedPoints;this.nextOrderId;}/** * 获取不同回收类型的积分单价 */privategetPointRate(type:string):number{constrateMap:Recordstring,number{可回收物:10,旧衣物:8,旧书籍:12,旧电器:15};returnrateMap[type]||10;}3.4 积分兑换礼品用户使用积分兑换商城礼品扣减积分并减少库存。/** * 兑换礼品 * param giftId 礼品ID * param needPoints 所需积分 */privateexchangeGift(giftId:number,needPoints:number):void{// 1. 积分不足校验if(this.pointsneedPoints){// 生产环境提示积分不足return;}// 2. 库存校验constgiftthis.gifts.find(gg.idgiftId);if(!gift||gift.stock0){return;}// 3. 扣减积分this.points-needPoints;// 4. 减少库存this.giftsthis.gifts.map(gg.idgiftId?{...g,stock:g.stock-1}:g);}3.5 环保数据统计/** * 计算环保统计数据 */privategetEcoStats(){consttotalOrdersthis.orders.filter(oo.status已完成).length;consttotalWeightthis.orders.filter(oo.status已完成).reduce((sum,o)sumo.weight,0);// 估算减少的碳排放量每公斤可回收物约减少2.5公斤碳排放constcarbonSavedMath.round(totalWeight*2.5*10)/10;return{totalPoints:this.points,totalOrders,totalWeight,carbonSaved};}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 积分卡片顶部 │ ← 当前积分 环保成就 ├─────────────────────────┤ │ 搜索栏 │ ← 垃圾分类快速查询 ├─────────────────────────┤ │ 四色分类快捷入口 │ ← 蓝/绿/红/灰 四类分类 ├─────────────────────────┤ │ Tab 切换栏 │ ← 分类查询 / 回收预约 / 积分商城 ├─────────────────────────┤ │ │ │ 内容展示区 │ ← 对应Tab的内容列表 │ │ └─────────────────────────┘4.2 主题色与视觉规范主色调柠檬绿 #A3E635选择柠檬绿作为主题色的设计考量环保属性强关联绿色是环保、自然、生态的代表色柠檬绿的明亮感传递青春活力契合校园氛围正向情绪激励明亮的黄绿色给人积极、向上的心理感受与积累积分、收获奖励的游戏化机制相得益彰四色分类兼容柠檬绿作为主色与分类标准的蓝、绿、红、灰四色都能和谐搭配不会产生视觉冲突高辨识度在校园应用中比较少见具有独特的品牌识别度四色分类标准色可回收物#3B82F6标准蓝色厨余垃圾#10B981标准绿色有害垃圾#EF4444标准红色其他垃圾#6B7280标准灰色4.3 状态视觉区分表垃圾类别标识颜色色值视觉元素投放提示可回收物蓝色#3B82F6循环箭头图标清洁干燥后投放厨余垃圾绿色#10B981树叶图标沥干水分去除包装有害垃圾红色#EF4444警告三角图标轻拿轻放避免破损其他垃圾灰色#6B7280垃圾桶图标尽量沥干水分订单状态标签颜色积分状态操作按钮待上门琥珀色实心待发放取消预约已完成绿色实心已到账查看详情已取消灰色空心未发放重新预约五、关键技术点解析5.1 四色分类标准的视觉设计垃圾分类的四色标准是国家统一规范在UI设计中必须严格遵循同时要兼顾美观性。设计原则颜色准确性严格使用国标四色不随意调整色相避免误导用户层次分明主色调用在标签和图标上浅色用在背景和卡片上图标辅助每个分类配合专属图标降低纯颜色识别的门槛一致性全应用所有涉及分类的地方使用同一套颜色体系常见误区不要为了好看修改标准色教育功能优先于视觉美感不要只靠颜色区分必须配合文字和图标照顾色弱用户5.2 积分系统的经济模型设计积分系统是激励用户行为的核心设计不当会导致通胀或激励不足。设计要点获取渠道单一可控主要通过回收行为获取避免刷积分漏洞消耗渠道有价值兑换的礼品要有实际吸引力积分才有价值感通胀控制定期评估积分发放和消耗的平衡调整兑换比例等级体系可设计积分等级不同等级享受不同权益增强长期粘性校园场景的特殊考虑礼品选择要贴合学生需求文具、食堂餐券、文创周边、超市抵扣券可以对接第二课堂成绩单志愿时长与环保积分互通班级/学院排行榜增强集体荣誉感六、常见问题与优化建议踩坑点 1分类数据库不全问题表现用户搜索常见垃圾却搜不到结果解决方案持续扩充垃圾数据库覆盖日常生活常见物品增加模糊匹配和同义词踩坑点 2积分通胀贬值问题表现积分发放太多太快礼品库存不足积分失去价值感解决方案建立积分发放-消耗监控机制定期调整兑换比例丰富礼品种类踩坑点 3回收重量估算不准问题表现用户预估重量与实际差距大积分结算有争议解决方案上门后称重确认按实际重量结算积分预估仅作参考踩坑点 4礼品兑换库存超卖问题表现多人同时兑换同一礼品库存变成负数解决方案兑换时加锁使用原子操作扣减库存避免并发超卖优化方向增加拍照识别垃圾功能AI自动判断分类接入地图SDK展示投放点位置并提供导航增加环保活动模块组织线下回收活动实现碳足迹计算直观展示用户的环保贡献七、项目总结与扩展方向核心收获通过完成垃圾分类与回收项目你将掌握搜索查询功能的实现与优化方法积分系统的完整经济模型设计四色分类标准的规范化视觉呈现订单流程与状态管理的实现思路后续扩展功能拍照识别AI图像识别拍一张照片自动判断垃圾分类️投放导航地图展示所有投放点一键导航到最近垃圾桶环保活动线下回收活动报名集体行动影响力更大碳足迹计算详细计算你的环保行动减少了多少碳排放旧物捐赠闲置物品捐赠通道让旧物发挥更大价值环保排行榜班级、学院、个人排行榜比学赶超氛围运行效果
