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

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

中圖分類號：TP311.5;TP391.3? ? ? ?文獻標識碼：A 文章編號：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? 引? 言

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

1? 開發(fā)背景

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

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

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

3? 系統(tǒng)概要設計

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

用戶進入系統(tǒng)后首先看見的應該為點菜主界面，此界面要放置商家所有提供的菜肴供用戶選擇，并且本界面還要設計支持用戶選購完成后跳轉到讓用戶選定餐桌號、付款的界面。其他兩個界面主要是做一些介紹、使用說明的界面，只是起到一些輔助作用。對于使用本軟件的用戶，共分為商家、顧客兩種人群，商家可以在系統(tǒng)上傳自己的各種菜品、價格、圖片、菜肴介紹等信息。顧客指的是使用本軟件系統(tǒng)進行在線點菜的那部分用戶。

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

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

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

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

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

5.1? 技術可行性

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

5.2? 經費可行性

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

5.3? 人員可行性分析

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

5.4? 安全性分析

因為這個系統(tǒng)涉及到金錢交易，所以對應安全性是有一定要求的，因為顧客使用這個系統(tǒng)的時候是在商家店里進行的，所以即使在線付款也是相當于線下的“面對面”支付。另一方面，顧客進行轉賬后，系統(tǒng)會有歷史轉賬記錄，因此資金的安全性是有保障的，不會存在賴賬、要求重復轉賬等情況。

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

6.1? 實現(xiàn)點菜功能關鍵代碼

jumppage：function（）{

var arrayname =[];//申請一個長度可變的數組

var arrayprice=[];

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

if（this.data.caiping[i].statu）//如果該菜已經被點

{

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

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]）;經過測試，發(fā)現(xiàn)數組arrayname可以根據下標獲取完整元素

wx.navigateTo（{

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

}）

}

6.2? 微信小程序WXML

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

6.3? 微信小程序之WXSS

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

6.4? 微信小程序之JS

JS是用來響應用戶的點擊、獲取用戶的位置等等和用戶做交互的，通過編寫JS腳本文件來處理用戶的操作，程序的體驗好不好以及好到哪種程度就要看JS的編寫了。

6.5? 微信小程序之JSON

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

7? 結? 論

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

參考文獻：

[1] 胡安明.jQuery在《網頁設計》課程中的運用 [J].計算機光盤軟件與應用，2011（10）：234.

[2] 吳國華.校園電子商務平臺設計與實現(xiàn) [D].青島：中國海洋大學，2009.

[3] 周文潔.JavaScript與jQuery網頁前端開發(fā)與設計 [M].北京：清華大學出版社，2018.

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