基于微信小程序的點餐系統

申燕萍 何夢磊

摘要：在充分調查和分析當前餐飲行業的點餐模式和傳統餐飲APP的運作流程的基礎上，針對現代人的生活方式和傳統APP的局限性進行分析。隨著生活節奏的加快，有時候到餐廳點餐等待吃飯似乎不太盡人意，導致時間的浪費，工作效率的降低。而傳統APP又過于臃腫，難以適應針對性。針對該問題，運用WEB開發技術和Nami后臺H2數據庫，設計了基于微信小程序平臺和B/S模式的點餐系統。該系統結合了微信小程序本身的優點，實現了用戶登錄、在線點餐，生成訂單、用戶評論、用戶投訴等功能。極大的便捷了人們的生活，也是未來信息化時代發展的大勢所趨。

關鍵詞：微信小程序；點餐系統；Nami后臺；H2數據庫

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）04-0062-02

1 背景

隨著全球互聯網信息化的發展，基于網絡技術的提升，手機大概成了我們每個人都必不可少的通訊工具，而微信這類通訊軟件的產生也基本完全代替了傳統發短信的方式。

2017年4月24日，騰訊旗下的企鵝智酷公布了最新的《2017微信用戶&生態研究報告》。根據這份報告數據顯示，截止到2016年12月微信全球共計8.89億月活用戶，而新興的公眾號平臺擁有1000萬個。微信這一年來直接帶動了信息消費1742.5億元，相當于2016年中國信息消費總規模的4.54%。正因為微信如此龐大的使用人口基數，也間接帶動了微信小程序的發展。

2 系統支撐

系統可在任意平臺通過微信開發者工具選擇微信小程序開發，填入自己的APPID創建項目文件夾即可開始開發。Nami后臺是為了適應微信小程序只能發送Request請求的特點，而專門為微信小程序服務端開發的一種容器，使其可以直接通過JavaScript腳本操作數據庫。H2數據庫是內嵌在Nami后臺中的數據庫，類似于一般的數據庫，用來儲存小程序中的數據。

3 系統整體設計

此系統將點餐與互聯網相結合，避免了柜面上繁瑣的點餐和付款排隊環節，讓用戶可以直觀方便地進行點餐和直接使用微信零錢進行付款，相比傳統去餐廳吃飯更加人性化，也更加注重用戶體驗。

系統分為數據庫端和微信小程序端。管理模塊可以在PC端（數據庫端）實現（如圖1）。管理模塊也可以直接在小程序端實現，就是把管理模塊直接嵌入小程序端。只有系統管理員輸入正確的管理員賬號和密碼驗證通過之后才能在需要的時候從小程序端進入管理模塊（如圖2）。

3.1 系統整體架構

系統大致運行架構如圖3所示，微信小程序的后臺（后稱為系統后臺）不同于其他語言可以直接操作數據庫，系統后臺只能發送Request請求，將請求與本地服務器上的JavaScript腳本進行交互，再由JavaScript腳本來操作數據庫。PC端再將數據庫中的數據顯示在頁面中。

3.2 功能模塊設計

根據分析系統需求和用戶需求，系統必須具備如下幾個功能模塊，用戶登錄、用戶注冊、加入購物車、立即購買、生成訂單、用戶評論、用戶投訴等七個模塊。

① 用戶登錄與注冊：當用戶在系統中沒有信息的時候，用戶輸入信息點擊注冊既能完成注冊，再輸入注冊的用戶名和密碼既能完成登錄。

② 加入購物車：當用戶喜愛某個商品但還并不準備購買的時候，就可以將其加入購物車。

③ 立即購買與生成訂單：用戶點擊購買確認信息付款之后就能生成訂單，后臺管理員會處理訂單。

④ 用戶評論：用戶可以在系統發表評論模塊發表正面的言語，所有用戶的評論信息都會顯示在一個滾動區域，也可看作是一種聊天方式。

⑤ 用戶投訴：用戶投訴模塊需要驗證用戶身份是否合法和是否購買過系統商品，符合以上兩項才能發表投訴，發表正面言語提交到后臺，管理員將會處理用戶的投訴。

3.3 數據庫設計

根據需求，本系統需要建立六張表：用戶信息表、商品信息表、用戶購物車表、用戶訂單表、用戶評論表、用戶投訴表。在Nami后臺的H2數據庫中建立以上各表，Nami后臺直接架設在服務器上，PC端再通過Request請求和服務器上Nami后臺中的JavaScript腳本交互，再由JavaScript腳本操作H2數據庫。

4 系統功能實現

4.1 登錄界面詳細設計

用戶登錄的流程：用戶點擊圖片登錄按鈕，出現用戶登錄界面，用戶輸入用戶名和密碼，若用戶沒有登錄，則只能瀏覽商品不能加入購物車或購買，點擊注冊的時候，會保存其輸入的用戶名并使用db.find從USER_DEMO數據表中查找是否存在相同的用戶名，存在則會發出提示，提示用戶已存在相同用戶名的用戶，并提示用戶輸入與之前不同的用戶名，密碼和用戶地址不能為空，當用戶名通過db.find查找不到相同用戶名即detail返回值為null的時候，點擊注冊即通過db.exec（INSERT INTO）語句，將用戶輸入的用戶名和密碼及地址添加到數據庫。注冊成功即返回登錄界面，再輸入其注冊的用戶名和密碼，系統將會保存輸入的用戶名和密碼并通過db.find從數據庫中查找與輸入的用戶名相同的記錄，并與數據庫中的密碼相比較，相同則登錄成功，不同則提示密碼錯誤。

4.2 購買界面詳細設計

當用戶在主界面中看中心儀的商品時，可點擊立即購買，提示框顯示商品已加入購物車并提示是否立即購買，點擊否則只是將商品通過db.exec（inset into）語句操作加入購物車，點擊是則會跳轉到確認信息界面，確認收貨地址收貨人，若收貨地址有誤則能直接對其修改并保存為當前登錄用戶的詳細地址，若收貨地址和收貨人都沒有問題的話就會跳轉到付款界面，付款則是直接調用微信自帶的付款API調用微信零錢即可付款，付款成功則會加入用戶訂單。

關鍵代碼示意：

wx.request（{

url： config.Readcommodityurl，

data： {}，

header： { 'Accept'： 'application/json' }，

method： "GET"，

success： function （res） {wx.request（{

url： config.Joinshoopcaturl，

data： {

username： app.globalData.nowloginusername，

userid： app.globalData.nowloginusername，

address： app.globalData.nowloginuserAddress，

commodityid： that.data.commodity.COMMODITYID，

commodityname： that.data.commodity.COMMODITYNAME，

commodityintroduces： that.data.commodity.COMMODITYINTRODUCE，

commodityprice： that.data.commodity.COMMODITYPRICE，}，

header： { 'Accept'： 'application/json' }，

method： "GET"，

success： function （res） {wx.showToast（{

title： '已加入購物車！'，image： '../../images/allimages/smiley.png'，duration： 1500，mask： false，}）}，}）}，}）}}，}）}}，

4.3 購物車詳細設計

當用戶在主界面將商品加入購物車中之后，點擊購物車的tabbar頁面，系統則會通過用戶名在數據表中查找是否有商品加入了購物車，返回值為null則說明購物車中沒有商品，即顯示“當前登錄用戶購物車中沒有商品！”，當返回值不為null時，通過db.query將購物車表中的數據全部通過wx：for=””循環顯示在購物車界面中，用戶可以點擊刪除商品或直接購買商品，點擊刪除商品則會通過db.exec（delete）語句將其數據從表中刪除，點擊立即購買按鈕則會直接跳轉到與在主界面點擊立即購買相同的界面與邏輯。

5 結束語

本系統是通過微信公眾開發者工具在windows端完成開發，微信小程序相對于傳統APP脫離了平臺的限制，即只要完成開發即可在Android端和IOS端都可以訪問。

系統將傳統點餐模式改進成了基于互聯網的線上銷售模式，在當今快節奏的生活方式下，不僅節省了人們的時間也加快了互聯網時代發展的進程。

參考文獻：

[1] 騰訊. 微信小程序開發文檔[EB/OL]. https：//mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html.

[2] 楊啟， 張麗萍. 從互聯網生態看微信小程序的發展[J]. 新聞論壇， 2017（2）：22-24.

[3] 張榮齊， 田文麗. 餐飲連鎖企業O2O商業模式研究[J]. 中國市場， 2014（32）：81-88.

[4] 陳琦. 基于Webpy+Apache HTTP Server的微信小程序架構搭建研究[J]. 無線互聯科技， 2017（18）：50-51

[5] 林曉艷. 微信小程序的用戶體驗研究[C]//工業設計研究（第五輯）. 2017： 6.

[6] 劉玉佳. 微信“小程序”開發的系統實現及前景分析[J]. 信息通信， 2017（1）：260-261.