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

陳帥

（鄭州工業(yè)應(yīng)用技術(shù)學(xué)院 信息工程學(xué)院 河南省鄭州市 451100）

得益于人們消費(fèi)習(xí)慣的改變，餐飲行業(yè)數(shù)字化是餐飲行業(yè)壯大不可或缺的一項(xiàng)條件，而在數(shù)字化領(lǐng)域，騰訊又掌握中國(guó)社交領(lǐng)域半壁江山。騰訊的護(hù)城河毫無(wú)疑問是流量，手握微信加QQ 的王炸組合，基本上涵蓋了中文互聯(lián)網(wǎng)上的所有網(wǎng)民，騰訊投資的邏輯就是傳統(tǒng)互聯(lián)網(wǎng)的打法，用流量灌溉餐飲商家。線上的競(jìng)爭(zhēng)說到底就是流量之爭(zhēng)。誰(shuí)掌握了流量，就意味著誰(shuí)在競(jìng)爭(zhēng)中走得更遠(yuǎn)。騰訊微信注冊(cè)人數(shù)達(dá)十幾億，小程序活躍用戶豐富，市場(chǎng)廣闊。因此開發(fā)一款具有線上點(diǎn)餐功能的小程序正好滿足了傳統(tǒng)餐飲商家轉(zhuǎn)型升級(jí)的需要。[1][2][3]

1 系統(tǒng)相關(guān)技術(shù)概述

1.1 微信小程序

微信小程序是一種無(wú)需安裝即可使用的應(yīng)用，用戶只要“掃一掃”或“搜一搜”就能打開應(yīng)用，省去了安裝或卸載的步驟。微信小程序運(yùn)行在微信基礎(chǔ)上，它的交互類似于手機(jī)原生應(yīng)用，但是每個(gè)應(yīng)用的體積非常?。壳吧舷奘?048kb），具有無(wú)需安裝、觸手可及、用完即走、無(wú)需卸載的特點(diǎn)。微信小程序借鑒了現(xiàn)有的Web技術(shù)，通過獨(dú)立的運(yùn)行環(huán)境實(shí)現(xiàn)了跨平臺(tái)，并提供了接近原生APP的使用體驗(yàn)，具有明顯的優(yōu)勢(shì)。為了降低微信小程序的開發(fā)成本，提高開發(fā)效率，微信小程序的開發(fā)方式與Web APP 相似，即通過WXML （類似HTML ）、WXSS （類似CSS ）和JavaScript 進(jìn)行開發(fā)，小程序也有一套腳本語(yǔ)言，為WXS (WeiXin Script)，語(yǔ)法與JavaScript 類似又存在少量差異，并且提供了豐富的組件、API APP內(nèi)打開和接口，從而具有更接近原生APP 的使用體驗(yàn)。并且相比于原生APP，微信小程序具有上億用戶量的天然優(yōu)勢(shì)，能夠有更多資源和機(jī)會(huì)獲得新用戶，為餐飲平臺(tái)創(chuàng)造更多的市場(chǎng)。[4][5][6]

1.2 后臺(tái)系統(tǒng)的介紹

WampServer 是一款由法國(guó)人開發(fā)的Apache Web 服務(wù)器、PHP 解釋器以及MySQL 數(shù)據(jù)庫(kù)的整合軟件包。不需要開發(fā)人員將時(shí)間花費(fèi)在繁瑣的配置環(huán)境過程，可以騰出更多精力去做開發(fā)。WampServer 就是Windows Apache Mysql PHP 集成安裝環(huán)境，即在Windows 操作系統(tǒng)下的apache、php 和mysql 的服務(wù)器軟件。在windows 下將Apache+PHP+Mysql 集成環(huán)境，擁有簡(jiǎn)單的圖形和菜單安裝和配置環(huán)境。PHP 擴(kuò)展、Apache 模塊，開啟/關(guān)閉鼠標(biāo)即可配置，無(wú)需再修改配置文件和PHP 安裝，WAMP 它會(huì)去做。

WampServer 還支持phpmyadmin,SQLiteManager。不用去輸入復(fù)雜的SQL 語(yǔ)句管理MYSQL 數(shù)據(jù)庫(kù)，直接從phpmyadmin 管理即可。

1.3 后臺(tái)系統(tǒng)的搭建

本項(xiàng)目服務(wù)端環(huán)境要求為 Windows+Apache+PHP+MySQL。下面介紹如何搭建環(huán)境，部署服務(wù)器端應(yīng)用。

（1）雙擊 wampserver3.1.7_x86 根據(jù)提示進(jìn)行安裝；安裝成功后，雙擊桌面圖標(biāo)“Wampserver32”。

（2）在系統(tǒng)右下角圖標(biāo)中找到WAMP Server的圖標(biāo)，圖標(biāo)顏色：綠色表示服務(wù)全部啟動(dòng)，橙色表示服務(wù)部分啟動(dòng)，紅色表示服務(wù)沒有啟動(dòng)。初次啟動(dòng)時(shí)，圖標(biāo)會(huì)從 紅色—〉橙色—〉綠色 逐漸變化，顯示為綠色表示啟動(dòng)成功。如果啟動(dòng)失敗，則可能當(dāng)前系統(tǒng)存在其他問題，請(qǐng)根據(jù)程序提示排除問題。

（3）使用瀏覽器訪問 http://localhost/ 如果看到如下畫面，表示安裝成功，如圖1所示。

圖1：安裝成功示例

（4）在本文檔路徑下找到shop 文件夾，右鍵復(fù)制，粘貼到C：wampwww 目錄。

（5）左鍵單擊WAMP Server圖標(biāo)，選擇【Apache】→【httpd-vhost.conf】。

（6）修改完成后，保存文件，然后單擊WAMP Server 圖標(biāo)，選擇Restart All Services，等待圖標(biāo)重新變成綠色。

（7）訪問http://localhost/ 會(huì)顯示安裝向?qū)В瑔螕簟玖⒓窗惭b】按鈕。

（8）訪問http://localhost/admin 進(jìn)入后臺(tái)，輸入用戶名admin密碼123456。進(jìn)入后，到【設(shè)置】中輸入AppID 和AppSecret 即可。

2 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

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

我們的系統(tǒng)圍繞著點(diǎn)餐功能，設(shè)計(jì)了一個(gè)移動(dòng)端的點(diǎn)餐小程序。通過上面的分析，本文的點(diǎn)餐系統(tǒng)主要由幾個(gè)點(diǎn)餐功能模塊構(gòu)成。系統(tǒng)架構(gòu)的主要有菜單分類展示模塊、點(diǎn)餐下單模塊、確認(rèn)訂單模塊、食物領(lǐng)取模塊、消費(fèi)記錄等功能模塊，如圖2所示。

圖2：系統(tǒng)架構(gòu)模塊圖

2.2 功能模塊設(shè)計(jì)

我們根據(jù)點(diǎn)餐基本環(huán)節(jié)和過程去設(shè)計(jì)微信點(diǎn)餐小程序的各個(gè)功能模塊，有以下幾個(gè)部分：菜單分類展示、點(diǎn)餐下單、確認(rèn)訂單、食物領(lǐng)取、消費(fèi)記錄。消費(fèi)者在使用點(diǎn)餐小程序時(shí)可以直接進(jìn)行微信用戶登錄授權(quán)便可使用。

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

微信點(diǎn)餐小程序主要功能包括菜單分類展示、點(diǎn)餐下單、確認(rèn)訂單、食物領(lǐng)取、消費(fèi)記錄這四個(gè)頁(yè)面。

3.1 菜單分類展示頁(yè)面

打開微信小程序，進(jìn)入的點(diǎn)餐海報(bào)首頁(yè)，點(diǎn)擊“開啟點(diǎn)餐之旅”時(shí)會(huì)進(jìn)入“美食屋”頁(yè)面，在這里可以選擇自己喜歡的食物，添加到購(gòu)物車之中。點(diǎn)擊相應(yīng)菜品對(duì)應(yīng)的加號(hào)，增加該菜品的數(shù)量，如果發(fā)現(xiàn)添加數(shù)量過多，可以點(diǎn)對(duì)應(yīng)菜品的減號(hào)來減少菜品。

3.2 訂單確認(rèn)頁(yè)面

顧客挑選完食物之后，點(diǎn)擊確認(rèn)按鈕，會(huì)跳轉(zhuǎn)到確認(rèn)訂單頁(yè)面。

3.3 食物領(lǐng)取頁(yè)面

用戶在確認(rèn)訂單之后，系統(tǒng)會(huì)返還給消費(fèi)者取餐號(hào)等相關(guān)信息，用戶可以通過此頁(yè)面至餐柜臺(tái)領(lǐng)取餐品。

3.4 消費(fèi)記錄頁(yè)面

在此頁(yè)面中，用戶可以看到自己的歷史消費(fèi)記錄以及歷史消費(fèi)金額。

4 功能檢測(cè)

功能測(cè)試如表1所示。

表1：功能測(cè)試

5 結(jié)語(yǔ)

綜上所述，在電子商務(wù)迅速發(fā)展的今天，互聯(lián)網(wǎng)餐飲巨頭對(duì)傳統(tǒng)餐飲業(yè)巨大沖擊的背景下，本文給出了一種比較智能的微信小程序點(diǎn)餐系統(tǒng)，給予實(shí)體線下餐飲店線上售賣食物的新思路，使用戶在餐飲店內(nèi)點(diǎn)餐更加方便自主，微信小程序點(diǎn)餐系統(tǒng)對(duì)用戶與商家有著以下優(yōu)點(diǎn)：

（1）使得消費(fèi)者點(diǎn)餐變得更加方便與快捷。

（2）掃碼點(diǎn)餐，降低成本：用戶根據(jù)點(diǎn)餐小程序在微信掃碼點(diǎn)餐、付款，不用排長(zhǎng)隊(duì)等候，節(jié)約消費(fèi)收銀時(shí)間，縮小飯店的服務(wù)項(xiàng)目時(shí)間，提高調(diào)臺(tái)率。

（3）數(shù)據(jù)統(tǒng)計(jì)分析：根據(jù)微信小程序累積用戶數(shù)據(jù)信息，讓商家店鋪更為認(rèn)識(shí)自己的消費(fèi)者肖像，能夠目的性營(yíng)銷推廣。

（4）會(huì)員管理系統(tǒng)：能夠創(chuàng)建積分管理系統(tǒng)，吸引老用戶。

仍需要改進(jìn)的地方：

（1）餐飲后臺(tái)管理系統(tǒng)還不是很完善，需要后續(xù)系統(tǒng)優(yōu)化更新。

（2）小程序還欠缺一個(gè)顧客評(píng)價(jià)功能，用來反饋商家菜品質(zhì)量與問題，從而改善商家的菜品質(zhì)量和服務(wù)水平，提升消費(fèi)者的購(gòu)餐體驗(yàn)。[7][8][9][10]