基于微信小程序的點餐系統(tǒng)

申燕萍 何夢磊

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

關(guān)鍵詞：微信小程序；點餐系統(tǒng)；Nami后臺；H2數(shù)據(jù)庫

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

1 背景

隨著全球互聯(lián)網(wǎng)信息化的發(fā)展，基于網(wǎng)絡(luò)技術(shù)的提升，手機大概成了我們每個人都必不可少的通訊工具，而微信這類通訊軟件的產(chǎn)生也基本完全代替了傳統(tǒng)發(fā)短信的方式。

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

2 系統(tǒng)支撐

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

3 系統(tǒng)整體設(shè)計

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

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

3.1 系統(tǒng)整體架構(gòu)

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

3.2 功能模塊設(shè)計

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

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

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

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

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

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

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

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

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

4.1 登錄界面詳細設(shè)計

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

4.2 購買界面詳細設(shè)計

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

關(guān)鍵代碼示意：

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 購物車詳細設(shè)計

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

5 結(jié)束語

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

系統(tǒng)將傳統(tǒng)點餐模式改進成了基于互聯(lián)網(wǎng)的線上銷售模式，在當今快節(jié)奏的生活方式下，不僅節(jié)省了人們的時間也加快了互聯(lián)網(wǎng)時代發(fā)展的進程。

參考文獻：

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

[2] 楊啟， 張麗萍. 從互聯(lián)網(wǎng)生態(tài)看微信小程序的發(fā)展[J]. 新聞?wù)搲?2017（2）：22-24.

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

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

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

[6] 劉玉佳. 微信“小程序”開發(fā)的系統(tǒng)實現(xiàn)及前景分析[J]. 信息通信， 2017（1）：260-261.