基于微信小程序的點餐系統(tǒng)的設(shè)計與開發(fā)

種倩倩 孫麗英 陳濱 郭雅榕

摘要：隨著網(wǎng)絡(luò)技術(shù)的進步，生活變得更加信息化，用戶的消費方式也在不斷升級，各種電商層出不窮。傳統(tǒng)商業(yè)經(jīng)營越發(fā)困難，比如店鋪高額的租賃成本和人工成本。支付方式的巨大改變、購物理念的轉(zhuǎn)換等都讓人們?nèi)粘；顒釉絹碓诫x不開手機。微信在巨大的在線用戶數(shù)量和“即用即走”的使用理念上，誕生了微信小程序，小程序一躍成為熱門的新型線上平臺。該小程序利用云開發(fā)模式，開發(fā)者只需注重易點餐系統(tǒng)的前端頁面構(gòu)建，開發(fā)出基于微信小程序的點餐系統(tǒng)。易點餐小程序旨在實現(xiàn)點餐的快捷操作，無須排隊等待，提高點餐效率。系統(tǒng)主要模塊為商家新品預(yù)覽、商品信息展示、購物車管理、下單管理、個人信息管理。

關(guān)鍵詞：小程序;云開發(fā);點餐系統(tǒng);O2O

中圖分類號：TP311.5? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2022）19-0066-04

1 引言

傳統(tǒng)餐飲是消費者進入店鋪，由商家張貼的菜單進行下單。消費者將需求告知商家，這樣雖然便于彼此交流，卻很影響商家的工作效率，也浪費消費者時間。在點餐的過程中也經(jīng)常發(fā)生一些小問題，好比點餐紙丟失，或服務(wù)員的操作失誤，筆跡不清等。

科技的進步使人們的生活習(xí)慣發(fā)生變化。從傳統(tǒng)的電話點餐變?yōu)橥赓u到家，從到店點餐變?yōu)槭謾C點餐，人們開始追求更快捷的方式。騰訊公司掌握先機，及時推出免費服務(wù)應(yīng)用程序，在原本大量用戶的基礎(chǔ)上推出小程序，能夠?qū)τ脩魧崿F(xiàn)大規(guī)模推送，同時根據(jù)個人、地區(qū)特點進行多樣化的開發(fā)[1]。

2 相關(guān)理論與技術(shù)支持

2.1 小程序云開發(fā)簡介

云數(shù)據(jù)庫：為開發(fā)者提供方便的數(shù)據(jù)庫，直接進行寫、查等操作。提供的SDK能夠?qū)崿F(xiàn)在前端界面中直接對數(shù)據(jù)進行操作，或者利用云函數(shù)對集合中的記錄進行增刪改查操作。

云存儲：是一種文件存儲服務(wù)，使得文件擴展性更高、成本更低、更加可靠和安全?？焖俚貙崿F(xiàn)上傳、下載操作且管理方便。支持更加靈活的鑒權(quán)策略，完成不用類型的用戶對文件的管理。具體使用方法需要開發(fā)者在客戶端或者云存儲處利用API接口操作。

云函數(shù)：可理解為在云端中直接應(yīng)用函數(shù)，免費搭建專屬服務(wù)器。但是需開發(fā)者編寫對應(yīng)的函數(shù)方法，還需要及時部署到建立的云端中，這就可以在騰訊云安全且彈性的執(zhí)行所寫的代碼。

2.2 微信小程序云開發(fā)流程

下面是云開發(fā)從開通項目到上線的所有過程。

在開發(fā)小程序之前，需要使用個人信息，申請一個小程序開發(fā)賬號。以后就可以使用個人賬號管理小程序，具體開發(fā)步驟按照下面執(zhí)行。

1）完成賬號申請后，開發(fā)人員獲得小程序?qū)俚腎D;

2）下載官方開發(fā)者工具;

3）初始化項目;

4）環(huán)境設(shè)計：本次開發(fā)使用云開發(fā)模式。需要在官方提供的開發(fā)環(huán)境下，注冊并填寫對應(yīng)信息。

3 需求與開發(fā)系統(tǒng)分析

3.1 需求分析

需求分析是開發(fā)前提，開發(fā)者主要關(guān)注點是開發(fā)的軟件是否具備開發(fā)的價值。在易點餐開發(fā)的早期，要想確保開發(fā)的準(zhǔn)確性。要求分析師對于易點餐中的每一個功能點，所涉及的內(nèi)容要盡量考慮周全，同時考慮后續(xù)的性能。這樣才能使得后續(xù)的工作更加方便、快捷、不容易出錯[2]。

3.2 可行性分析

任何一個系統(tǒng)的開發(fā)，都需要對實施經(jīng)費、時間、所需要的各種硬件資源等進行評估。系統(tǒng)開發(fā)不僅僅只是考慮技術(shù)，還需要結(jié)合各種因素。以下是易點餐系統(tǒng)可行性分析說明：

1）經(jīng)濟可行性

主要是分析投入成本、后期項目上線后的運維成本[3]。此次系統(tǒng)開發(fā)是沒有硬件設(shè)備的投入的。因為數(shù)據(jù)庫、云端存儲都是微信開發(fā)者統(tǒng)一提供的，主要的投入成本是前期的市場推廣費用、人力資源投入和基本開發(fā)設(shè)備的投入;后期商家的使用費用、廣告費用。項目上線后可獲得利潤收入、產(chǎn)生流量。綜合對比項目的投入成本和利潤收益可以看出，在有限的投入后，可以產(chǎn)生長期的利潤。

2）技術(shù)可行性

易點餐系統(tǒng)主要囊括數(shù)據(jù)庫的構(gòu)建、接口的調(diào)用。系統(tǒng)的前端實現(xiàn)使用的是微信官方提供的開發(fā)工具和語言，后端是使用云開發(fā)。這樣極大地降低了開發(fā)的技術(shù)性，使開發(fā)人員可以更好地專注于前端視圖。

3.3 系統(tǒng)總業(yè)務(wù)流程分析

系統(tǒng)整體功能介紹，微信搜索“易點餐”或通過掃一掃，進入商家界面。首次進入小程序時，會自動獲得用戶信息，然后進入系統(tǒng)整體界面，包括點餐入口和新品展示。點擊“開始點餐”進入商品展示區(qū)，主要包括商品信息查看、加入購物車、購物車信息展示和提交訂單功能。

下單后，系統(tǒng)會給出取餐時的號碼，并且會將訂單中的一些信息提交到數(shù)據(jù)庫集合中。點擊導(dǎo)航欄“我的”，可查看個人信息。系統(tǒng)的總體流程如圖1所示。

3.4 系統(tǒng)功能總體分析

1）系統(tǒng)功能設(shè)計方面比其他系統(tǒng)設(shè)計得精簡一點，盡量把不必要的操作去掉。

2）系統(tǒng)界面設(shè)計簡潔，可快速找到點餐入口。

3）使用場景方面：小程序的使用場景比較明確，主要是線下的小型實體店，使得用戶快速分享系統(tǒng)和進行線上購物。

基于小程序的設(shè)計原則，以及為了線下實體店更好地為用戶提供快速使用、用完即走的使用體驗。易點餐小程序業(yè)務(wù)模塊主要分為：商家新品展示、商品信息、購物車、訂單、個人信息模塊。

整個易點餐總能分析流程見圖2。

由圖2系統(tǒng)功能總體分析圖，可以看出易點餐小程序客戶端主要功能：用戶查看商品（新品動態(tài)展示、商品全部分類、詳細信息、加入購物車等）、管理購物車模塊、個人信息模塊（取得登錄信息、查看個人信息）、訂單信息模塊總共4個模塊。

3.5 系統(tǒng)功能詳細分析

由需求分析、系統(tǒng)總業(yè)務(wù)流程、系統(tǒng)功能總體分析，可以看出系統(tǒng)受眾人群是消費者和商家。其中需求分析可以看出，消費者應(yīng)具有易點餐總體分析圖里所有的功能。但商家除了具有上述功能外，還可以查看數(shù)據(jù)庫（商品信息、消費者訂單信息、消費者個人基本信息），并具有修改、查看、刪除等功能。

3.5.1 用戶總功能圖

由結(jié)構(gòu)圖可以看出，用戶需求基本已經(jīng)滿足，前端頁面實現(xiàn)信息展示功能，后端主要是經(jīng)過云開發(fā)來管理用戶數(shù)據(jù)和頁面商品信息。

3.5.2 點餐功能圖

消費者進入點餐入口后，可以看到商家提供的商品信息，選擇商品加購下單。圖4是其對應(yīng)的點餐流程圖。

由結(jié)構(gòu)圖看出，瀏覽商品的時候，加購的商品信息是先提交到緩存區(qū)中。只有確認完個人的加購信息，才會上傳到對應(yīng)的數(shù)據(jù)庫集合，這種操作可確保數(shù)據(jù)記錄的精確性;同時利用緩存區(qū)，可保證下單的流暢性。避免了不斷訪問數(shù)據(jù)庫帶來的流量消耗，保證自身的網(wǎng)絡(luò)速度。

3.5.3 購物車

消費者在加購?fù)晟唐窌r，為了方便用戶在付款前確定個人的加購信息，系統(tǒng)提供購物車管理功能。用戶可隨時查看個人加購的商品、管理加購數(shù)量、能夠清空加購商品，輕松實現(xiàn)消費者對購物車的管理。購物車的系統(tǒng)設(shè)計基本滿足了用戶在日常生活中的需求。

3.5.4 個人信息管理

用戶在商品展示界面中，完成加購操作后，給商家查看手機上完成的訂單信息。選擇對應(yīng)的付款方式后，就可以等待服務(wù)員提供商品。此時用戶也可以在個人模塊，查看個人信息或者已完成訂單。

1）用戶在首次進入易點餐系統(tǒng)時，授權(quán)獲取了微信頭像和用戶名。點擊底部一欄“我的”可查看具體信息。

2）用戶如果想要分享易點餐系統(tǒng)給自己的朋友，可以選擇“轉(zhuǎn)發(fā)好友”功能，此時會自動跳轉(zhuǎn)到微信分享界面。

3）完成下單操作后，用戶是可查看訂單的，但是如果沒有加購過商品，在訂單頁面中，顯示空信息。

3.6 系統(tǒng)界面設(shè)計

此系統(tǒng)是在微信平臺上來開發(fā)小程序。對于微信小程序而言最高的頁面深度是不能超過五層的，所以此次點餐系統(tǒng)的頁面設(shè)計，要合理地分配每一級頁面的內(nèi)容。

1）一級界面

本系統(tǒng)的一級界面分別是“首頁”“訂單查詢”“我的”三個主要部分。其中默認進入頁面是首頁，首頁的內(nèi)容主要是點餐頁面的入口和滾動展示商家最新推廣的產(chǎn)品。點擊購物車，顯示加購的大致內(nèi)容。點擊“我的”，主要是用戶的信息界面展示，包括用戶的微信頭像和用戶名、手機號、分享功能。

2）二級界面

除了“首頁”和“我的”這兩個一級界面外，通過點擊一級界面中的首頁中間“開始點餐”按鈕。進入菜單展示，消費者可查看并加購商品。點擊一級界面中“我的”選項欄，此時提供了一個二級界面轉(zhuǎn)發(fā)選項，點擊轉(zhuǎn)發(fā)會轉(zhuǎn)到自己想要轉(zhuǎn)發(fā)的群組。

3）三級界面

點擊首頁中的開始點餐，進入餐品展示部分，瀏覽后加入購物車，添加完成后，提交訂單后就進入到三級界面，三級界面主要是訂單詳情頁。可以點“支付”，也可返回到點餐頁面，重新加購[2]。

4 系統(tǒng)設(shè)計實現(xiàn)

4.1 易點餐數(shù)據(jù)庫設(shè)計

設(shè)計數(shù)據(jù)庫：在工具欄中點擊“云開發(fā)”后獲得數(shù)據(jù)庫。本次系統(tǒng)開發(fā)總共涉及dishes、order、user三個數(shù)據(jù)庫。其中dishes用來存儲商家呈現(xiàn)給用戶的商品信息、order用來存儲訂單信息、user用來存儲用戶記錄。注意數(shù)據(jù)庫權(quán)限設(shè)置用戶只讀，管理員讀寫。

存儲管理：不斷發(fā)展的大數(shù)據(jù)和網(wǎng)絡(luò)技術(shù)，要求將數(shù)據(jù)存儲在云端，這樣就可以實現(xiàn)云端數(shù)據(jù)訪問，使得數(shù)據(jù)共享更加方便。谷歌、阿里巴巴、亞馬遜、騰訊等成立自己的云服務(wù)平臺，為大眾提供服務(wù)。目前使用的云存儲就是騰訊建立云平臺，來達到存儲數(shù)據(jù)的作用[4]。

云開發(fā)給開發(fā)者提供能夠利用的存儲空間，可以上傳到云端、而云端的管理也可權(quán)限限制。開發(fā)者經(jīng)過調(diào)用API來利用云存儲保存文件。在使用時，需要操作云存儲空間。

1）數(shù)據(jù)庫概念設(shè)計

云數(shù)據(jù)是MangoDb類型，其目前是開源的、不固定、高性能、面向文檔類型的NoSQL數(shù)據(jù)庫。主要是將數(shù)據(jù)存儲為文檔，文檔之間再進行嵌套，快速地找到記錄。

云開發(fā)中的數(shù)據(jù)庫與MangoDb語法相似，集合中存在的記錄實質(zhì)上也是JSON對象。雖然是一個數(shù)據(jù)庫，但是提供多個集合。其中集合可以看作一個JSON數(shù)組，數(shù)組中每個對象又是一條JSON類型的記錄。

2）數(shù)據(jù)庫邏輯JSON結(jié)構(gòu)設(shè)計

數(shù)據(jù)庫中的表，在云開發(fā)數(shù)據(jù)平臺中稱之為集合，本次系統(tǒng)開發(fā)涉及了3個集合，分別是商品信息集合、訂單信息集合、用戶個人信息集合。

云數(shù)據(jù)庫中集合的記錄，聲明隨機、唯一的id和_openid（可自定義）。當(dāng)用戶想要訪問數(shù)據(jù)庫中某條記錄，只要經(jīng)由集合名字，對應(yīng)的記錄中_openid便可完成調(diào)用。用戶不同其_openid也存在差異，記錄中id也均不一樣。

權(quán)限在云數(shù)據(jù)庫中是用戶端和管理端兩種方式，管理人員可以直接在數(shù)據(jù)庫中對記錄的數(shù)據(jù)實現(xiàn)增、刪、改、操作。為保護云數(shù)據(jù)庫中的數(shù)據(jù)，需要明確不同類型的訪問者所具有的數(shù)據(jù)庫權(quán)限，權(quán)限設(shè)置見表1。

①dishes集合里存儲的記錄，是從coco公開的API中調(diào)取的數(shù)據(jù)。數(shù)據(jù)中主要包括不同分類中的商品信息。

數(shù)據(jù)庫中的菜單集合設(shè)計如下：

下面是商品dishes集合中，每個字段中的數(shù)據(jù)存儲格式，每個箭頭代表當(dāng)前字段里包含的數(shù)據(jù)：

②菜單集合中的數(shù)據(jù)是用戶在提交加購信息時，將存儲商品的基本信息的字段、加購總金額、加購總數(shù)量提交到緩存中。當(dāng)用戶在訂單預(yù)覽的頁面中，用戶檢查要提交的信息時候，連接數(shù)據(jù)庫，上傳到菜單集合中。

③user集合中的數(shù)據(jù)則是先取得用戶同意的條件下，取得微信頭像、微信名。

集合中實際數(shù)據(jù)。其中數(shù)據(jù)中user集合設(shè)計如表4。

用戶信息字段是都是字符串類型，所以在用戶集合中的數(shù)據(jù)記錄都是單一的關(guān)系[5]。

4.2 易點餐系統(tǒng)設(shè)計與實現(xiàn)

本系統(tǒng)核心用戶人群是消費者，系統(tǒng)的框架也是從消費者的真實感受出發(fā)。根據(jù)前期的一些設(shè)計，系統(tǒng)分為：店家首頁、餐品展示、購物車、提交訂單、訂單返回、檢查個人訂單信息、我的合計七個部分設(shè)計。

4.2.1 店家首頁展示設(shè)計

用戶可以通過多種方式進入易點餐系統(tǒng)頁面。默認初始頁面是系統(tǒng)首頁，首頁主要是展示商家最新推出的商品。

首頁商品展示主要是使用循環(huán)組件來循環(huán)訪問頁面給出的圖片字段（imgUrl）中的數(shù)據(jù)，然后用函數(shù)調(diào)用數(shù)據(jù)中的記錄循環(huán)展示。最后用戶可以按【開始點餐】按鈕，進到餐品信息界面。

4.2.2 出售商品展示設(shè)計

商品加購頁面是此次系統(tǒng)開發(fā)重要部分，用戶在本界面可以查看商品、加購商品、提交訂單等基本的購物操作。

進入加購頁面后，消費者所看到的是商家菜單信息展示;調(diào)用云數(shù)據(jù)中的dishes集合中的數(shù)據(jù)，集合中每一個數(shù)據(jù)，代表著一類商品的基本信息。包含圖片、價錢、描述信息、名字、銷售量等。這里開發(fā)者選擇只將商品的圖片、名字、價錢三個信息展示在銷售頁面。

易點餐系統(tǒng)商品實際出售界面如圖5所示。

4.2.3 購物車設(shè)計

消費者在商品下單頁面，可將心儀的物品點擊加購按鈕圖標(biāo)，從而添加到購物車。用戶可以點擊購物車查看個人加購的商品、修改加購數(shù)量、能夠清空購物車等輕松實現(xiàn)用戶對加購商品的管理。

1）查看購物車信息

頁面底部能夠看到加購信息。剛進入詳情頁時，底部顯示“購物車為空”灰色文字。這里用總金額作為其顯示條件，當(dāng)總金額為0的時候，說明加購商品為空，組件使用默認的樣式文件;當(dāng)總金額不為空時，添加激活樣式，顏色變?yōu)榫G色。

點擊系統(tǒng)底部的購物車，調(diào)用購物車展示函數(shù)，從而判斷是否展示加購信息列表。

具體判斷邏輯如下：

第一步：執(zhí)行購物車展示函數(shù)。

第二步：判斷加購商品列表的長度，不為0執(zhí)行第三步。

第三步：對底部購物車顯示條件進行賦值。當(dāng)購物車中的商品信息不為空時，把組件中的判斷條件置為true，會顯示之前隱藏的加購商品信息組件。

2）管理底部購物車

當(dāng)消費者在購物車中點擊“-”“+”、清空按鈕可以實現(xiàn)編輯商品數(shù)量的功能，三個操作分別觸發(fā)減少事件、添加事件和清空事件所對應(yīng)的函數(shù)，從而更新購物車中的商品列表、總金額、總數(shù)量等視圖信息。

具體操作和實現(xiàn)邏輯見圖6。

說明：滿足以下任意一個條件的時候，購物車都是為空：

①商品列表變?yōu)榭眨篬]，購物車中的總金額為0，總數(shù)量為0;

② 購物車顯示條件變?yōu)閒alse，頁面底部變?yōu)榛疑也荒茳c擊。

4.2.4 提交訂單界面展示設(shè)計

用戶完成商品的加購后。點擊底部一欄右側(cè)的“選好了”按鈕。調(diào)用提交購物車方法，將獲得到的商品卡品信息、總金額、總數(shù)量信息保存在緩存區(qū)中，同時跳轉(zhuǎn)到指定的界面。

實現(xiàn)流程如圖7所示。

當(dāng)用戶最后確認訂單信息后，判斷訂單是否滿足滿減要求即總價格大于20即可享受減3服務(wù)，滿減力度是由商家自己設(shè)置的。最后觸發(fā)自定義的支付方法，調(diào)用文檔接口，連接數(shù)據(jù)庫。將消費者的加購信息在集合中保存為一條記錄。此時還需要監(jiān)控本身數(shù)據(jù)庫集合連接情況，當(dāng)下單成功時頁面彈出“下單成功”，不然頁面顯示“下單失敗，請重試”。

4.2.5 個人信息展示設(shè)計

“我的”頁面中，可看到易點餐系統(tǒng)中個人信息。其中消費者的微信頭像和用戶名是已經(jīng)授權(quán)獲取。通過調(diào)用方法，來獲得其中對應(yīng)的微信名和頭像地址。

下面是邏輯實現(xiàn)順序：

第一步：在個人頁面中，監(jiān)聽頁面初始加載狀態(tài)。

第二步：加載完成后，調(diào)用方法獲取數(shù)據(jù)。成功時將其數(shù)據(jù)寫入user集合中。

第三步：連接用戶集合，將用戶信息添加為一條記錄。

5 結(jié)論與展望

易點餐微信小程序需向用戶呈現(xiàn)其核心功能，滿足用戶的特定需求[6]，本著的原則就是服務(wù)線下的門店商家，開發(fā)的目標(biāo)也是幫助商家更好地開展線上活動。為消費者和商家提供一個平臺，商家可以分享最新產(chǎn)品和提供點餐需求，降低宣傳費用，節(jié)約成本的同時，還可以合理地管理平臺和用戶。同時能夠滿足消費者“觸手可及”“用完即走”的購物需求，購物滿意度得到提升[7]。此外消費者接受新事物的能力很高，從原本的不愿意到現(xiàn)在的積極參與，小程序的發(fā)展在一定程度上是社會發(fā)展的產(chǎn)物。

其次，消費者會員化是科技發(fā)展的必要產(chǎn)物。大數(shù)據(jù)、云計算、區(qū)塊鏈的快速發(fā)展，不僅僅是滲透到互聯(lián)網(wǎng)領(lǐng)域，甚至是滲透到社會各個領(lǐng)域中、滲透到人們的生活中。商家如果不去擁抱潮流，就會被潮流所擊倒，線下的企業(yè)要積極擁抱互聯(lián)網(wǎng)，進行必要的服務(wù)升級，這樣才能創(chuàng)造出巨大的利潤空間。

參考文獻：

[1] 譚楷祥.基于微信公眾平臺的點餐系統(tǒng)的設(shè)計與實現(xiàn)[D].南京：南京大學(xué)，2014.

[2] 金瑩.基于微信小程序的個人電臺系統(tǒng)的設(shè)計與實現(xiàn)[D].長春：吉林大學(xué)，2017.

[3] 宋曉東.高校就業(yè)信息管理系統(tǒng)的設(shè)計與實現(xiàn)[D].成都：電子科技大學(xué)，2012.

[4] 李孟輝.基于Web的云開發(fā)平臺的研究與實現(xiàn)[D].成都：電子科技大學(xué)，2017.

[5] 趙俊.社交網(wǎng)絡(luò)的數(shù)據(jù)采集與分析方法研究[D].鄭州：鄭州大學(xué)，2015.

[6] 劉敏，孟慧瑩.基于微信小程序的圖書館集群化智能服務(wù)模式研究[J].圖書情報研究，2021，14（2）：44-49

[7] 馬靜.基于微信小程序的購物商城系統(tǒng)的設(shè)計與實現(xiàn)[J].微型電腦應(yīng)用，2021，37（3）：31-34.

收稿日期：2022-03-11

基金項目：軟件技術(shù)特色專業(yè)（項目編號：Xjtszy20201）

作者簡介：種倩倩（1993—），女，安徽宿州人，助教，學(xué)士，研究方向為軟件技術(shù)、計算機網(wǎng)絡(luò)技術(shù);孫麗英（1982—），女，安徽合肥人，講師，碩士，研究方向為軟件工程方向;陳濱（1981—），男，江蘇鹽城人，講師，學(xué)士，研究方向為軟件工程專業(yè);郭雅榕（1995—），女，安徽安慶人，助教，學(xué)士，研究方向為大數(shù)據(jù)方向。