基于微信小程序的点餐系统设计与实现

基于微信小程序的点餐系统设计与实现作者：王馗吴勇灵
来源：《现代信息科技》2023年第22期
收稿日期：2023-05-08
DOI：10.19850/ki.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（"用户允许了微信授权登录"，erInfo）;
wx.reLaunch（{
//将微信头像和微信名称传递给[我的]页面
url： '../index/index'，}）
//保存用户登录信息到缓存
wx.setStorageSync（'userInfo'， erInfo）}）
.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）}）
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（"用户允许了微信授权登录"，erInfo）;
wx.reLaunch（{
//将微信头像和微信名称传递给[我的]页面
url： '../index/index'，}）
//保存用户登录信息到缓存
wx.setStorageSync（'userInfo'， erInfo）}）
.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）}）
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（"用户允许了微信授权登录"，erInfo）;
wx.reLaunch（{
//将微信头像和微信名称传递给[我的]页面
url： '../index/index'，}）
//保存用户登录信息到缓存
wx.setStorageSync（'userInfo'， erInfo）}）
.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）}）
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（"用户允许了微信授權登录"，erInfo）;
wx.reLaunch（{
//将微信头像和微信名称传递给[我的]页面
url： '../index/index'，}）
//保存用户登录信息到缓存
wx.setStorageSync（'userInfo'， erInfo）}）
.catch（err=>{
console.log（"用户拒绝了微信授权登录"，err）;
}）}，
}）
进入主页模块，利用onload功能函数代码与云端数据库API界面获取菜品的相关信息，并以轮播图、每日特价菜品、每日推荐等方式呈现在用户面前，功能实现代码如下：
//生命周期函数--监听页面加载
onLoad： function （options） {
wx.setNavigationBarTitle（{
//自动加载下面两个函数
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）
arr1：that.data.arr1.concat（res.data）}）。