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

广东东软学院本科毕业设计i4.3系统设计目标FastEating系统是基于微信平台开发的一款外卖小程序，它的出现是为了避免了柜面上繁琐的点餐、付款和排队环节，使消费者可以更直观、便捷地进行点餐和付款，相比传统的就餐模式更加省时省力。4.4系统功能概要设计FastEating项目是用户通过自己微信账号授权登录小程序，通过浏览页面显示的商品，对感兴趣的商品加入购物车后进行商品结算从而完成前台界面下单的过程整个系统的设计思维导图如下：图4-1FastEating小程序设计图4.4.1系统模块概述看完了整个系统的流程图，想必这个网站的框架大致就明白了。下面是介绍一下整个系统的具体设计：系统分为菜单、订单、卡包、联系商家四大核心模块，各大模块都对应着线下实体店购买食品的操作，具体设计情况如下：菜单模块：设有菜单分类，每个菜品归属于某个特定的商品种类；订单模块：获取用户选择的菜品及数量；用户模块：管理用户账号，设置默认的地址、联系电话等信息；卡包模块：管理后台管理员账号、个人信息；本系统通过用户进行微信授权登录系统->选择自己喜欢的商品->确认信息，下单->商家收到数据后进行配送。通过这一系列的简单操作，完成了线上购买食物的操作，给用户和商户都产生了不可估计的效益。4.4.2系统的架构设计FastEating系统选用基于有赞商城的开源小程序框架VantWeapp。VantWeapp是Vant的小程序版本，Vant和VantWeapp它们是基于相同的UI风格，同一套视觉规范，提供的一致的API接口能让开发者基于框架快速搭建属于自己的一类商城类的小程序应用。具体架构看图：编辑器显示的架构图：图4-5 小程序在开发工具里的架构情况 上方的图左侧栏是属于整个项目的目录结构，每个页面对应一个文件夹，每个页面有4部分数据组成。其中wxml文件是页面结构文件，用来搭建页面的框架；json文件是页面的数据文件，用来存放页面显示的数据；wxss文件是页面的样式文件，用来渲染页面的界面显示；js文件是用来获取用户的交互从而操作json文件中的数据。Cloudfunction文件夹是使用微信的云函数而引入的一个文件。思维导图整理出的架构图：图4-6 项目文件架构图（思维导图）Npm模块是通过开发者工具中的构建npm,使用npm模块选项即可引入的组件。它是用来管理第三方包软件的工具；Pages文件夹里面的每一个文件夹对应小程序的每一个页面，每个文件夹里面又都包含着4个页面构建的js、wxss、wxml、json文件；通过配置json文件来引入需要的组件，引入之后可以直接在wxml里使用相应的组件；使用vant-weapp框架之后，主要的功能就是如何设置页面风格样式，组件是有自带样式的，但是我们可以通过自定义样式来覆盖掉原始样式。4.5核心功能模块介绍4.5.1菜单列表模块菜单列表模块包含小程序授权后进入的首页就是菜单列表信息页，列表上方是菜品分类的导航栏，左右滑动来切换分类类别。列表显示菜品名、单价、菜品原料及套餐信息。有两个按钮，一个新增商品，多次点击数量增加；一个是减少商品，数量减少到0将删除选中的商品。4.5.2提交订单模块提交订单模块主要是顾客选择的商品汇总页，该模块用来显示顾客购买的商品信息列表，可以修改外卖配送地、配送时间及支付方式，是否需要餐具，及优惠券的使用等，甚至可以给商家备注一些额外的信息。4.5.3订单信息模块针对前台用户下单的商品的一个订单汇总列表，该模块还针对订单信息增加了导出汇总数据功能，可以支持导出Excel文件和CSV文件，CSV文件兼容性更好，能弥补Excel文件导出有可能乱码的情况。4.5.4订单模块 订单模块是显示用户下单的历史数据。订单是否支付成功，何时下的单以及配送的信息等。4.5.5卡包模块卡包模块主要是显示用户拥有的优惠券。4.5.6联系商家模块联系商家模块主要是针对一些特殊情况，需要联系商户，显示的一些商户地址、联系电话等信息。第5章系统的设计与实现5.1网站界面介绍FastEating系统的界面都是本着简洁大方的风格进行设计的。前端界面主打黑白色调，给人以干净、大方的感受，后端主要走黑白灰的简洁工作风路线。前后台在色彩上的选择都是以近似色的色阶进行选取，不会给人太突兀的感觉，整个系统使用下来不会有太大的视觉疲劳的感受[8]。该系统已经设计完毕，所有的功能都能正常使用，下面用一些系统的界面截图进行介绍。5.1.1菜单列表页 图5-1菜单列表页菜单列表页显示商户上架的菜品信息，列出有菜品制作的材料、单价及加入购物车按钮。5.1.2下单页图5-2下单页下单页，显示用户挑选下单的商品列表，商品对应的总价、商品材料及可以选择送货地址、备注一些口味相关的信息及是否需要餐具等信息。5.1.3订单历史页图5-1菜单列表页图5-3订单历史页订单历史页显示用户下单过得记录。5.1.4卡包详情页图5-4卡包页卡包页显示用户所拥有的优惠券信息。5.1.5联系商家页图5-5联系商家页该页面的设计主要是为了顾客能快速找到商户的信息，有问题能及时与商户进行沟通。第6章系统测试6.1测试目的一个系统要正式发布上线，首先得经过一系列的测试，才能给用户使用，测试的目的必须确保系统的整体功能正常使用；确保整个的系统流程能走通同时也能达到期望的结果；作为一个商城网站还得确保系统安全性。通过测试，不断完善系统，在功能都实现的基础上，不断提升用户体验。6.2测试方法 软件测试是人为的使用或通过脚本控制的手段来执行或测量某个程序的过程，它是用来检测软件是否满足设计的需求目标或检测程序的反应与预期设想的结果与现实中具体使用的结果之间的差别。

根据分类的不同，测试方法可以分为很多种，每种方法的分类也各异，从是否关心软件内部结构和具体实现的角度来划分的话，测试方法可以分为白盒测试和黑盒测试。白盒测试方法主要通过检査代码法、分析静态结构法、静态质量度量法、逻辑覆盖法、基本路径测试法、域测试、符号测试、路径覆盖和程序变异，黑盒测试方法主要包括等价类划分法、边界值分析法、错误推测法、因果图法、判定表驱动法、正交试验设计法、功能图法、场景法等。[9]6.3测试原则木桶原理：我们在测试软件应用的过程中，就算遇到再小的问题，也不可得过且过，应该正视每一个问题，不然系统有可能会因这个小问题而产生不可估量的后果。Bug的80-20原则：一般情况下，在分析、设计、实现系统的过程中能够发现和避免80%的Bug，而专门的系统测试过程中又能找出其余Bug中的80%，最后的5%的Bug可能只有在用户的大范围、长时间使用后才会显现出来，因为测试只能够保证尽可能多地发现错误，无法保证能够发现所有的错误。[10]6.4功能测试 由于微信开发者工具能模拟我们的真机进行调试，所以我是通过使用微信开发者工具来对我们开发的微信小程序进行调试的。甚至还可以通过刷描小程序生成的二维码直接在自己的手机上体验小程序。图6-1 功能测试效果图-1通过微信开发者工具点击真机调试，生成一个二维码，扫码后手机就能访问小程序，访问的请求接口会在开发者工具真机调试页面反馈接口信息。图6-2 功能测试效果图-2手机操作页面也会有相应的数据，可以设置打开调试面板，设置之后也可以直接在手机页面看到请求接口的数据。图6-3 功能测试效果图-3图6-4 功能测试效果图-4

第7章总结与反思经过一段时间的开发这个系统，该系统已经基本达到原定的目标，但是总体上还是存在很多问题需要改善的，比如整个系统的UI界面设计上还是缺少一些元素，因为自己不会设计需要的一些小icon，使得最终的没有达到自己想要的效果；其次数据库使用的是微信云数据库，数据库管理上面跟独立的数据库管理系统还是存在差别的；最后还有的模块的流程也还可以更顺畅一些，但是因为能力有限，只能尽量去不断完善这个系统。通过这段时间的学习，我收益颇多。在项目开发之前，设计思维导图的过程中，感觉整个系统的最终完成不会耗时太长，没想到后面的功能会比一开始的要复杂一些，整个网站的流程设计也是经过很多次比较大的调整。在这过程中，我也深刻的体会到一个靠谱的流程设计的重要性，因为后期返工会更耗时。前端的界面也更换过3种风格，最后确定了这一套。还有就是微信小程序开发的认识和具体的运用，发现小程序虽然没有网站庞大，但是要想制作出一个安全受欢迎的小程序还是有很多细致的地方需要加强的，该小程序的后台是使用云开发进行管理，使用者很受限制。再者就是对于UI设计方面，虽然不是专业上的，但是基本的界面设计的知识与审美我还是很欠缺的，之后应该要去学一些美工常识，多了解认识页面的构造。FastEating系统虽然大致流程走通了，想要的基本功能也都实现了，但是我之后还是会通过学习相关知识来不断改善它，争取能让使用的用户体验感更好。参考文献邱世华.Linux操作系统之奥秘.北京：电子工业出版社，2008.郭兵,熊光泽,陈宇.嵌入式应用软件开发环境的构造[J].计算机应用,2000,020(007):7.JavaScript资源

．Mozilla官网．2018-6-20[引用日期2020-04-12]社大鹏《RedhatLinux因特网服务器》中国水利水电出版社2004.2.岳浩《Linux操作系统教程》机械工业出版社2005.4.陈会安.JavaScript基础与实例教程[M].北京：中国电力出版社，2007.郑人杰，马素霞，麻志毅著.软件工程.北京：人民邮电出版社,2009.11.ADocumentEngineonaDBCluster.TorstenGrabs