基于微信小程序的食堂點(diǎn)餐系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

蔣智慧 童蓮

摘? 要：微信小程序的出現(xiàn)結(jié)合了手機(jī)支付，更是方便了日常生活，本系統(tǒng)主要為了方便高校學(xué)生使用微信小程序進(jìn)行自助食堂點(diǎn)餐。我們可以發(fā)現(xiàn)高校學(xué)生可以說是推動(dòng)互聯(lián)網(wǎng)行業(yè)發(fā)展的必不可少的一類人群，他們對(duì)于新興事物的接受能力和使用能力都是很強(qiáng)的，點(diǎn)餐小程序的出現(xiàn)可以解決一系列的問題。

關(guān)鍵詞：微信小程序;點(diǎn)餐系統(tǒng);自助食堂

中圖分類號(hào)：TP391.3? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2019）24-0014-03

Abstract：The emergence of WeChat applet combined with mobile payment is more convenient for daily life. This system is mainly for the convenience of college students to use WeChat applet to order food in the cafeteria. We can find that college students can be said to be an indispensable group of people to promote the development of the internet industry. Their acceptance and use of new and new things are very strong. The emergence of ordering small programs can solve a series of problems.

Keywords：WeChat applet;ordering system;cafeteria

1? 項(xiàng)目背景

隨著互聯(lián)網(wǎng)時(shí)代的飛速發(fā)展，在今天，手機(jī)支付早已隨處可見。但是更多的手機(jī)支付只是取代了傳統(tǒng)的現(xiàn)金支付，并未實(shí)現(xiàn)用戶自助下單、自主完成一體化。而本系統(tǒng)就是為了研究食堂點(diǎn)餐時(shí)能夠?qū)崿F(xiàn)手機(jī)自助下單并完成手機(jī)支付的過程，從而更深層次地實(shí)現(xiàn)手機(jī)點(diǎn)餐、支付一體化。

隨著網(wǎng)絡(luò)時(shí)代的高速發(fā)展，生活處處離不開手機(jī)，人們的衣食住行，方方面面都會(huì)與手機(jī)有所聯(lián)系，而高速發(fā)展的時(shí)代，人們也更享受快捷的生活方式。傳統(tǒng)的點(diǎn)單購(gòu)物，排隊(duì)是一個(gè)漫長(zhǎng)的過程，浪費(fèi)了時(shí)間，消耗了精力。點(diǎn)單小程序的出現(xiàn)大大減少了排隊(duì)等待的時(shí)間。目前國(guó)內(nèi)市面上的點(diǎn)餐小程序都可以在飯店內(nèi)掃碼進(jìn)入點(diǎn)餐頁(yè)面，自助加入購(gòu)物車，然后通過手機(jī)支付完成下單。而本系統(tǒng)研究的小程序，不僅僅可以做到店內(nèi)即時(shí)下單、取餐，還可以提前預(yù)約下單，自主規(guī)定取餐時(shí)間，優(yōu)化用戶體驗(yàn)，極大地減少了顧客排隊(duì)等待的時(shí)間。

小程序是一個(gè)相對(duì)來說操作簡(jiǎn)單、占用空間較少的輕應(yīng)用，用戶上手也會(huì)特別快，沒有復(fù)雜的操作。本系統(tǒng)研究的價(jià)值在于有效提升手機(jī)點(diǎn)餐、支付的一體化性能，實(shí)現(xiàn)自主下單、自主支付的功能，方便人們的日常生活，在快節(jié)奏的當(dāng)今社會(huì)，是提高人們的生活質(zhì)量和效率的良好保障。

本系統(tǒng)主要的研究?jī)?nèi)容是針對(duì)食堂點(diǎn)餐做的一個(gè)小程序，可以在系統(tǒng)中實(shí)現(xiàn)菜品顯示、自助點(diǎn)餐下單、手機(jī)支付、新品推薦的功能。食堂商戶可以將菜品實(shí)時(shí)地通過本系統(tǒng)展示出來，當(dāng)季新品可以在首頁(yè)進(jìn)行推廣與宣傳。并且可以顯示優(yōu)惠活動(dòng)，比如說滿減活動(dòng)或者是送券活動(dòng)。

2? 系統(tǒng)分析與總體技術(shù)方案

本系統(tǒng)的功能設(shè)計(jì)主要分為四個(gè)模塊，分別為用戶模塊、門店模塊、購(gòu)物車模塊和訂單模塊。具體每個(gè)功能的模塊設(shè)計(jì)，如圖1所示。

2.1? 用戶模塊

用戶模塊主要是用來展示用戶的一些基礎(chǔ)信息以及綁定手機(jī)號(hào)的操作，如果有活動(dòng)推出的話，會(huì)在用戶第一次登錄的時(shí)候進(jìn)行判斷，判斷用戶是否符合參加活動(dòng)的條件，并且查看是否已經(jīng)領(lǐng)過活動(dòng)的卡券。

2.2? 門店模塊

門店模塊主要是展示所有門店的信息，用戶先選擇門店再進(jìn)行點(diǎn)餐下單，這一模塊的功能主要是進(jìn)行了門店位置的篩選。

2.3? 購(gòu)物車模塊

購(gòu)物車模塊主要是對(duì)所有菜品進(jìn)行展示，以及對(duì)單個(gè)商品加減購(gòu)物車的操作，選擇完成后通過結(jié)算選項(xiàng)跳轉(zhuǎn)訂單頁(yè)面。購(gòu)物車模塊主要難點(diǎn)在于左右聯(lián)動(dòng)的實(shí)現(xiàn)以及頁(yè)面樣式的布局設(shè)計(jì)。

2.4? 訂單模塊

訂單模塊會(huì)展示兩種類型的訂單詳情，一種是即時(shí)訂單類型，另一種是預(yù)約訂單類型。主要技術(shù)難點(diǎn)在于不同用戶完成下單后，會(huì)把數(shù)據(jù)發(fā)送到后臺(tái)，后臺(tái)會(huì)根據(jù)下單支付的完成時(shí)間來進(jìn)行排序，然后生成取餐號(hào)，每天每單的取餐號(hào)都是獨(dú)一無(wú)二的。

2.5? 總體技術(shù)方案

微信小程序開發(fā)是一種單頁(yè)面的模塊開發(fā)，針對(duì)這種特性，對(duì)于每層的功能，可以先單獨(dú)開發(fā)每個(gè)頁(yè)面，功能實(shí)現(xiàn)也只針對(duì)當(dāng)前頁(yè)面，等基礎(chǔ)頁(yè)面開發(fā)完成之后，再根據(jù)流程串起所有頁(yè)面。一些需要從上個(gè)頁(yè)面獲取的參數(shù)，可以通過路由傳參實(shí)現(xiàn)。

首頁(yè)登錄的時(shí)候其實(shí)就獲取到了用戶的信息，將信息存儲(chǔ)在了本地，在個(gè)人中心頁(yè)面的時(shí)候其實(shí)是從本地讀取存儲(chǔ)的信息。首頁(yè)會(huì)彈出領(lǐng)券的活動(dòng)信息，會(huì)對(duì)用戶登錄進(jìn)行判斷，即判斷其是否是在活動(dòng)期間首次登錄，如果是首次登錄的話，會(huì)在彈出活動(dòng)信息彈窗的時(shí)候?qū)⒖ㄈ苯臃胚M(jìn)用戶個(gè)人卡券里。而如果不是首次登錄的話，只會(huì)呈現(xiàn)活動(dòng)的宣傳，并不會(huì)有卡券放入卡包的操作。

門店展示頁(yè)面，是通過地圖組件獲取當(dāng)前的地理位置，并展示出距離當(dāng)前位置最近的門店信息，以及可以選擇最近的門店進(jìn)行下單購(gòu)買。也可以搜索你想去的店面，然后點(diǎn)擊選擇下單，進(jìn)入購(gòu)物車頁(yè)面。

商品展示以及購(gòu)物車功能頁(yè)面，是需要獲取門店信息的，因?yàn)椴煌拈T店菜品的信息也是不同的。菜品的展示做了一個(gè)左右聯(lián)動(dòng)的效果。左側(cè)邊欄是對(duì)所有菜品的幾大分類信息，右側(cè)展示的就是對(duì)應(yīng)的分類所展示的子菜單。左側(cè)的分類會(huì)跟隨子菜單的上下滾動(dòng)而改變，而點(diǎn)擊左側(cè)菜單也會(huì)展示對(duì)應(yīng)的子菜單。每個(gè)菜品的加減操作，就是一個(gè)下單選擇的過程，用戶可以根據(jù)自己的愛好增加菜品，底部會(huì)有當(dāng)前頁(yè)面所有操作的商品，也就是用戶選擇下單的所有商品以及對(duì)應(yīng)的數(shù)量展示，如果有選錯(cuò)的話，也是可以直接刪除的，也可以選擇將購(gòu)物車全部清空，重新選擇菜品下單。

下單完成后調(diào)至去結(jié)算，實(shí)則是調(diào)用了微信的支付接口，支付下單的菜品。支付成功之后，會(huì)出現(xiàn)一個(gè)訂單詳情頁(yè)，會(huì)展示出你所選擇的菜品，以及訂單金額，還會(huì)出現(xiàn)一個(gè)取餐號(hào)。這個(gè)其實(shí)就是一個(gè)訂單頁(yè)面，因?yàn)橛脩艨梢赃x擇訂單的取餐時(shí)間，所以訂單分為即時(shí)訂單和預(yù)約訂單兩種。

最后一層是用戶的個(gè)人中心頁(yè)面，這個(gè)頁(yè)面只展示用戶的頭像和昵稱信息，這個(gè)頁(yè)面的唯一操作即綁定手機(jī)號(hào)碼，綁定手機(jī)號(hào)分為兩種情況。一鍵綁定，即如果用戶選擇用綁定微信號(hào)的手機(jī)號(hào)，可以通過授權(quán)一鍵綁定此手機(jī)號(hào)，如果不選擇這個(gè)手機(jī)號(hào)，可以通過手動(dòng)綁定，輸入手機(jī)號(hào)碼，然后獲取驗(yàn)證碼，完成綁定操作。

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

3.1? 登錄首頁(yè)頁(yè)面設(shè)計(jì)

首頁(yè)頁(yè)面是用戶通過微信授權(quán)登錄進(jìn)來的頁(yè)面，主要是展示了一個(gè)輪播圖和一個(gè)門店進(jìn)入的入口按鈕，如圖2所示是登錄首頁(yè)頁(yè)面。

本頁(yè)面展示了商品的輪播圖，表現(xiàn)出本系統(tǒng)的設(shè)計(jì)目的，即可以在現(xiàn)場(chǎng)免排隊(duì)，提前預(yù)約下單，直接到店取。點(diǎn)擊自助下單跳轉(zhuǎn)到門店列表展示頁(yè)。

在用戶首次登錄時(shí)，會(huì)有一些活動(dòng)頁(yè)面的介紹，大都是送券活動(dòng)，會(huì)在用戶一進(jìn)入的時(shí)候彈出一個(gè)領(lǐng)券的彈窗，提醒用戶領(lǐng)券。本頁(yè)面展示的是一些活動(dòng)推廣滿減活動(dòng)或者領(lǐng)券活動(dòng)，這些活動(dòng)最后都會(huì)在購(gòu)物車頁(yè)面結(jié)算的時(shí)候，提示優(yōu)惠信息。所以這些活動(dòng)會(huì)放在首頁(yè)進(jìn)行展示。

3.2? 門店展示頁(yè)面設(shè)計(jì)

從首頁(yè)的自助下單入口進(jìn)來是所有門店的列表展示，可以選擇對(duì)應(yīng)的門店進(jìn)行點(diǎn)餐。如圖3所示為所有門店信息展示頁(yè)面。

這里是對(duì)所有門店列表的展示，展示的順序是按照距離用戶的當(dāng)前位置的遠(yuǎn)近距離來顯示的。然后對(duì)于選擇的門店，用戶可以選擇是現(xiàn)在就取餐還是預(yù)約一個(gè)方便的時(shí)間去取餐，點(diǎn)擊選擇跳轉(zhuǎn)到菜單展示購(gòu)物車頁(yè)面。

3.3? 個(gè)人中心頁(yè)面設(shè)計(jì)

點(diǎn)擊底部tab頁(yè)我的按鈕進(jìn)入用戶個(gè)人中心頁(yè)面，該頁(yè)面獲取了用戶的頭像和昵稱信息，以及可以進(jìn)行綁定手機(jī)號(hào)的操作。如圖4所示。

3.4? 購(gòu)物車頁(yè)面設(shè)計(jì)

菜品展示分為左邊展示分類信息，右側(cè)根據(jù)具體的分類展示具體的菜品，如圖5所示為菜品展示頁(yè)面。

這個(gè)頁(yè)面是進(jìn)行一個(gè)菜品下單時(shí)展示的樣式，底部的樣式是會(huì)發(fā)生改變的，購(gòu)物車圖標(biāo)上對(duì)應(yīng)的數(shù)字對(duì)應(yīng)的是下單的菜品數(shù)量。

這個(gè)頁(yè)面是點(diǎn)擊購(gòu)物車圖標(biāo)出現(xiàn)的下單菜品的詳情，當(dāng)前選擇了幾樣商品，數(shù)量是什么，都會(huì)展示在這里，并且在這里進(jìn)行菜品的加減和在購(gòu)物車中選擇的效果是一樣的。這里還有一個(gè)清空購(gòu)物車的功能，是將當(dāng)前所選的內(nèi)容全部清空，點(diǎn)擊刪除圖標(biāo)之后，該頁(yè)面的樣式就會(huì)變成圖2所示的界面。

4? 結(jié)? 論

該系統(tǒng)實(shí)現(xiàn)了菜單展示的全部功能，包括對(duì)應(yīng)菜單下單實(shí)現(xiàn)購(gòu)物車的功能，下單完成即時(shí)推送訂單詳情，用戶個(gè)人信息的完善也是該系統(tǒng)必不可少的一個(gè)功能。該系統(tǒng)的實(shí)現(xiàn)，對(duì)于用戶來說，能減少等待時(shí)間，對(duì)于餐廳工作人員來說，則能夠提高工作效率，給人們的日常生活帶來了極大的便捷。

參考文獻(xiàn)：

[1] 薛晶晶，王彥明.基于Spring Boot技術(shù)微信平臺(tái)的校園食堂智能點(diǎn)餐系統(tǒng) [J].電子世界，2018（14）：193-194.

[2] 張棋，盛燕燕.基于物聯(lián)網(wǎng)技術(shù)的食堂管理信息化研究 [J].北方經(jīng)貿(mào)，2014（4）：150-151

[3] 沈沛雨，索朝舉，徐寧，等.基于微信小程序的遠(yuǎn)程空調(diào)遙控系統(tǒng) [J].現(xiàn)代信息科技，2019，3（14）：31-33.

[4] 任碩果.智慧食堂管理系統(tǒng)分析與設(shè)計(jì) [J].數(shù)字技術(shù)與應(yīng)用，2016（6）：177.

作者簡(jiǎn)介：蔣智慧（1981-），男，漢族，江蘇揚(yáng)州人，項(xiàng)目經(jīng)理，工程師，學(xué)士學(xué)位，研究方向：軟件工程。