基于微信小程序的在線點(diǎn)菜系統(tǒng)設(shè)計(jì)

摘? 要：基于微信小程序的在線點(diǎn)菜系統(tǒng)的目的是方便用戶進(jìn)店訂餐，針對(duì)的人群主要是商家和進(jìn)入商家消費(fèi)的顧客。系統(tǒng)采用了騰訊官方提供的微信開(kāi)發(fā)者工具完成開(kāi)發(fā)，開(kāi)發(fā)過(guò)程中采用了MINA框架借助了Java的異步輸入輸出技術(shù)以便于用戶可以更流暢地使用系統(tǒng)。開(kāi)發(fā)完成后得到的基于微信小程序的在線點(diǎn)菜系統(tǒng)支持用戶在線訂餐、支付、瀏覽商家特色推薦等功能。

關(guān)鍵詞：微信小程序;軟件開(kāi)發(fā);在線訂餐

中圖分類號(hào)：TP311.5;TP391.3? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2020）05-0016-03

Design of Online Ordering System Based on WeChat Applet

HAN Sifan

（Northwest Minzu University，Lanzhou? 730030，China）

Abstract：The purpose of online ordering system based on WeChat applet is to facilitate the user to enter the store and order food，aiming at the people who are mainly businessmen and customers who enter the business. The development of the system is completed by WeChat developer tools provided by Tencent. In the development process，MINA framework is used with the help of Java asynchronous input and output technology，so that users can use the system more smoothly. After the completion of the development，the online ordering system based on WeChat applet supports the functions of online ordering，payment，browsing merchant feature recommendation，etc.

Keywords：WeChat applet;software development;online ordering

0? 引? 言

基于微信小程序的在線點(diǎn)菜系統(tǒng)是作者在校開(kāi)發(fā)的系統(tǒng)，目的在于實(shí)現(xiàn)用戶到店吃飯可以在線點(diǎn)菜，目標(biāo)人群是商家和商家的顧客。類似軟件前人已經(jīng)有過(guò)開(kāi)發(fā)，但是大多數(shù)都要求顧客下載APP，此系統(tǒng)是創(chuàng)新在于基于微信小程序的系統(tǒng)，無(wú)需下載，用完即走，方便快捷。

1? 開(kāi)發(fā)背景

本軟件主要是為農(nóng)家樂(lè)商家開(kāi)發(fā)的運(yùn)行在微信上的小程序，根據(jù)作者大學(xué)所在地域的情況來(lái)看，我們到附近的農(nóng)家樂(lè)聚餐點(diǎn)菜的時(shí)候發(fā)現(xiàn)各個(gè)商家均不支持到店在線點(diǎn)菜系統(tǒng)，全部是傳統(tǒng)形式，即老板要求服務(wù)員時(shí)刻注意新客人的加入以及他們所在的餐桌位置，并且及時(shí)地拿上菜單給顧客點(diǎn)菜，然后再把顧客點(diǎn)的菜記錄在薄、交給廚房，最后顧客結(jié)賬。非常不方便，而且還消耗了人力資源，基于這種情況，我們開(kāi)發(fā)出“開(kāi)心農(nóng)家樂(lè)”系統(tǒng)專門解決以上問(wèn)題，實(shí)現(xiàn)店員與顧客“零交流”，一鍵完成點(diǎn)菜付款，為了方便顧客，我們的系統(tǒng)基于微信的小程序進(jìn)行開(kāi)發(fā)，不需要顧客專門下載APP，盡可能地便民，既滿足了程序的客戶基數(shù)，又滿足了顧客的個(gè)性化需求，并且完美貼合“用完即走”的理念。

2? 開(kāi)發(fā)環(huán)境介紹

微信小程序是在微信這個(gè)平臺(tái)上發(fā)展起來(lái)的，基于微信的巨大用戶基數(shù)，微信小程序也迅速獲得巨大使用流量，基于這一點(diǎn)，程序的推廣變得不再那么困難。本系統(tǒng)使用的MINA框架借助了Java的異步輸入輸出技術(shù)，因此用戶使用的時(shí)候更加流暢，體驗(yàn)更佳。微信小程序與傳統(tǒng)的程序相比具有更強(qiáng)大的靈活性，不需要用戶下載，用時(shí)即取，用完即走。從用戶角度出發(fā)無(wú)需下載便可使用，更加便捷。

3? 系統(tǒng)概要設(shè)計(jì)

本系統(tǒng)分為三大界面，分別是如圖1所示的點(diǎn)菜主界面以及本店特色推薦、結(jié)賬說(shuō)明。

用戶進(jìn)入系統(tǒng)后首先看見(jiàn)的應(yīng)該為點(diǎn)菜主界面，此界面要放置商家所有提供的菜肴供用戶選擇，并且本界面還要設(shè)計(jì)支持用戶選購(gòu)?fù)瓿珊筇D(zhuǎn)到讓用戶選定餐桌號(hào)、付款的界面。其他兩個(gè)界面主要是做一些介紹、使用說(shuō)明的界面，只是起到一些輔助作用。對(duì)于使用本軟件的用戶，共分為商家、顧客兩種人群，商家可以在系統(tǒng)上傳自己的各種菜品、價(jià)格、圖片、菜肴介紹等信息。顧客指的是使用本軟件系統(tǒng)進(jìn)行在線點(diǎn)菜的那部分用戶。

4? 系統(tǒng)功能詳述

選菜點(diǎn)菜模塊：顧客進(jìn)入系統(tǒng)后首先看到的是點(diǎn)菜主界面，在這個(gè)界面以類似于九宮格的方式展示了商家所提供的所有菜肴，每種菜肴下面寫明了對(duì)應(yīng)的名字、價(jià)格。本界面的設(shè)計(jì)中頂部部分放置了間隔一定時(shí)長(zhǎng)就自動(dòng)滾動(dòng)的輪播圖，用來(lái)讓顧客得到更好的體驗(yàn)，用戶選菜的時(shí)候只要在九宮格里點(diǎn)擊就可以看到對(duì)應(yīng)宮格左下方的小圓圈變成打勾的狀態(tài)，即選擇成功。本界面的下方設(shè)置了“去支付”按鈕，用來(lái)實(shí)現(xiàn)界面跳轉(zhuǎn)，當(dāng)用戶選菜環(huán)節(jié)完成后，點(diǎn)擊這個(gè)按鈕可以跳轉(zhuǎn)到如圖2所示的點(diǎn)菜詳情界面，這個(gè)界面分為5大部分，頂部部分用來(lái)顯示剛才用戶選擇的菜的名字以供用戶確認(rèn);第二部分是對(duì)顧客之前選擇的菜品價(jià)格進(jìn)行計(jì)算，用來(lái)幫助顧客計(jì)算總價(jià)格;第三部分是要求用戶選擇自己對(duì)應(yīng)的餐桌號(hào)，用戶進(jìn)入商店后對(duì)應(yīng)的桌上有相應(yīng)的編號(hào)，顧客在此界面的這部分要選擇對(duì)應(yīng)的桌號(hào)，以供商家識(shí)別到對(duì)應(yīng)顧客;下一個(gè)部分是顯示顧客所選擇的餐桌號(hào)，讓用戶進(jìn)行確認(rèn)，避免選擇錯(cuò)誤;第五個(gè)部分就是提示用戶如何將自己的點(diǎn)菜信息發(fā)送給商家以及如何進(jìn)行付款。

本店特色推薦模塊：雖然點(diǎn)菜主界面已經(jīng)顯示了商家提供的所有菜肴，但是可能商家有自己的少數(shù)特別的菜肴要單獨(dú)推薦，基于這點(diǎn)需求，本系統(tǒng)專門增加了本店特色推薦這個(gè)界面，在這個(gè)界面中商家可以將要推薦的菜肴上傳，詳細(xì)介紹菜名、食材、烹飪方式、價(jià)格等等有關(guān)于這道菜的任何信息，并且，這個(gè)界面同樣設(shè)置了到點(diǎn)菜詳情界面的鏈接，用戶可以在這個(gè)界面選擇一道或者多道菜肴，選擇完畢后可以在頁(yè)面下方點(diǎn)擊“去支付”按鈕，這個(gè)按鈕鏈接到的界面也是點(diǎn)菜詳情界面，讓用戶確認(rèn)信息、選擇餐桌號(hào)等，與上述步驟一樣。

結(jié)賬說(shuō)明模塊：這個(gè)模塊主要是進(jìn)行一些關(guān)于軟件系統(tǒng)使用說(shuō)明的文字內(nèi)容，針對(duì)第一次使用本系統(tǒng)的新顧客，里面詳述了本系統(tǒng)的詳細(xì)使用說(shuō)明，幫助用戶學(xué)習(xí)系統(tǒng)的使用。當(dāng)然，考慮到一些仍然不會(huì)使用的人群，本界面下方設(shè)置了“我已經(jīng)明白了”和“仍然不知道”兩個(gè)按鈕，如圖3所示，顧客如果通過(guò)說(shuō)明已經(jīng)學(xué)習(xí)掌握了系統(tǒng)的使用方式可以點(diǎn)擊“我已經(jīng)明白了”按鈕，跳轉(zhuǎn)到點(diǎn)菜主界面進(jìn)行點(diǎn)菜、使用程序。顧客如果不能通過(guò)文字的描述學(xué)會(huì)系統(tǒng)的使用，可以點(diǎn)擊“仍然不知道”按鈕，這個(gè)時(shí)候會(huì)跳轉(zhuǎn)到“選擇餐桌號(hào)”界面，要求客戶選擇對(duì)應(yīng)餐桌上的餐桌號(hào)，完成后點(diǎn)擊下方的提交按鈕，之后商家會(huì)收到提示，根據(jù)提示中的餐桌號(hào)找到顧客，由商家進(jìn)行系統(tǒng)使用教學(xué)并且?guī)椭櫩屯瓿牲c(diǎn)菜。

5? 系統(tǒng)的可行性分析

5.1? 技術(shù)可行性

本系統(tǒng)開(kāi)發(fā)所使用的工具是微信官方提供的微信開(kāi)發(fā)者工具，可以免費(fèi)下載安裝，用到的開(kāi)發(fā)語(yǔ)言等知識(shí)官方已經(jīng)提供詳細(xì)文檔，可以在線查閱、學(xué)習(xí)。并且先前已經(jīng)有過(guò)微信小程序開(kāi)發(fā)經(jīng)驗(yàn)，所以開(kāi)發(fā)技術(shù)層面完全可行。

5.2? 經(jīng)費(fèi)可行性

本系統(tǒng)屬于基于微信小程序的小型系統(tǒng)，由個(gè)人就可以完成開(kāi)發(fā)，所使用到的軟件工具也不需要購(gòu)買。使用到的硬件工具早已備齊，不需要再次購(gòu)買，因此不需要擔(dān)心經(jīng)費(fèi)問(wèn)題。

5.3? 人員可行性分析

對(duì)于使用該軟件的用戶來(lái)說(shuō)本系統(tǒng)是非常容易上手的，其操作完全類似其他微信小程序，并且用戶進(jìn)入該系統(tǒng)后系統(tǒng)提供了專門的使用說(shuō)明界面，幫助用戶學(xué)習(xí)使用。

5.4? 安全性分析

因?yàn)檫@個(gè)系統(tǒng)涉及到金錢交易，所以對(duì)應(yīng)安全性是有一定要求的，因?yàn)轭櫩褪褂眠@個(gè)系統(tǒng)的時(shí)候是在商家店里進(jìn)行的，所以即使在線付款也是相當(dāng)于線下的“面對(duì)面”支付。另一方面，顧客進(jìn)行轉(zhuǎn)賬后，系統(tǒng)會(huì)有歷史轉(zhuǎn)賬記錄，因此資金的安全性是有保障的，不會(huì)存在賴賬、要求重復(fù)轉(zhuǎn)賬等情況。

6? 系統(tǒng)開(kāi)發(fā)用到的技術(shù)介紹

6.1? 實(shí)現(xiàn)點(diǎn)菜功能關(guān)鍵代碼

jumppage：function（）{

var arrayname =[];//申請(qǐng)一個(gè)長(zhǎng)度可變的數(shù)組

var arrayprice=[];

for（var i=0;i<9;i++）{

if（this.data.caiping[i].statu）//如果該菜已經(jīng)被點(diǎn)

{

arrayname.push（this.data.caiping[i].name）;//動(dòng)態(tài)的向數(shù)組中添加元素

arrayprice.push（this.data.caiping[i].price）;

}

}

var temparr=[];

var y=0;

for （y;y

temparr[y] =arrayname[y];

}

//console.log（"he" + temparr[1]）;

//console.log（"hello"+arrayname[1]）;經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)數(shù)組arrayname可以根據(jù)下標(biāo)獲取完整元素

wx.navigateTo（{

url： ‘../pay/pay？namearr=‘ + temparr + ‘&arrayprice=‘ + arrayprice//這個(gè)小技巧非常重要

}）

}

6.2? 微信小程序WXML

開(kāi)發(fā)中接觸到WXML后發(fā)現(xiàn)，該語(yǔ)言的理念和HTML網(wǎng)頁(yè)的編程技術(shù)是非常類似的，要求的技術(shù)含量并不高。

6.3? 微信小程序之WXSS

類比于Web開(kāi)發(fā)，WXSS其實(shí)就是微信的CSS，其理念基本沒(méi)有什么不同，實(shí)質(zhì)就是一些簡(jiǎn)單標(biāo)簽的替換。相比較于Web開(kāi)發(fā)而言，微信小程序的開(kāi)發(fā)更簡(jiǎn)單，比如在尋找文件路徑方面，因?yàn)?wxml文件和.wxss文件在同一目錄，所以可以直接像在網(wǎng)頁(yè)上寫CSS一樣，非?？旖?。

6.4? 微信小程序之JS

JS是用來(lái)響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等和用戶做交互的，通過(guò)編寫JS腳本文件來(lái)處理用戶的操作，程序的體驗(yàn)好不好以及好到哪種程度就要看JS的編寫了。

6.5? 微信小程序之JSON

在JSON里可以進(jìn)行頁(yè)面文件配置，可選配置組件、配置下拉刷新功能等等，本程序就使用了下拉刷新這一技術(shù)。

7? 結(jié)? 論

論文詳細(xì)介紹了基于微信小程序的在線點(diǎn)菜系統(tǒng)的各個(gè)功能、用法。此外還在一定程度上述說(shuō)了本系統(tǒng)的開(kāi)發(fā)背景和實(shí)現(xiàn)涉及到的技術(shù)，目的在于將來(lái)可以讓更多的用戶快速上手使用，同時(shí)對(duì)潛在問(wèn)題給出改進(jìn)意見(jiàn)。

參考文獻(xiàn)：

[1] 胡安明.jQuery在《網(wǎng)頁(yè)設(shè)計(jì)》課程中的運(yùn)用 [J].計(jì)算機(jī)光盤軟件與應(yīng)用，2011（10）：234.

[2] 吳國(guó)華.校園電子商務(wù)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn) [D].青島：中國(guó)海洋大學(xué)，2009.

[3] 周文潔.JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì) [M].北京：清華大學(xué)出版社，2018.

作者簡(jiǎn)介：韓思凡（1997-），男，漢族，湖南鳳凰人，本科，研究方向：軟件工程。