【基于微信小程序的团购平台设计5900字（论文）】

基于微信小程序的团购平台设计目录TOC\o"1-2"\h\u21583基于微信小程序的团购平台设计 115166引言 1277991绪论 1125541.1开发背景 2310801.2可行性分析 2167982需求分析 276152.1系统功能分析 3248302.2用例建模 3283003系统设计 5259693.1主要技术简介 5291223.2系统功能设计 6191373.3数据库设计 1048954主要模块的详细设计及实现 1162424.1商品展示设计 1192634.2商品分类设计 12189344.3购物车管理设计 12269554.4个人信息设计 13217005系统测试 139295.1测试方案 14312635.2测试结果 14185805.3测试总结 1521971结论 16引言随着手机慢慢走进人们的日常生活，购物也可以在手机上实现。淘宝、京东等老牌电商APP占据着绝大数市场，其中充斥着各种商品，鱼龙混杂，对于我们学生来讲，购物体验并不算很好。网上商城更偏向于成人家庭化的商品分类，运输物流跨度较大，所以本文设计的大学团购平台将很好的解决这些问题。大学团购平台的出现将网上购物的范围缩小，着眼于大学生的购物体验，专为学生提供商品，用最合适的价格做出最令人满意的服务。1绪论1.1开发背景随着手机在人们的生活里越来越重要，快捷的无线网络，便携的小巧机身，逐渐渗入了人们的日常生活中。微信小程序作为微信的开发应用，其便捷之处十分出色，即搜即用，尤其是它在各个平台的都能很好的兼容。微信小程序相比于APP同样具有多样性，如家政服务、打车、外卖餐饮等领域。在疫情环境下，大学生外出非常的不方便，学校的小超市往往不能够满足学生消费的需求，而网购价格又不够便宜，所以开发出了一款方便快捷又优惠的大学团购平台就显得尤为重要。1.2可行性分析微信小程序[1]具有快速开发动态Web界面的功能，其设计模式为B/S基本结构,采用Java-Script、WxSS和WXML、JavaScript来请求后台接口获取数据。系统渲染层和逻辑层分别由两个线程进行管理:(1)渲染层:WebView线程里进行界面渲染。(2)逻辑层:JS脚本由JsCore线程运行。渲染层和逻辑层通过WeixinJsBridage在系统中进行通信。双线程模型是小程序框架与其它大多数前端Web框架的不同之处。基于双线程模型，可以更好地管控环境，提高安全性。模型框架例图如图1-1所示。图1-1模型框架例图2需求分析2.1系统功能分析2.1.1功能性需求本选题研究的主要内容是大学团购平台系统设计与实现。本文设计的大学团购小程序系统的功能分别为商品推荐、商品分类、购物车、订单结算、用户信息管理。2.1.2系统核心业务学生进入小程序后进行微信验证登录即可成功进入本系统，用户信息将与微信上的信息保持一致，无需额外修改。进入主界面后，会有四个分页：“首页”、“分类”、“购物车”、“我的”。首页主要展示一些推荐的商品，分类则是以商品的不同类别为商品分类存放以供查找方便。商品可以放入购物车内进行统一管理，也可以直接下单支付，下单支付可以选择是否进行拼单团购，团购需要达到一定数量才能完成团购要求并发货，而团购也会享受到比单独支付更好的优惠。当学生选择所需商品时，可以调整商品的个数，然后将其添加到购物车中。系统的购物车功能模仿了实际超市的购物车功能。消费者可以在购物车中添加、删除、增加或减少商品，购物车可以列出商品的单价、数量、小计、优惠和合计总额。用户在个人信息里可以管理收货地址，修改、新增或者删除。在确认收到货物后，可以对货物进行评价，如货物质量、货物色差、服务态度和物流速度等。评价的情况分为记分、书面评价和图片评价。本选题完成时将会把设计的大学团购平台小程序各个功能模块的实现，设计好小程序的主体UI界面和搭建通信接口。2.2用例建模2.2.1用例模型本文设计的系统用例是针对用户学生，系统用例是描述了系统的功能。本系统用例图如图2-1所示。图2-1系统用例图2.2.2用例描述本文设计的平台用例主要为三个部分。商品浏览用例，如表2.2所示表2.2商品浏览用例描述用例名称商品浏览执行者用户前置条件无事件流1)扫描小程序二维码，进入大学团购平台小程序2)使用微信登录3)点击底部导航栏第一个“首页”，浏览商品信息4)点击商品图片，进入商品详细信息页面，浏览商品详细信息拓展拒绝微信授权请求，系统进入游客模式商品分类用例，如表2.3所示表2.3商品分类用例描述用例名称商品分类执行者用户前置条件无事件流1)扫描小程序二维码，进入大学团购平台小程序2)使用微信登录3)点击底部导航栏第二个“分类”，浏览分类栏信息4)点击想要查看的分类，进入该分类下的商品页面，浏览商品信息拓展拒绝微信授权请求，系统进入游客模式购物车管理用例，如表2.4所示表2.4购物车管理用例描述用例名称购物车管理执行者用户前置条件同意微信授权获取公开信息登录成功事件流1)点击底部导航栏第三个“购物车”，浏览购物车信息2)勾选想要删除的商品，点击删除可进行批量删除操作3)勾选想要下单的商品，调整数量，点击下单可一起下单支付拓展未登录的情况下无法使用购物车3系统设计3.1主要技术简介3.1.1微信小程序微信小程序是一种在微信中运行的应用服务。微信小程序不需要用户单独安装，只需要在微信中搜索关键词或者扫描小程序二维码打开使用。微信小程序开发者工具[2]里自带小程序开发框架，小程序开发框架让开发者的工作变得简单、高效，让开发者可以开发出具有原生APP体验的服务。框架的核心是一个响应的数据绑定系统。开发框架提供了一些基础组件，开发者可以通过这些基础组件提高开发效率。基础组件分为八大类：视图容器、基础内容、表单、操作反馈、导航、多媒体、地图、画布。微信小程序开放上传下载，可以将本地资源上传到开发者服务器[2]。还能从本地相册选择图片或使用相机拍照、预览图片和获取图片信息。微信小程序开放了几个特殊接口：一为登录接口，可以直接选择使用微信账号登录，读取微信用户信息；二为支付接口，可以使用微信支付；三为模板消息，需要在小程序模板消息页面申请并通过审核，点击查看详情仅能跳转下发模板的该帐号的各个页面，下发条件说明：一是支付，二是提交表单。微信小程序界面[4]功能十分全面：1）显示消息提示框、隐藏消息提示框、显示模态弹窗和显示操作菜单。2）动态设置当前页面的标题、在当前页面显示导航条加载动画和隐藏导航条加载动画3）创建一个动画实例，对动画的控制有旋转、缩放、偏移、倾斜和矩形变形等。每个微信小程序都可以有自己的本地缓存，可以通过接口对本地缓存进行设置、获取和清理。本地缓存最大为10MB。3.1.2MySQL数据库数据库是按照数据结构来组织、存储、管理数据的仓库。MySQL数据库是常用的关系型数据库。网络数据库和层次数据库很好地解决了数据的集中和共享问题，但是在数据独立性和抽象级别上仍有很大欠缺。用户对这两种数据库进行存取时，依然需要明确数据的存储结构，支出存储路径。而关系数据库就可以较好地解决这些问题，关系型数据库模型是把复杂的数据结构归结为简单的二元关系（即二维表格形式）。MySQL性能卓越、服务稳定，开放源代码且无版权制约，自主性及使用成本低。而且MySQL软件体积小，需求低，安装及维护成本低，现在市面上大小企业都会采用MySQL，普及层面很广。MySQL支持多用操作系统，提供多种API接口，支持多用开发语言。3.2系统功能设计3.2.1商品信息展示当学生进入微信小程序时，会进入到大学团购平台的主界面[8]。小程序会提醒是否使用微信登录，申请读取微信用户信息，但不管是否使用微信登录，都有权限查看系统主界面推荐的商品。学生可以在登录后点击所要查看的商品，进入商品界面查看详情。大学团购系统的浏览商品用例图如图3.1。图3.1浏览商品用例图推荐商品展示功能分析如下:(1)进入小程序无需登录即可浏览商品。(2)当页面处于最上方时，下滑页面可以刷新界面内容。(3)点击商品查看详情信息，详情信息包括商品名称、商品图片、商品介绍、商品价格、产品参数等。(4)在商品详情页面可以下单，选择直接下单或者拼单团购。也可以将商品放入购物车。3.2.2商品分类学生如果需要根据物品分类来查找商品，可以进“分类”页面查找所需分类。商品分类是将商品以常见的种类进行分类存放，学生购物时只需找到想要的分类，就能找到想要的商品，极大地提升了学生的购物体验。大学生团购系统的商品分类用例图如图3.2。图3.2小程序商品分类用例图商品分类[10]功能分析如下：(1)选择左侧的分类，右页刷新出归于此分类的商品信息(2)分类商品展示时，学生可以点击想要查看的商品，跳转带商品详情页[11]，查看商品详细信息。(3)在商品详情页面可以下单，选择直接下单或者拼单团购。也可以将商品放入购物车。3.2.3购物车管理学生登录后可以将想要购买的物品加入购物车，选择商品数量后将购物车[12]里的物品一起结算下单。购物车[13]功能分析如下：(1)学生可以将想要购买的商品添加到到购物车。(2)学生可以删除掉购物车中的商品。(3)学生可以修改选中商品的订购数量。(4)学生可以查看购物车中商品的总数量[14]。(5)学生选择商品进行下单结算。(6)学生可以在购物车中点击想要查看的商品图标，跳转到此商品的详情页。(7)当学生已经提交了订单后，所提交订单中的商品将不显示在购物车中。大学团购系统的购物车用例图如图3.3。图3.3购物车用例图3.2.4下单支付学生可以在购物车页面勾选心仪的商品，一起进行支付下单，通过微信支付[15]对订单进行付款。也可以在商品信息页面选择立即下单，使用拼单团购或者单独付款。大学团购系统的下单支付用例图如图3.4。图3.4用户下单支付用例图下单支付[16]功能分析如下:学生可以在购物车中下单，或者进入商品详情页面下单。学生完善收货人信息后，就能对订单进行付款，收货人信息包括收货地址、电话等信息。学生点击下单，可以选择单独支付或者进行拼单团购支付，拼单团购会对最近的拼单信息进行显示，显示拼单所需人数以及现有人数。单独支付商家会立即收到并发货，拼单团购则会达到数量要求后商家才会发货。对生成的订单点击付款，使用微信支付即可。3.2.5个人信息管理个人信息管理[18]的页面主要功能为查看和管理收货地址信息、订单信息。大学团购系统的个人信息管理用例图如图3.5。图3.5用户个人信息管理用例图个人信息管理功能需求分析如下:(1)微信授权登录后可以显示微信头像和微信昵称。(2)学生可以管理收货地址信息，包括收货人姓名，收货人电话，收货人地址等。(3)学生可以查看所有订单以及待付款、待收货和退款\退货的订单。(4)点击要查看的订单，跳转到订单详情页面，会显示订单信息。3.3数据库设计3.3.1概念结构设计本文设计的数据库概念结构图如图3.6所示。图3.6系统概念结构设计图3.3.2逻辑结构设计本文设计的系统数据库的逻辑结构设计如下：用户（用户名，用户编号，用户电话，…）购物车（商品编号，商品名称，数量，…）订单（订单编号，总金额，收货人，收货地址，收货电话，状态，…）商品（商品编号，商品名称，价格，类型，描述，图片，库存，…）3.3.3物理结构设计大学团购平台系统数据库的物理结构设计采用微信公众平台[19]的云开发技术。云开发提供了的JSON数据库，云开发也能够实现上传文件到云端和云端下载的能力。4主要模块的详细设计及实现4.1商品展示设计系统导航栏的第一个，即为商品展示，系统会推荐一些学生常买的商品，并依次展示各个商品的主要信息，如图片、名称、简单介绍。页面上方为搜索栏，以商品名称为索引，精确查找到用户所需要的商品。商品信息展示界面图为图4.1。图4.1商品信息展示界面图4.2商品分类设计商品分类设计是将各种商品进行分类，以几种常见大类为主，其中再细分出小类，方便用户通过类别查找，精准定位到想要的商品，提高商品查找的效率[20]，同时，更方便用户找到更感兴趣的商品。商品分类界面图为图4.2。图4.2商品分类界面图4.3购物车管理设计购物车首先展示已加入购物车的商品的信息，包含配图、品名、价格、数量。购物车里能对商品进行一些操作，包含商品多选、修改数量、删除商品、购物车商品结算。下面的金额展示选中的商品优惠后的总价，方便用户进行购买决策。购物车管理界面图为图4.3。图4.3购物车管理界面图4.4个人信息设计个人信息最上方为登录信息，显示微信头像和昵称。昵称下方为收藏和浏览的店铺与商品，再下方为“我的订单”，显示所有订单，以及处理中的订单信息，可以管理用户自己的订单。再下方为收货地址管理，可以管理自己的收货地址，底部为客服联系方式和意见反馈以及产品信息。个人信息界面图为图4.4。图4.4个人信息界面图5系统测试5.1测试方案对本系统的测试按照以下步骤进行:1）测试学生登录小程序时微信微信授权登录信息进行登录的功能。2）测试商品分类的功能，查看商品是否按照种类进行分类。3)测试购物车的管理功能是否完善。4)测试下单支付能否跳转到微信付款。5)测试用户的地址管理能否微信授权获取微信定位。5.2测试结果5.2.1微信授权测试表5.1微信授权测试用例名称微信授权测试目的测试微信小程序的微信授权登录信息的功能。测试前提第一次微信上打开本文设计的微信小程序。测试流程1)扫描小程序二维码进入主页面。2)微信请求授权获取公开信息，选择允许。预期结果微信登录成功，读取微信个人信息。最终结果最终结果与预期结果一致。5.2.2查找分类测试表5.2查找分类测试用例名称查找分类测试目的根据商品种类查找想要的商品。测试流程进入商品分类页面，选择想要查看的分类。预期结果对应的商品会出现在分类里最终结果最终结果与预期结果一致。5.2.3购物车管理测试表5.3购物车管理测试用例名称购物车管理测试测试流程1)将商品加入到购物车，返回购物车页面刷新2)查看购物车商品，勾选部分点击删除预期结果加入的商品出现在购物车，将商品删除后刷新，商品不显示