基于微信小程序點餐系統(tǒng)的設(shè)計與實現(xiàn)

廣東東軟學院本科畢業(yè)設(shè)計i4.3系統(tǒng)設(shè)計目標FastEating系統(tǒng)是基于微信平臺開發(fā)的一款外賣小程序，它的出現(xiàn)是為了避免了柜面上繁瑣的點餐、付款和排隊環(huán)節(jié)，使消費者可以更直觀、便捷地進行點餐和付款，相比傳統(tǒng)的就餐模式更加省時省力。4.4系統(tǒng)功能概要設(shè)計FastEating項目是用戶通過自己微信賬號授權(quán)登錄小程序，通過瀏覽頁面顯示的商品，對感興趣的商品加入購物車后進行商品結(jié)算從而完成前臺界面下單的過程整個系統(tǒng)的設(shè)計思維導圖如下：圖4-1FastEating小程序設(shè)計圖4.4.1系統(tǒng)模塊概述看完了整個系統(tǒng)的流程圖，想必這個網(wǎng)站的框架大致就明白了。下面是介紹一下整個系統(tǒng)的具體設(shè)計：系統(tǒng)分為菜單、訂單、卡包、聯(lián)系商家四大核心模塊，各大模塊都對應著線下實體店購買食品的操作，具體設(shè)計情況如下：菜單模塊：設(shè)有菜單分類，每個菜品歸屬于某個特定的商品種類；訂單模塊：獲取用戶選擇的菜品及數(shù)量；用戶模塊：管理用戶賬號，設(shè)置默認的地址、聯(lián)系電話等信息；卡包模塊：管理后臺管理員賬號、個人信息；本系統(tǒng)通過用戶進行微信授權(quán)登錄系統(tǒng)->選擇自己喜歡的商品->確認信息，下單->商家收到數(shù)據(jù)后進行配送。通過這一系列的簡單操作，完成了線上購買食物的操作，給用戶和商戶都產(chǎn)生了不可估計的效益。4.4.2系統(tǒng)的架構(gòu)設(shè)計FastEating系統(tǒng)選用基于有贊商城的開源小程序框架VantWeapp。VantWeapp是Vant的小程序版本，Vant和VantWeapp它們是基于相同的UI風格，同一套視覺規(guī)范，提供的一致的API接口能讓開發(fā)者基于框架快速搭建屬于自己的一類商城類的小程序應用。具體架構(gòu)看圖：編輯器顯示的架構(gòu)圖：圖4-5 小程序在開發(fā)工具里的架構(gòu)情況 上方的圖左側(cè)欄是屬于整個項目的目錄結(jié)構(gòu)，每個頁面對應一個文件夾，每個頁面有4部分數(shù)據(jù)組成。其中wxml文件是頁面結(jié)構(gòu)文件，用來搭建頁面的框架；json文件是頁面的數(shù)據(jù)文件，用來存放頁面顯示的數(shù)據(jù)；wxss文件是頁面的樣式文件，用來渲染頁面的界面顯示；js文件是用來獲取用戶的交互從而操作json文件中的數(shù)據(jù)。Cloudfunction文件夾是使用微信的云函數(shù)而引入的一個文件。思維導圖整理出的架構(gòu)圖：圖4-6 項目文件架構(gòu)圖（思維導圖）Npm模塊是通過開發(fā)者工具中的構(gòu)建npm,使用npm模塊選項即可引入的組件。它是用來管理第三方包軟件的工具；Pages文件夾里面的每一個文件夾對應小程序的每一個頁面，每個文件夾里面又都包含著4個頁面構(gòu)建的js、wxss、wxml、json文件；通過配置json文件來引入需要的組件，引入之后可以直接在wxml里使用相應的組件；使用vant-weapp框架之后，主要的功能就是如何設(shè)置頁面風格樣式，組件是有自帶樣式的，但是我們可以通過自定義樣式來覆蓋掉原始樣式。4.5核心功能模塊介紹4.5.1菜單列表模塊菜單列表模塊包含小程序授權(quán)后進入的首頁就是菜單列表信息頁，列表上方是菜品分類的導航欄，左右滑動來切換分類類別。列表顯示菜品名、單價、菜品原料及套餐信息。有兩個按鈕，一個新增商品，多次點擊數(shù)量增加；一個是減少商品，數(shù)量減少到0將刪除選中的商品。4.5.2提交訂單模塊提交訂單模塊主要是顧客選擇的商品匯總頁，該模塊用來顯示顧客購買的商品信息列表，可以修改外賣配送地、配送時間及支付方式，是否需要餐具，及優(yōu)惠券的使用等，甚至可以給商家備注一些額外的信息。4.5.3訂單信息模塊針對前臺用戶下單的商品的一個訂單匯總列表，該模塊還針對訂單信息增加了導出匯總數(shù)據(jù)功能，可以支持導出Excel文件和CSV文件，CSV文件兼容性更好，能彌補Excel文件導出有可能亂碼的情況。4.5.4訂單模塊 訂單模塊是顯示用戶下單的歷史數(shù)據(jù)。訂單是否支付成功，何時下的單以及配送的信息等。4.5.5卡包模塊卡包模塊主要是顯示用戶擁有的優(yōu)惠券。4.5.6聯(lián)系商家模塊聯(lián)系商家模塊主要是針對一些特殊情況，需要聯(lián)系商戶，顯示的一些商戶地址、聯(lián)系電話等信息。第5章系統(tǒng)的設(shè)計與實現(xiàn)5.1網(wǎng)站界面介紹FastEating系統(tǒng)的界面都是本著簡潔大方的風格進行設(shè)計的。前端界面主打黑白色調(diào)，給人以干凈、大方的感受，后端主要走黑白灰的簡潔工作風路線。前后臺在色彩上的選擇都是以近似色的色階進行選取，不會給人太突兀的感覺，整個系統(tǒng)使用下來不會有太大的視覺疲勞的感受[8]。該系統(tǒng)已經(jīng)設(shè)計完畢，所有的功能都能正常使用，下面用一些系統(tǒng)的界面截圖進行介紹。5.1.1菜單列表頁 圖5-1菜單列表頁菜單列表頁顯示商戶上架的菜品信息，列出有菜品制作的材料、單價及加入購物車按鈕。5.1.2下單頁圖5-2下單頁下單頁，顯示用戶挑選下單的商品列表，商品對應的總價、商品材料及可以選擇送貨地址、備注一些口味相關(guān)的信息及是否需要餐具等信息。5.1.3訂單歷史頁圖5-1菜單列表頁圖5-3訂單歷史頁訂單歷史頁顯示用戶下單過得記錄。5.1.4卡包詳情頁圖5-4卡包頁卡包頁顯示用戶所擁有的優(yōu)惠券信息。5.1.5聯(lián)系商家頁圖5-5聯(lián)系商家頁該頁面的設(shè)計主要是為了顧客能快速找到商戶的信息，有問題能及時與商戶進行溝通。第6章系統(tǒng)測試6.1測試目的一個系統(tǒng)要正式發(fā)布上線，首先得經(jīng)過一系列的測試，才能給用戶使用，測試的目的必須確保系統(tǒng)的整體功能正常使用；確保整個的系統(tǒng)流程能走通同時也能達到期望的結(jié)果；作為一個商城網(wǎng)站還得確保系統(tǒng)安全性。通過測試，不斷完善系統(tǒng)，在功能都實現(xiàn)的基礎(chǔ)上，不斷提升用戶體驗。6.2測試方法 軟件測試是人為的使用或通過腳本控制的手段來執(zhí)行或測量某個程序的過程，它是用來檢測軟件是否滿足設(shè)計的需求目標或檢測程序的反應與預期設(shè)想的結(jié)果與現(xiàn)實中具體使用的結(jié)果之間的差別。

根據(jù)分類的不同，測試方法可以分為很多種，每種方法的分類也各異，從是否關(guān)心軟件內(nèi)部結(jié)構(gòu)和具體實現(xiàn)的角度來劃分的話，測試方法可以分為白盒測試和黑盒測試。白盒測試方法主要通過檢査代碼法、分析靜態(tài)結(jié)構(gòu)法、靜態(tài)質(zhì)量度量法、邏輯覆蓋法、基本路徑測試法、域測試、符號測試、路徑覆蓋和程序變異，黑盒測試方法主要包括等價類劃分法、邊界值分析法、錯誤推測法、因果圖法、判定表驅(qū)動法、正交試驗設(shè)計法、功能圖法、場景法等。[9]6.3測試原則木桶原理：我們在測試軟件應用的過程中，就算遇到再小的問題，也不可得過且過，應該正視每一個問題，不然系統(tǒng)有可能會因這個小問題而產(chǎn)生不可估量的后果。Bug的80-20原則：一般情況下，在分析、設(shè)計、實現(xiàn)系統(tǒng)的過程中能夠發(fā)現(xiàn)和避免80%的Bug，而專門的系統(tǒng)測試過程中又能找出其余Bug中的80%，最后的5%的Bug可能只有在用戶的大范圍、長時間使用后才會顯現(xiàn)出來，因為測試只能夠保證盡可能多地發(fā)現(xiàn)錯誤，無法保證能夠發(fā)現(xiàn)所有的錯誤。[10]6.4功能測試 由于微信開發(fā)者工具能模擬我們的真機進行調(diào)試，所以我是通過使用微信開發(fā)者工具來對我們開發(fā)的微信小程序進行調(diào)試的。甚至還可以通過刷描小程序生成的二維碼直接在自己的手機上體驗小程序。圖6-1 功能測試效果圖-1通過微信開發(fā)者工具點擊真機調(diào)試，生成一個二維碼，掃碼后手機就能訪問小程序，訪問的請求接口會在開發(fā)者工具真機調(diào)試頁面反饋接口信息。圖6-2 功能測試效果圖-2手機操作頁面也會有相應的數(shù)據(jù)，可以設(shè)置打開調(diào)試面板，設(shè)置之后也可以直接在手機頁面看到請求接口的數(shù)據(jù)。圖6-3 功能測試效果圖-3圖6-4 功能測試效果圖-4

第7章總結(jié)與反思經(jīng)過一段時間的開發(fā)這個系統(tǒng)，該系統(tǒng)已經(jīng)基本達到原定的目標，但是總體上還是存在很多問題需要改善的，比如整個系統(tǒng)的UI界面設(shè)計上還是缺少一些元素，因為自己不會設(shè)計需要的一些小icon，使得最終的沒有達到自己想要的效果；其次數(shù)據(jù)庫使用的是微信云數(shù)據(jù)庫，數(shù)據(jù)庫管理上面跟獨立的數(shù)據(jù)庫管理系統(tǒng)還是存在差別的；最后還有的模塊的流程也還可以更順暢一些，但是因為能力有限，只能盡量去不斷完善這個系統(tǒng)。通過這段時間的學習，我收益頗多。在項目開發(fā)之前，設(shè)計思維導圖的過程中，感覺整個系統(tǒng)的最終完成不會耗時太長，沒想到后面的功能會比一開始的要復雜一些，整個網(wǎng)站的流程設(shè)計也是經(jīng)過很多次比較大的調(diào)整。在這過程中，我也深刻的體會到一個靠譜的流程設(shè)計的重要性，因為后期返工會更耗時。前端的界面也更換過3種風格，最后確定了這一套。還有就是微信小程序開發(fā)的認識和具體的運用，發(fā)現(xiàn)小程序雖然沒有網(wǎng)站龐大，但是要想制作出一個安全受歡迎的小程序還是有很多細致的地方需要加強的，該小程序的后臺是使用云開發(fā)進行管理，使用者很受限制。再者就是對于UI設(shè)計方面，雖然不是專業(yè)上的，但是基本的界面設(shè)計的知識與審美我還是很欠缺的，之后應該要去學一些美工常識，多了解認識頁面的構(gòu)造。FastEating系統(tǒng)雖然大致流程走通了，想要的基本功能也都實現(xiàn)了，但是我之后還是會通過學習相關(guān)知識來不斷改善它，爭取能讓使用的用戶體驗感更好。參考文獻邱世華.Linux操作系統(tǒng)之奧秘.北京：電子工業(yè)出版社，2008.郭兵,熊光澤,陳宇.嵌入式應用軟件開發(fā)環(huán)境的構(gòu)造[J].計算機應用,2000,020(007):7.JavaScript資源

．Mozilla官網(wǎng)．2018-6-20[引用日期2020-04-12]社大鵬《RedhatLinux因特網(wǎng)服務器》中國水利水電出版社2004.2.岳浩《Linux操作系統(tǒng)教程》機械工業(yè)出版社2005.4.陳會安.JavaScript基礎(chǔ)與實例教程[M].北京：中國電力出版社，2007.鄭人杰，馬素霞，麻志毅著.軟件工程.北京：人民郵電出版社,2009.11.ADocumentEngineonaDBCluster.TorstenGrabs