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

申燕萍 何夢磊

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

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

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）04-0062-02

1 背景

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

2017年4月24日，騰訊旗下的企鵝智酷公布了最新的《2017微信用戶&生態(tài)研究報告》。根據(jù)這份報告數(shù)據(jù)顯示，截止到2016年12月微信全球共計8.89億月活用戶，而新興的公眾號平臺擁有1000萬個。微信這一年來直接帶動了信息消費(fèi)1742.5億元，相當(dāng)于2016年中國信息消費(fèi)總規(guī)模的4.54%。正因?yàn)槲⑿湃绱她嫶蟮氖褂萌丝诨鶖?shù)，也間接帶動了微信小程序的發(fā)展。

2 系統(tǒng)支撐

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

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

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

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

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

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

3.2 功能模塊設(shè)計

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

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

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

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

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

⑤ 用戶投訴：用戶投訴模塊需要驗(yàn)證用戶身份是否合法和是否購買過系統(tǒng)商品，符合以上兩項(xià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)功能實(shí)現(xiàn)

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

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

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

當(dāng)用戶在主界面中看中心儀的商品時，可點(diǎn)擊立即購買，提示框顯示商品已加入購物車并提示是否立即購買，點(diǎn)擊否則只是將商品通過db.exec（inset into）語句操作加入購物車，點(diǎn)擊是則會跳轉(zhuǎn)到確認(rèn)信息界面，確認(rèn)收貨地址收貨人，若收貨地址有誤則能直接對其修改并保存為當(dāng)前登錄用戶的詳細(xì)地址，若收貨地址和收貨人都沒有問題的話就會跳轉(zhuǎn)到付款界面，付款則是直接調(diào)用微信自帶的付款A(yù)PI調(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 購物車詳細(xì)設(shè)計

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

5 結(jié)束語

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

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

參考文獻(xiàn)：

[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] 林曉艷. 微信小程序的用戶體驗(yàn)研究[C]//工業(yè)設(shè)計研究（第五輯）. 2017： 6.

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