基于uni-app的校园闲置物品回收小程序的设计与实现

摘要：针对校园闲置物品循环利用、回收问题，文章设计并实现了一个可跨平台使用的校园闲置物品回收小程序。小程序整体分为基于uni-app 框架开发的微信小程序及基于Lavarel框架的后台管理系统两大部分。小程序分为用户端（普通用户）和员工端（企业用户），具有注册、登录、预约上门回收、订单处理等功能，校园闲置物品回收小程序为创建更便捷的校园生活提供了服务平台。

关键词：uni-app框架；Lavarel框架；校园闲置物品回收；小程序

中图分类号：TP315  文献标志码：A

0 引言

闲置物品是指生活中不再发挥效用的物品，除了衣物外，校园大学生的闲置物品还包括图书、体育用品和便捷交通工具（自行车和电动车）等。同一产品在不同用户手中有不同的使用价值，可以满足用户的不同需求。因此，校园大学生闲置物品的回收可以优化物品的使用，与将闲置物品作废品处理相比，回收后循环再利用更有益于构建绿色和谐的社会环境，让物品在价值损耗的过程中不断流转到有需要的用户手中，最大程度地发挥其剩余价值。

校园闲置物品回收小程序不仅为大学生闲置物品回收提供了一个高效、安全的快捷通道，还借助移动智能设备和互联网进行科学优化和效率提升，积极参与到垃圾分类及智能回收体系建设工作中。

1 开发环境与技术

本系统采用前后端分离模式，uni-app作为前端开发框架，Laravel作为后端开发框架，PHP作为后端处理语言，MySQL作为系统数据库。系统的实现分为手机（小程序）端、服务端和数据库端3部分。

1.1 开发环境

1.1.1 手机（小程序）端——HBuilderX

手机（小程序）端采用uni-app框架，开发环境HBuilderX是DCloud团队专门为uni-app开发的集成环境开发工具，具有轻巧（不含插件的安装包版本只有十几兆大小）、极速（启动速度、大文档打开速度、编码提示都可以极速响应）的优势。

1.1.2 服务端——XAMPP

系统服务端采用PHP+Apache+MySQL结构，该结构基于XAMPP集成开发环境。XAMPP是一款开源的网络服务器套件，是一个集成Apache服务器、MySQL数据库、PHP语言等的功能强大的软件包，支持Windows、Linux和OSX操作系统［2］。

1.2 开发技术

1.2.1 Vue.js框架

Vue.js是用于构建用户界面的渐进式JavaScript框架，基于数据驱动和组件化的思想构建前端页面。Vue.js框架的核心库更加注重视图层，具有简单、运行效率高、语言简洁、占用空间小、上手容易等特点［3］，是目前前端首选框架。

1.2.2 uni-app框架

uni-app是DCloud团队使用Vue.js、微信小程序标签以及API开发的国产跨开台移动应用开源框架，开发者编写一套代码，可发布到iOS、Android、H5以及微信小程序、百度小程序、头条小程序、支付宝小程序等多个平台，跨平台能力极强。uni-app的社区活跃度高，具有组件丰富、平台能力不受限、速度快、支持原生渲染、支持原生代码混写和原生软件开发工具包等优势。uni-app实现了“一套代码、多端发行”，有效降低了开发和维护成本［4］。

1.2.3 uView库

uView是一款基于uni-app开发的UI库，提供了一套完整的组件库和丰富的样式库，使开发者可以快速构建出漂亮、丰富的多平台应用。

1.2.4 Lavarel框架

Laravel是一款开源的PHP Web应用程序框架。框架采用MVC（模型-视图-控制器）架构模式，提供了路由、中间件、Eloquent ORM、模板引擎、任务调度、事件管理等功能，帮助开发人员构建优雅、高效、可扩展、可维护的Web应用程序［5］。

1.2.5 MySQL数据库

MySQL是一个快速、多线程、多用户的SQL数据库服务器，是目前广泛使用的关系型数据库管理系统［6］，具有体积小、速度快、成本低、跨平台、兼容性好、开放源码等特点。目前，MySQL数据库是互联网、社交系统、各类应用软件等系统的常见技术选择，是与Java、Python、PHP等主流编程语言紧密结合的数据库系统［4］。MySQL与主流编程语言的完美结合、无缝连接，实现了高效的数据交互和查询。

2 系统整体设计

2.1 系统技术架构

校园闲置物品回收系统采用前后端分层设计，分为表示层、业务逻辑层和数据层。

小程序的表示层使用uni-app框架，uView 作为第三方组件库，Components管理组件，Uni_modules管理项目配置依赖，pages.json负责页面配置。对uni-app进行全局配置，决定页面文件的路径、窗口樣式、原生的导航栏及底部的原生tabBar等［1］，使用App.vue作为核心控制文件，通过uView中的网络请求来发送get、post请求。

业务逻辑层使用简洁的PHP Web开发框架Lavarel作为后台框架。Laravel以其优秀的路由系统和缓存机制而闻名，能够有效地提升请求处理速度。Controller是Lavarel中的控制器，本系统中Controller的主要作用是负责接收用户输入请求，调度模型处理数据。数据层采用MySQL作为核心数据库。

2.2 系统功能概述

本系统分为普通用户（用户端）和企业用户（员工端）。普通用户的主要功能模块为：注册、登录、预约上门回收、附近回收机、订单、积分兑换、“我的”等。企业用户的主要功能模块为：登录、订单和“我的”。

普通用户可以是企业上门回收，也可以送到附近的回收机完成物品回收。对于普通用户，订单有待接單、待结算、已完成和已取消4种状态。企业用户订单有待结算、已完成和已取消3种状态。

3 系统主要功能设计及实现

3.1 功能需求

校园闲置物品交换小程序分为用户端和公司端，总体功能需求如下。

3.1.1 用户端

用户注册登录成功后跳转到小程序，在小程序中通过底部导航栏可以进入首页、公司回收、订单及“我的”页面。

用户登录可以采用手机验证码登录，也可以采用账号密码登录。

首页中放置闲置物品的回收分类、旧物去向、预约上门回收、附近的回收机等功能链接。

公司回收中可以依据条件完成筛选，也可以查看公司名称、联系电话、地址、营业时间、公司图片等。

订单分为已接单（网点公司名称、距离、回收人员姓名、电话、接单时间等信息）、回收中（网点公司名称、回收人员姓名、电话、回收时间等信息）和已完成（网点公司名称、回收种类、单位数量、获取积分数量、回收时间等信息）。

“我的”页面中包含用户基本信息（头像、姓名、积分数量、个性签名、回收次数）、收入记录（每笔订单的收益）、积分记录（回收的时间、签到的时间、积分）。

附近的回收机可以查看全市的所有回收机列表信息、回收机地图位置、回收业务完整流程等详细信息。

3.1.2 公司端

公司员工登录后可以配置账号权限，进行订单处理（接单、订单处理、订单详情），进入个人中心查看评价以及修改密码、退出登录等。

3.2 用户交互界面逻辑

小程序端用户交互界面逻辑如图1所示。

3.3 用户登录流程

普通用户和企业用户可以采用手机验证码和账号密码2种方式登录系统。

手机验证码登录的流程如下：用户输入11位手机号，若输入正确则获取短信验证码，同时短信验证码开始倒计时59s，用户收到验证码后在指定时间内输入正确的验证码，完成登录。若输入的手机号不存在或不满足正确的手机号要求，则利用Toast给出“手机号码格式错误”或“手机号不存在”的提示。若用户未在指定的59s内输入验证码，则利用Toast给出“验证码过期”的提示，同时清空验证码框中的信息。

3.4 用户身份验证

系统采用Token机制验证用户身份。首次登录

时，前端调用后端的登录接口，发送用户名和密码；后端收到请求。验证用户名和密码，验证成功，给前端返回一个Token；前端获取到Token，将token存储到缓存和Vuex中，并跳转路由页面。前端每次跳转路由，都需判断缓存中有无Token ，若没有就跳转到登录页面，若有则跳转到对应路由页面。

客户端携带Token每发送一次HTTP请求，拦截器都会拦截一次请求，把请求头部的Authorization取出并与当前存于服务器上的Token做对比，若是同一个，则证明是同一用户，拦截器为当前请求放行，继续执行请求。如果不是同一个，那么服务器会截断请求并发送错误码（例如：Token过期失效，返回401错误）发给客户端，让客户端验证身份重新登录。若验证成功，则进入首页。

3.5 闲置物品预约回收流程

预约上门回收时，出于校园安全考虑，学生在约定时间内将闲置物品送至校门口，预收回收流程如下：

用户登录成功后，申请预约并填写相关信息，系统完成各项必填信息的检测，信息填写完整，单击“提交”按钮，系统会检测填写信息是否正确，若无误，回收员上门并处理回收物，否则，用户重新填写信息。

3.6 小程序端

学生用户在微信上查找到校园闲置物品回收小程序，便可以直接进入小程序访问闲置物品回收系统。用户通过注册成为系统用户，注册成功后即可登录。登录成功后进入小程序首页，在首页中可以预约上门回收、查看附近的回收机、旧物去向以及完成积分兑换等。通过小程序底部的导航栏，用户可以快速进入订单、公司回收及“我的”页面。用户在公司回收页面中可以搜索回收公司，通过“立即下单”按钮完成预约回收。订单页面拥有待接单、待结算、已完成和已取消4张选项卡，进入各选项卡对应的页面可以完成订单的相应处理。在“我的”页面可以查看自己的积分情况及兑换记录等信息。

3.7 前后端的交互实现

在小程序端与后台管理系统的交互实现过程中，通过查看后端提供的接口文档以及调用相应的API，获取所需的JSON数据并将返回的数据进行解析后，应用于小程序页面中。系统采用uView UI中的网络请求调用后端API，减少代码冗余，便于后期更新维护。

4 结语

本文开发的校园闲置物品小程序采用前后端分离技术，小程序端包含用户注册、用户登录、预约上门回收、订单等功能。用户在完成账号注册及登录后，便可在小程序中对自己的闲置物品进行回收处理，对于一些使用痕迹较重的物品可以通过小程序提供的“旧物去向”捐赠渠道赠予需要的客户，让校园大学生加入献爱心、垃圾分类及智能回收的建设工作中。

参考文献

［1］张巧岭.“求捎带”校园订餐系统前端设计［J］.现代信息科技，2022（3）：14-17.

［2］史桂红.基于Android电气产品销售系统App的设计与实现［J］.企业科技与发展，2022（8）：73-77.

［3］朱志慧，蔡洁.基于SpringBoot+Vue+uni-app框架的校园失物招领系统［J］.电子技术与软件工程，2022（917）：62-65.

［4］马青松，熊新国，刘拥军.基于uni-app框架的机房运维管理系统设计与实现［J］.信息记录材料，2022（11）：129-133.

［5］看不懂.laravel框架知識点［EB/OL］.（2023-06-19）［2023-11-30］.https：//blog.csdn.net/2201_75943035/article/details/131286733.

［6］田娟.基于PHP+MySQL员工信息管理系统后台设计与实现［J］.电脑知识与技术，2023（23）：47-49.

（编辑 姚 鑫编辑）

Design and implementation of campus idle goods recycling applet based on uni-app

Shi  Guihong

（School of Artificial Intelligence， Suzhou Chien-Shiung Institute of Technology， Taicang 215400， China）

Abstract：  In view of the convenience of recycling and recycling of idle items on campus， a cross-platform recycling small program of campus idle items is designed and realized. The small program is divided into two parts： the wechat mini program developed based on uni-app framework and the background management system based on Lavarel framework. Small programs are divided into user end （ordinary users） and employee end （enterprise users）， with registration， login， appointment door-to-door recycling， order processing and other functions， the program developed in this paper provides a convenient service platform to create a more convenient campus life platform.

Key words： uni-app framework; Lavarel framework; campus idle items recycling; small program