基于Vue3.2+微信零食商城小程序的设计与开发.docx

《基于Vue3.2+微信零食商城小程序的设计与开发.docx》由会员分享，可在线阅读，更多相关《基于Vue3.2+微信零食商城小程序的设计与开发.docx（59页珍藏版）》请在课桌文档上搜索。

1、本科毕业设计论文题目:基于Vue3.2+微信零食商城食、程序的设计与开发独创性声明本人呈交的学位论文，是在导师的指导下，独立进行研究工作所取得的成果，所有数据，图片资料真实可靠。尽我所知，除文中已经注明引用的内容外，本学位论文的研究成果不包含他人享有著作权的内容。对本论文所涉及的研究工作做出贡献的其他个人和集体，均已在文中以明确的方式标明。本学位论文的知识产权归属于培养单位。本人签名：日期：2023年5月10日本文介绍了一个基于Vue3.2框架的微信零食商城小程序的设计与实现。本项目是一个零食商城小程序，提供用户登录，浏览，购买等功能，同时也提供商家管理功能,包括商品添加，订单管理，订单发货等

2、功能。通过本设计的实现，用户可以方便地浏览，购买零食商品，商家也可以方便地管理商品和订单，并且可以通过数据统计功能分析销售情况，提高销售效率和管理水平。随着智能手机的普及和移动互联网的发展，微信小程序作为一种轻量级的应用程序逐渐被人们所熟知和使用，成为商家展示商品和服务的新渠道。商城主要功能包括商品展示，商品搜索，购物车，下单支付，查看已购买商品的物流轨迹查询等功能。用户需求包括简单易用的界面，商品信息的完整性和准确性，购物流程的简单易懂等。在需求分析的基础上，本论文设计了相应的数据库模型和设计架构，并使用VUe框架实现了前端页面的开发。本设计使用Uni-app开发跨平台应用，需要遵循VUe单

3、文件组件(SFC)规范和微信小程序组件标签规范。开发者通过编写Vuejs代码，uni-app将其编译到多个平台，并保证其正确运行和良好的用户体验，Uni-app提供了条件编译，可以根据不同平台进行不同的代码处理。本设计进行了设计测试和性能评估。通过使用不同的测试用例和压力测试工具，测试了设计的各项功能和性能指标，并分析了测试结果。结果表明，本设计能够满足用户需求，具有良好的稳定性和性能表现。总之，本论文介绍了基于Vue框架开发的微信零食商城小程序的设计和实现过程,包括需求分析，设计设计，前端页面开发，设计测试和性能评估等方面。通过本论文的研究和实践，可以对使用Vue框架和微信小程序开发工具进行

4、小程序开发有一定的指导意义，为开发更加优秀的小程序提供一定的参考。关键词：微信商城小程序；Uni-app；Vue3.2;论文类型：工程设计AbstractThispaperintroducesthedesignandimplementationofaWeChatsnackmallminiprogrambasedonVue3.2framework.Thisprojectisasnackmallminiprogram,providinguserswithlogin,browsing,purchaseandotherfunctions,butalsoprovidesmerchantmanagemen

5、tfunctions,includingproductaddition,ordermanagement,orderdeliveryandotherfunctions.Throughtheimplementationofthisdesign,userscaneasilybrowse,purchasesnackproducts,merchantscanalsoconvenientlymanagegoodsandorders,andcananalyzesalesthroughdatastatisticsfunctions,improvesalesefficiencyandmanagementleve

6、l.WiththepopularityofsmartphonesandthedevelopmentofthemobileInternet,WeChatminiprogramsaregraduallyknownandusedbypeopleasalightweightapplication,becominganewchannelformerchantstodisplaygoodsandservices.ThisdesignintroducesthedemandanalysisoftheWeChatsnackmallminiprogram,includingthemainfunctionsofth

7、emallanduserneeds.Themainfunctionsofthemallincludeproductdisplay,productsearch,shoppingcart,orderpayment,viewingthelogisticstrackofpurchasedgoodsandotherfunctions.Userneedsincludeaneasy-to-useinterface,completenessandaccuracyofproductinformation,andasimpleandunderstandableshoppingprocess.Basedonther

8、equirementsanalysis,thispaperdesignsthecorrespondingdatabasemodelanddesignarchitecture,andusestheVueframeworktorealizethedevelopmentoffront-endpages.Thisdesignusesuni-apptodevelopcrossplatformapplications,whichneedtofollowtheVueSingleFileComponent(SFC)specificationandWeChatMiniProgramcomponentlabels

9、pecification.DeveloperswriteVue.jscode,uni-appcompilesittomultipleplatforms,andensuresitscorrectoperationandgooduserexperience,uni-appprovidesconditionalcompilation,canbedifferentcodeprocessingaccordingtodifferentplatforms.Thisdesignwasdesignedandevaluatedforperformance.Usingdifferenttestcasesandstr

10、esstestingtools,thefunctionalandperformanceindicatorsofthedesignweretested,andthetestresultswereanalyzed.Theresultsshowthatthedesigncanmeettheneedsofusersandhasgoodstabilityandperformance.Inconclusion,thispaperintroducesthedesignandimplementationprocessofWeChatsnackmallminiprogramdevelopedbasedonVue

11、framework,includingdemandanalysis,designdesign,front-endpagedevelopment,designtestingandperformanceevaluation.Throughtheresearchandpracticeofthisthesis,itcanhavecertainguidingsignificancefortheuseofVueframeworkandWeChatMiniProgramdevelopmenttoolsforMiniProgramdevelopment,andprovidecertainreferenceva

12、lueforthedevelopmentofbetterMiniPrograms.KeyWordsjVVeChatmallminiprogram;uni-app;VUE3.2;摘要inAbstractIV目录V第1章绪论71.l设计开发的背景71.2 本课题的研究意义71.3 本课题的基本内容81.3.1 用户小程序端81.3.2 商户小程序端81.4 本课题的重点和难点81.4.1 研究重点81.4.2 研究难点91.5 论文提纲9第2章设计分析102.1 设计概述102.1.1 设计的总体功能需求和性能需求102.1.2 设计开发的框架（Uni-app开放框架）102.2 可行性分析112

13、.2.1 技术可行性分析112.2.2 经济可行性分析112.2.3 操作可行性分析112.3 设计功能分析12第3章需求分析123.1 业务流程图123.2 设计范围13第4章总体设计144.1 设计的总体结构设计144.2 设计的接口设计154.2.1 用户接口154.2.2 外部接口154.2.3 内部接口164.3 软件体系结构18第5章详细设计195.1 功能模块设计195.2 输入/输出格式设计225.2.1 用户端225.2.2 商家端235.3 人机对话设计235.3.1 用户端235.3.2 商家端245.4 界面设计255.4.1 用户界面设计255.4.2 菜单设计265

14、.4.3 对话框设计275.5 MongoDB数据库设计285.5.1 MongoDB简介285.5.2 非关系型（MongODB）数据库与关系型（MySQL）数据库对比285.5.3 MongoDB的数据库存储原理295.5.4 MongoDB的数据库结构设计305.5.5 MongoDB的应用场景315.5.6 数据集合设计31第6章设计实现376.1 开发平台376.2 主要功能模块编程代码406.4 本课题中的关键技术496.4.1 设计中要解决的主要问题49第7章设计测试与维护517.1 软件测试的目的和流程517.2 测试用例与测试结果527.3 设计维护56总结57参考文献58致

15、谢59第1章绪论1.1 设计开发的背景近年来，随着移动互联网的快速发展和智能终端的普及，微信小程序早已经成为人们生活中不可缺少的一部分。微信小程序以其轻便，快捷，易用的特点,成为了商家与用户之间交互的重要平台。同时，零售行业也成为了互联网+时代的重要领域之一，零食商品作为零售品中的一种，市场需求量不断增长，成为了消费者日常生活中不可或缺的小食品。因此，开发一个基于Vue3.2的微信零售商城小程序，能够很好地满足人们的购物需求，提高商家的销售额和品牌价值,也是一项非常有意义和有挑战性的毕业设计选题。1.2 本课题的研究意义在我国，2006年后，一个包括多仓储中心，异地批量运输，本地快速单件递送在

16、内的物流体系开始趋于成熟，并在中国网络购物的发展过程中起着实质性的支撑作用。网上支付手段也取得了重大突破。货到付款曾经是网络购物的主要交易方式，但随着2005年的商业银行创新和第三方网上支付工具的发展来看，很多人开始对中国网上支付变得非常乐观网上购物由此进入到一个高速发展阶段,C2C和B2C都得到充分的发展。但到目前为止仍未出现大规模盈利的网站。在这个阶段，出现柠檬绿茶等类似的淘宝大卖家，营收上亿。另外，部分企业开始关注海外市场，如一部分企业就比如Iightinthebox,这种企业普遍盈利状况好于29569从事内贸的相关网站等。网上购物从无到有也不过十几年时间。而在最近几年时间，网上购物变得

17、火热起来，网上购物迅速成为一种购物时尚。目前国内比较大型的网上购物商城如淘宝，京东，唯品会等，发展都是非常迅速，而随着国内计算机信息技术发展,网上购物会更加快速的发展起来，为消费者和商家都提供更加广阔的销售平台因此，开发一个网上商品商城小程序非常符合当今社会的发展趋势。微信零食商城小程序的出现会打破各大商家的销售瓶颈，足不出户就可以了解琳琅满目的商品，轻松挑选到自己心仪的商品，也从侧面解决了群众买商品不便利、不保售后的问题。使得想要选购商品的用户能更加方便，也使得更多的卖家能加入平台，制造更多的经济价值，所以研究基于微信零食商城小程序是有着充分的社会和现实意义的。1.3 本课题的基本内容1.3

18、.1 用户小程序端（1）横幅功能：当商家录入横幅内容，在商城设计的横幅模板展示，用户可以任意浏览横幅列表和详细信息。（2）商品信息：点击到商品详情页面，可以查看商品的介绍，查看商品简介，图片，详情，已购买用户的商品评论。（3）收藏操作：在商品信息详情，下方点击“收藏”，进行收藏。（4）下单：点击“去结算”，选择或者填写收货地址，确认要下单的商。品和数量;选择商品的规格或口味等待，点击“去购买”，然后跳转到订单列表。（5）取消订单：在“我的订单”列表中，点击”取消申请:删除订单。（6）去付款：在“我的订单”列表中，点击“去付款”，用微信进行付款。（7）退款：若用户后悔，可以选择退款按钮。（9）我

19、的收藏：用户可以点击自己心仪的商品，点击收藏。（IO）收货地址管理：管理收货地址，更新收货地址，去除收货地址。1.3.2 商户小程序端（1）累计收益：商家可以看到自己的收益是多少，它包括了今日的销售额，今日有多少订单，和一共有多少订单。（2）横幅管理：商家可以选择自己热销量很高的商品录入横幅，以此来达到引人注目的效果。（3）秒杀管理：商家选择自己的一部分商品来进行秒杀销售，让用户端的客户看到，以此来达到薄利多销的目的。（4）商品管理：商家可以上传新到货的商品，包括商品的详细信息，规格，图片等内容。（5）订单管理：商家可以看到用户是否支付的状态，若已支付，商家可点击去发货，然后录入快递单号，用户

20、可以通过自己的订单来查看的自己购买商品的物流轨迹。1.4 本课题的重点和难点1.4.1 研究重点（1） MongoDB的使用及操作。由于之前只有接触过MySql数据库和SqlServer数据库，并未接触过MOngoDB数据库，因此，学习和使用MOngODB数据库会存在一定的难度，并且操作起来会存在一定的不确定性。所以需要好好学习。（2）物流功能模块的实现。本设计当中最重点的为物流模块功能的设计，需要连接快递100接口来实现物流接口的实现，因为之前并没了解过这方面的知识，因此，物流功能模块的实现是本设计当中的重中之重。1.4.2研究难点（1）由于此项目涉及到用户端和商家端两个小程序，故代码量较多

21、，结构较多，所以因此代码逻辑难。（2） 一个appid只能上架一个小程序，如果某一个appid想要使用另一个叩Pid的云数据，可以使用微信提供的共享云环境来达到两个或多个叩Pid增删改查某一个的appid的数据库。（3）使用uni-app来实现Vuejs开发所有前端应用的框架，由于之前并没有过多深入了解，因此需要花费时间来进行学习。（4）使用云开发作为数据库，也就是使用了MOngoDB数据库，也需要进行自我学习和深入了解。（5）在零食商城小程序物流轨迹查询功能中，需要引入外部接口快递100,也需要继续自主学习。（3） 论文提纲（1）绪论（2）设计分析（3）需求分析（4）总体设计（5）详细设计（

22、6）设计实现（7）设计测试与维护（8）总结（9）参考文献（10）致谢第2章设计分析2.1 设计概述2.1.1 设计的总体功能需求和性能需求（1）功能需求：零食商城小程序是一种利用小程序的开发来帮助商品店铺提升业绩的方法。具体而言，开发者可以通过以下步骤进行零食商城小程序的开发。确定商城功能：零食商城小程序需要具备以下功能：商品展示，购买流程,订单管理，用户信息管理等。设计小程序页面：需要设计商城首页，商品分类页，商品详情页，购物车页，订单页等多个页面，并根据用户体验进行界面设计。测试和上线：在本地测试通过后，可将程序上线，发布到小程序平台供用户使用。总之，零食商城小程序的开发需要考虑多方面因素

23、，包括功能设计，页面设计，程序编写等方面。开发者需要结合自身业务需求，综合考虑这些因素，制定详细的功能需求方案。（2）性能需求：首先，商城的营销力是一个重要的方面。通过商城装修，可以善用头部的banner轮播图，将主推商品，活动等在banner图上展现，能够吸引用户眼球，刺激点击下单。其次，小程序的性能也需要关注。为了提高用户体验和降低加载时间，可以考虑使用微信小程序框架，减少HTTP请求次数，优化代码结构和页面渲染等方面。另外，了解行业趋势也是非常重要的。随着人们的收入增长，商城这个行业收入增长巨大化。目前，线下渠道仍是中国商品销售的主要渠道，但随着网络电商的不断发展，传统销售渠道逐渐向现代

24、销售渠道改变，未来商品在电商平台的销售额将不断增长。综上所述，了解商城的营销力，小程序性能和行业趋势都是进行零食商城小程序性能分析的必要方面。2.1.2 设计开发的框架（Uni-app开放框架）uni-app是一个基于Vuejs框架开发跨平台应用的前端框架，支持编写一套代码，可以编译到iOS,Android,H5,微信小程序等多个平台。Uni-app继承自Vuejs,并提供了完整的VUeJS开发体验，组件规范和扩展APl与微信小程序基本相同UL在跨平台的过程中，uniapp不牺牲平台特色，可以优雅地调用平台专有能力，真正做到海纳百川，各取所长。总的来说，Uni-app具有跨端数量更多，性能体验

25、更优秀，学习成本低，开发成本低等几大关键优势。如果你己经具备一定的Vuejs和微信小程序开发经验,那么你可以快速上手uni-app,并开发出兼容多端的应用。对于本设计来说，uni-app的作用是使用vue3.2开发语言来实现微信小程序的页面设计。2.2 可行性分析2.2.1 技术可行性分析VUe是一种现代化，轻量级的JaVaSCriPt框架，适用于开发单页面应用程序(SPA)oVUe的两大特点是响应式编程和组件化，这使得开发人员可以更方便地管理和维护代码。Vue是一个很好的选择来开发零食商城小程序。在小程序中，我们可以使用VUe来编写前端小程序，小程序的架构是双线程的,分为逻辑层和渲染层。不能

26、直接在JaVaSCriPt代码中修改定义的模板的DOM。另外，在较为复杂的项目中，使用全局定义组件会存在一些问题，包括命名冲突和字符串模板的不足。总的来说，VUe是一个可行的选择来开发零食商城小程序。Vue3.2语言具有很多的优势，如轻量级框架，简单易学，双向数据绑定和组件化。但需要注意的是，小程序的架构是双线程的，需要注意不要直接在JaVaSCriPt代码中修改模板的DOM,并且需要避免全局定义组件的问题。2.2.2 经济可行性分析首先，零食商城小程序作为一种新兴的电商平台，其最大的优势在于可以利用微信的巨大流量入口。用户可以在微信公众号的介绍界面直接打开小程序，也可以通过向朋友或群聊推荐微

27、信小程序将微信的流量转换为有价值的流量口叫微信小程序因为开发容易，成本较低，容易维护，不需要很多的资金去维护小程序，资金成本需要小，很适合刚毕业的学生或创业者。2.2.3 操作可行性分析可操作性主要是对微信零食商城小程序设计完成后，用户的使用体验度是否满意，微信零食商城小程序分为商家和用户两个不同角色，用户登录小程序后,通过页面的菜单按钮和页面菜单指示，对于设计的一系列操作，不需要专业人员都可以直接进行功能的操作。而对于商家，同样，也可以清二楚的进行一系列的操作。因此，这个小程序的可操作性是完全可以的。2.3 设计功能分析(1)商品展示功能：用户进入小程序后，用户可以看到商城商品的所有展示，包

28、括聚划算展示，轮播图展示，分类展示和所有商品展示等功能。(2)商品管理：商家可以上架新的商品和下架之前的商品。(3)订单管理：商家可以通过订单管理设计了解商城订单信息，一键查看，可以轻松进行发货。(4)聚划算：商家可以设置商品进行商品聚划算优惠功能，以此来吸引更多的用户购买此商品。(5)商家收益：这个是必须有的，因为有了这个设计，商城小程序中的所有财务信息商家可以全部掌握。(6)支付功能：在商城小程序中购买产品，是需要网上支付的，所以商城小程序的支付功能开发也是必备的，但由于无营业资格证等证件，此小程序的微信支付是模拟微信支付页面。(7)订单查询功能客户在完成下单，付款之后，通常都希望能够看到

29、自己买的东西，是否已经发出，几天能送到自己手中。所以，作为一个商城型小程序应当提供订单查询，物流查询等信息。第3章需求分析3.1业务流程图(1)如图3.2所示，是微信商品商城的业务流程图，用户通过登录微信商城小程序，进入商品首页后，用户可以浏览商品，浏览时，碰见自己喜欢的商品，可以点击进入,然后用户可以查看商品的详情信息，若确实符合自己的口味心意,就可以直接点击购买，付款，确认订单信。然后交给商家处理。也可以加入购物车或者收藏。方便之后更好的找到该商品。3.2设计范围（1）商品展示与管理：商品的分类，商品搜索，商品列表展示，商品详情展不等功能。（2）购物车功能：在购物车的商品，用户可以可以全选

30、，也可以单独勾选，或者将不喜欢的商品删除。（3）订单管理：包括订单建立，订单付款，订单查找，删除订单等功能。（4）支付功能：微信虚拟支付功能。（5）物流跟踪：对接快递100接口，提供订单的物流跟踪功能。（6）用户评价功能：用户能够对已买过的商品进行自己的评价。（7）数据统计：商品销售情况，收益情况等。（8）设计管理功能：对设计进行管理，包括用户权限控制，商品分类管理等。第4章总体设计4.1 设计的总体结构设计（1）双线程结构如图4.1,微信小程序双线程的架构包括两部分：VieW视图层与APPService逻辑层。VieW层用来渲染页面结构,AppService层用来逻辑处理，数据请求，接口调用

31、，它们在两个进程（两个WebVieW）里运行。视图层和逻辑层通过设计层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理相互独立VieW视图层APPSerViCe逻辑层渲染页面结构JSBridge逻辑处理 数据请求 接口调用Webview 渲染IOSrJSCoreAndroid:X5DcvTooLnwjr图4.1双线程结构（2）设计框架设计当用户在微信小程序进行商品的一系列操作的时候，小程序端会将操作请求 发送给云开发后端然后云开发后端读取MongODB数据库进行一系列的存储或读 取操作，之后数据库将操作数据返回给云开发的

32、后台，然后小程序端向云开发请 求该操作数据，然后更新数据，具体操作如图4.2所示。图4.2设计的开发框架4.2 设计的接口设计4.2.1 用户接口用户访问的接口。(1)登录接口：接口说明：实现用户登录请求方式：wx.getStorageSync请求地力上：Iingshi-user/pages/my-page/my-page参数类型：Json参数实例：avalarUrl：https：/Zdiancan-4.2.2 外部接口(1)物流接口：常用的物流接口有快递100。接口说明：用户根据自己的订单号查询物流轨迹请求方式：Post请求地址：htts：po11.kuaidi10().COmpo6uery

33、.do请求类型：JSon(2)社交分享接口：为了增加用户粘性和传播效果，零食商城小程序需要接入社交分享接口。用户可以通过分享小程序或商品信息到微信，吸引更多用户进入小程序。接口说明：监听用户点击右上角菜单的转发按钮时触发的事件请求地址：lingshi-user/pages/Product-details/component/purchase请求方式：wx.onShareAppMessage（functionlistener）参数类型：JSOn4.2.3 内部接口解决页面中各个功能与后台数据库之间的数据传输的接口。（1）新增地址接口接口说明：用来新增用户地址请求地址：Iingshi-UserZp

34、ages/Re-addresscomponentnew-address请求方式：Get参数类型：JSOn参数实例：name：weishun,mobile：15095430147,district：甘肃省兰州市安宁区,address：兰州城市学院（2）新增商品接口接口说明：用来增加商家的商品请求地址：Iingshi-UserZpages/goods-admin/goods请求方式：Get参数实例：goods_title：奥利啊,goods_banner：商品横幅,image：”,goods_cover：https：/diancan-（3）首页：展示商品轮播图，商品聚划算，商品所有列表。接口说明：

35、商品展示请求方式：Post请求地址：lingshi-user/pages/index/index参数类型：JSOn参数实例：goods_cover：https：/diancan-（4）商品详情页：展示商品的图片信息，名称信息，已购买用户的评价信息，还具有分享好友，商品收藏，放进购物车，立即购买功能。接口说明：商品详情页面请求方式：Post请求地址：lingshi-user/pages/Product-details/details参数类型：JSon参数实例：goods_cover：https：/diancan-（5）购物车页面：展示用户加入购物车的商品，用户可以删除不需要的商品，然后勾选所需要

36、的商品进行结算操作。接口说明：购物车的商品请求方式：Post请求地址：lingshi-userpagesshopping-cart/shopping-cart参数类型：JSOn参数实例：goods_image：https：/Zdiancan-（6）地址管理页面：展示用户已经存在的地址列表，包括姓名，手机号，地址等信息和是否默认。用户可以新增，更新地址信息，也可以选择默认地址。接口说明：查看自己地址请求方式：Post请求地址：IingShi-USer/pages/Re-address/address参数类型：JSon参数实例：name：weishun,mobile：15095430147,dis

37、trict：甘肃省张掖市一区，address：某某某地方，tacitly：false（7）商品优惠：展示商品的优惠价格，用户可以清楚的看到商品的原价格和优惠价格，更好的吸引用户的眼球，增加用户下单的概率。接口说明：查看商品的优惠请求方式：Post请求地址：pages/index/component/flash-sale参数类型：Json参数实例：goods_image：https：/Zdiancan-（8）商品收藏：点击某一商品，若该商品被用户喜爱，用户可以点击该商品进行首次接口说明：查看收藏喜欢的商品请求方式：Post请求地址：pages/My-collection/collection参数

38、类型：JSOn参数实例：goods_cover：https：/diancan-(9)我的订单：用户点击我的订单，显示出商品的信息，支付状态，发货状态和是否进行评价。接口说明：查看我的订单请求方式：Post请求地址：pages/Al1-orders/order.vue参数类型：JSOn参数实例：goods_cover：https：/diancan-(10)管理轮播图：商家上传新的商品同步到用户端的轮播图模块当中接口说明：上传新的轮播商品请求方式：Get请求地址：pages/banner-amdin/banner参数类型：JSon参数实例：banner_cover：cloudlingshi-use

39、r-5g4owemd2aebf61d.6c69-lingshi-user-5g4owemd2aebf6ld-1317755645/media/l683656685359-3160968.jpg,goods_id：2cc84e26645be5f80bd972cc65b08525)4.3 软件体系结构在此次设计当中，微信小程序环境会将使用Vue3.2前端语言文件书写的小程序视图层转化为对应的js对象，当小程序后端MongoDB数据库的逻辑层发生数据变化时，通过微信小程序环境提供的SetData方法把数据从逻辑层传送到渲染层，再经过比对数据的前后差异，渲染成正确的小程序的UI界面，具体如下：(1)在

40、渲染层把VUe编写的零食小程序的WXmI页面转化成对应的JS对象。(2)当零食商城小程序的数据库逻辑层的数据发生更新改变时，通过微信小程序提供的SetData方法把更新修改的数据传递到Native,在转发到零食商城小程序的渲染层页面。(3)比对旧数据与新数据的差异，然后更新小程序的Ul界面。(4)通过把WXmI转化为数据，并通过NatiVe进行转发，来实现逻辑层和渲染层的交互。第5章详细设计5.1功能模块设计（1）商家端在此次零食商城小程序设计当中，商家端具有累计收益金额查看，上传横幅商品展示，商品的优惠功能管理，商品操作管理，如添加一个新的商品，还包含了订单数据管理和分类商品的管理，具体商家

41、功能模块用例图如下图5.1所示。今日销售额今日订单数累计订单&Z 新增横幅工 新增横幅管理分类添加商品待付款代发货已发货退款/后新增席图5.1用户端用例图（2）用户端微信零食商城小程序功能模块可以分为用户的登录，零食的信息展示，零食商品的详细分类，商品加入购物车，下单支付等功能，而商品信息展示功能又包括聚划算，首页轮播图，所有商品，商品详情信息等，（客户端）总体设计结构功能模块图如下图5.2所示。基于vue3.2微信-食商城小程序一 品息示 商信展品类 商分物车 购车用户致图5.2用户总体设计结构功能图查l我的订单物流 我的订单管理 个人地址管 基展示Lyl商品详细分类Z 商品分类（3）商品信

42、息展示模块用户登录到小程序后，用户可以看到轮播图的商品，也可以浏览到商品列表的零食和看到优惠的商品零食。点击该商品，可以进入商品的详情页面，若该商品符合自己的心意，则点击加入到购物车购买。如图5.3为用户浏览商品的用例图。（4）商品分类模块用户在微信零食商城小程序进行零食浏览的时候，用户点击用户端的分类按钮，进入到商品分类页面，在此页面，对零食进行了详细分类，用户可以快速精准的找到自己想要查找的零食商品。图5.4为微微信零食商城小程序的商品分类用例图。（5）购物车模块用户通过浏览零食商品如果遇到自己心仪的零食商品，但又囊中羞涩，目前无法购买，可以加入购物车方便以后购买，如图5.5所示。图5.5

43、购物车用例图(6)下单支付模块图5.6所示是微信零食商城小程序的用户下单支付对应用例图。(7)个人中心模块用户点击进入微信零食商城小程序，点击用户端的“我的”，可以进入到我的中心页面。图5.7为微信零食商城小程序用户个人中心管理的用例图。图5.7个人中心管理用例图5.2 输入/输出格式设计5.2.1 用户端(1)登录输入信息：点击登录按钮，点击登录。输出信息：登录成功，显示微信用户。输入信息：点击登录按钮，点击取消。输出信息：登录失败。(2)查询商品输入信息：输入要查找的零食商品信息，之后点击搜索。输出信息：若该商品存在，显示查询到的零食商品信息，若该商品不存在,则显示没有搜索结果。(3)加入购物车输入信息：点击加入购物车按钮。输出信息：在购物车页面中显示该商品。(4)收藏输入信息：点击加入收藏按钮。输出信息：在自己的收藏页面中出现该商品。(5)购买输入信息：点击立即购买按钮或购物车点击结算按钮，点击购买，选择自己的收货地址，提交订单。输出信息：购买成功，在订单管理中，显示待发货。（6）申请退款输入信息：点击申请退款，选择退款理由。输出信息：显示申请退款中，商家同意后，退款成功。5.2