基于微信小程序的點餐系統設計與實現

王馗 吳勇靈

收稿日期：2023-05-08

DOI：10.19850/j.cnki.2096-4706.2023.22.007

摘? 要：文章基于微信小程序設計并實現一款既便捷又實用的點餐系統。該系統由用戶、移動端和商家管理三個部分組成，用戶僅用手機即可完成點菜、確認訂單、付款等一系列流程。實驗結果表明，這種點餐模式既能簡化用戶的點餐流程，減少員工走動時間，又能提高餐廳的服務效率和服務質量，大大提升了食客的用餐體驗，具有一定的應用推廣價值。

關鍵詞：互聯網；點餐；微信小程序

中圖分類號：TP311? 文獻標識碼：A? 文章編號：2096-4706（2023）22-0030-07

Design and Implementation of Ordering System Based on WeChat Mini Program

WANG Kui， WU Yongling

（School of Physics and Electronics， Qiannan Normal University for Nationalities， Duyun? 558000， China）

Abstract： This paper design and implement a convenient and practical ordering system based on the WeChat Mini Program. The system consists of three parts： user， mobile terminal， and merchant management. Users can complete a series of processes such as ordering， confirming orders， and making payments using only their mobile phones. The experimental results show that this ordering mode can not only simplify the user's ordering process， reduce employee walking time， but also improve the service efficiency and quality of the restaurant， greatly improving the dining experience of diners， and has certain application and promotion value.

Keywords： Internet; ordering; WeChat Mini Program

0? 引? 言

傳統餐館的紙質點餐模式存在過程煩瑣、點餐時間長、錯誤下單率高等缺點，大大增加了餐廳的人力成本和運營成本。線上點餐系統的新模式使用戶僅用手機就能完成點菜、確認、付款等一系列流程，與傳統點菜時服務員面向用戶點餐相比更為自由、便捷。網上點餐系統能夠提高餐廳的服務效能，提升顧客的就餐體驗。為此，設計一款新型點餐系統極具現實意義。

本文基于微信小程序點餐系統具有開發成本低、迭代速度快的優點，不僅致力于給顧客提供更好的就餐體驗，還能讓商家節省很多的人力成本，可有效彌補傳統點餐模式存在的效率低、易出錯、手續煩瑣等缺點[1，2]。

1? 系統相關技術概述

點餐系統主要由三個部分組成，分別為手機移動端的點餐微信小程序、云開發內容管理（CMS）的菜品管理頁面以及云開發端的數據庫和服務器[3，4]。該系統小程序采用原生小程序框架[5]，使用Hbuilder和微信開發者工具進行開發。網絡端的菜品管理頁面采用云開發騰訊云提供的云端一體化數據運營平臺進行編寫[6]。云開發端的數據庫及API接口為移動端和網絡端提供數據交互[7，8]。

1.1? 微信小程序

微信小程序是一款在微信上運行的軟件[9]，其開發周期較短，開發成本低于APP，還可以提前進入應用領域[10，11]。微信公共平臺上的“小程序”具有開放的功能，不僅為用戶提供簡潔、高效的應用軟件開發資源，還提供大量的構件和API。微信APP并不是獨立存在的，如果有什么需要，只需在微信上搜索一下即可找到，使用微信二維碼掃描也能進入。

1.2? 云開發平臺

“微信云開發”是由“騰訊云”和“微信”兩個部門聯合開發的專用軟件開發平臺[12]，開發人員可以使用云計算快速開發小程序、小游戲、公眾號和本地微信，無須創建自己的服務器，只需使用其API即可進行商業開發，而且還不需要驗證[13]。

云開發無須搭建服務器即可快速開展業務；無須對微信進行身份認證、簽名，密鑰，還可以使用特殊的協議和微信連接，保證了該服務的安全性[14]，直接調用微信API即可開展工作；支持環境共享，可在后臺開發多個小程序、公眾號、網頁等，便于對業務代碼與數據進行復用[15]。

2? 系統設計

2.1? 系統總體架構

本系統從總體架構角度主要分為移動端的點餐微信小程序、云開發內容管理（CMS）的菜品管理頁面以及云開發平臺自帶的數據庫、云函數，如圖1所示。手機端程序采用微信小程序開發，所提供的主要功能是用戶用它進行菜品選購；云開發內容管理（CMS）便于商家管理菜品信息的增加、刪除、修改、查詢等；云開發數據庫存儲菜品信息、用戶數據等，API可以讓手機端的點菜和后臺的數據實現交互。

2.2? 功能模塊設計

2.2.1? 移動端功能模塊設計

手機端的功能模塊即點菜軟件。通常，顧客在餐館的點菜過程如圖2所示。根據點餐過程設計微信點餐軟件的主要功能，可以將其分為四個部分：首頁、分類、訂單管理、個人中心。

在使用這個APP的時候，消費者無須輸入用戶的賬號和口令。因為它是在微信的主機上運行的，在得到用戶的許可授權后即可以使用。通過用戶的授權，這個軟件可以自動獲得使用者的注冊資料。

用戶在獲得權限之后，即可以通過云端數據庫進行菜品的查詢，系統會將數據反饋給用戶，而點菜小程序可將菜單的圖片、名稱、價格等信息展示給用戶。

在分類頁面中，菜單的信息顯示為一個列表，使用者可以根據菜單的類別查詢相應的菜單，迅速找到自己所需的菜單類型。

使用者瀏覽菜單時，只需點擊菜單旁邊的“添加”鍵，即可將這道菜添加到“訂購”頁面，同時還可以看到所有顧客所選菜品的圖片、名稱和價格。使用者還能在“訂購”頁面上直接刪除或增減菜品的數量。

用戶在菜單欄中選擇自己想要的菜品后，點擊這個“訂單”界面會顯示出與菜單有關的信息，并給出相應的數字，以便顧客確定菜單上的菜品量是否合適。用戶在確認后即可訂購和支付。

2.2.2? 云開發管理功能模塊設計

云開發內容管理即商家管理后臺，作用是幫助商家管理某些菜品的信息，例如添加、修改、刪除等，如圖3所示。

商家管理后臺模塊可以讓商家對菜品的屬性（包括菜品的種類、名稱、價格、圖片、細節等）進行更為細致的管理。

2.2.3? 云存儲功能模塊設計

數據庫中需要存儲菜品的基本信息和用戶的行為信息，這些信息會被展示在小程序端的用戶界面上，用于數據解析。

云存儲系統具有高可用性、高穩定性、高安全性，支持諸如圖片、視頻等非結構數據，具有存儲管理[16]、上傳管理[17]、組件支持等特性。

在該系統中云存儲系統主要用于存放小程序端的一些Logo和圖片。

云功能涵蓋多個文件，還需要CPU和其他計算資源，可以在多個不同的地區進行部署。只需寫好功能函數代碼，并將其部署到云端，便可在應用程序端進行調用，云端函數也可以彼此調用呼叫[18，19]。

3? 系統實現

3.1? 微信點餐小程序實現

該小程序提供首頁、分類、訂單管理、個人中心四大功能。

3.1.1? 首頁模塊

打開微信的第一步就是點擊微信的授權頁面，授權之后將會為用戶實現自動登錄的操作。實現該功能的代碼如下：

Page（{

//微信授權登錄

loadByWechat（）{

wx.getUserProfile（{

desc： '用戶完善會員資料'，}）

.then（res=>{

console.log（"用戶允許了微信授權登錄"，res.userInfo）;

wx.reLaunch（{

//將微信頭像和微信名稱傳遞給[我的]頁面

url： '../index/index'，}）

//保存用戶登錄信息到緩存

wx.setStorageSync（'userInfo'， res.userInfo）}）

.catch（err=>{

console.log（"用戶拒絕了微信授權登錄"，err）;

}）}，

}）

進入主頁模塊，利用onload功能函數代碼與云端數據庫API界面獲取菜品的相關信息，并以輪播圖、每日特價菜品、每日推薦等方式呈現在用戶面前，功能實現代碼如下：

//生命周期函數--監聽頁面加載

onLoad： function （options） {

wx.setNavigationBarTitle（{

title： '首頁' }）

//自動加載下面兩個函數

this.todos（）

this.getAll（）}，

todos（）{

var _this = this;

//引用數據庫

const db = wx.cloud.database（{

//這個是環境ID

env： 'cloud1-3g06cifc37cb7f3d'}）

db.collection（'todos'）.get（{

//如果查詢成功的話，就將數據放在arr數組

success： res => {

console.log（res.data）

this.setData（{arr： res.data}）}

}）}，

getAll（）{

var that=this; wx.cloud.database（）.collection（'caipin'）.skip（this.data.arr1.length）.get（{

success（res）{

console.log（res）

console.log（res.data.length）

that.setData（{

arr1：that.data.arr1.concat（res.data）}）

if（res.data.length！=0）{

that.getAll（）}

else{

wx.showToast（{

title： '加載完成'，

}）}}

}）}，

使用者可以點擊圖片來放大查看菜品，若要點菜單，只需點Logo的“+”按鈕即可完成菜品的添加操作。

實現菜品圖片放大代碼如下：

//點擊圖片放大

previewImage0： function （e） {

var imgUrl0 = this.data.imgUrl0;

wx.previewImage（{

urls： [imgUrl0]， // 需要預覽的圖片列表

current： ''，

}）}，

實現菜品添加到數據庫onclik（）點擊事件函數代碼如下：

//添加數據到數據庫

onclik（） {

const db = wx.cloud.database（）

db.collection（'tianjia'）.add（{

data： {

cpname： "[魚香肉絲]"，

images："cloud：//cloud1-3g06cifc37cb7f3d.636c-cloud1-3g06cifc37cb7f3d-1312530931/cloudbase-cms/upload/2022-07-28/z5yi6e2z0dl3cq9jbaxfld6bhooj0p9b_.png"，

price："29"，

num：1}，

}）

db.collection（'tianjia'）.get（{

//如果查詢成功的話

success： res => {

console.log（res.data）

this.setData（{

arr2： res.data

}）}

}）

wx.showToast（{

title： '添加成功'

}）}，

3.1.2? 分類模塊

用戶點擊分類圖標后，小程序將跳轉到分類頁面（該頁面會把餐廳數據庫中所擁有的菜品信息分為川菜、淮揚菜、魯菜、粵菜、閩菜、湘菜、浙菜等八大菜系）。實現菜品前端分類頁面顯示和菜品導航欄代碼如下：

<！-- // 展示數組的前八條數據 -->

{{item.cpname}}

{{item.content}}

{{item.price}}

//左邊點擊事件

left_tap： function （e） {

console.log（e.currentTarget.dataset.index）

this.setData（{

select_index：'select_index'+e.currentTarget.dataset.index}）

console.log（this.data.select_index）}，

//右邊scroll-view滑動事件

scroll： function（e） {

var h = e.detail.scrollTop//距離頂部的滾動距離

var scroll_height=0;

var select_index;}，

點擊菜品右邊購物車圖標即可以添加菜品到訂單管理頁面。

3.1.3? 訂單管理模塊

用戶點擊訂單管理圖標后，小程序將跳轉到訂單管理頁面4（該頁面包含所有用戶選擇的菜品），用戶可以在已添加的菜品中進行菜品數量的增減。實現數量增減的函數代碼如下：

//數量加函數

numadd： function （e） {

var _this = this;

const index = e.currentTarget.dataset.index;

let carts = this.data.arr;

let num = carts[index].num;//數量

num = num + 1;

carts[index].num=num;

this.setData（{

arr： carts}）;

var sum = 0;

for （var i = 0; i < carts.length; i++） {

var QC = _this.data.arr[i].num;

sum += parseFloat（QC）;}

// console.log（sum）;

var price = 0;

if （sum > 0） {

for （var i = 0; i < carts.length; i++）{

var QB = _this.data.arr[i].price;

var QR = _this.data.arr[i].num;

price += QB * QR ;}}

console.log（price.toFixed（2））

this.setData（{

add_car_num： sum，

price： price.toFixed（2）}）}，

//數量減函數

numminus： function （e） {

const index = e.currentTarget.dataset.index;

let carts = this.data.arr;

let _this = this;

let num = carts[index].num;

if （num <= 1） {

const index = e.currentTarget.dataset.index;

let carts = this.data.arr;

let state = carts[index].state;

state = 0;

carts[index].state = state;

carts[index].num = 0;

console.log（carts[index].num）

this.setData（{

arr： carts，}）;}

else {

num = num - 1;

carts[index].num = num;

this.setData（{

arr： carts，}）;}

var sum = 0;

for （var i = 0; i < carts.length; i++） {

var QC = _this.data.arr[i].num;

sum += parseFloat（QC）;}

if （sum <= 0） {

this.setData（{

ico_num： 0? ? ? }）;}

else{

this.setData（{

ico_num： 1}）;}

var price = 0;

if （sum > 0） {

for （var i = 0; i < carts.length; i++） {

var QB = _this.data.arr[i].price;

var QR = _this.data.arr[i].num;

price += QB * QR;}}

this.setData（{

add_car_num： sum，

price： price.toFixed（2）}）;}，

將菜品往左滑動可以清除該菜品，實現刪除的函數及計算金額的代碼如下：

//刪除

delete_btn：function（e）{

var that = this;

var index = e.currentTarget.dataset.index;

wx.showModal（{

// title： '提示'，

content： '刪除后不能恢復，是否刪除？'，

confirmColor：'#1da1f2'，

success： function （res） {

if （res.confirm） {

console.log（index）

var list = that.data.arr;

//移除列表中下標為index的項

list.splice（index， 1）;

//更新列表的狀態

that.setData（{

arr： list}）;

let carts = that.data.arr;

var sum = 0;

for （var i = 0; i < carts.length; i++） {

var QC = that.data.arr[i].num;

sum += parseFloat（QC）;? ? ? ? ?}

var price = 0;

if （sum > 0） {

for （var i = 0; i < carts.length; i++） {

var QB = that.data.arr[i].price;

var QR = that.data.arr[i].num;

price += parseFloat（QB * QR）;}}

//console.log（price）

that.setData（{

add_car_num： sum，

price： price}）}

else if （res.cancel） {

console.log（'用戶點擊取消'）}}

}）}

3.1.4? 個人中心模塊

該頁面會登錄用戶授權時的頭像和昵稱信息，包含我的訂單（其中包含待支付、待評價、售后/退款、全部訂單4個子模塊）、聯系客服、意見反饋等模塊。

3.2? 云開發商家后臺管理實現

進入云開發內容管理（CMS）后，需要首先創建商家管理后臺項目，再進行內容模型等數據庫字段設計，如圖4所示。本系統的功能是對菜品信息進行管理，提供添加、修改、刪除、查詢等功能，如圖5所示。

3.3? 云開發的數據庫實現

數據庫主要是存儲菜單基礎數據，對每個文字、數字和地址進行特殊唯一ID值綁定，用不同的字段名去分配各類數據類型，顯示在小程序端的界面上，如圖6所示。

4? 結? 論

該系統的應用是建立在微信主機的基礎之上的，不需要下載，也不需要卸載，由移動端的點餐微信小程序、云開發內容管理（CMS）的菜品管理頁面以及云開發端的數據庫和服務器組成。其是根據點餐流程設計小程序的主體功能，包括菜品顯示與選擇、訂單信息顯示、付款以及評價功能。

對系統功能進行調試，調試情況總結如下：

1）移動端小程序頁面正常顯示出菜品的圖片、價格、名稱等信息，正常顯示操作按鈕圖標等頁面組件信息。點擊購物車Logo鍵后，就會彈出添加成功的提示。可在訂單管理里看到所有選擇的菜品信息，點擊加減鍵可增加或減少菜品份數，動態顯示計算總金額。

2）菜單信息管理功能能夠正常顯示菜品的相關信息，使用者可以正常添加、編輯、刪除單個菜品的相關信息，能夠大量刪除所選擇的菜品信息并獲得刪除成功提示。

基于微信小程序的點餐系統成功解決了傳統點餐模式存在的點餐效率低下、服務管理混亂、等餐時間漫長等餐廳運營難題，具有一定的應用推廣價值。

參考文獻：

[1] 李昊.基于微信小程序的智能推薦點餐系統的設計與實現 [D].南京：南京郵電大學，2020.

[2] 郭銀科，鄭承承.基于微信小程序掃碼點餐平臺設計與實現 [J].網絡安全和信息化，2022（2）：84-86.

[3] 閆爍.基于微信小程序的商品展示系統的設計與實現 [D].大連：大連海事大學，2020.

[4] 李晶.基于微信小程序的美食推薦系統 [D].蘭州：蘭州大學，2021.

[5] 梁驍.基于微信小程序的移動學習平臺建設與應用研究 [D].牡丹江：牡丹江師范學院，2021.

[6] 姚梅玲.基于微信小程序的Scratch移動學習資源的設計和開發 [D].昆明：云南師范大學，2020.

[7] 史櫓，吳毅堅，趙文耘.JavaScript代碼分析技術綜述 [J].計算機應用與軟件，2018，35（11）：16-25+32.

[8] 李孟輝.基于Web的云開發平臺的研究與實現 [D].成都：電子科技大學，2017.

[9] 舒嘉豪.基于微信小程序的答題系統的設計與實現 [D].武漢：華中科技大學，2020.

[10] 張麗瑩.《教育技術理論與創新》課程的微信小程序的設計研究 [D].內蒙古：內蒙古師范大學，2018.

[11] 李常寶.基于微信小程序的電子商城的設計與開發 [J].呂梁教育學院學報，2021，38（3）：133-136.

[12] 孫路玲.微信小程序的場景應用研究 [D].長沙：湖南師范大學，2022.

[13] 賴曉鳳.微信小程序跨平臺競爭研究 [D].長沙：湖南大學，2020.

[14] 張曉蘭，陳奮.基于“微信小程序”的闖關游戲式學習平臺研究 [J].廈門城市職業學院學報，2019，21（3）：78-82.

[15] 李珊.基于微信小程序的學生活動管理系統的設計與實現 [D].廣州：廣東工業大學，2020.

[16] 陸禹文.基于微信小程序的移動學習平臺的設計、開發及應用 [D].蘭州：蘭州大學，2021.

[17] 梁艷玲.基于HTML+CSS網頁布局定位參數研究 [J].呂梁學院學報，2022，12（2）：17-22.

[18] 徐杰，孟建新.基于Javascript技術的關聯表單設計和實現 [J].現代電子技術，2008（2）：93-94.

[19] 張蕊，歐陽資銘，李文杰，等.校園食堂預約微信小程序的研究與開發 [J].傳感器世界，2021，27（5）：15-18+24.

作者簡介：王馗（2001.01—），男，漢族，貴州金沙人，本科在讀，研究方向：軟件編程；通訊作者：吳勇靈（1976.05—），男，苗族，貴州惠水人，教授，博士，研究方向：信息技術與物理教學融合研究、數據挖掘。