绿行回收小程序

项目简介

这是一个垃圾分类与回收服务的微信小程序，采用纯前端实现，使用本地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',                   // 分类ID
  name: '可回收垃圾',             // 分类名称
  type: 'recyclable',             // 分类类型
  icon: '/images/cate_1.png',     // 分类图标
  description: '指适宜回收和资源利用的垃圾...', // 分类说明
  examples: ['塑料瓶', '旧报纸', '玻璃瓶']      // 常见物品示例
}

垃圾物品数据 (trashItems)

{
  id: 'item001',                  // 物品ID
  name: '塑料瓶',                 // 物品名称
  categoryId: 'cat001',           // 所属分类ID
  categoryName: '可回收垃圾',     // 所属分类名称
  image: '/images/塑料瓶.png'     // 物品图片
}

回收站点数据 (recyclingStations)

{
  id: 'station001',               // 站点ID
  name: '小区环保驿站',           // 站点名称
  address: '幸福小区南门旁',      // 站点地址
  location: {                     // 站点坐标
    latitude: 39.9042,
    longitude: 116.4074
  },
  hours: '周一至周日 8:00-18:00', // 营业时间
  contact: '13800138000',         // 联系电话
  types: ['可回收垃圾', '厨余垃圾', '有害垃圾'] // 可回收类型
}

可预约回收物品数据 (pickupItems)

{
  id: 'pickup001',                // 物品ID
  name: '旧家电 (冰箱/洗衣机/电视等)', // 物品名称
  unit: '件',                     // 计量单位
  pricePerUnit: 20,               // 单价（元）
  icon: '/images/旧家电.png'      // 物品图标
}

回收知识文章数据 (recyclingKnowledge)

{
  id: 'know001',                  // 文章ID
  title: '垃圾分类，从我做起',    // 文章标题
  summary: '详细解读垃圾分类的意义和方法...', // 文章摘要
  content: '垃圾分类是指按一定规定或标准...', // 文章正文
  date: '2023-05-01',             // 发布日期
  image: '/images/knowledge1.jpg' // 文章封面图
}

用户数据 (currentUser)

{
  id: 'user001',                  // 用户ID
  nickname: '环保小卫士',         // 昵称
  avatarUrl: '/images/avatar_default.png', // 头像
  phone: '13812345678',           // 手机号
  address: '北京市朝阳区幸福小区1单元101室' // 地址
}

预约记录数据 (userPickups)

{
  id: 'pickup_rec001',            // 预约ID
  items: [{                       // 预约物品列表
    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. 垃圾分类查询

// 根据关键词查询垃圾分类
const matchedItem = mockData.trashItems.find((item) =>
  item.name.includes(keyword),
);
if (matchedItem) {
  wx.navigateTo({
    url: `/pages/sortingResult/sortingResult?itemId=${matchedItem.id}`,
  });
}

2. 距离计算

// 计算用户与回收站点的距离（Haversine公式）
const calculateDistance = (lat1, lon1, lat2, lon2) => {
  const R = 6371; // 地球半径，单位千米
  const dLat = ((lat2 - lat1) * Math.PI) / 180;
  const dLon = ((lon2 - lon1) * Math.PI) / 180;
  const a =
    Math.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);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return (R * c).toFixed(2); // 返回距离（千米）
};

3. 预约费用计算

// 计算预约总费用
calculateTotalCost: function () {
  let total = 0;
  this.data.selectedPickupItems.forEach(item => {
    if (item.id && item.quantity > 0) {
      total += item.quantity * item.pricePerUnit;
    }
  });
  this.setData({ totalPickupCost: total });
}

4. 表单验证

// 预约表单验证
validateForm: function () {
  const info = this.data.pickupInfo;
  if (!info.contactName) { wx.showToast({ title: '请填写联系人', icon: 'none' }); return false; }
  if (!info.contactPhone || !/^\d{11}$/.test(info.contactPhone)) {
    wx.showToast({ title: '请填写正确的11位手机号', icon: 'none' }); return false;
  }
  if (!info.pickupAddress) { wx.showToast({ title: '请填写回收地址', icon: 'none' }); return false; }
  if (!info.pickupDate) { wx.showToast({ title: '请选择预约日期', icon: 'none' }); return false; }
  if (!info.pickupTime) { wx.showToast({ title: '请选择预约时间', icon: 'none' }); return false; }
  return true;
}

页面路由配置

{
  "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. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 laji-back-min
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

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，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 图片识别功能：接入AI图像识别API，实现拍照识别垃圾分类
4. 语音识别功能：支持语音输入查询垃圾分类
5. 积分系统：用户参与回收获得积分奖励
6. 消息通知：预约状态变更推送通知
7. 评价系统：用户对回收服务进行评价
8. 更多回收站点：扩充回收站点数据库
9. 在线支付：接入微信支付，实现在线付款
10. 社区功能：用户分享环保心得和经验

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 预约功能为模拟实现，不涉及真实预约
3. 地图功能需要用户授权定位权限
4. 回收站点坐标为示例坐标，非真实位置
5. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。