基于微信小程序“送它回家”的設計與實現

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

關鍵詞：微信小程序；C/S；回調地獄

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

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

1 前言

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

2 相關技術介紹

系統采用C/S（Client/Server）架構，這種架構更便于以后的更新與維護，也是目前主流的設計模式之一。C/S架構安全性高、交互性強、網絡通信量低、響應速度快。分為小程序客戶端、后臺服務端和數據庫端的開發[6-7]。

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

服務器后端是采用Java語言用IntelliJ IDEA工具進行編寫。Java語言是一種跨平臺應用程序的面向對象的程序設計語言，其使用廣泛，簡單。服務器采用了目前市面上較流行的Spring框架，該框架遵守低耦合、高內聚原則，增加了系統的可讀性和可維護性，降低了對環境的要求，無須配置文件，使得開發更加簡化，方便和加速了開發人員的代碼編寫。

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

3 系統設計分析

3.1 功能設計

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

3.2 數據庫設計

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

4 系統實現

4.1 登錄與注冊模塊

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

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

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

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

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

4.3 用品購買模塊

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

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

4.4 消息推送模塊

針對用戶群體對養貓知識的興趣，系統開辟消息推送模塊，推送一些貓咪冷知識和生活習慣。消息推送顯示在首頁的底部，每當用戶進入系統時，便能看到系統發布的每日小貼士，方便用戶了解貓咪的相關消息。

4.5 貓圈模塊

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

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

4.6 貓咪領養模塊

此模塊是解決流浪貓問題的主要模塊。團隊的線下貓舍會對周邊的流浪貓進行收養，管理員把所有線下貓舍的貓錄入數據庫，通過前端渲染出來。每個貓有唯一的標識、不同的分類，用戶能在這對流浪貓進行領養。

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

4.7 貓咪送養模塊

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

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

4.8 為它治病模塊

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

5 技術難點

5.1 回調地獄

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

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

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

5.2 其他

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

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

6 結束語

針對當前社會的流浪貓問題，項目團隊認真調研分析研究，實現了貓用品購買、送/領養貓咪、了解貓咪的習性學習，為它治病、貓圈等功能，搭建了一個線上線下一體化小程序流浪貓撫養救助平臺。

平臺很好地解決了一般系統異步請求中出現的回調地獄問題，并通過不同數據分端口傳輸，確保了系統數據的安全性。通過線上多次實測，平臺穩定性與實用價值收到了用戶認可。