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

2019-09-10蒋智慧童莲

现代信息科技 2019年24期

蒋智慧童莲

摘要：微信小程序的出现结合了手机支付，更是方便了日常生活，本系统主要为了方便高校学生使用微信小程序进行自助食堂点餐。我们可以发现高校学生可以说是推动互联网行业发展的必不可少的一类人群，他们对于新兴事物的接受能力和使用能力都是很强的，点餐小程序的出现可以解决一系列的问题。

关键词：微信小程序;点餐系统;自助食堂

中图分类号：TP391.3 文献标识码：A 文章编号：2096-4706（2019）24-0014-03

Abstract：The emergence of WeChat applet combined with mobile payment is more convenient for daily life. This system is mainly for the convenience of college students to use WeChat applet to order food in the cafeteria. We can find that college students can be said to be an indispensable group of people to promote the development of the internet industry. Their acceptance and use of new and new things are very strong. The emergence of ordering small programs can solve a series of problems.

Keywords：WeChat applet;ordering system;cafeteria

1 項目背景

随着互联网时代的飞速发展，在今天，手机支付早已随处可见。但是更多的手机支付只是取代了传统的现金支付，并未实现用户自助下单、自主完成一体化。而本系统就是为了研究食堂点餐时能够实现手机自助下单并完成手机支付的过程，从而更深层次地实现手机点餐、支付一体化。

随着网络时代的高速发展，生活处处离不开手机，人们的衣食住行，方方面面都会与手机有所联系，而高速发展的时代，人们也更享受快捷的生活方式。传统的点单购物，排队是一个漫长的过程，浪费了时间，消耗了精力。点单小程序的出现大大减少了排队等待的时间。目前国内市面上的点餐小程序都可以在饭店内扫码进入点餐页面，自助加入购物车，然后通过手机支付完成下单。而本系统研究的小程序，不仅仅可以做到店内即时下单、取餐，还可以提前预约下单，自主规定取餐时间，优化用户体验，极大地减少了顾客排队等待的时间。

小程序是一个相对来说操作简单、占用空间较少的轻应用，用户上手也会特别快，没有复杂的操作。本系统研究的价值在于有效提升手机点餐、支付的一体化性能，实现自主下单、自主支付的功能，方便人们的日常生活，在快节奏的当今社会，是提高人们的生活质量和效率的良好保障。

本系统主要的研究内容是针对食堂点餐做的一个小程序，可以在系统中实现菜品显示、自助点餐下单、手机支付、新品推荐的功能。食堂商户可以将菜品实时地通过本系统展示出来，当季新品可以在首页进行推广与宣传。并且可以显示优惠活动，比如说满减活动或者是送券活动。

2 系统分析与总体技术方案

本系统的功能设计主要分为四个模块，分别为用户模块、门店模块、购物车模块和订单模块。具体每个功能的模块设计，如图1所示。

2.1 用户模块

用户模块主要是用来展示用户的一些基础信息以及绑定手机号的操作，如果有活动推出的话，会在用户第一次登录的时候进行判断，判断用户是否符合参加活动的条件，并且查看是否已经领过活动的卡券。

2.2 门店模块

门店模块主要是展示所有门店的信息，用户先选择门店再进行点餐下单，这一模块的功能主要是进行了门店位置的筛选。

2.3 购物车模块

购物车模块主要是对所有菜品进行展示，以及对单个商品加减购物车的操作，选择完成后通过结算选项跳转订单页面。购物车模块主要难点在于左右联动的实现以及页面样式的布局设计。

2.4 订单模块

订单模块会展示两种类型的订单详情，一种是即时订单类型，另一种是预约订单类型。主要技术难点在于不同用户完成下单后，会把数据发送到后台，后台会根据下单支付的完成时间来进行排序，然后生成取餐号，每天每单的取餐号都是独一无二的。

2.5 总体技术方案

微信小程序开发是一种单页面的模块开发，针对这种特性，对于每层的功能，可以先单独开发每个页面，功能实现也只针对当前页面，等基础页面开发完成之后，再根据流程串起所有页面。一些需要从上个页面获取的参数，可以通过路由传参实现。

首页登录的时候其实就获取到了用户的信息，将信息存储在了本地，在个人中心页面的时候其实是从本地读取存储的信息。首页会弹出领券的活动信息，会对用户登录进行判断，即判断其是否是在活动期间首次登录，如果是首次登录的话，会在弹出活动信息弹窗的时候将卡券直接放进用户个人卡券里。而如果不是首次登录的话，只会呈现活动的宣传，并不会有卡券放入卡包的操作。

门店展示页面，是通过地图组件获取当前的地理位置，并展示出距离当前位置最近的门店信息，以及可以选择最近的门店进行下单购买。也可以搜索你想去的店面，然后点击选择下单，进入购物车页面。

商品展示以及购物车功能页面，是需要获取门店信息的，因为不同的门店菜品的信息也是不同的。菜品的展示做了一个左右联动的效果。左侧边栏是对所有菜品的几大分类信息，右侧展示的就是对应的分类所展示的子菜单。左侧的分类会跟随子菜单的上下滚动而改变，而点击左侧菜单也会展示对应的子菜单。每个菜品的加减操作，就是一个下单选择的过程，用户可以根据自己的爱好增加菜品，底部会有当前页面所有操作的商品，也就是用户选择下单的所有商品以及对应的数量展示，如果有选错的话，也是可以直接删除的，也可以选择将购物车全部清空，重新选择菜品下单。

下单完成后调至去结算，实则是调用了微信的支付接口，支付下单的菜品。支付成功之后，会出现一个订单详情页，会展示出你所选择的菜品，以及订单金额，还会出现一个取餐号。这个其实就是一个订单页面，因为用户可以选择订单的取餐时间，所以订单分为即时订单和预约订单两种。

最后一层是用户的个人中心页面，这个页面只展示用户的头像和昵称信息，这个页面的唯一操作即绑定手机号码，绑定手机号分为两种情况。一键绑定，即如果用户选择用绑定微信号的手机号，可以通过授权一键绑定此手机号，如果不选择这个手机号，可以通过手动绑定，输入手机号码，然后获取验证码，完成綁定操作。

3 系统实现

3.1 登录首页页面设计

首页页面是用户通过微信授权登录进来的页面，主要是展示了一个轮播图和一个门店进入的入口按钮，如图2所示是登录首页页面。

本页面展示了商品的轮播图，表现出本系统的设计目的，即可以在现场免排队，提前预约下单，直接到店取。点击自助下单跳转到门店列表展示页。

在用户首次登录时，会有一些活动页面的介绍，大都是送券活动，会在用户一进入的时候弹出一个领券的弹窗，提醒用户领券。本页面展示的是一些活动推广满减活动或者领券活动，这些活动最后都会在购物车页面结算的时候，提示优惠信息。所以这些活动会放在首页进行展示。

3.2 门店展示页面设计

从首页的自助下单入口进来是所有门店的列表展示，可以选择对应的门店进行点餐。如图3所示为所有门店信息展示页面。

这里是对所有门店列表的展示，展示的顺序是按照距离用户的当前位置的远近距离来显示的。然后对于选择的门店，用户可以选择是现在就取餐还是预约一个方便的时间去取餐，点击选择跳转到菜单展示购物车页面。

3.3 个人中心页面设计

点击底部tab页我的按钮进入用户个人中心页面，该页面获取了用户的头像和昵称信息，以及可以进行绑定手机号的操作。如图4所示。