微信小程序——校园闲置交易平台的设计与实现

1、微信小程序校园闲置交易平台的设计与实现Wechat small program - Design and implementation of campus idle trading platform内容摘要校园闲置交易小程序是以微信中的小程序作为平台让校园内的人们进行闲置物品交易的一个具有交易跟交友功能的小程序。自己通过在大学生活中进行观察，发现许多大学生在网络购物平台进行购买物品时会存在过度购买的情况，因此会有闲置物品的产生。同时朋友圈里也发现有大量的二手交易群存在，需要出售时就需要加入这些群进行售卖。我们经常使用微信，而且小程序给了我们一种途径，如果有一种非常便捷的交易平台对物品进行平价或

2、低价出售，就可以让闲置物品再次被他人使用，这样就不需要专门下载app。在微信小程序的开发模式下，采用了HTML、css、PHP、MySQL等编程语言去实现闲置交易小程序的前端界面显示和与后端数据库的交互，满足了人们在微信平台上进行售卖的基本需求。关键词： 微信小程序 校园交易 闲置物品 二手AbstractThe campus idle trading applet is a small program with the function of trading and making friends, which uses the widget in wechat as a platform t

3、o let people in campus trade idle goods. Through the observation in college life, I found that many college students in the online shopping platform will have excessive purchase of goods, so there will be idle goods. At the same time, it is found that there are a large number of second-hand transact

4、ion groups in the circle of friends, and they need to be added to these groups for sale when they need to be sold. We often use wechat, and small programs give us a way. If there is a very convenient trading platform to sell goods at a low price or at a low price, we can let idle goods be used by ot

5、hers again, so we dont need to download apps specifically. In the development mode of wechat applet, HTML, CSS, PHP, MySQL and other programming languages are used to realize the front-end interface display of idle transaction applet and the interaction with back-end database, which meets the basic

6、needs of people to sell on wechat platform.Key words: Wechat applet Campus transaction Idle articles second-hand目 录第一章 绪 论11.1 课题背景及研究意义11.1.1 课题背景11.2课题研究现状11.3 课题研究内容2第二章 相关工具及技术介绍32.1 开发工具32.1.1 微信开发者工具32.1.2 Navicat Premium42.1.3phpStudy42.2 开发技术42.2.1 微信小程序开发语言42.2.2 PHP52.2.3 Mysql62.3本章小结6第三章

7、 系统可行性分析和需求分析373.1 系统可行性分析73.2 系统需求分析73.2.1 系统总体需求分析73.2.2 系统的详细需求分析 用户功能 管理员功能 商品发布功能 分类功能 转发和投诉功能10第四章 系统设计与实现114.1项目总体结构114.2 模块设计124.2.1 用户登陆模块设计124.2.2 用户中心模块设计134.2.3 首页模块设计154.2.4 发布闲置物品信息模块设计164.2.5 商品分类模块设计194.2.6 转发和投诉模块设计214.3 数据库设计224.3.1 数据库总体设计2

8、34.3.2 数据库单表设计 用户表（clt_wechat_user） 商品信息表(clt_seller) 管理员（clt_admin）2 分类表（clt_sellercate）2 投诉信息表（clt_reporter）274.4 后台管理274.4.1 登陆界面274.4.2 后台管理界面2 出售管理29第五章 系统测试315.1 系统测试的意义315.2功能模块测试315.2.1 性能方面325.2.2 兼容性方面325.2.3 测试工具方面325.3 测试结果32结 论34参 考 文 献

9、35致 谢36广东东软学院本科生毕业设计（论文）第一章 绪 论1.1 课题背景及研究意义1.1.1 课题背景随着互联网的快速发展，网络是传递、发布、接收信息最快的一种方式。而自改革开放至今以来，经济、网络的迅速发展让人们现在的生活充满了变化，同时基本上每个人都会配备有手机。无线网络普遍普及，人们随时随地都能够上网冲浪。而电子商务也随着阿里巴巴公司的发展日益融入人们的生活。近几年来，由于互联网式的购物平台具有比线下购物更具有便捷性，更容易货比三家，以至于在购物时会有超量购买或者对商品没有急性需求的情况，因此会出现有闲置的物品的情况。因为不理智的网上购物会造成个人资金的浪费，导致了会有部分学生会通

10、过一些闲置商品交易平台用降低商品本身的价格的手段来出售闲置物，成为校园内学生群体回笼资金的一种方式。1.2课题研究现状近年来，随着智能手机和电脑的普及，全球的交易网络增长迅速，网络交易市场规模逐步扩大。现今交易网络不仅可以传递信息，而且还可以把自己闲置的商品的发布到小程序上去，根据商品的新旧程度、获得途径和获得后的使用时间来估计闲置物品的价格，同时在用户之间进行相互交流和相互了解后可以互相添加为好友，从而进行交易。另外，在目前的国内闲置交易平台中，比较火热的几个典型代表代表，如：闲鱼，转转，猎趣，这些都是需要下载app去实现交易的可能。而且，微信app已经成为网民们普遍的聊天工具，需要进行售卖

11、闲置物品时通常都是发布在用户个人的朋友圈里或者去寻找一些交易聊天群去加入，这样就存在了一些信息存在延时性与不共通性。由此可见，无论是在国内还是国外，小程序都受到了广大群众的支持，它是一个广受关注的热点，所以对校园内闲置商品交易小程序的设计和开发是顺应了时代的潮流，便利了个人的生活。1.3 课题研究内容作为一个闲置交易商城小程序，此小程序可以让学生或附近的人在学校或大学城周边进行同城交易，交易双方进行交易的内容可以是某样闲置下来的物品，也可以是转售个人因所购商品过多的物品。但是交易的前提是价值交换，作为交易双方，其实都需要有一个平台去进行平等沟通和等价交换的，这样交易双方可以通过聊天了解商品的一

12、些具体信息，比如，价格、商品的新旧程度，是否可以邮寄等。近年来，许多用户已经非常熟悉使用微信，与此同时微信公众平台也推出了小程序这一功能，因此小程序给了我们一种途径，如果有一种非常便捷的交易平台对物品进行平价或低价出售，就可以让闲置物品再次被他人使用，这样就不需要专门下载app。无论你是加入一个微信聊天群，或者是QQ群，再或者在自己的朋友圈去售卖物品，都有一定的弊端，但是在校园闲置小程序中，我们可以实时看到有谁在出售物品，物品价格如何，对于心仪的物品也可以进行支付购买，支付的途径可以是新颖的网上支付或是传统的面对面现金支付。同时为保证交易顺利进行，购买方是否需要快递配送则需要由交易双方商讨得出

13、结果。综上所述，该小程序既能在同一间学校内进行交易，也可以在大学城内进行交易，无论是同校还是在同一个大学城，拥有一个校园闲置交易平台都极大地提高了闲置物的可用性与再利用的功能，校内交易可以让购买方更快得到想要的物品。本论文研究的主要内容：（1）分析小程序应用的现状以及研究的意义，确定研究的目的；（2）研究和使用小程序开发工具、MySQL数据库、phpStudy等相关技术；（3）详细分析了小程序的功能，并进行了具体的需求分析；（4）深入研究所设计的小程序应用的总体设计方案、相关架构；（5）对完成的应用进行测试。在测试中发现其中的问题，不断的解决问题，完善应用。第二章 相关工具及技术介绍2.1 开

14、发工具2.1.1 微信开发者工具微信开发者工具是微信官方提供的针对小程序开发的工具，集中了开发，调试，预览等功能。微信团队除了发布微信小程序开发者工具，还发布了小程序开发文档和设计指南，集成了开发调试、代码编辑及程序发布等功能，帮助开发者可以简单和高效地去开发小程序。目前开发者工具仍然在不断的完善中，但是具体的版本有稳定版、预发布版、开发版三种。根据使用习惯来说，普通用户使用稳定版工具的情况比较多。使用工具前需要在公众号平台注册账号并绑定开发者所属的微信账号，使用工具时开发者使用扫一扫进行登陆，新建项目都需要运用到AppID。开发者工具主要主要界面分为三大块：模拟器、调试器和编辑器。模拟器：主

15、要是模拟小程序在网联端上显示出真实的运行表现，由于工具版本的推陈出新，部分的API功能在模拟器上的显示会存在一定的差异性，但是对于绝大部分的 API 均能在模拟器上呈现出正确的状态。调试器：其实这是对 DevTools （ Chrome DevTools 是谷歌浏览器自带的一个开发者调试工具）的封装而小程序是对DevTools 的封装1。调试器的界面主要分为6大功能模块，其结构如图2.1.1-1所示。图2.1.1-1 微信开发者工具调试器编辑器：可以帮助开发者模拟一些客户端的环境操作，同时还有提供可视化文件的资源管理器和代码编写区。2.1.2 Navicat PremiumNavicat Pr

16、emium 是一款数据库应用管理的软件，无论是对本地数据库，亦或者是远程数据库都可进行管理，通过输入数据库的相应信息即可链接。由于其直观而强大的图形界面，调取数据库里的信息展现成表格或E-R图的形式，不单单简单明了地知道表的类型与数据，而且操作简洁易懂，因此它是一套趋近于理想状态的管理和开发数据库的解决方案。它包括 SQL 创建工具或编辑器、数据处理工具以及更多。各方权衡之下，用MySQL来管理小程序的后台数据库，无疑是明智之举。2.1.3 phpStudyphpStudy是一款轻量级的PHP调试环境的程序，它可以为小程序的服务器环境提供最优配置解决方案。phpStudy集成了最新的Apach

17、e + PHP + MySQL + phpMyAdmin，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序不仅包括PHP调试环境，还包括了开发工具、开发手册等2。该工具兼容市面上大部分的人机交互操作系统，由于自带ftp服务器，因此用户在使用的时候不需要下载ftp软件，同时它还支持对文件进行监控与修改，是对新手和专业人士较为友好的一款软件。2.2 开发技术在本应用的设计和实现过程中，需要采用多种技术的配合来完成，现在我将会对所采用的技术做一个详细的介绍。2.2.1 微信小程序开发语言小程序具有一种新的吸引力，开发者在短时间内高效地设计与开发。小程序不仅在相当短的时间里如雨后

18、春笋般冒出，还与手机应用的体验旗鼓相当。前端面向使用者，提供程序主界面以及各子界面的点触式操作，后台系统处理数据，并和前端进行友好交互。后台主要功能模块有:数据存储、数据处理与计算、提供数据等。小程序语言与HTML、CSS和 JavaScript求同存异，共用一套开发标准。小程序所使用的程序文件类型大致分为以下几种：WXML(微信专用语言，比较类似html，负责前端界面的详细的可视化结构)；WXSS(微信样式表，类似于CSS，负责页面的样式结构)；JS(JavaScript，小程序的逻辑主体)。小程序以JavaScript为基石，奠定了程序的三大部分，依次是逻辑层、视图层和系统层，其通信结构如

19、图2.2.1-1所示图2.2.1-1小程序通信结构(1) 逻辑层小程序的逻辑层以 JavaScript 编写，逻辑层将数据与视图层进行交互，并接受事件的反馈。在app.js中，通过对数据进行修改优化逻辑结构，提升流畅度，缩短响应时间，给予用户极佳的用户体验，形成正反馈。(2) 视图层页面布局由用于描述页面结构的wxml 与 用于描述页面的样式wxss 构成，并且由视图的基本组成单元组件进行一一呈现。(3) 系统层对于app.json，其内容包括文件、窗口、网络延时、标签等变量。从总体上看，以app.json为基准设计小程序大体框架，而每个.json文件可以让页面区域具体化，更加生动。app.j

20、s 用来提供全局变量，如baseUrl。 app.wxss提供全局的css样式。2.2.2 PHPPHP是一种不仅在能服务器端嵌入HTML进行动态交互的免费使用的脚本语言。对于开发者来说，选择PHP作为易学习、开发效率高、兼容性高的脚本语言，有利于降低开发门槛，使开发初学者更加容易进行实践操作。用PHP做出的动态页面与其他的编程语言相比，代码执行效率比完全生成HTML标记的CGI要高许多，同时还可以执行引擎将用户经常访问的PHP程序驻留在内存中，再次访问时可以直接执行内存中的代码就可以了。2.2.3 MysqlSQL就是访问和处理关系数据库的计算机标准语言。无论是使用何种编程语言去编写程序，只

21、要涉及到操作数据库，比如，一个图书借阅网站需要把购买回来的书籍的名字和书籍序号存入数据库，或者一个手机购物app需要把用户的个人信息、已购买的商品种类、浏览商品的类别、购物车内商品的数量与种类等相应数据存入数据库，而此过程仅限SQL去完成。无论过去还是将来，关系数据库都是不可撼动的地位。由于MySQL安装的体积极小、速度快、耗资低，且源码开放，除去独角兽公司外都选择 MySQL作为网站数据库，搭配 PHP和 apache可以组成优良的开发与存储环境，更是促进了MySQL的广泛使用。2.3本章小结本章主要对我们设计的校园闲置交易小程序中所涉及的设计与开发中所使用到的技术进行基本的介绍。为我们应用

22、进一步的开发进行技术上的说明，对应用建设过程中所需的理论基础进行详细的研究与分析，为我们以后应用的实现提供技术上的支持。第三章 系统可行性分析和需求分析33.1 系统可行性分析可行性分析是要求开发者对系统进行全面的剖析，并且以经济作为着重点。正所谓世界上不是所有的问题都有解决办法，同理我们的软件设计也是，我们的软件设计也会遇到时间和资源的限制，为了减少或避免不必要的浪费，减少项目不可行的风险，所以我对所要开发的项目进行了可行性分析。首先对自己的开发设备进行分析,在硬件部分，我主要还是使用自己的笔记本电脑做开发工具基础，数据库我采用的是使用phpStudy软件在本地搭建数据库，使用Navicat

23、 Premium对小程序的数据库进行连接并设计数据表。3.2 系统需求分析需求分析是我们软件开发设计中需要注意的一个过程，其主要分析程序和设计程序模型，因此我们需要通过需求分析掌握我们的开发目的、程序要求，在需求分析中我们需要去分析我们的这个项目是面向什么样的人群、操作是否便捷等等问题，为此我们按照需求分析的一般步骤来进行需求分析。3.2.1 系统总体需求分析本项目在总体架构上主要分为小程序的界面端、服务器、数据管理三大部分。其中小程序的界面端部分主要利用微信小程序的三大框架(WNIL,WXS,JavaScript)以及微信官方提供的丰富的API组件。这个程序分为两大块，一部分是用户模块，一部

24、分是管理模块。在用户模块中用户可以发布商品信息、转发商品、向管理后台发起投诉；在管理模块中，管理员可以修改个人登陆账户、管理上架的商品、处理投诉信息，其总体结构图如图3.2.1-1所示。图3.2.1-1 小程序总体结构图3.2.2 系统的详细需求分析 用户功能当大多数用户来说，用户可以看到登陆时的用户名和头像，同时还能对用户所发布的商品信息进行删除或修改，因此对用户功能有以下分析：(1) 用户登录：用户通过微信授权的提示登陆小程序，小程序会记录用户的微信用户名和头像信息并，进入个人界面；(2) 用户中心：可以查看用户个人发布过的闲置物品信息，管理发布信息，对已发布的商品信息进行修

25、改、删除操作；因此，用户功能的总体结构图如图所示.图 用户功能结构图 管理员功能管理员功能是系统管理员在后台对小程序的数据进行操作。因此在后台管理页面中，对管理员功能有以下分析：(1) 可以对小程序首页宣传的图片进行上传、删除、修改；(2) 设计不同的商品类型供用户在发布商品时进行分类上架；(3) 还可以对用户发起投诉的信息进行查阅和删除，对用户投诉的商品进行强制删除。管理员功能的结构图如图所示。图 管理员功能 商品发布功能因为用户要出售自己闲置的物品，是需要以最快速度让购买者了解商品的相关信息，因此商品功能包

26、括以下几个功能：(1) 商品信息：用户可以发布出售商品的信息，填写联系方式以及所出售的商品的详细信息（包括商品名称、商品图片、商品的文字说明、商品价格、商品类别），点击发布后将会把信息上传至后台等；(2) 联系功能：买方在询问商品信息时，可以通过按钮与出售方进行咨询；因此，商品发布功能的结构图如图-1所示。图-1 发布功能的结构图 分类功能在点击分类时，用户可以查看各种分类，点击某个分类标签可以查看已分类到的商品，因此对分类功能有以下分析，如图所示。图 分类功能结构图 转发和投诉功能在浏览某样商品的详细信息时，

27、可以点击转发按钮转发某个商品的链接给其他的微信用户。同时用户在看到有违反平台规范的信息后也可以对其进行投诉，管理员会对其进行核实，若被确认商品的确存在违规行为，管理员可以在后台管理中对其进行删除处理，其功能的流程结构图如图所示 图 转发和投诉功能流程图第四章 系统设计与实现本章对基于微信小程序的校园二手交易平台的各个模块的设计代码与功能实现的结果通过截图的方式展现，以便快速了解功能实现的效果。4.1项目总体结构在开发者工具中，项目文件主要包括图片文件、页面代码文件和全局配置文件。图片文件images中存放着小程序的图标、背景图、商品图，如图4.1-1所示；页面代码主

28、要存放在pages中，每个页面都有相应的文件夹，由于转发和投诉都在goodDetail文件夹内，因此不单独拿出来说明，其文件夹相对应的关系如下表所示，文件夹属性对应的文件夹名称登陆界面login个人中心me首页index发布商品add分类商品cateGoodList商品被浏览界面goodDetail在数据库文件中，包括后台界面和数据库文件。全局配置文件中代码部分结构为在小程序主页中的功能具体分为四个：首页、分类、我的、发布。首页通过搜索和浏览页面的方式对闲置物品进行查找、查看来了解闲置物品与发布人的头像、昵称和发布时间；点击分类，则是查看闲置商品的分类，再点击分类标签则是查看当前标签下的商品信

29、息；在首页点击加号则进入到闲置物品的发布区，填写相关内容4.2 模块设计4.2.1 用户登陆模块设计用户登陆模块是指用户的初次登录。用户在首次使用时无法对任何商品进行浏览，因此在点击任何功能时会提示授权。用户授权登录界面的设计是由login.wxml实现。同时小程序通过getUserInfo属性获取用户信息，在用户需要再次登陆小程序时可以从bindgetuserinfo中再次获取到用户信息，其界面代码如图4.2.1-1所示。图4.2.1-1 小程序login.wxml授权登录首次登陆的效果图如图4.2.1-2所示。 图4.2.1-2 小程序授权登录界面4.2.2 用户中心模块设计用户中心模块是

30、指用户在登录之后进入个人中心查看信息。用户首次授权登录会userInfo获得头像与昵称，得到后跳转到me.wxml文件中，其界面代码如图4.2.1-1，同时查看用户是否进行售卖的界面如图4.2.1-2。图4.2.1-1 个人中心代码图4.2.1-2 初次登陆与登陆后进行售卖的对比图4.2.3 首页模块设计用户登陆成功时，会跳转到首页进行商品浏览。在首页界面，第一是顶部的搜索栏，在搜索栏的text内可输入想要购买的物品名称，确认存在则会显示商品列表，其主要代码为图4.2.3-1。图4.2.3-1 搜索栏代码轮播图是管理者通过后台上传图片，通过bannerSwiper获得后台数据，其具体代码如图4

31、.2.3-2。图4.2.3-2 轮播图代码发布功能使用了按钮的设计，在页面加个button属性，然后设置fixed固定其定位，图4.2.3-3所示，同时首页界面的效果图如图4.2.3-4所示。图4.2.3-3 发布按钮的代码图4.2.3-4 首页界面4.2.4 发布闲置物品信息模块设计在首页点击“+”号按钮，会跳转到add.wxml中，在add.wxml中，在图片上传的过程中，会通过photos.length/9来确定num的值不大于9，避免数据溢出。填写完信息并确认点击之后会发布信息并更新到首页，展示用户在售的物品。发布闲置物品的代码如图4.2.4-1，发布商品信息界面与类别选择界面为图4.

32、2.4-2，类别选择代码为图4.2.4-3图4.2.4-1 发布闲置物品的代码图4.2.4-2 发布商品界面及类别选择界面图4.2.4-3 类别选择代码4.2.5 商品分类模块设计点击分类按钮，可以看到有许多不同的种类，每一类都是有一个button组成，其界面图如4.2.5-1所示。图4.2.5-1 分类列表展示有一些已经上架了的商品通过选择商品类别会存放在所选的类别，当用户对某一类标签点击后，会进入标签内查看正在出售的商品，由于我之前存储了一些数据，有一些类别还没有商品信息，因此有无商品的界面如图4.2.5-2所示。图4.2.5-1（1） 类别下有商品的界面图4.2.5-1（2） 类别下无商

33、品的界面4.2.6 转发和投诉模块设计在浏览某一件商品时，在页面的右下角位置会有两个功能按钮，一个是转发的，一个是投诉的。可以看到商品的发布人的头像和所出售商品的一些信息，若他人有需要可以通过share进行转发分享；其主要代码如图4.2.6-1所示。图4.2.6-1 转发和投诉按钮的代码投诉模块是向管理者提供不良信息的途径，在投诉功能里，点击之后会跳转到report.wxml，填写投诉内容并提交给后台，如图4.2.6-2。图4.2.6-1 转发和投诉的设计代码及界面图4.2.6-1 商品详情页4.3 数据库设计数据库设计是软件体系设计中比可可缺少的核心技术。数据库的设计也很大程度上决定了你系统

34、性能好坏及复杂性，本系统采用MySQL数据库进行开发。4.3.1 数据库总体设计本系统通过设计用户表（clt_wechat_user）、商品信息表(clt_seller)、管理员（clt_admin）、分类表（clt_sellercate）、投诉信息表（clt_sellercate）。通过5张表的相关关系链接，组成了系统数据库的表结构，本系统在设计数据库表,严格按照需求去实现,更加地保存数据的完整性和可用性，因此所设计的总体数据库如图4.3.1所示。图4.3.1 总体数据库4.3.2 数据库单表设计 用户表（clt_wechat_user）主要存储的是登陆注册时用户的信息，其中包

35、括用户的基本信息，也包含了小程序的唯一标识mid ,这样可以达到系统和小程序使用同一套用户信息,同时使得本系统的登录体系和微信小程序的登录体系相对应，如图-1所示，同时图-1是用户与用户信息的E-R图图-1 用户表（clt_wechat_user）图-1 用户E-R图 商品信息表(clt_seller)用户通过填写发布闲置物品的信息，比如现在的价格和以往的价格、商品简单介绍、上传商品图片等，如图-1所示。图-2是商品的相关信息的E-R图。图-1 商品信息表clt_seller图4.3

36、.2.2-2 商品信息E-R图 管理员（clt_admin）主要存储的是管理员的主要信息，包括管理员姓名、密码、邮箱、电话、ip地址、头像等，其数据结构如图-1所示， 分类表（clt_sellercate）主要存储不同类别创建的名字、时间，并按时间先后进行排序，其具体的表结构设计如图-1，标签分类E-R图为图-2。图-1 标签分类表clt_sellercate图-2 标签分类E-R图 投诉信息表（clt_reporter）主要存储不同的投诉信息，并按时间先后进行排序，其具体的表结构设

37、计如图-1所示。图-1 投诉信息表clt_reporter4.4 后台管理4.4.1 登陆界面因为本项目使用的本地环境搭建小程序的服务器环境，因此使用的地址是localhost，端口使用的是8080，进入登陆界面会提示输入管理员账户名和密码，同时还需要输入验证码，验证码的部分设置了区分大小写，所以，在输入验证码要注意大小写的问题，其界面如图4.4.1-1所示。图4.4.1-1 后台管理登陆界面4.4.2 后台管理界面后台管理界面主要是四大部分，一是欢迎页，二是权限管理，三是出售管理，四是管理员账户显示，其界面如图4.4.2-1所示，其页面代码为图4.4.2-2图4.

38、4.2-1 小程序后台首页图4.4.2-2 小程序后台首页 出售管理 出售管理中有五个部分组成分别是出售类型、商品列表、用户列表、轮播图管理、投诉列表，主要是用于首页宣传轮播图的更新，更新小程序的分类列表，收集已注册的用户并进行管理，对用户发送的投诉信息进行处理，对在售商品进行管理。(1) 出售类型管理员通过添加分类信息让用户在分类界面查看类别并查看不同类别的商品，同时还可以对已有类型进行修改或者删除类型如图-1，对于已存在的类别可以查看相关类型的商品图-2。-1 商品分类列表图-2 商品类别存储的商品信息(2) 商品列表列

39、表显示在售商品的信息，如售卖人、售卖的商品名称、价格等，管理员对商品拥有查看、排序和删除的权利，如图-3。-3 在售商品的信息(3) 用户列表管理已登录的用户，管理员可以对其信息进行查看图-4 已登录授权的用户信息(4) 轮播图列表管理轮播图用于首页自动滚动展示小程序相关的宣传图片，管理员可以添加新的图片，同时也可以对存在与列表中的图片进行编辑或删除。编辑图片可以是重新上传信新的照片，也可以保持原图，如图-5。-5 首页轮播图(5) 投诉列表用户对某些恶意行为感到不满，并对其商品进行投诉，如图-6。管理员可以在

40、确认商品信息存在恶意行为后，对商品进行删除，同时对投诉信息可以选择删除处理，如图-7、-8.图-6 投诉信息列表图-7 管理员处理投诉信息-8 管理员删除投诉信息第五章 系统测试5.1 系统测试的意义微信小程序以其简单便捷的操作在大街小巷中遍地开花。视觉效果、响应速度、操作便捷、符合大众利益，是判断一个小程序在众多小程序里脱颖而出的充要条件。同时，系统测试将决定用户对应用使用的体验或者应用的品质等相关问题，测试方面也应该包括前端和后端的内容。由于版本的不同，测试的方案也不尽相同。开发版和体验版无需审核，仅仅只要微信号配置权限

41、，用户使用扫码功能才能访问。但是开发版中二维码的使用期限相对更短。而正式版需要通过微信审核流程，这也是需要关注的部分。三大版本的测重点也不同，开发版访问测试环境，体验版访问预发布环境，正式版访问生产环境4。5.2功能模块测试功能模块测试是对系统具备明显功能的最小粒度的测试，一般是由测试人员进行测试，了解测试功能可以促使开发者及时了解某个功能模块的不足或缺陷，便于及时纠正提，升代码质量和减少维护时间。和主流开发软件的不同体现在四个方面，分别是性能方面、兼容性方面、测试工具方面、网络测试方面。5.2.1 性能方面因小程序运行时长相对较短、使用频度低，所以需要关注的性能指标比app要少。测试人员测试

42、的过程其中就包括应用响应时间、内存、CPU、帧率、数据缓存大小。5.2.2 兼容性方面(1) 操作系统兼用性（兼容Android系统跟iOS系统），(2) 机型兼容性（主要是屏幕适配）：用rpi单位对大部分屏幕进行适配，但仍然需要考虑小众机型的兼容性；(3) 微信版本的兼容性（基础库版本适配），针对开发版，通过修改调试基础库版本即可做兼容性测试。5.2.3 测试工具方面开发版：可以使用开发者工具自带的测试功能，设置appData的值可以比界面检查的更细。再比如fiddler中inspectors，也可以借助真机调试体验版/正式版：使用的是Fiddler工具测试。通过运行小程序后，即可以在fiddler上看到因程序设计的原因抓取的https的包。5.3 测试结果本次测试使用的是微信开发者工具中自带