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

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

Wechat small program -- Design and implementation of

campus idle trading platform

内容摘要

校园闲置交易小程序是以微信中的小程序作为平台让校园内的人们进行闲置物品交易的一个具有交易跟交友功能的小程序。自己通过在大学生活中进行观察，发现许多大学生在网络购物平台进行购买物品时会存在过度购买的情况，因此会有闲置物品的产生。同时朋友圈里也发现有大量的二手交易群存在，需要出售时就需要加入这些群进行售卖。我们经常使用微信，而且小程序给了我们一种途径，如果有一种非常便捷的交易平台对物品进行平价或低价出售，就可以让闲置物品再次被他人使用，这样就不需要专门下载app。在微信小程序的开发模式下，采用了HTML、css、PHP、MySQL等编程语言去实现闲置交易小程序的前端界面显示和与后端数据库的交互，满足了人们在微信平台上进行售卖的基本需求。

关键词： 微信小程序 校园交易 闲置物品 二手

Abstract

The 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 to

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 transaction 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 others again, so we don't 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 needs of people to

sell on wechat platform.

Key words: Wechat applet Campus transaction Idle articles second-hand

目 录

第一章 绪 论 .............................................. 1

1.1

课题背景及研究意义 ................................... 1

1.1.1 课题背景 .......................................... 1

1.2课题研究现状 ......................................... 1

1.3

课题研究内容 ......................................... 2

第二章 相关工具及技术介绍 .................................. 3

2.1

开发工具 ............................................. 3

2.1.1 微信开发者工具 .................................... 3

2.1.2 Navicat Premium ................................... 4

2.1.3

phpStudy ........................................ 4

2.2

开发技术 ............................................ 4

2.2.1 微信小程序开发语言 ............................... 4

2.2.2 PHP .............................................. 6

2.2.3 Mysql ............................................ 6

2.3本章小结 ............................................. 6

第三章 系统可行性分析和需求分析3 .......................... 7

3.1

系统可行性分析 ....................................... 7

3.2

系统需求分析 ......................................... 7

3.2.1 系统总体需求分析 ................................. 7

3.2.2 系统的详细需求分析 ............................... 8

3.2.2.1 用户功能 .................................................................................................................................................................... 8

3.2.2.2 管理员功能 ............................................................................................................................................................... 9

3.2.2.3 商品发布功能 ........................................................................................................................................................... 9

3.2.2.4 分类功能 ................................................................................................................................................................. 10

3.2.2.5 转发和投诉功能 ................................................................................................................................................... 10

第四章 系统设计与实现 ..................................... 11

4.1项目总体结构 ........................................ 11

4.2

模块设计 ............................................ 12

4.2.1 用户登陆模块设计 ................................. 12

4.2.2 用户中心模块设计 ................................. 13

4.2.3 首页模块设计 ..................................... 15

4.2.4 发布闲置物品信息模块设计 ......................... 16

4.2.5 商品分类模块设计 ................................. 19

4.2.6 转发和投诉模块设计 ............................... 21

4.3

数据库设计 .......................................... 22

4.3.1 数据库总体设计 .................................. 23

4.3.2 数据库单表设计 .................................. 23

4.3.2.1 用户表（clt_wechat_user） ......................................................................................................................... 23

4.3.2.2 商品信息表(clt_seller) ................................................................................................................................ 24

4.3.2.3 管理员（clt_admin） ....................................................................................................................................... 26

4.3.2.4 分类表（clt_sellercate） ............................................................................................................................ 26

4.3.2.5 投诉信息表（clt_reporter） ......................................................................................................................... 27

4.4

后台管理 ............................................ 27

4.4.1 登陆界面 ......................................... 27

4.4.2 后台管理界面 ..................................... 28

4.4.2.1 出售管理 ............................................................................................................................... 错误!未定义书签。

第五章 系统测试 .......................................... 32

5.1

系统测试的意义 ...................................... 32

5.2功能模块测试 ........................................ 32

5.2.1 性能方面 ........................................ 32

5.2.2 兼容性方面 ...................................... 32

5.2.3 测试工具方面 .................................... 33

5.3

测试结果 ........................................... 33

结 论 .................................................... 35

参 考 文 献 .............................................. 36

致 谢 ...................................... 错误!未定义书签。

广东东软学院本科生毕业设计（论文）

第一章 绪 论

1.1 课题背景及研究意义

1.1.1 课题背景

随着互联网的快速发展，网络是传递、发布、接收信息最快的一种方式。而自改革开放至今以来，经济、网络的迅速发展让人们现在的生活充满了变化，同时基本上每个人都会配备有手机。无线网络普遍普及，人们随时随地都能够上网冲浪。而电子商务也随着阿里巴巴公司的发展日益融入人们的生活。近几年来，由于互联网式的购物平台具有比线下购物更具有便捷性，更容易货比三家，以至于在购物时会有超量购买或者对商品没有急性需求的情况，因此会出现有闲置的物品的情况。因为不理智的网上购物会造成个人资金的浪费，导致了会有部分学生会通过一些闲置商品交易平台用降低商品本身的价格的手段来出售闲置物，成为校园内学生群体回笼资金的一种方式。

1.2课题研究现状

近年来，随着智能手机和电脑的普及，全球的交易网络增长迅速，网络交易市场规模逐步扩大。现今交易网络不仅可以传递信息，而且还可以把自己闲置的商品的发布到小程序上去，根据商品的新旧程度、获得途径和获得后的使用时间来估计闲置物品的价格，同时在用户之间进行相互交流和相互了解后可以互相添加为好友，从而进行交易。另外，在目前的国内闲置交易平台中，比较火热的几个典型代表代表，如：闲鱼，转转，猎趣，这些都是需要下载app去实现交易的可能。而且，微信app已经成为网民们普遍的聊天工具，需要进行售卖闲置物品时通常都是发布在用户个人的朋友圈里或者去寻找一些交易聊天群去加入，这样就存在了一些信息存在延时性与不共通性。

1

广东东软学院本科生毕业设计（论文）

由此可见，无论是在国内还是国外，小程序都受到了广大群众的支持，它是一个广受关注的热点，所以对校园内闲置商品交易小程序的设计和开发是顺应了时代的潮流，便利了个人的生活。

1.3 课题研究内容

作为一个闲置交易商城小程序，此小程序可以让学生或附近的人在学校或大学城周边进行同城交易，交易双方进行交易的内容可以是某样闲置下来的物品，也可以是转售个人因所购商品过多的物品。但是交易的前提是价值交换，作为交易双方，其实都需要有一个平台去进行平等沟通和等价交换的，这样交易双方可以通过聊天了解商品的一些具体信息，比如，价格、商品的新旧程度，是否可以邮寄等。

近年来，许多用户已经非常熟悉使用微信，与此同时微信公众平台也推出了小程序这一功能，因此小程序给了我们一种途径，如果有一种非常便捷的交易平台对物品进行平价或低价出售，就可以让闲置物品再次被他人使用，这样就不需要专门下载app。

无论你是加入一个微信聊天群，或者是QQ群，再或者在自己的朋友圈去售卖物品，都有一定的弊端，但是在校园闲置小程序中，我们可以实时看到有谁在出售物品，物品价格如何，对于心仪的物品也可以进行支付购买，支付的途径可以是新颖的网上支付或是传统的面对面现金支付。同时为保证交易顺利进行，购买方是否需要快递配送则需要由交易双方商讨得出结果。

综上所述，该小程序既能在同一间学校内进行交易，也可以在大学城内进行交易，无论是同校还是在同一个大学城，拥有一个校园闲置交易平台都极大地提高了闲置物的可用性与再利用的功能，校内交易可以让购买方更快得到想要的物品。

本论文研究的主要内容：

（1）分析小程序应用的现状以及研究的意义，确定研究的目的；

（2）研究和使用小程序开发工具、MySQL数据库、phpStudy等相关技术；

（3）详细分析了小程序的功能，并进行了具体的需求分析；

（4）深入研究所设计的小程序应用的总体设计方案、相关架构；

（5）对完成的应用进行测试。在测试中发现其中的问题，不断的解决问题，完善应用。

2

广东东软学院本科生毕业设计（论文）

第二章 相关工具及技术介绍

2.1 开发工具

2.1.1 微信开发者工具

微信开发者工具是微信官方提供的针对小程序开发的工具，集中了开发，调试，预览等功能。微信团队除了发布微信小程序开发者工具，还发布了小程序开发文档和设计指南，集成了开发调试、代码编辑及程序发布等功能，帮助开发者可以简单和高效地去开发小程序。目前开发者工具仍然在不断的完善中，但是具体的版本有稳定版、预发布版、开发版三种。根据使用习惯来说，普通用户使用稳定版工具的情况比较多。

使用工具前需要在公众号平台注册账号并绑定开发者所属的微信账号，使用工具时开发者使用扫一扫进行登陆，新建项目都需要运用到AppID。

开发者工具主要主要界面分为三大块：模拟器、调试器和编辑器。

模拟器：主要是模拟小程序在网联端上显示出真实的运行表现，由于工具版本的推陈出新，部分的API功能在模拟器上的显示会存在一定的差异性，但是对于绝大部分的 API 均能在模拟器上呈现出正确的状态。

调试器：其实这是对 DevTools （ Chrome DevTools 是谷歌浏览器自带的一个开发者调试工具）的封装而小程序是对DevTools 的封装[1]。调试器的界面主要分为6大功能模块，其结构如图2.1.1-1所示。

图2.1.1-1 微信开发者工具调试器

编辑器：可以帮助开发者模拟一些客户端的环境操作，同时还有提供可视化文件的资源管理器和代码编写区。

3

广东东软学院本科生毕业设计（论文）

2.1.2 Navicat Premium

Navicat Premium 是一款数据库应用管理的软件，无论是对本地数据库，亦或者是远程数据库都可进行管理，通过输入数据库的相应信息即可链接。由于其直观而强大的图形界面，调取数据库里的信息展现成表格或E-R图的形式，不单单简单明了地知道表的类型与数据，而且操作简洁易懂，因此它是一套趋近于理想状态的管理和开发数据库的解决方案。

它包括 SQL 创建工具或编辑器、数据处理工具以及更多。各方权衡之下，用MySQL来管理小程序的后台数据库，无疑是明智之举。

2.1.3 phpStudy

phpStudy是一款轻量级的PHP调试环境的程序，它可以为小程序的服务器环境提供最优配置解决方案。phpStudy集成了最新的Apache + PHP + MySQL +

phpMyAdmin，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序不仅包括PHP调试环境，还包括了开发工具、开发手册等[2]。该工具兼容市面上大部分的人机交互操作系统，由于自带ftp服务器，因此用户在使用的时候不需要下载ftp软件，同时它还支持对文件进行监控与修改，是对新手和专业人士较为友好的一款软件。

2.2 开发技术

在本应用的设计和实现过程中，需要采用多种技术的配合来完成，现在我将会对所采用的技术做一个详细的介绍。

2.2.1 微信小程序开发语言

小程序具有一种新的吸引力，开发者在短时间内高效地设计与开发。小程序不仅在相当短的时间里如雨后春笋般冒出，还与手机应用的体验旗鼓相当。

前端面向使用者，提供程序主界面以及各子界面的点触式操作，后台系统处理数据，并和前端进行友好交互。后台主要功能模块有:数据存储、数据处理与计算、提供数据等。

小程序语言与HTML、CSS和 JavaScript求同存异，共用一套开发标准。

4

广东东软学院本科生毕业设计（论文）

小程序所使用的程序文件类型大致分为以下几种：

①WXML(微信专用语言，比较类似html，负责前端界面的详细的可视化结构)；

②WXSS(微信样式表，类似于CSS，负责页面的样式结构)；

③JS(JavaScript，小程序的逻辑主体)。

小程序以JavaScript为基石，奠定了程序的三大部分，依次是逻辑层、视图层和系统层，其通信结构如图2.2.1-1所示

图2.2.1-1小程序通信结构

(1) 逻辑层

小程序的逻辑层以 JavaScript 编写，逻辑层将数据与视图层进行交互，并接受事件的反馈。在中，通过对数据进行修改优化逻辑结构，提升流畅度，缩短响应时间，给予用户极佳的用户体验，形成正反馈。

(2) 视图层

页面布局由用于描述页面结构的wxml 与 用于描述页面的样式wxss 构成，并且由视图的基本组成单元——组件进行一一呈现。

(3) 系统层

对于，其内容包括文件、窗口、网络延时、标签等变量。从总体上看，以为基准设计小程序大体框架，而每个.json文件可以让页面区域具体化，更加生动。 用来提供全局变量，如baseUrl。 提供全局的css样式。

5

广东东软学院本科生毕业设计（论文）

2.2.2 PHP

PHP是一种不仅在能服务器端嵌入HTML进行动态交互的免费使用的脚本语言。对于开发者来说，选择PHP作为易学习、开发效率高、兼容性高的脚本语言，有利于降低开发门槛，使开发初学者更加容易进行实践操作。用PHP做出的动态页面与其他的编程语言相比，代码执行效率比完全生成HTML标记的CGI要高许多，同时还可以执行引擎将用户经常访问的PHP程序驻留在内存中，再次访问时可以直接执行内存中的代码就可以了。

2.2.3 Mysql

SQL就是访问和处理关系数据库的计算机标准语言。无论是使用何种编程语言去编写程序，只要涉及到操作数据库，比如，一个图书借阅网站需要把购买回来的书籍的名字和书籍序号存入数据库，或者一个手机购物app需要把用户的个人信息、已购买的商品种类、浏览商品的类别、购物车内商品的数量与种类等相应数据存入数据库，而此过程仅限SQL去完成。。

无论过去还是将来，关系数据库都是不可撼动的地位。由于MySQL安装的体积极小、速度快、耗资低，且源码开放，除去独角兽公司外都选择 MySQL作为网站数据库，搭配 PHP和 apache可以组成优良的开发与存储环境，更是促进了MySQL的广泛使用。

2.3本章小结

本章主要对我们设计的校园闲置交易小程序中所涉及的设计与开发中所使用到的技术进行基本的介绍。为我们应用进一步的开发进行技术上的说明，对应用建设过程中所需的理论基础进行详细的研究与分析，为我们以后应用的实现提供技术上的支持。

6

广东东软学院本科生毕业设计（论文）

第三章 系统可行性分析和需求分析3

3.1 系统可行性分析

可行性分析是要求开发者对系统进行全面的剖析，并且以经济作为着重点。正所谓世界上不是所有的问题都有解决办法，同理我们的软件设计也是，我们的软件设计也会遇到时间和资源的限制，为了减少或避免不必要的浪费，减少项目不可行的风险，所以我对所要开发的项目进行了可行性分析。首先对自己的开发设备进行分析,在硬件部分，我主要还是使用自己的笔记本电脑做开发工具基础，数据库我采用的是使用phpStudy软件在本地搭建数据库，使用Navicat Premium对小程序的数据库进行连接并设计数据表。

3.2 系统需求分析

需求分析是我们软件开发设计中需要注意的一个过程，其主要分析程序和设计程序模型，因此我们需要通过需求分析掌握我们的开发目的、程序要求，在需求分析中我们需要去分析我们的这个项目是面向什么样的人群、操作是否便捷等等问题，为此我们按照需求分析的一般步骤来进行需求分析。

3.2.1 系统总体需求分析

本项目在总体架构上主要分为小程序的界面端、服务器、数据管理三大部分。其中小程序的界面端部分主要利用微信小程序的三大框架(WNIL,WXS,JavaScript)以及微信官方提供的丰富的API组件。

这个程序分为两大块，一部分是用户模块，一部分是管理模块。在用户模块中用户可以发布商品信息、转发商品、向管理后台发起投诉；在管理模块中，管理员可以修改个人登陆账户、管理上架的商品、处理投诉信息，其总体结构图如图3.2.1-1所示。

7

广东东软学院本科生毕业设计（论文）

图3.2.1-1 小程序总体结构图

3.2.2 系统的详细需求分析

3.2.2.1 用户功能

当大多数用户来说，用户可以看到登陆时的用户名和头像，同时还能对用户所发布的商品信息进行删除或修改，因此对用户功能有以下分析：

(1) 用户登录：用户通过微信授权的提示登陆小程序，小程序会记录用户的微信用户名和头像信息并，进入个人界面；

(2) 用户中心：可以查看用户个人发布过的闲置物品信息，管理发布信息，对已发布的商品信息进行修改、删除操作；

因此，用户功能的总体结构图如图3.2.2.1所示.

图3.2.2.1 用户功能结构图

8

广东东软学院本科生毕业设计（论文）

3.2.2.2 管理员功能

管理员功能是系统管理员在后台对小程序的数据进行操作。因此在后台管理页面中，对管理员功能有以下分析：

(1) 可以对小程序首页宣传的图片进行上传、删除、修改；

(2) 设计不同的商品类型供用户在发布商品时进行分类上架；

(3) 还可以对用户发起投诉的信息进行查阅和删除，对用户投诉的商品进行强制删除。

管理员功能的结构图如图3.2.2.2所示。

图3.2.2.2 管理员功能

3.2.2.3 商品发布功能

因为用户要出售自己闲置的物品，是需要以最快速度让购买者了解商品的相关信息，因此商品功能包括以下几个功能：

(1) 商品信息：用户可以发布出售商品的信息，填写联系方式以及所出售的商品的详细信息（包括商品名称、商品图片、商品的文字说明、商品价格、商品类别），点击发布后将会把信息上传至后台等；

(2) 联系功能：买方在询问商品信息时，可以通过按钮与出售方进行咨询；

因此，商品发布功能的结构图如图3.2.2.3-1所示。

图3.2.2.3-1 发布功能的结构图

9

广东东软学院本科生毕业设计（论文）

3.2.2.4 分类功能

在点击分类时，用户可以查看各种分类，点击某个分类标签可以查看已分类到的商品，因此对分类功能有以下分析，如图3.2.2.4所示。

图3.2.2.4 分类功能结构图

3.2.2.5 转发和投诉功能

在浏览某样商品的详细信息时，可以点击转发按钮转发某个商品的链接给其他的微信用户。同时用户在看到有违反平台规范的信息后也可以对其进行投诉，管理员会对其进行核实，若被确认商品的确存在违规行为，管理员可以在后台管理中对其进行删除处理，其功能的流程结构图如图3.2.2.5所示

图3.2.2.5 转发和投诉功能流程图

10

广东东软学院本科生毕业设计（论文）

第四章 系统设计与实现

本章对基于微信小程序的校园二手交易平台的各个模块的设计代码与功能实现的结果通过截图的方式展现，以便快速了解功能实现的效果。

4.1项目总体结构

在开发者工具中，项目文件主要包括图片文件、页面代码文件和全局配置文件。图片文件images中存放着小程序的图标、背景图、商品图，如图4.1-1所示；页面代码主要存放在pages中，每个页面都有相应的文件夹，由于转发和投诉都在goodDetail文件夹内，因此不单独拿出来说明，其文件夹相对应的关系如下表所示，

文件夹属性

登陆界面

个人中心

首页

发布商品

分类商品

商品被浏览界面

对应的文件夹名称

login

me

index

add

cateGoodList

goodDetail

在数据库文件中，包括后台界面和数据库文件。

全局配置文件中代码部分结构为

在小程序主页中的功能具体分为四个：首页、分类、我的、发布。首页通过搜索和浏览页面的方式对闲置物品进行查找、查看来了解闲置物品与发布人的头像、昵称和发布时间；点击分类，则是查看闲置商品的分类，再点击分类标签则是查看当前标签下的商品信息；在首页点击加号则进入到闲置物品的发布区，填写相关内容

11

广东东软学院本科生毕业设计（论文）

4.2 模块设计

4.2.1 用户登陆模块设计

用户登陆模块是指用户的初次登录。用户在首次使用时无法对任何商品进行浏览，因此在点击任何功能时会提示授权。用户授权登录界面的设计是由实现。同时小程序通过getUserInfo属性获取用户信息，在用户需要再次登陆小程序时可以从bindgetuserinfo中再次获取到用户信息，其界面代码如图4.2.1-1所示。

12

广东东软学院本科生毕业设计（论文）

图4.2.1-1 小程序授权登录

首次登陆的效果图如图4.2.1-2所示。

图4.2.1-2 小程序授权登录界面

4.2.2 用户中心模块设计

用户中心模块是指用户在登录之后进入个人中心查看信息。用户首次授权登录会userInfo获得头像与昵称，得到后跳转到文件中，其界面代码如图4.2.1-1，同时查看用户是否进行售卖的界面如图4.2.1-2。

13

广东东软学院本科生毕业设计（论文）

图4.2.1-1 个人中心代码

图4.2.1-2 初次登陆与登陆后进行售卖的对比图

14

广东东软学院本科生毕业设计（论文）

4.2.3 首页模块设计

用户登陆成功时，会跳转到首页进行商品浏览。在首页界面，第一是顶部的搜索栏，在搜索栏的text内可输入想要购买的物品名称，确认存在则会显示商品列表，其主要代码为图4.2.3-1。

图4.2.3-1 搜索栏代码

轮播图是管理者通过后台上传图片，通过bannerSwiper获得后台数据，其具体代码如图4.2.3-2。

图4.2.3-2 轮播图代码

发布功能使用了按钮的设计，在页面加个button属性，然后设置fixed固定其定位，图4.2.3-3所示，同时首页界面的效果图如图4.2.3-4所示。

图4.2.3-3 发布按钮的代码

15

广东东软学院本科生毕业设计（论文）

图4.2.3-4 首页界面

4.2.4 发布闲置物品信息模块设计

在首页点击“+”号按钮，会跳转到中，在中，在图片上传的过程中，会通过{{}}/9来确定num的值不大于9，避免数据溢出。填写完信息并确认点击之后会发布信息并更新到首页，展示用户在售的物品。发布闲置物品的代码如图4.2.4-1，发布商品信息界面与类别选择界面为图4.2.4-2，类别选择代码为图4.2.4-3

16

广东东软学院本科生毕业设计（论文）

17

广东东软学院本科生毕业设计（论文）

图4.2.4-1 发布闲置物品的代码

图4.2.4-2 发布商品界面及类别选择界面

18

广东东软学院本科生毕业设计（论文）

图4.2.4-3 类别选择代码

4.2.5 商品分类模块设计

点击分类按钮，可以看到有许多不同的种类，每一类都是有一个button组成，其界面图如4.2.5-1所示。

图4.2.5-1 分类列表展示

有一些已经上架了的商品通过选择商品类别会存放在所选的类别，当用户对某一类标签点击后，会进入标签内查看正在出售的商品，由于我之前存储了一些数据，有一些类别还没有商品信息，因此有无商品的界面如图4.2.5-2所示。

19

广东东软学院本科生毕业设计（论文）

图4.2.5-1（1） 类别下有商品的界面

图4.2.5-1（2） 类别下无商品的界面

20

广东东软学院本科生毕业设计（论文）

4.2.6 转发和投诉模块设计

在浏览某一件商品时，在页面的右下角位置会有两个功能按钮，一个是转发的，一个是投诉的。可以看到商品的发布人的头像和所出售商品的一些信息，若他人有需要可以通过share进行转发分享；其主要代码如图4.2.6-1所示。

图4.2.6-1 转发和投诉按钮的代码

投诉模块是向管理者提供不良信息的途径，在投诉功能里，点击之后会跳转到，填写投诉内容并提交给后台，如图4.2.6-2。

图4.2.6-1 转发和投诉的设计代码及界面

21

广东东软学院本科生毕业设计（论文）

图4.2.6-1 商品详情页

4.3 数据库设计

数据库设计是软件体系设计中比可可缺少的核心技术。数据库的设计也很大程度上决定了你系统性能好坏及复杂性，本系统采用MySQL数据库进行开发。

22

广东东软学院本科生毕业设计（论文）

4.3.1 数据库总体设计

本系统通过设计用户表（clt_wechat_user）、商品信息表(clt_seller)、管理员（clt_admin）、分类表（clt_sellercate）、投诉信息表（clt_sellercate）。

通过5张表的相关关系链接，组成了系统数据库的表结构，本系统在设计数据库表,严格按照需求去实现,更加地保存数据的完整性和可用性，因此所设计的总体数据库如图4.3.1所示。

图4.3.1 总体数据库

4.3.2 数据库单表设计

4.3.2.1 用户表（clt_wechat_user）

主要存储的是登陆注册时用户的信息，其中包括用户的基本信息，也包含了小程序的唯一标识mid ,这样可以达到系统和小程序使用同一套用户信息,同时使得本系统的登录体系和微信小程序的登录体系相对应，如图4.3.2.1-1所示，同时图4.3.2.1-1是用户与用户信息的E-R图

23

广东东软学院本科生毕业设计（论文）

图4.3.2.1-1

用户表（clt_wechat_user）

图4.3.2.1-1

用户E-R图

4.3.2.2 商品信息表(clt_seller)

用户通过填写发布闲置物品的信息，比如现在的价格和以往的价格、商品简单介绍、上传商品图片等，如图4.3.2.2-1所示。图4.3.2.2-2是商品的相关信息的E-R图。

24

广东东软学院本科生毕业设计（论文）

图4.3.2.2-1 商品信息表clt_seller

图4.3.2.2-2 商品信息E-R图

25

广东东软学院本科生毕业设计（论文）

4.3.2.3 管理员（clt_admin）

主要存储的是管理员的主要信息，包括管理员姓名、密码、邮箱、电话、ip地址、头像等，其数据结构如图4.3.2.3-1所示，

4.3.2.4 分类表（clt_sellercate）

主要存储不同类别创建的名字、时间，并按时间先后进行排序，其具体的表结构设计如图4.3.2.4-1，标签分类E-R图为图4.3.2.4-2。

图4.3.2.4-1 标签分类表clt_sellercate

图4.3.2.4-2 标签分类E-R图

26

广东东软学院本科生毕业设计（论文）

4.3.2.5 投诉信息表（clt_reporter）

主要存储不同的投诉信息，并按时间先后进行排序，其具体的表结构设计如图4.3.2.5-1所示。

图4.3.2.5-1 投诉信息表clt_reporter

4.4 后台管理

4.4.1 登陆界面

因为本项目使用的本地环境搭建小程序的服务器环境，因此使用的地址是localhost，端口使用的是8080，进入登陆界面会提示输入管理员账户名和密码，同时还需要输入验证码，验证码的部分设置了区分大小写，所以，在输入验证码要注意大小写的问题，其界面如图4.4.1-1所示。

图4.4.1-1 后台管理登陆界面

27

广东东软学院本科生毕业设计（论文）

4.4.2 后台管理界面

后台管理界面主要是四大部分，一是欢迎页，二是权限管理，三是出售管理，四是管理员账户显示，其界面如图4.4.2-1所示，其页面代码为图4.4.2-2

图4.4.2-1 小程序后台首页

图4.4.2-2 小程序后台首页

4.4.2.1 出售管理

出售管理中有五个部分组成分别是出售类型、商品列表、用户列表、轮播图管理、投诉列表，主要是用于首页宣传轮播图的更新，更新小程序的分类列表，收集已注册的用户并进行管理，对用户发送的投诉信息进行处理，对在售商品进行管理。

(1) 出售类型

管理员通过添加分类信息让用户在分类界面查看类别并查看不同类别的商品，同时还可以对已有类型进行修改或者删除类型如图4.4.2.1-1，对于已存在的类别可以查看相关类型的商品图4.4.2.1-2。

28

广东东软学院本科生毕业设计（论文）

4.4.2.1-1 商品分类列表

图4.4.2.1-2 商品类别存储的商品信息

(2) 商品列表

列表显示在售商品的信息，如售卖人、售卖的商品名称、价格等，管理员对商品拥有查看、排序和删除的权利，如图4.4.2.1-3。

4.4.2.1-3 在售商品的信息

(3) 用户列表

管理已登录的用户，管理员可以对其信息进行查看

图4.4.2.1-4 已登录授权的用户信息

29

广东东软学院本科生毕业设计（论文）

(4) 轮播图列表管理

轮播图用于首页自动滚动展示小程序相关的宣传图片，管理员可以添加新的图片，同时也可以对存在与列表中的图片进行编辑或删除。编辑图片可以是重新上传信新的照片，也可以保持原图，如图4.4.2.1-5。

4.4.2.1-5 首页轮播图

(5) 投诉列表

用户对某些恶意行为感到不满，并对其商品进行投诉，如图4.4.2.1-6。管理员可以在确认商品信息存在恶意行为后，对商品进行删除，同时对投诉信息可以选择删除处理，如图4.4.2.1-7、4.4.2.1-8.

图4.4.2.1-6 投诉信息列表

30

广东东软学院本科生毕业设计（论文）

图4.4.2.1-7 管理员处理投诉信息

4.4.2.1-8 管理员删除投诉信息

31

广东东软学院本科生毕业设计（论文）

第五章 系统测试

5.1 系统测试的意义

微信小程序以其简单便捷的操作在大街小巷中遍地开花。视觉效果、响应速度、操作便捷、符合大众利益，是判断一个小程序在众多小程序里脱颖而出的充要条件。同时，系统测试将决定用户对应用使用的体验或者应用的品质等相关问题，测试方面也应该包括前端和后端的内容。

由于版本的不同，测试的方案也不尽相同。开发版和体验版无需审核，仅仅只要微信号配置权限，用户使用扫码功能才能访问。但是开发版中二维码的使用期限相对更短。而正式版需要通过微信审核流程，这也是需要关注的部分。三大版本的测重点也不同，开发版访问测试环境，体验版访问预发布环境，正式版访问生产环境[4]。

5.2功能模块测试

功能模块测试是对系统具备明显功能的最小粒度的测试，一般是由测试人员进行测试，了解测试功能可以促使开发者及时了解某个功能模块的不足或缺陷，便于及时纠正提，升代码质量和减少维护时间。和主流开发软件的不同体现在四个方面，分别是性能方面、兼容性方面、测试工具方面、网络测试方面。

5.2.1 性能方面

因小程序运行时长相对较短、使用频度低，所以需要关注的性能指标比app要少。测试人员测试的过程其中就包括应用响应时间、内存、CPU、帧率、数据缓存大小。

5.2.2 兼容性方面

(1) 操作系统兼用性（兼容Android系统跟iOS系统），

32

广东东软学院本科生毕业设计（论文）

(2) 机型兼容性（主要是屏幕适配）：用rpi单位对大部分屏幕进行适配，但仍然需要考虑小众机型的兼容性；

(3) 微信版本的兼容性（基础库版本适配），针对开发版，通过修改调试基础库版本即可做兼容性测试。

5.2.3 测试工具方面

开发版：可以使用开发者工具自带的测试功能，设置appData的值可以比界面检查的更细。再比如fiddler中inspectors，也可以借助真机调试

体验版/正式版：使用的是Fiddler工具测试。通过运行小程序后，即可以在fiddler上看到因程序设计的原因抓取的https的包。

5.3 测试结果

本次测试使用的是微信开发者工具中自带的测试工具Audits进行测试，调试参数如图5.3-1所示

图5.3-1 Audits工具

通过测试后，显示以下结果，如图5.3-2所示。整体评分虽然在在70分以上，但只有在性能方面是相对优秀的，由此可见，在此次设计中，对于颜色的搭配和控制图片规格大小的能力还是比较薄弱的。

33

广东东软学院本科生毕业设计（论文）

图5.3-2 测试结果

因此，对于本次毕业设计来说，小程序的性能虽然可能在一定的的程度上接近于运行在手机上的小程序，但还是有很大差距的，像交互界面的颜色搭配，轮播图的规格大小都没有严格管控，所以这只是简单地做出了一个小程序，还不足以让用户进行普遍应用。

34

广东东软学院本科生毕业设计（论文）

结 论

在本次项目开发当中，能够独立完成了一款可运行在微信上的小程序——校园闲置交易小程序（简称“阳光二手街”），实在是令人感慨万千，虽然从未学过小程序，但是靠我自己一步一个脚印去走也是很快乐的。同时该小程序虽然仍有缺陷可以继续完善，但基本功能完备。对于这个项目，在这个完整的开发过程中，我深深地感受到了自己所具备的知识是相当的狭隘，许多时候都是自己去百度知识点去查看他人都理解。虽然只是作为一个毕业项目去设计，但是我觉得这是一个能让知识与实践进行融合的一个过程，让我认识到必须要有整套完善的开发计划以及相关的开发设计文档，保障每项工作都能够按部就班地完成，这样才能使我们学到的知识变为自己所拥有，才能真正地为自己所掌握。同时我还发现写毕业设计论文也要有一定的规划,由于我前期都在设计程序样式，编写代码，并没有去撰写我的毕业论文，都堆到了最后才来写，就显得时间不是很充沛了。还有些时候我在百度上查找到一些用到的参考文献，在当时并没有好好记录下来,以致之后在写参考文献资料时又要重新找一遍。这是我在编写论文时的马虎之处，我只能让更多的时光和精力去为我的行为买单。

最后，在这一段时光里，通过设计小程序，让我更加熟悉HTML、CSS和JavaScript，也更加了解到如何使用本地环境去作为小程序的服务器进行数据存储，我坚信所有这些通过本次毕业设计项目开发所收获的东西，必将伴随着我继续前行，使我终生受益。

35

广东东软学院本科生毕业设计（论文）

参 考 文 献

[1] 张帆.微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序[S].北京: 电子工业出版社，2019(6);14-14

[2] 百度百科PhpStudy[EB/OL] ，

/item/phpStudy/7894712?fr=aladdin

[3] 微信官方文档-小程序[EB/OL]，/doc/ ，2016(9)

[4] 微信小程序测试（原创博文）[EB/OL]，/Rachchchhchel/article/details/90545003

[5] 傅伟,涂刚,张贤龙.基于微信小程序的电子商城设计与实现[J].电脑编程技巧与维护,2020(03):60-62.

[6] 苟晨仝,刘洋,江丹.“互联网+”下大学生闲置物品交易研究——以成都高校为例[J].中国市场,2020(11):64-65+67.

[7] 沈东旭,白建,姚嘉明.基于小程序在市场交易中的应用[J].河北农机,2020(02):74.

[8] 祁丽霞,侯瑞源,杨文启,李发庆,周天才.大学生二手书小程序交易平台的研究[J].河南科技,2019(32):31-32.

[9] 许世虎,曾梵影.微信小程序界面设计与用户黏性影响因素关系研究[J].美与时代(上),2020(01):54-56.

[10]

[11]

邹国强.phpStudy网站搭建工具在电子数据取证工作中的应用[J].广东公安王轶多,王培宇.大学生闲置物品研究报告及建立转卖平台的思考[J].智库科技,2017,25(04):13-14+27.

时代,2020(15):255-256.

36

广东东软学院本科生毕业设计（论文）

37