《基于微信小程序的线上点餐服务系统的设计与实现》9500字（论文）

-PAGEII-基于微信小程序的线上点餐服务系统的设计与实现摘要毫无疑问，科技改变生活。随着生活节奏的加快，人们无疑会对生活中各种活动的便利性提出越来越高的要求。而微信小程序所拥有的无需下载，用完即走的优势，无疑正受到各行各业许多应用场景的青睐。就拿饭店点餐为例，扫码点餐为人们提供了另外一种选择。越来越多人乐意接受这种点餐方式。本文会基于饭店点餐的应用场景，对买卖双方各自的诉求进行分析，然后提供了一种点餐类微信小程序的设计思路和实现方法。对于买家而言，买家有通过扫描二维码进行点餐，支付订单，在订单完成之后进行评价等需求。对于卖家而言，卖家有对菜单进行管理，处理订单等需求。本文中所介绍的小程序所涉及的主要技术包括微信小程序的框架，JavaScript语言，WXML语言、WXSS语言、微信小程序的云开发功能，通过CMS内容管理平台实现对云数据库的增删查改，有关数据的云存储等技术。关键词：微信小程序；点餐；云开发目录30502摘要 I18013目录 III13760第1章绪论 1124181.1研究背景及其意义 168261.2国内外研究的现状 1279931.3本文设计的目标和主要内容 28325第2章点餐小程序开发的相关技术 3105672.1微信小程序 3318362.2WXML语言、WXSS语言和JavaScript语言 3323852.3小程序云开发 3316442.4CMS内容管理平台 322680第3章扫码点餐微信小程序的设计与实现 5266003.1点餐小程序的设计思路 575833.2点餐小程序的具体实现 536353.2.1首页的开发 544103.2.2菜品搜索页的开发 7112763.2.3浏览饭店菜单页面的开发 11187683.2.4购物车页面的开发 12235623.2.5确认订单页的开发 1223663.2.6个人中心页面的开发 1488733.2.7我的订单页面的开发 16163203.2.8评价列表页面的开发 1918313.2.9管理员登录页面和订单管理页面的开发 191249第4章点餐小程序的系统总结 22164074.1全文总结 2283734.2未来展望 2231178参考文献 23PAGE2–PAGE16–第1章绪论1.1研究背景及其意义在传统的顾客前往饭店就餐的应用场景中，顾客首先要做的就是点餐，一般情况下，需要服务员为顾客提供菜单，然后，在顾客点餐完毕以后，需要服务员这个中介方帮忙向后厨传达顾客的需求，后厨制作菜品完成以后，服务员再将菜品端给顾客，顾客在吃饱喝足以后，结账完毕后离开。毫无疑问，这种点餐方式效率不高。比如说，顾客们集中在饭点前往饭店的话，在这种客流量较大的场景中，很多顾客在相近的时间段里都有点餐的需求，服务员可能会出现不够用的情况。为此造成的部分顾客需要等待较长时间点餐的现象可能会造成顾客体验不佳的结果，导致饭点的营业额下滑，商家利益受损。而要是采用在每张桌子上粘贴二维码，顾客通过扫描二维码的方式进行点餐的话，则不会出现服务员不够用的情况。就算在客流量较大的情况下，顾客们也完全可以同时点餐，并且，顾客不需要服务员这个中介将菜单递给后厨。在顾客选购完自己想要吃的菜品以后，后厨在管理端接收到菜单，然后后厨把相关的菜肴制作完成以后，可以委托服务员上菜。在整个应用场景中，服务员只有上菜这一项工作内容，减少了服务员的工作负担。同时，顾客等待上菜的时间也能得到有效地减少，这有助于改善顾客的用餐体验，提高顾客的回头率[1]。总的来说，通过扫码点餐的方式，一方面，顾客无需服务员的协助即可点菜并将菜单传达给后厨，另一方面，饭店的运营成本也能得到有效的降低，服务效率也能得到有效的提高，也改善了顾客的用餐体验，因此能实现一举多得的效果。1.2国内外研究的现状在借助智能设备和互联网技术的情况下，各种点餐软件为传统的餐饮店提供了新的选择。在国外方面，他们在餐饮店里布局有关的智能点餐软件的起步时间较早。例如，在上世纪70年代，早期的餐饮店智能点餐软件就已经出现了。又例如，在本世纪初的2007年，世界上的第一家无人餐厅出现了，一时风头无两。在这家餐厅的整个服务过程中，顾客都看不见有关服务人员的影子，顾客需要在饭店内的计算机设备上，自行完成诸如浏览菜单、点餐、结账等操作。不久以后，日本的一家饭店则将类似的点餐软件移植到智能手机端，使得顾客不再需要在计算机终端进行点餐了，顾客可以在有关的APP上预约点餐，使得顾客的时间得到有效的节省，顾客的用餐体验得到了有效的改善[2]。在国内方面，各行各业都在寻求与互联网行业的紧密融合。比如说，拿我们最常接触的餐饮业为例，许多好用的APP相继诞生了，比如，以外卖服务为主的《饿了么》、《美团》等APP，又比如，许多店家不愿意支付给《美团》等中介服务费，也开发了商家自己的点餐类APP，比如麦当劳（中国）开发的《麦当劳》APP。但毫无疑问，如果每家餐厅都开发一个点餐类的APP，用户为了点餐而不得不下载大量的APP的话，反而会使得顾客智能手机内存不够用，用户就餐体验得到恶化。而小程序无需下载，即用即走的特性正好解决了这一痛点。与此同时，微信小程序无需下载的特性也为软件开发者减少了需要适配不同的手机操作系统的负担[3]。1.3本文设计的目标和主要内容为了节约顾客的点餐时间、改善顾客的用餐体验和减少商家的运营成本，本文设计并开发出了一个可以扫码线上点餐的微信小程序，它包括手机端的微信点餐小程序和基于云开发CMS内容管理平台的网页端管理页面。本文设计的目标和内容主要有以下几个方面：根据顾客的点餐需求和商家的管理需求，确定小程序的主要功能。根据顾客和商家的需求设计有关的用户界面，使得顾客可以完成整个点餐过程，商家可以管理订单的状态。设计并开发出完整的点餐小程序，实现菜品搜索、人气菜品的推荐，菜单的浏览、点餐、支付账单、顾客评价、管理用户信息、对于菜单上菜品的增删查改、后厨接收菜品等诸多功能。

点餐小程序开发的相关技术2.1微信小程序依托于微信这个流量极大的平台，小程序应运而生。虽然它依托于微信平台，但它本身所拥有的的诸多优势让广大开发者和用户无法忽视。用户们无需下载，可以真正意义上实现“即用即走”。毫无疑问，小程序是能够和许多APP相辅相成的。比如说，在一些使用频率很低的线上服务场景中，小程序无需下载、即用即走的特性十分契合类似的应用场景。它为许多专业开发者和个人开发爱好者提供了一种新的选择。而作为微信大生态系统的一部分，在微信的支撑下，开发小程序所需要花费的精力和成本会比开发一个独立的APP少得多，使得其试错成本比较低，能够吸引更多有需求的商家的注意[4]。另外，由于依托于微信这个流量极大的平台，也能有助于有关商家进行引流，以及亲戚朋友之间相互分享。用户既可以通过点击微信好友发送的有关小程序链接打开使用，也可以通过模糊搜索进入有关小程序，还能直接通过微信扫一扫有关的二维码从而迅速进入目标小程序。2.2WXML语言、WXSS语言和JavaScript语言WXML与HTML语言很像，都主要是对有关页面的内容进行一定的布局，而WXSS语言能够决定WXML布局的相关组件的样式以何种方式呈现在用户界面，而JavaScript语言能够使得用户能在有关页面与小程序进行交互，实现某些特定的逻辑功能。2.3小程序云开发小程序的云开发功能使得很多开发者不需要亲自搭建后台，而只需要借助云开发提供的云数据库。使得开发者可以将有关数据存储在云数据库或者根据有关图片或音频在云数据库中存放的FileID或者有关数据存放的路径对其进行引用，大大减少了有关开发者的开发难度和开发成本[5]。2.4CMS内容管理平台小程序的云开发功能中所附带的CMS内容管理平台的开通非常方便，它使得开发者可以在Web端管理云数据库的内容。在开通这项功能的过程中，我们需要设置有关的管理员账号和密码。一个小程序AppID对应一个云开发环境，一个云开发环境对应一个CMS内容管理平台。我们在设置好了有关内容管理平台的管理员账号和密码，CMS内容管理平台自动配置成功以后，我们就可以根据云开发“内容管理”里面提供的网址，在Web端登陆我们的CMS内容管理平台。在进入平台以后，我们需要进行相关配置，使得有关项目的内容模型与云数据库中的数据集合保持一致，这样可以使得我们在Web端的CMS内容管理平台就能更加直观地管理云数据库的内容，使得有关商家也能轻而易举地管理目标小程序的某些数据。扫码点餐微信小程序的设计与实现3.1点餐小程序的设计思路我们需要根据对顾客和商家双方的需求进行分析，从而对有关小程序进行设计。从顾客的角度来看，顾客在有关饭店的餐桌旁坐下以后，顾客有扫码点餐、查看菜单、选购菜品、下单并完成支付、查看订单、取消订单、用餐完成后进行评价等诸多需求。而从商家的角度看，商家有推荐人气菜肴、更改菜单、接收订单、处理订单、查看顾客评价等诸多需求。综上所述，在了解了顾客和商家双方的需求以后，我们可以设计与各项功能有关的模块。比如，我们可以另外写一个生成二维码的小程序，利用它生成包含有关饭店桌号的文本信息的二维码，然后在点餐小程序当中，利用scanCode()方法，识别桌号二维码中储存的文本信息，以此来获取桌号。又比如，我们可以把有关菜单的数据储存在云数据库中，每一项菜品都有所属分类、对应图片、价格、销量等元素与之对应。管理员可以在CMS内容管理平台实现对菜品的增删查改[6]。类似地，我们可以把顾客的订单和评价等数据也储存在云数据库中，方便商家对其进行管理或者查看。3.2点餐小程序的具体实现3.2.1首页的开发首页效果图如图3.1所示：（1）首页轮播图的开发在首页的最上方，我们希望开发一个轮播图。根据微信官方文档，我们可以结合swiper组件，image组件，wx:for列表循环等相关指导内容，实现对云端数据的请求，以及结合CMS内容管理平台的操作，可以实现轮播图的增删查改。（2）搜索功能的开发紧接着，我们需要开发一个菜品的搜索功能，我们可以利用input组件获取用户输入内容，利用点击事件实现页面的跳转，在跳转到菜单页面之后，我们可以通过模糊搜索来实现对菜品的搜索。核心代码如下：db.collection('food').where({name:db.RegExp({regexp:searchKey,options:'i'})}).get()图3.1（3）九宫格分类布局的开发我们接下来要完成九宫格分类布局的开发，如图3.1所示。就矢量图标而言，我们可以在阿里巴巴矢量图标库中下载一些我们需要用到的图标，比如搜索图标、首页图标、购物车图标、个人中心图标等，然后根据其在小程序中存放的路径进行引用。对于“扫码点餐”、“饭店菜单”和“饭店位置”这三个部分，我们可以分别编写一个bindtap点击事件，使得顾客在用户页面点击有关图标以后小程序会跳转到不同的目标页面。在主页对应的JS文件中，我们可以结合wx.navigateTo和有关页面的路径实现页面的跳转[7]。（4）人气菜品推荐如图所示，我们可以先在Wxml文件中对整体页面的内容进行一个大概的布局，在Wxss文件中，我们可以在有关菜品的售价前面添加一个钱的符号“￥”。另一方面，我们需要“人气菜品”和“更多菜品”这两部分关于主轴对齐，所以我们需要调用flex布局中的justify-content属性，从而达到我们想要的效果。关于菜品数据的获取，我们可以通过编写云函数的方式来对有关数据进行获取，在云函数中，我们需要对云开发环境进行初始化。不管用户点击有关菜品的图片还是“更多”，小程序的视图层都将跳转到完整菜单页面。（5）饭店位置页面图3.2在顾客点击首页中的“饭店位置”图标以后，我们所要跳转到的目标页面如图3.2所示。首先，我们需要设置目标饭店所在的位置，为了完成这个小目标，我们需要在腾讯地图中查询目标饭店的经纬度，然后在地图上进行有关地点的标注。在wxml文件中，我们可以写下饭店地址和联系电话。另一方面，为了使有关地图能在我们的小程序中显示出来，我们需要运用小程序的map组件，并且用longitude，latitude，markers等地图基础属性来设置目标地点的经纬度并且对其进行标记[8]。3.2.2菜品搜索页的开发搜索页面效果图如图3.3所示：显而易见，该小程序的菜品搜索页主要包含“菜品搜索框”、“搜索结果列表”和“购物车”这三部分。（1）搜索页面顶部搜索框的开发我们可以将首页中的有关搜索框的样式直接拿到该页面复用，因此我们可以充分参考首页中关于菜品搜索框这一部分的代码。（2）搜索结果页的编写另一方面，显而易见，我们的菜品模糊搜索结果列表和首页的人气菜肴推荐列表在用户端呈现的效果非常相似，不同的是，在菜品的模糊搜索页面，我们多了“加”和“减”这两个按钮和中间的数字。因此，在菜品的模糊搜索页面，我们可以充分借鉴首页中关于“人气菜品”部分的代码模块，另外，我们需要补充能够实现与加减菜品有关的逻辑的代码模块，也就是需要顾客在点击相关的“加”或者“减”按钮以后，用户界面需要出现与之相对应的反馈，比如，菜品数量的增加或者减少，购物车中的菜品的增加或者减少，订单总价的增加或者减少等等。图3.3（3）加减菜品的逻辑实现我们需要做的，就是实现在客户点击有关的按钮以后，有关菜品的数量会出现对应的变化。因此，我们需要构造对应的点击事件，使得这一功能能够得到实现。（4）菜单底部总价计算汇总功能的实现如图3.4所示：（5）购物总价和数量的逻辑我们是通过JS文件里的逻辑代码模块实现有关功能的。至于如何实现这一功能，首先，我们可以对有关菜单进行一个遍历的操作，查询到哪些菜品被顾客点击了，然后把与之相对应的菜品的数量进行相应的加减。然后，我们需要对购物车也进行一个遍历的操作，查询到与用户的点击相对应的菜品，实现数量上进行相应的加减操作，如果购买数为零，就把有关菜品在购物车删除。然后，我们可以根据购物车中的菜品列表，对其进行相应的查询，根据菜品的数量以及单价，算出本次订单的总价，然后赋值给一个变量，并在页面上将相应的数字显示出来。图3.4（6）购物车数据的存放为了存放购物车中的有关菜品数据，我们可以在JS文件里面定义一个数组。当顾客每次加减有关的菜品的时候，我们需要在这个存放了菜品数据的数组中更新有关数据。为了实现有关的交互逻辑，我们需要用到findIndex()、find()、array.splice()等方法。购物车蒙层的实现如图3.5所示，当顾客点击购物车时，小程序会弹起一个已点菜品的列表，并且列表上方还会出现一个蒙层的效果。至于如何才能实现有关的蒙层效果，首先，我们需要在wxml文件中布局一个已选菜品的列表和一个蒙层。然后，我们需要在wxss文件中对这两部分的样式进行相应的修饰，其中，关于蒙层部分的wxss代码主要如下：.modal-mask

{

position:

fixed;

top:

0;

left:

0;

width:

100%;

height:

100%;

opacity:

0.6;

background:

#000;

z-index:

666;}图3.5（8）购物车弹起之后有关列表的实现在顾客点击购物车图标，购物车弹起以后，会出现有关的已点菜品的列表。不难发现，这里的列表和之前的页面中所呈现出来的列表非常相似，我们也需要在顾客点击相应的按钮以后，实现对有关菜品的加减操作，并且，这里还多了一个直接将某项菜品清空的操作。值得注意的是，当顾客在这个页面修改数据时，我们需要在原来的菜单上也实现同步的变化，实现有关的被选购菜品的变化。（9）购物车弹起之后的滑动冲突显而易见，当顾客使购物车弹起之后，之前的菜单列表和购物车中被选购的菜品列表出现在同一个页面，使得两个列表的滑动功能出现冲突，因此，我们需要在购物车中被选购的菜品列表的根的布局的样式中加入overflow:auto属性。（10）购物车数据的缓存为了方便在各个页面引用购物车中的菜品数据，我们可以在本地缓存有关的数据，至于如何将有关数据缓存在本地，我们可以充分借鉴小程序中常常需要用到的缓存用户的登录状态。将数据缓存在本地其实挺简单的，我们只需要编写这样的一行代码——wx.setStorageSync(‘cart’,arr)就可以实现相关的功能[9]，当顾客点击购物车中的加减菜品的按钮的时候，我们对有关数据进行一个本地的缓存操作，我们主要是要先整合好有关的数据，然后进行本地的缓存。（11）清空购物车里的某条菜品如图3.5所示，在购物车的弹窗页面，菜品列表中，每一项菜品的最右端有一个叉号按钮，顾客可以通过点击叉号的方式清空某一项菜品。在实际效果上，顾客点击叉号清空菜品的效果和顾客通过点击减号从而实现某一项菜品数量的清零的效果是类似的，在两种情况下，我们都需要把有关菜品从购物车中的已被选购的菜品的列表中抹去。3.2.3浏览饭店菜单页面的开发饭店菜单页面的效果图如图3.6所示：图3.6（1）菜品分类的目的当我们的菜品增多时，通过搜索是可以快速定位到某一个菜品，但是呢，如果通过菜品分类，让用户去选择购买，肯定会更方便客户的。当我们的菜品非常多且没有分类的时候，虽然老顾客可以通过搜索的方式迅速找到想吃的菜品，但是新顾客在寻找想要吃的菜品的时候，就会有很多麻烦。所以我们需要一个菜品分类功能。（2）菜品分类的实现其实呢，我们的菜品分类就是要将左侧的菜品类型列表和右侧的每个菜品分类下的菜品列表相对应。（3）菜品分组查询我们想知道菜品都有哪些分类，我们就要通过聚合分组操作，拿到目前所有菜品的分组。就是要知道我们的菜品有哪些分类。我们需要用到云开发官方的一个聚合操作——Aggregate.group()。3.2.4购物车页面的开发当顾客的购物车为空时，效果图如图3.7所示：图3.7当顾客的购物车里有菜品时，效果图如图3.8所示：这个页面的开发和购物车弹窗页面的开发有很多相似之处，之前是在弹窗页面显示购物车内容，这里是需要在一个单独的页面显示购物车内容，整体上差不多。3.2.5确认订单页的开发确认订单页如图3.9所示：（1）扫码获取桌号图3.8图3.9在顾客确认订单以前，用户首先需要扫码点餐。而开发者这里需要用到小程序的扫码识别功能，来获取桌号信息。这里用到的官方提供的wx.scanCode方法。核心代码如下：wx.scanCode({success(res){console.log(res)}})（2）顾客确认订单在顾客扫码选购完菜品，点击饭店菜单页的“选好了”按钮之后，我们需要将顾客点了的菜品以列表的方式进行显示，并且要计算求和，求出有关菜品的总价。另外，我们还需要设置一个输入框，供用户选择有几人用餐。我们还需要有下单的模拟支付功能，在用户模拟支付成功以后，我们需要改变订单在顾客端和管理员端的状态，由于没有餐饮行业营业执照，我们只能开发模拟支付功能，倘若要开发真实支付功能，则需要在模拟支付相关的代码模块中进行适当地修改。3.2.6个人中心页面的开发（1）授权登录与退出在小程序的运行过程中，我们需要顾客将一部分信息授权给我们使用，例如昵称和头像等。在“个人中心”页面，如图3.10所示，我们需要用户授权登录。为了获取有关顾客的信息，我们可以运用小程序中的wx.getUserProfile方法。用户在授权以后，我们可以实现如图3.11所示效果。关于顶部圆形头像和昵称的实现问题，在wxss文件中，我们可以运用border-radius来设置圆形图像，在wxml文件中，我们可以利用image组件和text组件来显示用户的头像和昵称。另外，我们可以运用wx.setStorageSync来对用户的数据进行缓存，并且可以在调试器中查看用户的缓存数据。另一方面，为了获取用户的缓存数据，我们需要用到wx.getStorageSync方法。至于退出登陆这一部分，我们只需要实现一个点击事件，从而实现用户登陆的退出。（2）个人中心的编写在用户登陆以后，个人中心展示效果如图3.12所示，首先，笔者需要对“客服在线”和“意见反馈”进行说明，在顾客点击这里的“客服在线”和“意见反馈”之后，小程序会跳转到微信小程序官方开发的页面。用户可以点击“客服在线”，在聊天框中输入信息，从而与在线的客服取得联系。而小程序的开发者需要登陆微信公众平台，在后台进行有关管理员与该小程序的绑定，并且在手机端，管理员必须将自己设置为“客服在线”的状态，才能接收到客户的消息，从而有助于及时与顾客取得联系。图3.10图3.11用户还可以点击“意见反馈”，从而提交对小程序功能异常的反馈或者对有关产品的建议，反馈建议中可以包括图片和文本，还可以留下用户自己的电话或者邮箱，有助于小程序开发者后续的跟进。而管理员可以在手机端或者小程序的后台处理用户的反馈。综上所述，我们可以直接借用小程序官方开发的有关功能模块。需要注意的是，这里的两个模块都是通过button按钮来实现页面的跳转的，所以我们需要用到button按钮的open-type属性。由于有关模块的功能已经由微信小程序官方实现了，所以我们需要做的，仅仅只是通过button打开对应的open-type。另外，值得注意的是，button会有其自带的样式，而我们又需要通过button打开对应的小程序官方页面，所以我们需要在WXSS文件中对其进行加工，重点需要实现去除其边框的操作。图3.123.2.7我的订单页面的开发在顾客提交订单以后，我们需要有一个可以查看订单的地方。如图3.13所示，顾客需要在在其个人中心页面当中点击“我的订单”，然后跳转到“订单详情”页面，如图3.14所示。通过效果图可以看出，我们这里可以把用户的订单信息都显示出来。（1）获取当前时间我们需要获取当前时间，因为我们订单里要显示用户的下单时间，所以我们在创建订单时就需要把下单时间上传上去，所以我们要用到一个获取当前时间的方法，代码如下：_getCurrentTime(){letd=newDate();letmonth=d.getMonth()+1;letdate=d.getDate();图3.13图3.14lethours=d.getHours();letminutes=d.getMinutes();letcurDateTime=d.getFullYear()+'年';if(month>9)curDateTime+=month+'月';elsecurDateTime+=month+'月';if(date>9)curDateTime=curDateTime+date+"日";elsecurDateTime=curDateTime+date+"日";if(hours>9)curDateTime=curDateTime+hours+"时";elsecurDateTime=curDateTime+hours+"时";if(minutes>9)curDateTime=curDateTime+minutes+"分";elsecurDateTime=curDateTime+minutes+"分";returncurDateTime;},（2）弹起弹窗当顾客点击“取消订单”按钮时，会弹起如图3.15所示的弹窗：图3.15为了实现这个弹窗，我们需要用到wx.showModal方法。顾客可以联系工作人员，然后工作人员可以在CMS内容管理平台上删除订单表中的有关订单，如图3.16所示：图3.163.2.8评价列表页面的开发“评价列表”页面的效果如图3.17所示。图3.17用户可以在个人中心点击“评价列表”，然后跳转到该页面。我们需要在顶部自定义导航栏，评价列表包括两个列表——“全部评价”列表和“我的评价”列表，我们还需要修改数据表的权限。3.2.9管理员登录页面和订单管理页面的开发（1）登录页面效果图登录页面如图3.18所示：图3.18我们在登陆成功以后就可以看见“订单管理”的入口，如图3.19所示：图3.19在登录页面，我们需要获取用户输入的账号密码，然后与事先在云数据库中设置的管理员账号密码匹配，如果匹配成功，则登陆成功，否则登陆失败。如果登陆成功，我们需要将未登录页面切换为登录页面，并且记录登录状态，使得管理员在本地缓存未被清除的状态下无须重复登陆[10]。另外，我们需要修改有关数据表的权限。（2）管理订单页面效果图该页面效果图如图3.20所示：图3.20其实管理员管理订单的页面和我们的用户订单页是很像的，所以我们可以直接参考前面的部分。我们需要在顶部自定义导航栏，并且显示有关订单列表。值得注意的是，我们需要在列表里嵌套列表。另外，需要注意的是，我们的订单的状态在整个点餐过程中会发生变化。首先，顾客点餐成功，有关订单在顾客的个人中心的“我的订单”里面会是“等待上餐”的状态。此时后厨在管理员已经登陆成功的页面里会同步接收到订单，后厨制作完成以后，点击“制作完成”按钮，然后订单在顾