基于云開發(fā)的垃圾分類微信小程序設(shè)計(jì)開發(fā)

高境廷 杜娟 胡生濤 何志文

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

關(guān)鍵詞：微信小程序;云開發(fā);垃圾分類

中圖分類號：TP393 ? ? ?文獻(xiàn)標(biāo)識碼：A

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

1 引言

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

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

2 系統(tǒng)設(shè)計(jì)

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

2.1 用戶界面設(shè)計(jì)

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

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

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

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

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

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

2.2 數(shù)據(jù)庫的讀寫方法及其實(shí)現(xiàn)

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

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

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

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

2.3 圖像識別獲取垃圾信息的方法及其實(shí)現(xiàn)

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

1）百度云開發(fā)注冊與配置

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

2）獲取Access Token

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

3）服務(wù)器域名配置

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

4）小程序客戶端開發(fā)

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

3 系統(tǒng)實(shí)現(xiàn)

3.1 小程序首頁

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

3.2 文字搜索界面

用戶點(diǎn)擊下方的搜索框即可輸入要查詢的信息，輸入后點(diǎn)擊右方的箭頭圖標(biāo)便會顯示搜索結(jié)果，如圖4所示。

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

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 拍照搜索界面

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

在拍照搜索中上傳的圖片會通過與開放的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"）{

//檢測結(jié)果正確

//返回識別信息

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，

}）;

}

}

}）

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

3.4 搜索記錄查詢

用戶可在此功能內(nèi)查看搜索過的歷史記錄，在點(diǎn)擊下方查詢記錄按鈕后會顯示查詢過的記錄，方便用戶進(jìn)行確認(rèn)，具體結(jié)果如圖7。

4 結(jié)束語

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

參考文獻(xiàn)：

[1] 陳云貴，高旭.微信小程序開發(fā)從入門到實(shí)戰(zhàn)：微課視頻版[M].北京：清華大學(xué)出版社，2020.

[2] 張巧嶺.基于微信小程序的垃圾分類系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].電子世界，2020（21）：185-186.

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

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

[5] 鄧斌權(quán)，李劍波，瞿先超.基于云開發(fā)和微信小程序的垃圾分類系統(tǒng)實(shí)現(xiàn)[J].電腦知識與技術(shù)，2020，16（7）：82-84.

【通聯(lián)編輯：謝媛媛】