基于微信小程序的二維碼點餐系統(tǒng)設(shè)計研究

范國婷 任樂琦 周靈輝

摘 要：隨著人們對服務(wù)便利性的要求越來越高，微信小程序發(fā)展的火爆，以軟件工程為指導(dǎo)，采用微信小程序的MINA框架，設(shè)計了基于微信小程序的二維碼點餐系統(tǒng).對系統(tǒng)從買家和賣家兩方面進行了功能分析，實現(xiàn)了二維碼點餐、商家菜品管理和訂單管理等功能.該系統(tǒng)由于是基于微信小程序開發(fā)的，大大釋放了人們手機的內(nèi)存，提高了餐館點餐的效率，便利了人們的生活.

關(guān)鍵詞：微信小程序;二維碼;點餐系統(tǒng)

中圖分類號：TP391.4 ?文獻標識碼：A ?文章編號：1673-260X（2019）12-0059-04

0 引言

微信小程序發(fā)布至今，越來越多的應(yīng)用都開發(fā)了各自微信小程序版本.這不僅由于微信的客戶群眾多，還因為微信小程序本身“微、小、輕”，不需要下載安裝APP即可使用，這種便捷很大程度上贏得了用戶的青睞.此外，微信小程序的MINA框架能大大提高程序開發(fā)效率，使得開發(fā)者集中精力去進行程序的功能實現(xiàn)，能在短時間內(nèi)就開發(fā)出功能完善的程序.隨著互聯(lián)網(wǎng)應(yīng)用的普及，人們越來越習(xí)慣信息化操作的便利服務(wù)，而傳統(tǒng)的人工點餐不僅降低了人們的就餐體驗，還容易出錯.點餐系統(tǒng)在節(jié)約人力資源的同時，還能大大降低點餐的錯誤率.而利用微信小程序?qū)崿F(xiàn)的二維碼點餐系統(tǒng)，相對于傳統(tǒng)的點餐，更加便利和安全，能給用戶更優(yōu)質(zhì)的就餐體驗.本文以軟件工程理論為指導(dǎo)，利用MINA框架，結(jié)合JavaScript，實現(xiàn)了一個基于二維碼技術(shù)的點餐系統(tǒng).

1 相關(guān)技術(shù)

文中用到的一些技術(shù)介紹如下.

1.2 二維碼技術(shù)

二維碼是由二維平面上的許多明暗相間的矩形方陣按照特定的規(guī)律組成的幾何圖形.而這些數(shù)據(jù)能根據(jù)特定的編碼標準解析成二進制信息便于計算機理解.APP的掃一掃功能掃描二維碼，對二維碼進行圖像采集，再由專門的算法對二維碼的內(nèi)容進行解碼，最后跳轉(zhuǎn)進入系統(tǒng)界面.現(xiàn)今二維碼主要是以行排式和矩陣式進行信息存放，本系統(tǒng)采用的是具有代表性的矩陣式二維碼：QR碼.

QR碼（Quick Response Code）是由正方形模塊構(gòu)成的大正方形陣列，包含功能圖形和編碼區(qū)域，它對每個區(qū)域都有嚴格的定義.尋像圖形、定位圖形、分隔符和校正圖形構(gòu)成了QR碼的功能圖形，用來進行符號定位和特征識別.而編碼區(qū)域則是用來進行數(shù)據(jù)編碼.

QR碼的左上角、右上角和左下角均為位置查找圖形，它們構(gòu)成了尋像圖形，標識了QR碼的具體位置.定位圖形則分別位于第六行和第六列，兩個尋像模塊之間;幫助判斷和計算模塊間隔.分隔符是位于尋像圖形與編碼模塊之間的寬度為1個單位的白色區(qū)域，便于查找QR碼.校正圖形是由三個正方形嵌套構(gòu)成，黑色正方形外套33白色正方形，最后再套一個55的黑色正方形，它對每行二維碼信息進行分割，幫助判定圖像的失真程度.

1.2 MINA框架

MINA框架分為兩部分：邏輯層（App Service）和視圖層（View），并提供了自己的視圖層描述語言WXML和WXSS以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者專注于數(shù)據(jù)與邏輯上的頁面邏輯編譯和前端的實現(xiàn).

MINA框架的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，可以讓數(shù)據(jù)與視圖非常簡單地保持同步，當邏輯層的數(shù)據(jù)被修改時，視圖層就會做相應(yīng)的更新.

在視圖層，WXML是MINA框架設(shè)計的一套標簽語言，類似于HTML，它結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu).

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

2.1 系統(tǒng)流程設(shè)計

基于微信小程序的二維碼點餐系統(tǒng)除了通過MINA框架使用微信客戶端提供的各種基礎(chǔ)功能，對上層提供JavaScript API外，還采用了Spring Boot框架實現(xiàn)微服務(wù)，建造獨立的微服務(wù)功能單元，實現(xiàn)對不同的模塊進行不同的管理操作.顧客可以掃描二維碼訪問菜品列表、添加菜品至購物車、查看購物車、下單、加單、查看自己的訂單信息、取消訂單，結(jié)賬等.餐館可以對菜品進行管理，可以給菜品分類，還可以管理訂單、查詢訂單、取消訂單等.

2.2 系統(tǒng)功能設(shè)計

系統(tǒng)中的用戶角色可以分為兩大類：顧客和餐館，面向顧客的功能模塊主要包括掃碼選桌、選菜下單、訂單支付和會員中心.面向餐館的功能模塊主要有菜品管理、訂單管理、桌號管理和系統(tǒng)設(shè)置.二維碼點餐系統(tǒng)功能模塊結(jié)構(gòu)圖如圖3所示.

2.2.1 菜品管理

菜品管理模塊提供電子菜單功能，餐館通過該模塊對菜品進行管理.本模塊主要功能包括菜品類別管理，添加菜品信息，更改菜品信息，刪除菜品以及查找菜品.

（1）菜品類別管理：為方便顧客根據(jù)菜品類別選擇菜品，菜品類別管理模塊使得餐館能對自家的菜品進行分類，后期配上推薦算法還可以向顧客提供個性化的菜單.在類別管理模塊對菜品總的類別進行管理，可添加修改和刪除某一類別.在對菜品分類時，可以對已經(jīng)上架的菜品進行分類，同一菜品可以放在不同類別下，但某一類別下必須要有三種不同菜品以上才可以分為一類.

（2）添加菜品：餐館可以向菜單列表里添加新的菜品，設(shè)置菜品基本信息，這些基本信息包括菜品名、菜品簡介和菜品圖片，同時設(shè)置菜品價格和口味選項，另外設(shè)置該菜品的數(shù)量.

（3）更改菜品信息：更改菜品基本信息，更換菜品圖片，對菜品的價格進行調(diào)整，對菜品口味進行修改，對限量進行調(diào)整.當菜品當天售罄時，菜品可售數(shù)量邊為0，菜品狀態(tài)即為已售罄狀態(tài).

（4）刪除菜品：對某些不再提供的菜品執(zhí)行刪除操作，菜品即被下架.

（5）查找菜品：對菜單列表中已經(jīng)存在的菜品，可以執(zhí)行查詢操作，利用關(guān)鍵字進行查詢，查找已經(jīng)上架的菜品，查看其菜品相應(yīng)詳細信息.

2.2.2 訂單管理

餐館可以對所有的訂單進行管理，包括查詢訂單、修改訂單、刪除訂單.

（1）查詢訂單：根據(jù)關(guān)鍵字進行搜索，查找相關(guān)訂單，點開訂單后，可以看到訂單的詳細信息.可以根據(jù)桌號進行查詢，也可以通過掃描不同桌號對應(yīng)的二維碼進行查詢.餐館通過查詢訂單可以看到訂單的詳細信息，包括：桌號、已點菜品、已上菜品、未上菜品、用餐人數(shù)等.

（2）修改訂單：只向餐館提供有限的修改操作，如后廚是否開始配菜，修改已上菜品.可以對桌號進行預(yù)定，當其他人再次掃描該二維碼時，會提示該桌已被預(yù)訂.

（3）刪改訂單：對已失效或無用的訂單可以刪除.

2.2.3 桌號管理

桌號管理模塊設(shè)置成功后會根據(jù)相應(yīng)信息生成每個桌臺對應(yīng)的二維碼，包括二維碼對應(yīng)管理、查桌功能.

二維碼對應(yīng)管理可以對系統(tǒng)中的二維碼信息進行更改、管理和設(shè)置.不同的二維碼對應(yīng)不同的桌號，方便服務(wù)人員上菜，節(jié)約成本，提高效率.

查桌功能可以根據(jù)錄入需要的座位數(shù)，查詢到系統(tǒng)中目前符合條件的座位號，以方便餐館接納客人.

2.2.4 系統(tǒng)設(shè)置

該模塊包括后臺系統(tǒng)賬號管理餐廳基本信息設(shè)置，賬號管理功能主要是注冊修改賬號的相關(guān)信息.基本信息設(shè)置包括餐廳的詳細信息，如餐廳的名稱、詳細地理位置、聯(lián)系方式等.

2.2.5 掃碼選桌

顧客通過微信的掃一掃功能，掃描已經(jīng)設(shè)置桌號的二維碼即可進入對應(yīng)桌號.

2.2.6 選菜下單

顧客通過該功能瀏覽菜品列表對菜品進行選擇后下單，列表中的菜品按菜品分類進行展示，顧客可先選擇類別，然后對選擇對應(yīng)類別列表中的菜品.選中后的菜品被加入購物車，也可將其從購物車中移出.在購物車中可以對已選菜品進行刪除和數(shù)量修改操作.顧客選好菜品后，即可創(chuàng)建訂單，系統(tǒng)將用戶提交的訂單發(fā)送到后臺.

（1）創(chuàng)建訂單：顧客在選菜操作完成后，選擇用餐人數(shù)，此時可以看到總的已選菜品和桌號，還可以在備注欄里添加相關(guān)備注，然后創(chuàng)建訂單.

（2）查詢訂單：顧客可以查詢到自己的訂單詳情，可以看到自己訂單的所有信息，包括用餐人數(shù)、已點菜品、已上菜品、后廚是否開始配菜等訂單章臺信息.

（3）取消訂單：當訂單狀態(tài)顯示后廚還未開始配菜時，顧客可以取消自己的訂單.

2.2.7 訂單支付

對提交后的訂單可以調(diào)用微信支付接口完成訂單支付工作.

2.2.8 會員中心

該模塊為注冊為餐館會員的用戶提供服務(wù)，包括會員基本信息業(yè)務(wù)，會員卡業(yè)務(wù)，積分業(yè)務(wù)，優(yōu)惠券業(yè)務(wù)等，還集成了會員的普通訂單和預(yù)約訂單信息.此外，此模塊后續(xù)還可以根據(jù)餐廳功能的增加而進行功能擴充.

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

在對二維碼點餐系統(tǒng)的流程和功能設(shè)計基礎(chǔ)上，對實現(xiàn)過程要用到的數(shù)據(jù)進行建模，畫出E-R圖，然后根據(jù)E-R圖設(shè)計出該系統(tǒng)的數(shù)據(jù)庫表單.

3.1 實體-聯(lián)系圖

數(shù)據(jù)庫設(shè)計時軟件開發(fā)過程中的關(guān)鍵，二維碼點餐系統(tǒng)的E-R圖如圖5所示.

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

通過對系統(tǒng)各功能模塊的分析，可以將系統(tǒng)數(shù)據(jù)庫分為：會員表、菜品表、訂單主表、訂單詳情表、桌號表以及餐館信息表.為減少篇幅，這里僅對幾個比較重要的表單進行簡單介紹.

3.2.1 菜品表單

顧客通過查看菜品列表對菜品進行選購，餐館可以對菜品表進行管理.

3.2.2 餐館信息表單

3.2.3 訂單詳情表單

訂單詳情表如下表3所示：

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

本二維碼點餐系統(tǒng)利用微信小程序MINA框架結(jié)合JavaScript技術(shù)實現(xiàn)系統(tǒng)基本功能.基于微信小程序的點餐系統(tǒng)通過微信掃一掃功能掃描二維碼，調(diào)用微信掃碼攝像API接口，獲取被掃描二維碼的值，進入餐館的菜品列表頁面，進行菜品選購、下單等操作.這里對系統(tǒng)主要實現(xiàn)的功能介紹如下.

1.掃碼選桌，通過掃描桌面上的二維碼進入桌號進行選菜下單.圖1給出了其中一個桌號對應(yīng)的二維碼，圖2顯示了掃碼后進入的功能頁面，可以選擇點單、結(jié)賬以及會員中心功能，點擊后即進入相關(guān)操作頁面.

2.菜品選擇，圖3顯示了相關(guān)菜品，在該頁面選擇需要的菜品.

3.下單支付，圖4顯示了要提交的訂單包含菜品，在該頁面提交訂單后顯示具體訂單信息，確認無誤后點擊支付.

4.會員中心，圖5顯示了會員中心的主要功能，注冊為會員的顧客可以在此頁面查看自己的相關(guān)會員信息.

5.購物車功能，該頁面提供購物車相關(guān)操作，對已經(jīng)選擇的菜品進行數(shù)量修改或刪除操作.

5 結(jié)論與展望

文中設(shè)計實現(xiàn)的系統(tǒng)界面簡潔易操作，提供了基礎(chǔ)的掃碼選菜下單功能，還另外實現(xiàn)了會員信息管理功能.可以使微信用戶方便自主地利用微信即可完成點餐操作，為用戶提供了極大便利提升了顧客用餐體驗.也節(jié)約了餐館的相關(guān)成本，未來隨著越來越多的餐飲企業(yè)開始與互聯(lián)網(wǎng)接軌，掃碼點餐將成為一種趨勢，屆時可能還會與物聯(lián)網(wǎng)接軌，實現(xiàn)高度自動化點餐配菜，走向萬物互聯(lián)的時代.

參考文獻：

〔1〕閆小坤.微信小程序開發(fā)詳解[M].北京：清華大學(xué)出版社，2017.

〔2〕James Bucanek. Learn Objective-C for Java Developers. Apress. 2009（2）： 140-143.

〔3〕范國婷，曹飛虎，王秀友，楊穎.基于Java Web的進銷存管理系統(tǒng)設(shè)計[J].廊坊師范學(xué)院學(xué)報（自然科學(xué)版），2018，18（04）：43-46.

〔4〕胡向穎.基于Android的餐廳點餐系統(tǒng)的設(shè)計與實現(xiàn)[D].青島科技大學(xué)，2018.

〔5〕李南楠.基于噢易機房oss系統(tǒng)的高校機房系統(tǒng)維護研究[J].赤峰學(xué)院學(xué)報（自然科學(xué)版），2019，35（07）：70-72.