绿行回收小程序项目简介这是一个垃圾分类与回收服务的微信小程序采用纯前端实现使用本地Mock数据模拟后端接口。项目完整实现了垃圾智能分类查询、回收站点地图、上门回收预约、环保知识学习等核心功能适合作为微信小程序开发学习项目或计算机设计参考。技术栈技术版本/说明开发框架微信小程序原生框架基础库版本trial (最新试用版)开发语言JavaScript (ES6)样式语言WXSS (微信小程序样式)模板语言WXML (微信小程序模板)数据存储本地Storage持久化数据模拟Mock Data (本地模拟数据)地图服务微信小程序地图组件项目特点纯前端实现无需后端服务器所有数据使用本地Mock模拟智能分类查询支持关键词搜索和热门搜索快速查询垃圾分类地图定位功能集成微信地图组件展示附近回收站点并计算距离预约上门回收完整的大件垃圾上门回收预约流程环保知识科普提供垃圾分类知识文章提升环保意识UI设计清新绿色主题配色符合环保应用调性功能模块1. 首页模块 (pages/home)首页背景展示四大垃圾分类入口可回收垃圾、厨余垃圾、有害垃圾、其他垃圾快捷功能入口智能分类、回收地图、上门回收、回收知识点击分类进入详情页2. 智能分类模块 (pages/smartSorting)垃圾名称搜索输入框热门搜索词快捷查询四大垃圾分类展示图片识别入口待开发点击分类查看详情3. 分类结果模块 (pages/sortingResult)展示垃圾所属分类分类图标和名称分类详细说明常见物品示例列表投放指南提示4. 回收地图模块 (pages/recyclingMap)微信地图组件展示自动获取用户位置回收站点标记显示站点距离计算和排序站点列表展示名称、地址、营业时间、联系方式点击站点定位到地图导航到站点功能5. 上门回收预约模块 (pages/pickupSchedule)可回收物品选择旧家电、废弃家具、装修垃圾、废旧纺织品物品数量增减费用自动计算联系人信息填写回收地址选择支持地图选点预约日期选择预约时间段选择上午/下午/晚上备注信息填写表单验证提交预约6. 预约确认模块 (pages/pickupConfirmation)预约成功提示预约详情展示预约物品清单预约时间和地址费用明细预约状态显示7. 回收知识列表模块 (pages/knowledgeList)环保知识文章列表文章封面图、标题、摘要发布日期显示点击进入文章详情8. 知识详情模块 (pages/knowledgeDetail)文章标题发布日期文章封面图文章正文内容分享功能9. 我的模块 (pages/myAccount)用户头像和昵称展示我的预约记录入口预约记录列表预约状态显示已预约/待上门/已完成/已取消用户信息管理项目结构laji-back-min/ ├── app.js # 小程序入口文件全局数据管理 ├── app.json # 小程序全局配置页面路由、TabBar、窗口样式 ├── app.wxss # 全局样式文件 ├── mockData.js # Mock数据文件分类、物品、站点、知识等 ├── project.config.json # 项目配置文件 ├── project.private.config.json # 项目私有配置 ├── sitemap.json # 小程序索引配置 ├── .prettierrc # 代码格式化配置 ├── images/ # 图片资源目录 │ ├── tabbar/ # TabBar图标 │ │ ├── home.png # 首页图标 │ │ ├── home_1.png # 首页选中图标 │ │ ├── cate.png # 分类图标 │ │ ├── cate_1.png # 分类选中图标 │ │ ├── map.png # 地图图标 │ │ ├── map_1.png # 地图选中图标 │ │ ├── kon.png # 知识图标 │ │ ├── kon_1.png # 知识选中图标 │ │ ├── my.png # 我的图标 │ │ └── my_1.png # 我的选中图标 │ ├── cate_1.png ~ cate_4.png # 垃圾分类图标 │ ├── 旧家电.png # 旧家电图标 │ ├── 废弃家具.png # 废弃家具图标 │ ├── 装修垃圾.png # 装修垃圾图标 │ ├── 废旧纺织品.png # 废旧纺织品图标 │ ├── 智能分类.png # 智能分类图标 │ ├── 回收地图.png # 回收地图图标 │ ├── 上门回收.png # 上门回收图标 │ ├── 回收知识.png # 回收知识图标 │ ├── home_bg.png # 首页背景图 │ ├── location.png # 地图标记图标 │ ├── avatar_default.png # 默认头像 │ ├── knowledge1.jpg # 知识文章图片 │ └── knowledge2.jpg # 知识文章图片 ├── pages/ # 页面目录 │ ├── home/ # 首页 │ │ ├── home.js │ │ ├── home.json │ │ ├── home.wxml │ │ └── home.wxss │ ├── smartSorting/ # 智能分类页 │ │ ├── smartSorting.js │ │ ├── smartSorting.json │ │ ├── smartSorting.wxml │ │ └── smartSorting.wxss │ ├── sortingResult/ # 分类结果页 │ │ ├── sortingResult.js │ │ ├── sortingResult.json │ │ ├── sortingResult.wxml │ │ └── sortingResult.wxss │ ├── recyclingMap/ # 回收地图页 │ │ ├── recyclingMap.js │ │ ├── recyclingMap.json │ │ ├── recyclingMap.wxml │ │ └── recyclingMap.wxss │ ├── pickupSchedule/ # 上门回收预约页 │ │ ├── pickupSchedule.js │ │ ├── pickupSchedule.json │ │ ├── pickupSchedule.wxml │ │ └── pickupSchedule.wxss │ ├── pickupConfirmation/ # 预约确认页 │ │ ├── pickupConfirmation.js │ │ ├── pickupConfirmation.json │ │ ├── pickupConfirmation.wxml │ │ └── pickupConfirmation.wxss │ ├── knowledgeList/ # 知识列表页 │ │ ├── knowledgeList.js │ │ ├── knowledgeList.json │ │ ├── knowledgeList.wxml │ │ └── knowledgeList.wxss │ ├── knowledgeDetail/ # 知识详情页 │ │ ├── knowledgeDetail.js │ │ ├── knowledgeDetail.json │ │ ├── knowledgeDetail.wxml │ │ └── knowledgeDetail.wxss │ └── myAccount/ # 我的页面 │ ├── myAccount.js │ ├── myAccount.json │ ├── myAccount.wxml │ └── myAccount.wxss └── utils/ # 工具类目录 └── util.js # 工具函数数据模型垃圾分类数据 (trashCategories){id:cat001,// 分类IDname:可回收垃圾,// 分类名称type:recyclable,// 分类类型icon:/images/cate_1.png,// 分类图标description:指适宜回收和资源利用的垃圾...,// 分类说明examples:[塑料瓶,旧报纸,玻璃瓶]// 常见物品示例}垃圾物品数据 (trashItems){id:item001,// 物品IDname:塑料瓶,// 物品名称categoryId:cat001,// 所属分类IDcategoryName:可回收垃圾,// 所属分类名称image:/images/塑料瓶.png// 物品图片}回收站点数据 (recyclingStations){id:station001,// 站点IDname:小区环保驿站,// 站点名称address:幸福小区南门旁,// 站点地址location:{// 站点坐标latitude:39.9042,longitude:116.4074},hours:周一至周日 8:00-18:00,// 营业时间contact:13800138000,// 联系电话types:[可回收垃圾,厨余垃圾,有害垃圾]// 可回收类型}可预约回收物品数据 (pickupItems){id:pickup001,// 物品IDname:旧家电 (冰箱/洗衣机/电视等),// 物品名称unit:件,// 计量单位pricePerUnit:20,// 单价元icon:/images/旧家电.png// 物品图标}回收知识文章数据 (recyclingKnowledge){id:know001,// 文章IDtitle:垃圾分类从我做起,// 文章标题summary:详细解读垃圾分类的意义和方法...,// 文章摘要content:垃圾分类是指按一定规定或标准...,// 文章正文date:2023-05-01,// 发布日期image:/images/knowledge1.jpg// 文章封面图}用户数据 (currentUser){id:user001,// 用户IDnickname:环保小卫士,// 昵称avatarUrl:/images/avatar_default.png,// 头像phone:13812345678,// 手机号address:北京市朝阳区幸福小区1单元101室// 地址}预约记录数据 (userPickups){id:pickup_rec001,// 预约IDitems:[{// 预约物品列表id:pickup001,name:旧家电,quantity:1,unit:件,pricePerUnit:20}],totalAmount:70,// 总费用contactName:环保小卫士,// 联系人contactPhone:13812345678,// 联系电话pickupAddress:北京市朝阳区幸福小区1单元101室,// 回收地址pickupDate:2025-06-15,// 预约日期pickupTime:上午 9:00-12:00,// 预约时间段status:已预约,// 状态已预约/待上门/已完成/已取消orderTime:2025-06-10 10:30:00// 下单时间}核心业务逻辑1. 垃圾分类查询// 根据关键词查询垃圾分类constmatchedItemmockData.trashItems.find((item)item.name.includes(keyword),);if(matchedItem){wx.navigateTo({url:/pages/sortingResult/sortingResult?itemId${matchedItem.id},});}2. 距离计算// 计算用户与回收站点的距离Haversine公式constcalculateDistance(lat1,lon1,lat2,lon2){constR6371;// 地球半径单位千米constdLat((lat2-lat1)*Math.PI)/180;constdLon((lon2-lon1)*Math.PI)/180;constaMath.sin(dLat/2)*Math.sin(dLat/2)Math.cos((lat1*Math.PI)/180)*Math.cos((lat2*Math.PI)/180)*Math.sin(dLon/2)*Math.sin(dLon/2);constc2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));return(R*c).toFixed(2);// 返回距离千米};3. 预约费用计算// 计算预约总费用calculateTotalCost:function(){lettotal0;this.data.selectedPickupItems.forEach(item{if(item.iditem.quantity0){totalitem.quantity*item.pricePerUnit;}});this.setData({totalPickupCost:total});}4. 表单验证// 预约表单验证validateForm:function(){constinfothis.data.pickupInfo;if(!info.contactName){wx.showToast({title:请填写联系人,icon:none});returnfalse;}if(!info.contactPhone||!/^\d{11}$/.test(info.contactPhone)){wx.showToast({title:请填写正确的11位手机号,icon:none});returnfalse;}if(!info.pickupAddress){wx.showToast({title:请填写回收地址,icon:none});returnfalse;}if(!info.pickupDate){wx.showToast({title:请选择预约日期,icon:none});returnfalse;}if(!info.pickupTime){wx.showToast({title:请选择预约时间,icon:none});returnfalse;}returntrue;}页面路由配置{pages:[pages/home/home,// 首页默认启动页pages/smartSorting/smartSorting,// 智能分类pages/sortingResult/sortingResult,// 分类结果pages/recyclingMap/recyclingMap,// 回收地图pages/pickupSchedule/pickupSchedule,// 上门回收预约pages/pickupConfirmation/pickupConfirmation,// 预约确认pages/knowledgeList/knowledgeList,// 知识列表pages/knowledgeDetail/knowledgeDetail,// 知识详情pages/myAccount/myAccount// 我的]}TabBar配置{tabBar:{color:#7A7E83,selectedColor:#67BB4D,borderStyle:black,backgroundColor:#FFFFFF,list:[{pagePath:pages/home/home,text:首页},{pagePath:pages/smartSorting/smartSorting,text:分类},{pagePath:pages/recyclingMap/recyclingMap,text:地图},{pagePath:pages/knowledgeList/knowledgeList,text:知识},{pagePath:pages/myAccount/myAccount,text:我的}]}}运行环境要求微信开发者工具建议使用最新稳定版基础库版本2.19.0 及以上AppID可替换为自己的AppID定位权限需要用户授权定位权限以使用地图功能快速开始1. 克隆/下载项目将项目文件夹下载到本地2. 导入项目打开微信开发者工具选择导入项目选择项目目录laji-back-min填入AppID可使用测试号或自己的AppID点击导入3. 运行项目导入成功后项目会自动编译运行可在模拟器中预览效果4. 真机调试点击工具栏预览按钮扫码在手机上体验预置测试数据垃圾分类分类名称类型常见物品可回收垃圾recyclable塑料瓶、旧报纸、玻璃瓶、易拉罐厨余垃圾kitchen剩饭剩菜、果皮、菜叶、骨头有害垃圾hazardous废电池、废灯管、过期药品、杀虫剂其他垃圾other纸巾、陶瓷碗、烟蒂、一次性餐具回收站点站点名称地址营业时间小区环保驿站幸福小区南门旁周一至周日 8:00-18:00街道回收中心中山路123号周一至周五 9:00-17:00绿色回收箱点公园东路与建设路交汇处24小时开放可预约回收物品物品名称单位单价旧家电 (冰箱/洗衣机/电视等)件20元废弃家具 (沙发/床垫/衣柜等)件50元装修垃圾 (少量)袋10元废旧纺织品 (大批量)袋免费知识文章标题发布日期垃圾分类从我做起2023-05-01废旧电池的正确处理方式2023-04-15界面预览项目包含演示视频文件演示视频.mp4可查看完整功能演示。扩展建议如需进一步完善项目可考虑以下扩展接入真实后端将Mock数据替换为真实API接口用户登录系统接入微信登录实现真实用户体系图片识别功能接入AI图像识别API实现拍照识别垃圾分类语音识别功能支持语音输入查询垃圾分类积分系统用户参与回收获得积分奖励消息通知预约状态变更推送通知评价系统用户对回收服务进行评价更多回收站点扩充回收站点数据库在线支付接入微信支付实现在线付款社区功能用户分享环保心得和经验注意事项本项目为学习演示项目所有数据均为模拟数据预约功能为模拟实现不涉及真实预约地图功能需要用户授权定位权限回收站点坐标为示例坐标非真实位置如需发布上线请替换为自己的AppID并完善相关资质许可证本项目仅供学习交流使用请勿用于商业用途。