基于云開發的垃圾分類微信小程序設計開發

高境廷 杜娟 胡生濤 何志文

摘要：微信小程序因為靈活便捷的優點得到了廣泛應用，其“用完即走”的特點非常適合于解決居民對垃圾分類不熟悉的問題。該小程序利用微信開發者工具，應用WXML、WXSS和JavaScript技術，依托百度云開發提供的通用物體識別API，實現了3000多種生活常見垃圾的垃圾類別文字查詢及圖片查詢功能，并提供搜索記錄的查詢，可以幫助用戶方便快捷地查詢到垃圾類別從而更好地進行垃圾分類。

關鍵詞：微信小程序;云開發;垃圾分類

中圖分類號：TP393 ? ? ?文獻標識碼：A

文章編號：1009-3044（2022）13-0049-04

1 引言

垃圾分類是科學合理保護生態環境，推進生態文明建設的重要一環。當前遇到的最大問題是居民在參與垃圾分類過程中不能對垃圾正確分類。為了提升居民垃圾分類意識，提升居民對于垃圾分類知識的認知度，使其更有意愿參與到垃圾分類的工作當中去，解決目前普遍存在的居民“高意愿，低行動”的難題，設計一款方便實用的垃圾分類小程序是非常有必要的。

微信小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的設想，也實現了“用完即走”的理念。用戶不用關心是否安裝太多應用的問題，可以隨時使用，又無須安裝卸載[1]。微信小程序開發框架提供了自己的視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層和邏輯層之間提供了數據傳輸和事件系統，使開發人員可以輕松地專注于數據和邏輯[2]。

2 系統設計

用戶可通過圖像識別或手動輸入文字的方法對程序輸入垃圾相關信息，程序根據提供用戶提供的信息查詢數據庫，最后將數據庫中得到的數據輸出到用戶使用界面（UI）。程序執行流程如圖1所示。

2.1 用戶界面設計

此小程序一共分為主頁、功能介紹、文字搜索和拍照搜索幾個功能頁面。

首頁：分為上下兩個view元素，頭部為swiper組件的輪播圖，輪播內容為與垃圾分類和環境保護有關的一些圖片，可以豐富用戶的使用體驗，使整個頁面更加美觀。底部為具有快速前往每個功能的navigator組件，組件內有包含簡單解釋每個功能的image標簽和text標簽。

功能介紹：頁面主要通過自定義組件父子互相傳遞數據實現，界面設計為4個navigator組件，包含有圖標文字和詳細介紹每個功能作用的文本信息。由于4個組件的結構樣式一致，故采用自定義組件的方式減少重復的代碼量，在自定義文件中通過js文件properties對象中的內容來接收父元素傳遞過來的數據。通過wx：for循環渲染nav自定義組件實現頁面效果，在修改樣式和結構時只需修改一個自定義組件，大大縮短了在頁面的代碼量，也使整體結構更加清晰。

文字搜索：頁面中使用了background-image屬性使用背景圖，通過background-size和background-position屬性來調整背景圖的大小和顯示位置以達到設計圖的樣式。搜索框和搜索結構分別用兩個塊元素包含。搜索結果框先通過display：none隱藏，等待觸發button的tap事件后顯示，并同時返回垃圾名和分類信息。

拍照搜索：頁面先顯示開始拍照上傳圖片的圓形button組件，觸發tap事件后顯示5個與所拍攝物品相關的物品的按鈕，用戶可點擊想查看的內容顯示該物品的分類結果。在返回查找信息的最后設計有一個繼續查找的按鈕方便用戶進行多次查找。

為實現對不同機型的適配，在需要完美高度適配的頁面的onload生命周期函數中寫下返回用戶所用機型的顯示屏寬高并儲存到data域中的函數，再利用內聯樣式設置符合每個機型的最佳寬高。在對樣式的編寫時均采用less語法進行編寫，此操作使樣式代碼結構變得整潔清晰，同時也大大縮短了對樣式進行編寫和修改的時間。

2.2 數據庫的讀寫方法及其實現

鑒于本小程序的規模，使用了微信官方提供的云數據庫功能來為整個程序提供后臺支持。云服務是一種簡單高效、安全可靠、處理能力可彈性伸縮的計算服務[3]。小程序云開發基于Serverless云服務的理念，為開發者提供完整的云端支持和微信服務支持。開發者無須搭建服務器，直接使用云數據庫，弱化后端和運維概念，使開發者可以集中精力于核心業務[4]。云數據庫的使用方法可以歸納為存儲數據、使用數據、緩存數據三步。

存儲數據。首先將垃圾分類數據通過Python轉換為可以上傳到數據庫的JSON格式，一條垃圾分類數據對應一個JSON對象。通過轉換，得到了約六千個垃圾分類條目，并將其上傳至云數據庫，以便在程序中使用。

使用數據。云數據庫數據的使用可分為連接、請求、使用三個步驟。在程序中若需要使用數據庫的數據，首先應該與數據庫建立連接。只需要調用wx.cloud中的init（）函數并提供環境id即可建立與數據庫的初步連接。通過調用db.collection（）函數，將垃圾名稱作為參數傳入函數即可對云數據庫發送請求，請求的結果會以Promise的形式返回到程序，故使用步驟需要嵌套在Promise的Consuming_Code中。使用步驟只需完成對用戶頁面的更新以及將首次獲得的垃圾分類數據存入緩存中。

緩存數據。云數據庫技術的使用大大簡化了開發小程序的過程，但數據庫的每日讀寫次數限制會給用戶帶來極大的不便。在沒有每日讀寫限制的情況下，用戶希望在查詢過程中能夠從數據庫中獲得最新的信息，即每次查詢都從數據庫中獲得信息。緩存搜索記錄是考慮到云數據庫每日讀寫限制的讓步選擇，以信息時效性為代價，有效減少了數據庫的讀寫次數。緩存數據的代碼是同步的，不需要考慮程序的異步邏輯，只需要考慮數據存儲格式的可用性即可。

2.3 圖像識別獲取垃圾信息的方法及其實現

百度AI開放平臺提供的通用物體和場景辨認接口支持識別10萬個常見物體及場景，返回相應的名稱結果[5]。本功能的實現依托于微信小程序豐富的API以及由百度云開發提供的通用物體識別API，運行邏輯實現如圖2所示。

1）百度云開發注冊與配置

首先需要注冊百度賬號，并登錄百度云，進入管理控制臺，創建圖像識別應用，創建完應用后，打開應用管理可見APP_ID、API_KEY和SECRET_KEY，需要用在小程序端調用圖像識別接口。

2）獲取Access Token

小程序服務端云函數是基于node.js的開發。使用wx.request向百度云服務授權服務地址發送請求，將應用管理中的參數發送即可得到每30天有效的Access Token。因此需要將該步驟寫入到app.js中，在每次小程序啟動時運行以獲取最新的Access Token。

3）服務器域名配置

每個微信小程序需要事先設置通訊域名，小程序只可以跟指定的域名進行網絡通信。包括普通HTTPS請求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile）和 WebSocket通信（wx.connectSocket）。為了使用百度云開發的API接口，需要在“小程序后臺-開發-開發設置-服務器域名”中進行服務器配置，將所需的服務器域名添加進去方可使用。

4）小程序客戶端開發

使用wx. chooseImage獲取到用戶提供的圖片（相冊選取/相機拍攝），再使用wx.compressImage對圖片進行壓縮及格式轉換處理，加快在后續請求中圖片的上傳速度。最后使用wx.request對圖像識別的網址進行POST請求，輸入相應的圖像，選擇信息等參數即可得到百度云開發返回的JSON數據。

3 系統實現

3.1 小程序首頁

首頁的頁面頭部是輪播圖展示，用于滾動展示一些以環保和垃圾分類為主題的圖片。在頁面中部則是每個功能的快捷入口，每個選項由功能圖標和解釋文字兩部分組成，用戶點擊這幾個選項后會跳轉到相應的功能頁面。如圖3所示。

3.2 文字搜索界面

用戶點擊下方的搜索框即可輸入要查詢的信息，輸入后點擊右方的箭頭圖標便會顯示搜索結果，如圖4所示。

小程序會通過用戶在文本搜索框中的輸入返回相應的垃圾分類信息，部分核心代碼如下：

getsearchresult（）{

wx.showLoading（{

title： 'Loading..'，

}）;

wx.cloud.callFunction（{

name：'cloud_searchclass'，

config：{

env：this.data.envId

}，

data：{

name：this.data.key

}

}）.then（（resp）=>{

console.log（resp.result）;

wx.hideLoading（）;

}）.catch（（e）=>{

this.setData（{

showUploadTip：true

}）;

}）;

}

3.3 拍照搜索界面

點擊圖中的圓形按鈕即可開始拍照識別，用戶上傳完圖片會顯示如圖5所示結果。

在拍照搜索中上傳的圖片會通過與開放的API交互返回分類信息，部分核心代碼如下：

wx.request（{

url：'https：//aip.baidubce.com/api/v1/solution/direct/imagerecognition/combination？access_token='+ app.globalData.access_token，

method：'POST'，

header： {'Content-type'： 'application/json;charset=utf-8'}，

data：{

image： base64，

scenes： ["advanced_general"]

}，

success（res）{

console.log（res）;

if（res.statusCode == 200 && res.errMsg == "request：ok"）{

//檢測結果正確

//返回識別信息

var rubbish = res.data.result.advanced_general.result;

console.log（rubbish）;

page.setData（{img： tempPath}）;

let len=rubbish.length;

for（let i=0;i

rubbish[i].clasf='';

rubbish[i].name=rubbish[i].keyword;

}

//init trash list

page.InitTrashList（rubbish）;

//隱藏加載窗口

wx.hideLoading（）;

}

else{

wx.showToast（{

title： '識別失敗'+res.data.error_msg，

duration： 1000，

}）;

}

}

}）

為盡可能提高正確率，采取了用戶可以自行點擊要查看的搜索結果的方式來顯示，如圖6所示。

3.4 搜索記錄查詢

用戶可在此功能內查看搜索過的歷史記錄，在點擊下方查詢記錄按鈕后會顯示查詢過的記錄，方便用戶進行確認，具體結果如圖7。

4 結束語

本系統實現了用文字和圖片搜索垃圾分類的功能，方便用戶隨時隨地查詢垃圾的類別從而改變目前普遍存在的居民“高意愿，低行動”的現狀，為推進生態文明建設做出貢獻。

參考文獻：

[1] 陳云貴，高旭.微信小程序開發從入門到實戰：微課視頻版[M].北京：清華大學出版社，2020.

[2] 張巧嶺.基于微信小程序的垃圾分類系統的設計與實現[J].電子世界，2020（21）：185-186.

[3] 陳宏樣，馬秋宇，李麗君，等.“記憶幫”微信小程序的設計與開發[J].科技與創新，2022（4）：35-37，40.

[4] 樂萬德，程傳旭.基于云開發的C語言客觀題練習小程序[J].信息技術與信息化，2021（7）：207-209.

[5] 鄧斌權，李劍波，瞿先超.基于云開發和微信小程序的垃圾分類系統實現[J].電腦知識與技術，2020，16（7）：82-84.

【通聯編輯：謝媛媛】