基于微信小程序的点餐系统的设计与开发

基于微信小程序的点餐系统的设计与开发

作者：种倩倩 孙丽英 陈滨 郭雅榕

来源：《电脑知识与技术》2022年第19期

摘要：随着网络技术的进步，生活变得更加信息化，用户的消费方式也在不断升级，各种电商层出不穷。传统商业经营越发困难，比如店铺高额的租赁成本和人工成本。支付方式的巨大改变、购物理念的转换等都让人们日常活动越来越离不开手机。微信在巨大的在线用户数量和“即用即走”的使用理念上，诞生了微信小程序，小程序一跃成为热门的新型线上平台。该小程序利用云开发模式，开发者只需注重易点餐系统的前端页面构建，开发出基于微信小程序的

点餐系统。易点餐小程序旨在实现点餐的快捷操作，无须排队等待，提高点餐效率。系统主要模块为商家新品预览、商品信息展示、购物车管理、下单管理、个人信息管理。

关键词：小程序;云开发;点餐系统;O2O

中图分类号：TP311.5 文献标识码：A

文章编号：1009-3044（2022）19-0066-04

1 引言

传统餐饮是消费者进入店铺，由商家张贴的菜单进行下单。消费者将需求告知商家，这样虽然便于彼此交流，却很影响商家的工作效率，也浪费消费者时间。在点餐的过程中也经常发生一些小问题，好比点餐纸丢失，或服务员的操作失误，笔迹不清等。

科技的进步使人们的生活习惯发生变化。从传统的电话点餐变为外卖到家，从到店点餐变为手机点餐，人们开始追求更快捷的方式。腾讯公司掌握先机，及时推出免费服务应用程序，在原本大量用户的基础上推出小程序，能够对用户实现大规模推送，同时根据个人、地区特点进行多样化的开发[1]。

2 相关理论与技术支持

2.1 小程序云开发简介

云数据库：为开发者提供方便的数据库，直接进行写、查等操作。提供的SDK能够实现在前端界面中直接对数据进行操作，或者利用云函数对集合中的记录进行增删改查操作。

云存储：是一种文件存储服务，使得文件扩展性更高、成本更低、更加可靠和安全。快速地实现上传、下载操作且管理方便。支持更加灵活的鉴权策略，完成不用类型的用户对文件的管理。具体使用方法需要开发者在客户端或者云存储处利用API接口操作。

云函数：可理解为在云端中直接应用函数，免费搭建专属服务器。但是需开发者编写对应的函数方法，还需要及时部署到建立的云端中，这就可以在腾讯云安全且弹性的执行所写的代码。

2.2 微信小程序云开发流程

下面是云开发从开通项目到上线的所有过程。

在开发小程序之前，需要使用个人信息，申请一个小程序开发账号。以后就可以使用个人账号管理小程序，具体开发步骤按照下面执行。

1）完成账号申请后，开发人员获得小程序专属的ID;

2）下载官方开发者工具;

3）初始化项目;

4）环境设计：本次开发使用云开发模式。需要在官方提供的开发环境下，注册并填写对应信息。

3 需求与开发系统分析

3.1 需求分析

需求分析是开发前提，开发者主要关注点是开发的软件是否具备开发的价值。在易点餐开发的早期，要想确保开发的准确性。要求分析师对于易点餐中的每一个功能点，所涉及的内容要尽量考虑周全，同时考虑后续的性能。这样才能使得后续的工作更加方便、快捷、不容易出错[2]。

3.2 可行性分析

任何一个系统的开发，都需要对实施经费、时间、所需要的各种硬件资源等进行评估。系统开发不仅仅只是考虑技术，还需要结合各种因素。以下是易点餐系统可行性分析说明：

1）经济可行性

主要是分析投入成本、后期项目上线后的运维成本[3]。此次系统开发是没有硬件设备的投入的。因为数据库、云端存储都是微信开发者统一提供的，主要的投入成本是前期的市场推广费用、人力资源投入和基本开发设备的投入;后期商家的使用费用、广告费用。项目上线后可获得利润收入、产生流量。综合对比项目的投入成本和利润收益可以看出，在有限的投入后，可以产生长期的利润。

2）技术可行性

易点餐系统主要囊括数据库的构建、接口的调用。系统的前端实现使用的是微信官方提供的开发工具和语言，后端是使用云开发。这样极大地降低了开发的技术性，使开发人员可以更好地专注于前端视图。

3.3 系统总业务流程分析

系统整体功能介绍，微信搜索“易点餐”或通过扫一扫，进入商家界面。首次进入小程序时，会自动获得用户信息，然后进入系统整体界面，包括点餐入口和新品展示。点击“开始点餐”进入商品展示区，主要包括商品信息查看、加入购物车、购物车信息展示和提交订单功能。

下单后，系统会给出取餐时的号码，并且会将订单中的一些信息提交到数据库集合中。点击导航栏“我的”，可查看个人信息。系统的总体流程如图1所示。

3.4 系统功能总体分析

1）系统功能设计方面比其他系统设计得精简一点，尽量把不必要的操作去掉。

2）系统界面设计简洁，可快速找到点餐入口。

3）使用场景方面：小程序的使用场景比较明确，主要是线下的小型实体店，使得用户快速分享系统和进行线上购物。

基于小程序的设计原则，以及为了线下实体店更好地为用户提供快速使用、用完即走的使用体验。易点餐小程序业务模块主要分为：商家新品展示、商品信息、購物车、订单、个人信息模块。

整个易点餐总能分析流程见图2。

由图2系统功能总体分析图，可以看出易点餐小程序客户端主要功能：用户查看商品（新品动态展示、商品全部分类、详细信息、加入购物车等）、管理购物车模块、个人信息模块（取得登录信息、查看个人信息）、订单信息模块总共4个模块。

3.5 系统功能详细分析

由需求分析、系统总业务流程、系统功能总体分析，可以看出系统受众人群是消费者和商家。其中需求分析可以看出，消费者应具有易点餐总体分析图里所有的功能。但商家除了具有上述功能外，还可以查看数据库（商品信息、消费者订单信息、消费者个人基本信息），并具有修改、查看、删除等功能。

3.5.1 用户总功能图

由结构图可以看出，用户需求基本已经满足，前端页面实现信息展示功能，后端主要是经过云开发来管理用户数据和页面商品信息。

3.5.2 点餐功能图

消费者进入点餐入口后，可以看到商家提供的商品信息，选择商品加购下单。图4是其对应的点餐流程图。

由结构图看出，浏览商品的时候，加购的商品信息是先提交到缓存区中。只有确认完个人的加购信息，才会上传到对应的数据库集合，这种操作可确保数据记录的精确性;同时利用缓存区，可保证下单的流畅性。避免了不断访问数据库带来的流量消耗，保证自身的网络速度。

3.5.3 购物车

消费者在加购完商品时，为了方便用户在付款前确定个人的加购信息，系统提供购物车管理功能。用户可随时查看个人加购的商品、管理加购数量、能够清空加购商品，轻松实现消费者对购物车的管理。购物车的系统设计基本满足了用户在日常生活中的需求。

3.5.4 个人信息管理

用户在商品展示界面中，完成加购操作后，给商家查看手机上完成的订单信息。选择对应的付款方式后，就可以等待服务员提供商品。此时用户也可以在个人模块，查看个人信息或者已完成订单。

1）用户在首次进入易点餐系统时，授权获取了微信头像和用户名。点击底部一栏“我的”可查看具体信息。

2）用户如果想要分享易点餐系统给自己的朋友，可以选择“转发好友”功能，此时会自动跳转到微信分享界面。

3）完成下单操作后，用户是可查看订单的，但是如果没有加购过商品，在订单页面中，显示空信息。

3.6 系统界面设计

此系统是在微信平台上来开发小程序。对于微信小程序而言最高的页面深度是不能超过五层的，所以此次点餐系统的页面设计，要合理地分配每一级页面的内容。

1）一级界面

本系统的一级界面分别是“首页”“订单查询”“我的”三个主要部分。其中默认进入页面是首页，首页的内容主要是点餐页面的入口和滚动展示商家最新推广的产品。点击购物车，显示加

购的大致内容。点击“我的”，主要是用户的信息界面展示，包括用户的微信头像和用户名、手机号、分享功能。

2）二级界面

除了“首页”和“我的”这两个一级界面外，通过点击一级界面中的首页中间“开始点餐”按钮。进入菜单展示，消费者可查看并加购商品。点击一级界面中“我的”选项栏，此时提供了一个二级界面转发选项，点击转发会转到自己想要转发的群组。

3）三级界面

点击首页中的开始点餐，进入餐品展示部分，浏览后加入购物车，添加完成后，提交订单后就进入到三级界面，三级界面主要是订单详情页。可以点“支付”，也可返回到点餐页面，重新加购[2]。

4 系统设计实现

4.1 易点餐数据库设计

设计数据库：在工具栏中点击“云开发”后获得数据库。本次系统开发总共涉及dishes、order、user三个数据库。其中dishes用来存储商家呈现给用户的商品信息、order用来存储订单信息、user用来存储用户记录。注意数据库权限设置用户只读，管理员读写。

存储管理：不断发展的大数据和网络技术，要求将数据存储在云端，这样就可以实现云端数据访问，使得数据共享更加方便。谷歌、阿里巴巴、亚马逊、腾讯等成立自己的云服务平台，为大众提供服务。目前使用的云存储就是腾讯建立云平台，来达到存储数据的作用[4]。

云开发给开发者提供能够利用的存储空间，可以上传到云端、而云端的管理也可权限限制。开发者经过调用API来利用云存储保存文件。在使用时，需要操作云存储空间。

1）数据库概念设计

云数据是MangoDb类型，其目前是开源的、不固定、高性能、面向文档类型的NoSQL数据库。主要是将数据存储为文档，文档之间再进行嵌套，快速地找到记录。

云开发中的数据库与MangoDb语法相似，集合中存在的记录实质上也是JSON对象。虽然是一个数据库，但是提供多个集合。其中集合可以看作一个JSON数组，数组中每个对象又是一条JSON类型的记录。

2）数据库逻辑JSON结构设计

数据库中的表，在云开发数据平台中称之为集合，本次系统开发涉及了3个集合，分别是商品信息集合、订单信息集合、用户个人信息集合。

云数据库中集合的記录，声明随机、唯一的id和_openid（可自定义）。当用户想要访问数据库中某条记录，只要经由集合名字，对应的记录中_openid便可完成调用。用户不同其_openid也存在差异，记录中id也均不一样。

权限在云数据库中是用户端和管理端两种方式，管理人员可以直接在数据库中对记录的数据实现增、删、改、操作。为保护云数据库中的数据，需要明确不同类型的访问者所具有的数据库权限，权限设置见表1。

①dishes集合里存储的记录，是从coco公开的API中调取的数据。数据中主要包括不同分类中的商品信息。

数据库中的菜单集合设计如下：

下面是商品dishes集合中，每个字段中的数据存储格式，每个箭头代表当前字段里包含的数据：

②菜单集合中的数据是用户在提交加购信息时，将存储商品的基本信息的字段、加购总金额、加购总数量提交到缓存中。当用户在订单预览的页面中，用户检查要提交的信息时候，连接数据库，上传到菜单集合中。

由需求分析、系统总业务流程、系统功能总体分析，可以看出系统受众人群是消费者和商家。其中需求分析可以看出，消费者应具有易点餐总体分析图里所有的功能。但商家除了具有上述功能外，还可以查看数据库（商品信息、消费者订单信息、消费者个人基本信息），并具有修改、查看、删除等功能。

3.5.1 用户总功能图

由结构图可以看出，用户需求基本已经满足，前端页面实现信息展示功能，后端主要是经过云开发来管理用户数据和页面商品信息。

3.5.2 点餐功能图

消费者进入点餐入口后，可以看到商家提供的商品信息，选择商品加购下单。图4是其对应的点餐流程图。

由结构图看出，浏览商品的时候，加购的商品信息是先提交到缓存区中。只有确认完个人的加购信息，才会上传到对应的数据库集合，这种操作可确保数据记录的精确性;同时利用缓存区，可保证下单的流畅性。避免了不断访问数据库带来的流量消耗，保证自身的网络速度。

3.5.3 购物车

消费者在加购完商品时，为了方便用户在付款前确定个人的加购信息，系统提供购物车管理功能。用户可随时查看个人加购的商品、管理加购数量、能够清空加购商品，轻松实现消费者对购物车的管理。购物车的系统设计基本满足了用户在日常生活中的需求。

3.5.4 个人信息管理

用户在商品展示界面中，完成加购操作后，给商家查看手机上完成的订单信息。选择对应的付款方式后，就可以等待服务员提供商品。此时用户也可以在个人模块，查看个人信息或者已完成订单。

1）用户在首次进入易点餐系统时，授权获取了微信头像和用户名。点击底部一栏“我的”可查看具体信息。

2）用户如果想要分享易点餐系统给自己的朋友，可以选择“转发好友”功能，此时会自动跳转到微信分享界面。

3）完成下单操作后，用户是可查看订单的，但是如果没有加购过商品，在订单页面中，显示空信息。

3.6 系统界面设计

此系统是在微信平台上来开发小程序。对于微信小程序而言最高的页面深度是不能超过五层的，所以此次点餐系统的页面设计，要合理地分配每一级页面的内容。

1）一级界面

本系统的一级界面分别是“首页”“订单查询”“我的”三个主要部分。其中默认进入页面是首页，首页的内容主要是点餐页面的入口和滚动展示商家最新推广的产品。点击购物车，显示加购的大致内容。点击“我的”，主要是用户的信息界面展示，包括用户的微信头像和用户名、手机号、分享功能。

2）二级界面

除了“首页”和“我的”这两个一级界面外，通过点击一级界面中的首页中间“开始点餐”按钮。进入菜单展示，消费者可查看并加购商品。点击一级界面中“我的”选项栏，此时提供了一个二级界面转发选项，点击转发会转到自己想要转发的群组。

3）三级界面

点击首页中的开始点餐，进入餐品展示部分，浏览后加入购物车，添加完成后，提交订单后就进入到三级界面，三级界面主要是订单详情页。可以点“支付”，也可返回到点餐页面，重新加购[2]。

4 系统设计实现

4.1 易点餐数据库设计

设计数据库：在工具栏中点击“云开发”后获得数据库。本次系统开发总共涉及dishes、order、user三个数据库。其中dishes用来存储商家呈现给用户的商品信息、order用来存储订单信息、user用来存储用户记录。注意数据库权限设置用户只读，管理员读写。

存储管理：不断发展的大数据和网络技术，要求将数据存储在云端，这样就可以实现云端数据访问，使得数据共享更加方便。谷歌、阿里巴巴、亚马逊、腾讯等成立自己的云服务平台，为大众提供服务。目前使用的云存储就是腾讯建立云平台，来达到存储数据的作用[4]。

云开发给开发者提供能够利用的存储空间，可以上传到云端、而云端的管理也可权限限制。开发者经过调用API来利用云存储保存文件。在使用时，需要操作云存储空间。

1）数据库概念设计

云数据是MangoDb类型，其目前是开源的、不固定、高性能、面向文档类型的NoSQL数据库。主要是将数据存储为文档，文档之间再进行嵌套，快速地找到记录。

云开发中的数据库与MangoDb语法相似，集合中存在的记录实质上也是JSON对象。虽然是一个数据库，但是提供多个集合。其中集合可以看作一个JSON数组，数组中每个对象又是一条JSON类型的记录。

2）数据库逻辑JSON结构设计

数据库中的表，在云开发数据平台中称之为集合，本次系统开发涉及了3个集合，分别是商品信息集合、订单信息集合、用户个人信息集合。

云数据库中集合的记录，声明随机、唯一的id和_openid（可自定义）。当用户想要訪问数据库中某条记录，只要经由集合名字，对应的记录中_openid便可完成调用。用户不同其_openid也存在差异，记录中id也均不一样。

权限在云数据库中是用户端和管理端两种方式，管理人员可以直接在数据库中对记录的数据实现增、删、改、操作。为保护云数据库中的数据，需要明确不同类型的访问者所具有的数据库权限，权限设置见表1。

①dishes集合里存储的记录，是从coco公开的API中调取的数据。数据中主要包括不同分类中的商品信息。

数据库中的菜单集合设计如下：

下面是商品dishes集合中，每个字段中的数据存储格式，每个箭头代表当前字段里包含的数据：

②菜单集合中的数据是用户在提交加购信息时，将存储商品的基本信息的字段、加购总金额、加购总数量提交到缓存中。当用户在订单预览的页面中，用户检查要提交的信息时候，连接数据库，上传到菜单集合中。