基于微信小程序的垃圾分類系統(tǒng)設計與實現(xiàn)

李艷平 張成昊

摘? 要：隨著環(huán)境污染帶來的影響日趨嚴重，合理地進行垃圾分類成為亟待解決的問題。借助微信這個強大的社交網(wǎng)絡平臺，針對目前垃圾分類現(xiàn)狀進行研究，設計并實現(xiàn)一個垃圾分類小程序，旨在幫助人們更好地進行垃圾分類，普及垃圾分類知識。系統(tǒng)采用WXML和WXSS實現(xiàn)客戶端頁面功能，進行頁面布局設計，使用Java語言實現(xiàn)交互功能，使用MySQL數(shù)據(jù)庫存儲數(shù)據(jù)，旨在為用戶提供垃圾分類文字查詢、拍照查詢以及垃圾分類知識問答等功能。

關鍵詞：微信小程序；垃圾分類；文字查詢；拍照查詢；知識問答

中圖分類號：TP311? 文獻標識碼：A? 文章編號：2096-4706（2023）10-0014-05

Abstract： With the increasingly serious impact of environmental pollution， classifying garbage reasonably has become an urgent problem to be solved. With the help of WeChat， a powerful social network platform， we have studied the current status of garbage classification， design and implement a garbage classification mini program to help people better classify garbage and popularize garbage classification knowledge. The system adopts WXML and WXSS to implement client page functions， design page layout， use Java language to achieve interactive functions， and use MySQL database to store data. It aims to provide users with functions such as garbage classification text query， photo query， and garbage classification knowledge Q&A.

Keywords： mini program; garbage classification; text query; photo query; knowledge Q&A

0? 引? 言

隨著社會的發(fā)展，人們對于環(huán)境保護越來越重視，垃圾分類已經(jīng)變?yōu)橐粋€全球性的問題。隨著我國經(jīng)濟的發(fā)展，國內(nèi)城鎮(zhèn)化發(fā)展不斷加快，環(huán)境污染也在增加，環(huán)境污染帶來的負面影響日趨顯露。如果不能有效地進行垃圾分類回收、處理，它們將會侵占大量的土地，而且會對環(huán)境造成很大的影響，而合理地進行垃圾分類成為首先要解決的問題[1]。

微信小程序作為一個自帶流量、無需下載安裝的輕量級應用，依靠微信的社交網(wǎng)絡平臺，具有很高的用戶粘性，已與人們的日常生活密不可分，具有很好的宣傳效應[2]。

因此，基于微信平臺設計一個小程序，為用戶提供垃圾分類信息查詢，普及垃圾分類知識，提高居民的垃圾分類意識。將垃圾分類回收落實到每個居民，減少不必要的資源消耗，為經(jīng)濟和環(huán)境的可持續(xù)發(fā)展提供助力。

1? 開發(fā)環(huán)境

1.1? 微信開發(fā)者平臺

微信開發(fā)者集中了開發(fā)程序、調(diào)試代碼、預覽實現(xiàn)效果等功能，對于開發(fā)小程序、小游戲等非常有優(yōu)勢，可以根據(jù)實際需要進行自定義的微信接口的開發(fā)和利用[3]。文中微信小程序的前端采用微信開發(fā)者實現(xiàn)。

微信小程序的系統(tǒng)架構分為三個層次：視圖層（View）、邏輯層（APP Service）和系統(tǒng)層（Native）[4]。如圖1所示。

1.2? WXML和WXSS

微信小程序在邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層通過WXML和WXSS展現(xiàn)出來[4]。WXML是一種用于微信小程序前端開發(fā)的語言，它和WXSS搭配在一起，用于小程序頁面布局的設計。WXML用于搭建小程序頁面框架，WXSS用于實現(xiàn)頁面框架及元素的顯示樣式。

1.3? IDEA

本小程中的知識問答、垃圾分類查詢等功能通過IDEA實現(xiàn)。IDEA是一種Java集成開發(fā)環(huán)境，和傳統(tǒng)的Eclipse開發(fā)環(huán)境相比，其最大的優(yōu)勢是調(diào)試代碼，不僅可以對Java代碼、JavaScript、JQuery、Ajax等進行調(diào)試，并且建立了統(tǒng)一的標準，語法提示更加智能，提高了開發(fā)者的工作效率。

1.4? MySQL數(shù)據(jù)庫

MySQL是一款是開源數(shù)據(jù)庫，支持多種操作系統(tǒng)，能提供多種API接口，具有數(shù)據(jù)管理、存儲和搜索等功能。而且它的體積小、性能穩(wěn)定、檢索速度快[5]。因此，本文采用MySQL數(shù)據(jù)庫存儲數(shù)據(jù)，加快軟件的運行速度和數(shù)據(jù)檢索速度。

2? 系統(tǒng)分析

2．1? 系統(tǒng)功能分析

通過調(diào)研和分析，系統(tǒng)主要為用戶提供垃圾分類查詢、知識問答、歷史記錄瀏覽等主要功能。其中，歷史記錄瀏覽需要用戶登錄后才可使用此功能。系統(tǒng)主要功能如圖2所示。

2.2? 系統(tǒng)功能模塊劃分

綜上系統(tǒng)功能分析，系統(tǒng)主要劃分為垃圾分類查詢、知識問答、歷史記錄瀏覽和用戶登錄四個功能模塊，系統(tǒng)功能結模塊圖如圖3所示。

2.2.1? 垃圾分類查詢

主要為用戶提供方便、快速地查詢垃圾分類的類型信息。查詢方式分為文字查詢和拍照查詢兩種。其中拍照查詢，通過用戶上傳的垃圾照片，能自動識別出垃圾的分類類型，并將識別結果呈現(xiàn)給用戶。

2.2.2? 知識問答

主要為用戶提供垃圾分類相關知識的測試。每次測試隨機從題庫中抽出十道垃圾分類題，用戶答題后，可以查看答題結果和正確答案。

2.2.3? 歷史記錄瀏覽

主要對用戶曾經(jīng)搜索過的垃圾分類信息和知識問答情況進行瀏覽和查看。

2.2.4? 用戶登錄

用戶登錄后才可以對曾經(jīng)搜索過的垃圾分類信息和知識問答情況進行瀏覽和查看。垃圾分類查詢和知識問答則不需要用戶登錄即可直接使用此功能。

3? 系統(tǒng)設計與實現(xiàn)

3.1? 系統(tǒng)主要功能模塊設計

3.1.1? 垃圾分類查詢模塊設計

垃圾分類查詢模塊主要包括兩個功能：

1）文字查詢。用戶輸入查詢關鍵字后，首先通過request中的get方法，向服務器發(fā)送獲取數(shù)據(jù)請求?？刂茖釉诮邮盏角岸说恼埱蠛螅{(diào)用服務層的getTrashList（catid，text），通過SQL語句來查詢用戶所輸入垃圾的名稱、類別，然后控制層再將查詢結果返回給前端，在搜索頁面中進行展示。在控制層中，定義了三個變量：“catid”“text”“page”，分別是垃圾分類類別、垃圾名稱和頁碼。

2）拍照查詢。本系統(tǒng)還提供了拍照識別垃圾分類的功能。通過第三方提供的APPKey和APPCode調(diào)用API接口實現(xiàn)。當用戶使用該功能時，首先在主頁面點擊拍照查詢按鈕進入拍照查詢頁面，在該頁面中上傳待查詢的圖片，然后拍照識別功能對圖片進行分析，根據(jù)分析結果顯示垃圾分類信息，

3.1.2? 知識問答模塊設計

垃圾分類知識模塊主要為三個功能：

1）垃圾分類介紹。該功能主要通過前端頁面概要的介紹系統(tǒng)中垃圾分類的四個類別，讓用戶初步了解垃圾分類的基本知識。首先，通過前端的頁面布局設計出四個頁面，然后通過組件view將文字填入到容器中，另外需要用view組件定義一個類.item，這個類可以用來控制背景的顏色、寬高等，再加入四種不同類型的垃圾分類圖片，即可實現(xiàn)此功能。

2）垃圾字典。點擊“垃圾字典”可以查看各種垃圾分別屬于哪個垃圾類型。通過查看信息加強對于垃圾分類知識的積累。本功能的查詢語句是由catid即垃圾類別來進行區(qū)分的，用戶在前端點擊不同的類別，就會向服務器發(fā)送不同的catid進行查詢，然后將返回結果顯示在前端垃圾字典頁面上。用戶從主頁面點擊進入垃圾字典頁面，每次系統(tǒng)會加載出20條垃圾名稱，當用戶滑動該頁面到底部時，就會再加載出20條新的垃圾名稱。

3）知識問答。用戶在主界面“點擊知識問答”進入知識問答頁面，系統(tǒng)會隨機生成10道判斷垃圾類別的選擇題，每道題有四個不同類別的答案。用戶答完10道題后，系統(tǒng)會自動給出10道題的正確答案，并可以統(tǒng)計用戶答對和答錯的題數(shù)。此外，用戶也可以在答題過程中點擊重新開始答題。

為了實現(xiàn)本功能，在服務層定義了一個新的數(shù)組，并且定義了一個random函數(shù)，在知識問答查詢語句中，使用了Mybatis框架。

SELECT *

FROM `rubbish`

WHERE id IN

#{it}

ORDER BY id

3.1.3? 歷史記錄瀏覽模塊設計

1）文字查詢記錄瀏覽。通過request中的get操作，向后端控制層發(fā)送獲取數(shù)據(jù)請求，控制層調(diào)用服務層search History（openid），根據(jù)登錄用戶，查看不同的搜索記錄。實現(xiàn)此功能需要利用微信官方服務器發(fā)放給每個用戶的openid，根據(jù)用戶間不同的openid，在垃圾搜索記錄表中查詢到需要的數(shù)據(jù)，最后在前端頁面中顯示。

2）知識問答記錄瀏覽。主要是方便用戶查看錯題進行垃圾分類知識的學習。在知識問答界面的js文件中，通過post方法將用戶答題時的數(shù)據(jù)通過控制層訪問服務層，存入到知識問答詳細記錄表中。當用戶查詢詳細數(shù)據(jù)時，通過問答記錄詳細記錄表中的recordid進行垃圾知識問答的詳細查詢。

3.1.4? 用戶登錄模塊設計

用戶登錄功能使用的是微信官方提供的openid，因此不需要輸入賬號、密碼，微信授權登錄即可。在進入登錄頁面后，點擊登錄按鈕，系統(tǒng)將會自動檢測該用戶是否授權登錄過本小程序，若首次登錄。小程序會添加沒有授權過的用戶的openid到小程序的數(shù)據(jù)庫中，之后顯示登錄用戶成功，如果用戶曾經(jīng)授權過，則會直接登錄成功，不再添加新的openid。

3.2? 數(shù)據(jù)庫設計

3.2.1? 垃圾分類信息表（rubbish）

垃圾分類信息表包括五個字段。字段id是垃圾編號，記錄數(shù)據(jù)庫中垃圾的個數(shù)；字段catid是垃圾分類編號，區(qū)分不同垃圾的類型，1為可回收垃圾，2為有害垃圾，3為廚余垃圾，4為其他垃圾；字段Ljbg區(qū)分不同垃圾種類的顏色，其中可回收垃圾是深藍色，有害垃圾是深紅色，廚余垃圾是深綠色，其他垃圾是深灰色；字段name是垃圾分類的名稱；字段text是垃圾的名字，如表1所示。

3.2.2? 垃圾搜索記錄表（rubbish_user_search）

垃圾搜索記錄表包括五個字段。字段id記錄垃圾搜索記錄次數(shù)；openid記錄的是用戶登錄后，微信授權返回的數(shù)據(jù)；字段result記錄每次查詢結果的數(shù)量；字段serchText記錄查詢的垃圾名稱；字段searchDate記錄查詢時間，如表2所示。

3.2.3? 問答記錄表（q_a_record）

問答記錄表包含五個字段。字段id記錄已完成的知識問答次數(shù)；字段openid記錄的用戶登錄后，微信服務器向用戶返回的數(shù)據(jù)；字段correctCount統(tǒng)計每次知識問答答對的題目數(shù)量；creatDate記錄每次知識問答的時間，如表3所示。

3.2.4? 知識問答詳細記錄表（q_a_record_info）

知識問答詳細記錄表包含八個字段。字段id記錄所有問答題的數(shù)量；字段recordid記錄答題次數(shù)，每次記錄由十道選擇題組成；字段name記錄題目中選擇題的正確答案；字段text記錄題目中垃圾的名稱，字段yourAnswer記錄用戶選擇的答案；whetherCorrect記錄答案的對錯，1為對，0為錯誤；openid區(qū)分不同用戶的答題記錄，openid是通過微信服務器為每個用戶生成的不同數(shù)據(jù)；createDate記錄知識問答進行的時間，如表4所示。

3.3? 系統(tǒng)測試結果

3.3.1? 小程序主界面測試結果

點擊“垃圾分類”小程序，進入小程序主界面，測試結果如圖4所示。

3.3.2? 垃圾分類查詢頁面測試結果

圖5為垃圾分類查詢頁面測試結果，在垃圾分類文字搜索頁面，輸入垃圾名稱，可以查看其所屬的垃圾類別，測試結果如圖5（a）和5（b）所示。在垃圾分類拍照查詢頁面，點擊“拍照選取照片上傳”按鈕，上傳欲識別的垃圾圖片，測試結果如圖5（c）和圖5（d）所示。

3.3.3? 知識問答頁面測試結果

圖6為知識問答頁面測試結果。進入知識問答頁面，點擊“知識問答”按鈕，可進行垃圾分類知識答題，并顯示答題結果。在垃圾字典頁面，可進行垃圾分類知識的學習。測試結果如圖6（a）、6（b）和6（c）所示。

3.3.4? 歷史記錄瀏覽頁面測試結果

圖7為歷史記錄瀏覽頁面測試結果。進入歷史記錄查詢頁面，點擊“文字查詢記錄瀏覽”，可查看垃圾分類查詢的歷史記錄；點擊“知識問答記錄瀏覽”，可查看知識問答的答題情況歷史記錄。測試結果如圖7（a）和7（b）所示。

4? 結? 論

基于微信小程序的垃圾分類系統(tǒng)，使用最新的微信開發(fā)者工具實現(xiàn)，經(jīng)測試軟件功能運行正常，系統(tǒng)性能穩(wěn)定，用戶體驗效果較好?；旧蠞M足了為用戶提供垃圾分類查詢、垃圾分類知識問答等功能的需求。

參考文獻：

[1] LIU C Y. Research on Design of Management System Based on Garbage Classification [J].International Journal of Frontiers in Sociology，2021，3（11）：1-2.

[2] 韓舶.微信小程序發(fā)展現(xiàn)狀及其前景探析 [J].數(shù)字傳媒研究，2020，37（8）：5-9.

[3] 王曉星，黃建昌.基于微信小程序的應用開發(fā)淺析 [J].信息技術與信息化，2021（3）：23-25.

[4] 微信官方文檔.開發(fā)指南 [EB/OL].[2019-11-13].https：//developers.weixin.qq.com/miniprogram/dev/framework/view/.

[5] 張坤，張云霞，孫全建.計算機軟件數(shù)據(jù)庫設計的原則及問題研究 [J].電子技術與軟件工程，2022（1）：168-171.

作者簡介：李艷平（1972—），女，漢族，內(nèi)蒙滿洲里人，講師，碩士，主要研究方向：云計算、移動互聯(lián)網(wǎng)；張成昊（2000—），男，漢族，北京，本科在讀，主要研究方向：為移動互聯(lián)網(wǎng)。