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

高境廷 杜娟 胡生濤 何志文

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

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

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

文章編號(hào)：1009-3044（2022）13-0049-04

1 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2）獲取Access Token

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

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

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

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

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

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

3.1 小程序首頁(yè)

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

3.2 文字搜索界面

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

小程序會(huì)通過(guò)用戶在文本搜索框中的輸入返回相應(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)擊圖中的圓形按鈕即可開(kāi)始拍照識(shí)別，用戶上傳完圖片會(huì)顯示如圖5所示結(jié)果。

在拍照搜索中上傳的圖片會(huì)通過(guò)與開(kāi)放的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"）{

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

//返回識(shí)別信息

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： '識(shí)別失敗'+res.data.error_msg，

duration： 1000，

}）;

}

}

}）

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

3.4 搜索記錄查詢

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

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