APP下载

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

2021-03-07陈帅

电子技术与软件工程 2021年24期
关键词:图标菜品菜单

陈帅

(郑州工业应用技术学院 信息工程学院 河南省郑州市 451100)

得益于人们消费习惯的改变,餐饮行业数字化是餐饮行业壮大不可或缺的一项条件,而在数字化领域,腾讯又掌握中国社交领域半壁江山。腾讯的护城河毫无疑问是流量,手握微信加QQ 的王炸组合,基本上涵盖了中文互联网上的所有网民,腾讯投资的逻辑就是传统互联网的打法,用流量灌溉餐饮商家。线上的竞争说到底就是流量之争。谁掌握了流量,就意味着谁在竞争中走得更远。腾讯微信注册人数达十几亿,小程序活跃用户丰富,市场广阔。因此开发一款具有线上点餐功能的小程序正好满足了传统餐饮商家转型升级的需要。[1][2][3]

1 系统相关技术概述

1.1 微信小程序

微信小程序是一种无需安装即可使用的应用,用户只要“扫一扫”或“搜一搜”就能打开应用,省去了安装或卸载的步骤。微信小程序运行在微信基础上,它的交互类似于手机原生应用,但是每个应用的体积非常小(目前上限是2048kb),具有无需安装、触手可及、用完即走、无需卸载的特点。微信小程序借鉴了现有的Web技术,通过独立的运行环境实现了跨平台,并提供了接近原生APP的使用体验,具有明显的优势。为了降低微信小程序的开发成本,提高开发效率,微信小程序的开发方式与Web APP 相似,即通过WXML (类似HTML )、WXSS (类似CSS )和JavaScript 进行开发,小程序也有一套脚本语言,为WXS (WeiXin Script),语法与JavaScript 类似又存在少量差异,并且提供了丰富的组件、API APP内打开和接口,从而具有更接近原生APP 的使用体验。并且相比于原生APP,微信小程序具有上亿用户量的天然优势,能够有更多资源和机会获得新用户,为餐饮平台创造更多的市场。[4][5][6]

1.2 后台系统的介绍

WampServer 是一款由法国人开发的Apache Web 服务器、PHP 解释器以及MySQL 数据库的整合软件包。不需要开发人员将时间花费在繁琐的配置环境过程,可以腾出更多精力去做开发。WampServer 就是Windows Apache Mysql PHP 集成安装环境,即在Windows 操作系统下的apache、php 和mysql 的服务器软件。在windows 下将Apache+PHP+Mysql 集成环境,拥有简单的图形和菜单安装和配置环境。PHP 扩展、Apache 模块,开启/关闭鼠标即可配置,无需再修改配置文件和PHP 安装,WAMP 它会去做。

WampServer 还支持phpmyadmin,SQLiteManager。不用去输入复杂的SQL 语句管理MYSQL 数据库,直接从phpmyadmin 管理即可。

1.3 后台系统的搭建

本项目服务端环境要求为 Windows+Apache+PHP+MySQL。下面介绍如何搭建环境,部署服务器端应用。

(1)双击 wampserver3.1.7_x86 根据提示进行安装;安装成功后,双击桌面图标“Wampserver32”。

(2)在系统右下角图标中找到WAMP Server的图标,图标颜色:绿色表示服务全部启动,橙色表示服务部分启动,红色表示服务没有启动。初次启动时,图标会从 红色—〉橙色—〉绿色 逐渐变化,显示为绿色表示启动成功。如果启动失败,则可能当前系统存在其他问题,请根据程序提示排除问题。

(3)使用浏览器访问 http://localhost/ 如果看到如下画面,表示安装成功,如图1所示。

图1:安装成功示例

(4)在本文档路径下找到shop 文件夹,右键复制,粘贴到C:wampwww 目录。

(5)左键单击WAMP Server图标,选择【Apache】→【httpd-vhost.conf】。

(6)修改完成后,保存文件,然后单击WAMP Server 图标,选择Restart All Services,等待图标重新变成绿色。

(7)访问http://localhost/ 会显示安装向导,单击【立即安装】按钮。

(8)访问http://localhost/admin 进入后台,输入用户名admin密码123456。进入后,到【设置】中输入AppID 和AppSecret 即可。

2 系统设计与实现

2.1 系统整体架构

我们的系统围绕着点餐功能,设计了一个移动端的点餐小程序。通过上面的分析,本文的点餐系统主要由几个点餐功能模块构成。系统架构的主要有菜单分类展示模块、点餐下单模块、确认订单模块、食物领取模块、消费记录等功能模块,如图2所示。

图2:系统架构模块图

2.2 功能模块设计

我们根据点餐基本环节和过程去设计微信点餐小程序的各个功能模块,有以下几个部分:菜单分类展示、点餐下单、确认订单、食物领取、消费记录。消费者在使用点餐小程序时可以直接进行微信用户登录授权便可使用。

3 系统实现

微信点餐小程序主要功能包括菜单分类展示、点餐下单、确认订单、食物领取、消费记录这四个页面。

3.1 菜单分类展示页面

打开微信小程序,进入的点餐海报首页,点击“开启点餐之旅”时会进入“美食屋”页面,在这里可以选择自己喜欢的食物,添加到购物车之中。点击相应菜品对应的加号,增加该菜品的数量,如果发现添加数量过多,可以点对应菜品的减号来减少菜品。

3.2 订单确认页面

顾客挑选完食物之后,点击确认按钮,会跳转到确认订单页面。

3.3 食物领取页面

用户在确认订单之后,系统会返还给消费者取餐号等相关信息,用户可以通过此页面至餐柜台领取餐品。

3.4 消费记录页面

在此页面中,用户可以看到自己的历史消费记录以及历史消费金额。

4 功能检测

功能测试如表1所示。

表1:功能测试

5 结语

综上所述,在电子商务迅速发展的今天,互联网餐饮巨头对传统餐饮业巨大冲击的背景下,本文给出了一种比较智能的微信小程序点餐系统,给予实体线下餐饮店线上售卖食物的新思路,使用户在餐饮店内点餐更加方便自主,微信小程序点餐系统对用户与商家有着以下优点:

(1)使得消费者点餐变得更加方便与快捷。

(2)扫码点餐,降低成本:用户根据点餐小程序在微信扫码点餐、付款,不用排长队等候,节约消费收银时间,缩小饭店的服务项目时间,提高调台率。

(3)数据统计分析:根据微信小程序累积用户数据信息,让商家店铺更为认识自己的消费者肖像,能够目的性营销推广。

(4)会员管理系统:能够创建积分管理系统,吸引老用户。

仍需要改进的地方:

(1)餐饮后台管理系统还不是很完善,需要后续系统优化更新。

(2)小程序还欠缺一个顾客评价功能,用来反馈商家菜品质量与问题,从而改善商家的菜品质量和服务水平,提升消费者的购餐体验。[7][8][9][10]

猜你喜欢

图标菜品菜单
迷惑菜品又来了
中国新年菜单
Android手机上那些好看的第三方图标包
假蒟叶系列菜品的开发利用现状
本月菜单
中国风图标设计
有意思的厕所图标
新书菜单