基于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