基于微信小程序“送它回家”的設(shè)計與實現(xiàn)

聶力　杜丹蕾　韋美雁　 文昕　唐俊杰

關(guān)鍵詞：微信小程序；C/S；回調(diào)地獄

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

文章編號：1009-3044（2023）02-0029-04

1 前言

隨著科技的高速發(fā)展，我國的城市化不斷推進(jìn)，越來越多的大自然環(huán)境被建設(shè)為高樓大廈和水泥公路，這使得那些原本生活在大自然環(huán)境中的貓咪的生存空間越來越小，它們被迫離開了自然環(huán)境，被人為或非人為地帶入城市中[1]，經(jīng)常吃不飽，到處流浪，受到諸方面的傷害，流浪貓的問題越來越嚴(yán)重[2]；有些人可能會對這一現(xiàn)象表示同情，想收養(yǎng)流浪貓，但卻不知道通過怎樣的途徑[3]；隨著時代的變化，人們越來越會享受生活，開始養(yǎng)寵物貓，但養(yǎng)貓的人家卻不一定懂得貓咪的生活習(xí)慣。所以關(guān)于這些問題項目團(tuán)隊基于微信公眾平臺設(shè)計了一款方便、簡潔、智能、功能健全的流浪貓領(lǐng)養(yǎng)求助系統(tǒng)[4-5]。

2 相關(guān)技術(shù)介紹

系統(tǒng)采用C/S（Client/Server）架構(gòu)，這種架構(gòu)更便于以后的更新與維護(hù)，也是目前主流的設(shè)計模式之一。C/S架構(gòu)安全性高、交互性強(qiáng)、網(wǎng)絡(luò)通信量低、響應(yīng)速度快。分為小程序客戶端、后臺服務(wù)端和數(shù)據(jù)庫端的開發(fā)[6-7]。

小程序是一種基于微信平臺的應(yīng)用，相對于其他C/S架構(gòu)的系統(tǒng)，其不需要下載，更加方便。內(nèi)有許多的內(nèi)置接口，大大方便了開發(fā)人員，節(jié)約了開發(fā)的時間，提高了效率[8-9]。小程序使用WXML、WXSS、JS和JSON語言進(jìn)行開發(fā)。WXML功能更加強(qiáng)大，新增了數(shù)據(jù)綁定、列表渲染、條件渲染和模板引用等功能，能夠構(gòu)建更加復(fù)雜的頁面；WXSS增加了尺寸單位——rpx，這種尺寸單位可以為開發(fā)者免除不同屏幕之間換算的煩惱。這些語言上手快，開發(fā)周期短，開發(fā)完后通常能夠在各系統(tǒng)和平臺上運(yùn)行。

服務(wù)器后端是采用Java語言用IntelliJ IDEA工具進(jìn)行編寫。Java語言是一種跨平臺應(yīng)用程序的面向?qū)ο蟮某绦蛟O(shè)計語言，其使用廣泛，簡單。服務(wù)器采用了目前市面上較流行的Spring框架，該框架遵守低耦合、高內(nèi)聚原則，增加了系統(tǒng)的可讀性和可維護(hù)性，降低了對環(huán)境的要求，無須配置文件，使得開發(fā)更加簡化，方便和加速了開發(fā)人員的代碼編寫。

采用關(guān)系型數(shù)據(jù)庫MySQL管理數(shù)據(jù)，MySQL體積較小、速度快、成本低而且還是開源軟件，獲得大多人的喜愛與優(yōu)先選擇，前端向后端請求更新數(shù)據(jù)后，后端通過MyBaits與數(shù)據(jù)庫進(jìn)行通信，對數(shù)據(jù)進(jìn)行增、刪、改、查等各種操作。

3 系統(tǒng)設(shè)計分析

3.1 功能設(shè)計

“送它回家”系統(tǒng)包括基礎(chǔ)功能模塊、主要功能模塊以及特色功能模塊。由貓咪領(lǐng)養(yǎng)模塊、貓咪送養(yǎng)模塊、為它治病模塊、貓圈模塊、用品購買模塊、消息推送模塊、登錄注冊模塊和個人信息模塊組成。各模塊之間相互獨(dú)立，便于管理和維護(hù)，用戶能通過這些功能模塊能對貓咪進(jìn)行全方位照顧。這些模塊都實現(xiàn)了前后端互聯(lián)，頁面的加載與跳轉(zhuǎn)。程序界面清爽，操作簡單，幫助用戶從沒有貓咪到學(xué)會照顧貓咪與享受貓咪生活的一條龍服務(wù)。

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

對照幾大功能模塊，數(shù)據(jù)庫一共設(shè)計了7張數(shù)據(jù)表，分別是cat表（存儲貓咪信息），news表（存儲貓咪小貼士信息），per表（存儲用戶信息），ship表（存儲貓用品信息），shuo表（存儲說說信息），shuodis表（存儲說說的評論信息），user表（存儲用戶賬號信息），每個表都有唯一ID，表示每條數(shù)據(jù)的唯一性。

4 系統(tǒng)實現(xiàn)

4.1 登錄與注冊模塊

界面里input組件綁定了輸入事件（bindinput="in?putWatch"），每當(dāng)input組件被輸入了數(shù)據(jù)，JS就能通過inputWatch（e）函數(shù)的形參e進(jìn)行數(shù)據(jù)的獲取。form組件綁定了提交事件（bindsubmit="submit"），點擊提交按鈕，JS對填寫數(shù)據(jù)進(jìn)行校驗。首先用trim（）函數(shù)判斷要提交給后端的參數(shù)是否為空，為空便通過wx.showToast（）接口提示“輸入內(nèi)容為空”，不為空便繼續(xù)進(jìn)行數(shù)據(jù)格式的判斷，校驗通過便使用wx.request（）請求把數(shù)據(jù)傳給后端，后端進(jìn)行相應(yīng)的處理。

系統(tǒng)能夠以游客的身份進(jìn)入，如果要進(jìn)行領(lǐng)養(yǎng)貓咪、購買貓用品等功能時會跳轉(zhuǎn)到登錄界面。登錄成功后，系統(tǒng)把用戶基本信息存入本地緩存中（通過wx.setStorageSync（"userinfo"， userInfo） ）。當(dāng)程序運(yùn)行到那些需要登錄才能進(jìn)行下去的功能時，系統(tǒng)首先嘗試從本地緩存調(diào)取數(shù)據(jù)（通過wx.getStorageSync（"userIn?fo"） ），然后把獲取的數(shù)據(jù)用if 進(jìn)行判斷，如果為NULL，以便提醒用戶登錄，否則就進(jìn)行下一步操作。

4.2 個人信息模塊（“我的”模塊）

該界面顯示和管理用戶個人消息，用戶在平臺上注冊了一個賬號，那么用戶所填寫的個人消息就綁定在這個賬號上。

界面中間部分是領(lǐng)養(yǎng)記錄、送養(yǎng)記錄與購買記錄的按鈕，當(dāng)用戶做了相應(yīng)的動作后，后臺會進(jìn)行更新數(shù)據(jù)，點擊進(jìn)入相應(yīng)的界面就能看到用戶做過的相關(guān)記錄（比如，當(dāng)用戶領(lǐng)養(yǎng)過一次貓咪后，那么領(lǐng)養(yǎng)記錄里會有這次領(lǐng)養(yǎng)的情況）。界面的上半部分，當(dāng)用戶登錄了就會顯示用戶的頭像與昵稱，如果未登錄便顯示一個登錄按鈕，此效果是通過view組件中的wx-if實現(xiàn)，小程序先從本地緩存嘗試獲取用戶信息，如果能獲取到便顯示頭像與昵稱，否則就顯示按鈕。

4.3 用品購買模塊

此模塊是一個電商模塊。通過線下團(tuán)隊對周圍貓用品店進(jìn)行篩選，最后挑選出一些質(zhì)量靠譜的商家進(jìn)行合作，在這里用戶能夠買到通過團(tuán)隊認(rèn)證的貓用品與貓糧。

界面中的所有商品，通過request請求向后端獲取，通過view組件中的屬性wx：for一次性渲染，點擊物品進(jìn)入物品詳情界面。因為每個物品有一個唯一的ID號，在這過程中小程序把用戶所點擊物品的那個ID 號通過request請求傳給后端，后端通過物品ID 號向數(shù)據(jù)庫查找數(shù)據(jù)，再返回相應(yīng)ID號物品的詳細(xì)信息，前端接收后端返回的數(shù)據(jù)，就能通過一個固定的模板把不同的商品的詳情給渲染出來。

4.4 消息推送模塊

針對用戶群體對養(yǎng)貓知識的興趣，系統(tǒng)開辟消息推送模塊，推送一些貓咪冷知識和生活習(xí)慣。消息推送顯示在首頁的底部，每當(dāng)用戶進(jìn)入系統(tǒng)時，便能看到系統(tǒng)發(fā)布的每日小貼士，方便用戶了解貓咪的相關(guān)消息。

4.5 貓圈模塊

此模塊類似于朋友圈，用戶能夠在這樣分享自己與貓咪一起生活的趣事，發(fā)布后所有系統(tǒng)用戶都可見，能夠評論與點贊。

每次進(jìn)入貓圈都進(jìn)行一次request請求，獲得所有的說說，通過view組件渲染；點擊說說下的愛心給說說點贊，此過程前端是通過request請求把說說的ID發(fā)給后臺，后臺進(jìn)行處理，頁面刷新，完成點贊；點擊說說下的評論按鈕，輸入要評論的話后點提交完成評論，此過程前端是通過request請求把評論人的ID、說說的ID、評論內(nèi)容發(fā)送給后臺，后臺進(jìn)行相應(yīng)處理后，刷新頁面，完成評論。點擊右上角的+號跳轉(zhuǎn)到發(fā)表說說界面，發(fā)表說說界面由頂部的評論欄、中部的+號（增加圖片按鈕）和發(fā)表按鈕組成。點擊+號可以從手機(jī)中選取圖片（wx.chooseImage（）），增加的圖片會在+號右邊顯示，圖片右上方會有一個叉號，點擊圖片會消失，這是一個自定義組件的功能。在上邊評論欄寫上要分享的話并進(jìn)行發(fā)表。

4.6 貓咪領(lǐng)養(yǎng)模塊

此模塊是解決流浪貓問題的主要模塊。團(tuán)隊的線下貓舍會對周邊的流浪貓進(jìn)行收養(yǎng)，管理員把所有線下貓舍的貓錄入數(shù)據(jù)庫，通過前端渲染出來。每個貓有唯一的標(biāo)識、不同的分類，用戶能在這對流浪貓進(jìn)行領(lǐng)養(yǎng)。

第一次進(jìn)入此界面時，系統(tǒng)通過request請求向后端獲取所有貓咪信息的一個列表，然后將貓咪信息列表和發(fā)起request請求時的系統(tǒng)時間保存在緩存中（wx. setStorageSync（"cates"， {time： Date. now（）， data： this.Cates}））。之后每次進(jìn)入該模塊，系統(tǒng)先調(diào)取本地緩存中的貓咪列表信息，通過貓咪列表保存的時間和當(dāng)前request請求的時間相減（設(shè)置如果時間差大于1小時數(shù)據(jù)便過期），如果數(shù)據(jù)過期，便重新向后臺請求新的數(shù)據(jù)再把數(shù)據(jù)與時間存入緩存，如果沒有過期，便取出本地緩存中的數(shù)據(jù)。這樣當(dāng)貓咪信息過多時能極大地增加系統(tǒng)運(yùn)行速度，提升用戶體驗。界面中通過scroll-view組件形成滾動條；點擊貓咪會進(jìn)入貓咪詳情界面（此部分與用品購買模塊功能相似）。

4.7 貓咪送養(yǎng)模塊

一些人可能會有養(yǎng)寵物的經(jīng)歷，如果出現(xiàn)了一些自己無能為力的情況，必須要對寵物進(jìn)行放養(yǎng)，那大家可能會很難過。但通過此模塊，大家可以把自己不能照顧的貓咪送給他人領(lǐng)養(yǎng)，能夠很好地解決這件事情。

需要填寫一些基本信息，再點擊確認(rèn)。在發(fā)送給后端之前，前端會用JS進(jìn)行一些簡單的驗證。后端又會進(jìn)行一次驗證，如果成功，后端把這只貓咪的信息錄入數(shù)據(jù)庫，返回送養(yǎng)成功的信息給前端，前端渲染在界面上。過后線下工作人員便會到相應(yīng)地點帶走貓咪。

4.8 為它治病模塊

在養(yǎng)貓咪的時候，總會遇到要打疫苗的時候，有時貓咪也會生病，但一些小的診所可能水平不夠，大的醫(yī)院又感覺沒必要。這時候，便能通過該模塊聯(lián)系醫(yī)生，向醫(yī)生請求幫助，醫(yī)生會給你一些更好的意見。

5 技術(shù)難點

5.1 回調(diào)地獄

在開發(fā)初期，遇到一個難點：回調(diào)地獄。說到回調(diào)地獄首先要先解釋一下什么是回調(diào)函數(shù)，當(dāng)一個函數(shù)作為參數(shù)傳入另一個參數(shù)中，但它不會立即執(zhí)行，只有當(dāng)滿足一定條件后該函數(shù)才執(zhí)行，這種函數(shù)就稱為回調(diào)函數(shù)。而回調(diào)函數(shù)嵌套回調(diào)函數(shù)的情況就叫作回調(diào)地獄。

微信小程序內(nèi)置接口wx.request（）是一個異步請求，JS不會等待wx.request執(zhí)行完畢，會直接往下繼續(xù)執(zhí)行代碼。所以如果想要獲取wx.request接口向后端請求的數(shù)據(jù)，就必須在它的回調(diào)函數(shù)里編碼。但一兩個異步函數(shù)的嵌套感覺還不是很亂，當(dāng)嵌套層數(shù)達(dá)到4個及以上，代碼的可讀性會出現(xiàn)極大問題。

但是使用promise對象解決回調(diào)地獄問題后，同步過程屏蔽了異步優(yōu)勢。為了解決這一問題，引入了es7 的async、await 語法，在函數(shù)前加上async，在re?quest前加上await，表明當(dāng)前函數(shù)是異步函數(shù)，不會阻塞線程導(dǎo)致后續(xù)代碼運(yùn)行停止。這樣解決了promise的一些小缺陷，在請求時，主線程也能一起執(zhí)行，使代碼更加簡潔，徹底解決了回調(diào)地獄的問題。

5.2 其他

“送它回家”微信小程序由微信開發(fā)者工具開發(fā)，由于小程序的大小被限制在2MB之內(nèi)，所以小程序本地不能保存太大的文件，系統(tǒng)界面中的圖標(biāo)是引用阿里云矢量圖標(biāo)庫里的圖標(biāo)樣式，圖標(biāo)樣式單獨(dú)形成一個樣式文件（iconfont.wxss），被全局樣式文件所引用（通過@import "./styles/iconfont.wxss" 實現(xiàn)）。

系統(tǒng)中前端與后端間的數(shù)據(jù)傳輸采用了PUT和POST兩種方式，當(dāng)不是重要數(shù)據(jù)時使用PUT方法，當(dāng)敏感數(shù)據(jù)的傳輸時便采用POST方式傳輸；前后端圖片的傳輸都以Base64格式進(jìn)行，前后端在發(fā)送圖片之前都要先轉(zhuǎn)換為base64格式才能進(jìn)行傳輸[10]（"data：image/png;base64， " +wx. getFileSystemManager（）.readFileSync（xxx， "base64"））。

6 結(jié)束語

針對當(dāng)前社會的流浪貓問題，項目團(tuán)隊認(rèn)真調(diào)研分析研究，實現(xiàn)了貓用品購買、送/領(lǐng)養(yǎng)貓咪、了解貓咪的習(xí)性學(xué)習(xí)，為它治病、貓圈等功能，搭建了一個線上線下一體化小程序流浪貓撫養(yǎng)救助平臺。

平臺很好地解決了一般系統(tǒng)異步請求中出現(xiàn)的回調(diào)地獄問題，并通過不同數(shù)據(jù)分端口傳輸，確保了系統(tǒng)數(shù)據(jù)的安全性。通過線上多次實測，平臺穩(wěn)定性與實用價值收到了用戶認(rèn)可。