【优秀论文】基于微信小程序的电子阅读器的设计与开发/小说阅读
说明：由于图片无法显示，需要全文可联系up主
前 言
在2017年微信推出微信小程序后，迅速以不需下载安装即可使用，用完即走，几乎不占用内存等优点获得人们的青睐。越来越多的人倾向于使用更为便捷的小程序，而开发者亦是如此，希望通过微信小程序可以让自己的产品广为人知。本设计是一款基于微信小程序的电子阅读应用，在其架构上分为前端和后端，前端主要使用微信官方提供的微信Web开发者工具进行开发，主要内容包括页面布局，页面跳转以及api接口使用等。后端则使用微擎框架--基于目前最流行的WEB2.0架构(PHP+MySQL)来进行后台管理。
在功能上，本设计前端要实现书城、我的书架、个人中心、书籍页面详情等几个模块，这几个模块间又有许多子模块相互连接和配合。后端实现小说分类管理，热门推荐管理，页面管理等。阅读之余，还有一些热门的小游戏或者小程序供用户体验。整个过程中拟采用模块化设计，将系统分为几个相对独立的模块，每个模块具有自己的功能设计和实现要求，在开发过程中可以分模块集中开发实现，然后最后再将各个模块组织和集成，这样使得整个系统的结构层次分明，也便于开发工作的管理。
关键词：微信小程序；微擎框架；PHP；模块化
目 录
1 引言
1.1 研究背景
1.2 国内研究现状
2 研究与实现中的关键技术
2.1 微信小程序
2.2 微擎框架
2.3 MySQL数据库
2.4 开发环境
3 系统总体需求分析
3.1 可行性分析
3.2 系统需求分析
3.3 系统业务流程分析
4 数据库设计
4.1 数据库概念结构设计
4.2 数据库逻辑结构设计
5 系统实现
5.1 个人中心界面设计
5.1.1 登录界面
5.1.2 我的书架界面
5.2 小说首页界面设计
5.3 书籍分类页面设计
5.3.1 书城页面布局
5.3.2 阅读页面设计
5.3.3 书籍详情信息获取
5.4 后台管理设计
6 系统功能测试
6.1 系统测试目的及原则
6.2 系统测试
6.2.1 我的书架页面测试
6.2.2 书籍分类及书籍详情页面测试
6.2.3 后台管理测试
总 结
参考文献：
致 谢
1 引言
1.1 研究背景
自微信上线以来，迅速获得大量用户的青睐，截止目前，微信用户数量已经达到10亿之多。而且在2017年微信推出小程序之后，更是以不需要下载安装即可使用，用户扫一扫或搜一下即可打开应用等优点迅速占领市场[1]，它实现了应用“触手可及”的梦想，与普通app相比，它不用下载，打开微信就能使用，使用完关闭即可，大大减少了手机内存的占用。因此，随着微信小程序的推出，越来越多的开发者将自己的产品往小程序迁移，希望借助微信巨大流量以及信息传播的便捷性，让自己的产品广为人知。同时，在网络普及的时代，网上阅读已经走进人们的生活。相比传统的书本，网上阅读能让用户更方便快捷的选择自己喜爱的书籍，拥有的庞大的书籍库森罗万象，能满足用户各方面的需求[2]。同时网络阅读器能将自己喜欢的书籍都存放在一部小小的手机中，同时能保存用户书签，记录这些数据，方便用户随时查看。
1.2 国内研究现状
目前，小程序主要涉及五大类：零售、电商、生活服务、政务民生和小游戏，在不断开发新的功能来满足用户的需求。国内有大量对app的调查研究，微信小程序的出现及其用户市场良好反馈无疑会对app造成一定影响[3]，而关于微信小程序的应用程度和未来发展方向的预测，对其用户需求预测，企业在开发app和创建微信小程序上的选择影响等方向的预测都对微信小程序的发展有着重要的意义。
就本课题而言，随着网络的普及化，越来越多的人倾向于电子阅读，据统计显示，当前使用电子阅读方式的用户已经超出纸质版阅读用户10个百分点，电子阅读成为大多数人青睐的阅读方式[4]。但是，伴随着技术的不断发展，目前移动端阅读app种类甚多，彼此之间相互借鉴、彼此模仿，同质化比较严重，用户随便下载安装一个使用都差别不大[5]，而且所占用的手机内存也会随着使用时间而增加。
微信小程序的出现，则会改善这一不足之处，如果设计一款基于小程序的电子阅读器，既避免了对于阅读app的选择安装，随时随地，想看就看，看完即关，又不占用过多手机空间，甚至可以免费阅读，可以充分利用碎片化时间来阅读学习，充实自我。这对于大多数用户来说，是一个很好地选择。
2 研究与实现中的关键技术
2.1 微信小程序
微信小程序是腾讯微信推出的一种全新的用户与服务之间的连接方式[6]。不用下载安装，也不占用很多内存，但可以享有和原生app基本功能的相同体验。随着技术的不断发展，小程序的开发过程已经有了一套成熟的流程体系。有微信自己提供的组件，框架，开发工具等。还有一些专业人士自己写的组件来更好的进行微信小程序的开发。
为了使小程序开发变的更为方便、快捷、高效，微信团队开发了一套小程序框架，命名为MINA。它通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，而且对上层提供一整套JavaScript API[7]，让开发者能够很方便地使用微信客户端提供的各种基础功能与操作，快速构建一个应用。
如下图所示，为MINA框架架构图。
图2-1 微信MINA框架架构图
由图可以看出该框架分为三大部分，分别为逻辑层、视图层和系统层。
（1）逻辑层
逻辑层是MINA框架的核心内容，也是其服务中心，在这一层中，主要是对页面交互以及数据列表渲染等内容的处理。在微信小程序里面，逻辑层就是所有.js脚本文件的集合，它和视图层中的事件机制联合起来共同完成整个小程序的数据管理，页面交互以及网络和文件的访问。逻辑层里面还有两个很重要的功能即生命周期和页面路由[10]，其中生命周期是由页面逻辑层的page()函数实现，生命周期控制中主要包括以下方法：
onLoad()方法--监听页面加载，onShow()方法--监听页面的显示，onReady()方法--监听页面初次渲染完成，onHide()方法--监听页面的隐藏，onUnload()方法--监听页面卸载，onPullDownRefresh()方法--监听用户下拉动作，以及转发设置等，不同的服务要在不同的生命周期方法函数内实现。而页面路由则主要用来进行页面间跳转的无缝连接，所有的页面都要添加到app.json这个文件中进行统一管理。逻辑层的实现就由各个页面的.js脚本文件负责，微信小程序的逻辑层响应视图层的事件处理，并将处理结果返回到视图层[11]。
（2）视图层
视图层则是对页面的直观布局，包括WXML和WXSS两类文件，与HTML和CSS类似，WXML是对页面基础视图进行布局设计，WXSS则对页面要展示的样式进行控制和美化。在这一层中还要通过数据绑定，进行列表及条件渲染，引用模板和组件对页面进行合理美观的布局，而后在逻辑层将数据进行处理后发送给视图层展现到页面[12]，同时监听视图层的事件。数据在视图层借助组件的设计展现，组件是视图的基本组成单元。
（3）系统层
系统层主要包括临时数据或缓存、文件存储、网络存储与调用[13]。除此之外，项目根目录下的三个app.wxss、app.js、app.json文件是全局性的系统文件，也是小程序的入口文件，它们分别负责小程序项目的全局公共样式、小程序公共逻辑和小程序公共配置的实现。
2.2 微擎框架
微擎是目前市面上很流行的第三方微信公众号平台运营管理系统--Web2.0架构（MySQL+PHP）。它是一个开放的生态系统，支持在线升级和安装模块及模板，拥有良好的开发框架、成熟稳定的技术解决方案、活跃的第三方开发者及开发团队，另外，微擎还是多用户版本的系统，拥有开发者入驻机制，用户在安装微擎后，可以绑定很多小程序和公众号，而且也可以开通很多账号，具备分配权限的功能，用户可以基于微擎系统，发展客户，发展代理等[14]。使用者只需下载微擎安装包，安装对应模块便能轻松管理微信公众号或者微信小程序，对于新手很是友好。
2.3 MySQL数据库
MySQL是一个中小型关系型数据库管理系统，目前Internet上的中小型网站的数据库大多是MySQL。支持多种操作系统，支持多线程，充分利用CPU资源，对SQL语句进行优化，提高查询速度，也提供了用于管理、检查、优化数据库操作的管理工具。MySQL还具有体积小、开放源代码、性能快捷、可移植性和开放源代码、遵守国际标准和国际化支持、为多种编程语言提供API等特点[15]。
图2-2 MySQL系统架构图
如图2-2所示，MySQL内部大致分为三层：
（1）最上层所包含的服务并不是MySQL所独有的，而相反是大部分服务于C/S程序或者这些程序所需要的部分，比如连接处理、身份认证、安全性等[16]；
（2）中间层是MySQL的核心部分，通常也叫做SQL Layer。在MySQL数据库系统处理底层数据之前的所有工作都是在这一层完成的，包括权限判断，SQL解析，行计划优化，query cache的处理以及所有的内置函数（如日期，时间，数字运算和加密）等等。跨存储引擎的功能都在这一层实现，如存储过程、触发器、视图等。
（3）底层是存储引擎，主要对底层数据进行存取、操作实现，由多种存储引擎共同组成，是数据库中重要且核心的部分，也是MySQL不同于其他数据库的一个重要特性[17]。
2.4 开发环境
（1）Windows 7旗舰版
（2）小程序开发工具：微信web开发者工具
（3）PHP调试环境：phpStudy
（4）PHP编码工具：phpStorm
（5）数据库及管理工具：MySQL数据库 Navicat Premium 12
3 系统总体需求分析
3.1 可行性分析
（1）操作可行性
微信小程序提供了供开发使用的微信web开发者工具，在工具中可以进行代码编写，调试，预览等功能，极大的简化了开发难度，其开发有前端与后端操作，前端为腾讯微信推出的WXML，WXSS，JS等语言来布局，其实质与HTML，CSS类似，其中也有一点不同，不过对于熟悉HTML和CSS的人来说，这就可以很快上手并进行小程序前端布局，而后端操作则有多种语言可选择，比如Java，C#，PHP，NodeJs等[18]，而在本次设计中，我选择用PHP，首先，PHP是可以将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI（通用网关接口）要高许多；其次，PHP还可以执行编译后的代码，编译可以达到加密和优化代码运行的功能，使代码运行更快。PHP还支持几乎所有流行的数据库以及操作系统。最后PHP是开源软件，所有PHP的源代码每个人都可以看得到，很适合新手入门。
（2）经济可行性
微信小程序与原生app相比较来说，它开发周期短，一般两周左右，而app开发周期则几个月起步，同时在成本上，明显小程序花费更少，即使是复杂一点的小程序，其成本也几千到一万左右，而同款app却需几十万甚至百万，因此在使用体验相差无几的条件下，很显然小程序开发更占优势。
3.2 系统需求分析
通过需求分析确定本次设计在整个功能上分为前端和后端两块内容，其中前端包括页面布局以及API接口调用，后端用PHP和MySQL搭建管理。详细功能如下：
图3-1 系统功能结构图
由以上功能结构图可以知道本次设计要实现的主要有小说首页，书城排行，热门推荐，个人中心，以及后端管理系统。详细功能如下：
（1）小说首页
该页面主要实现小说搜索，男女生排行榜显示的功能，点击搜索框可跳转到搜索页面，搜索页面还会有推荐热门搜索，点击搜索后也会有搜索历史记录。
（2）书城排行
该页面主要是各种分类包括男生，女生以及出版类，还包括已收录的书籍数量，点击可以跳转到详情页面，可以阅读，可以加入书架。
（3）热门推荐
此版块主要是推荐一些热门的小程序或者小游戏，可以在后台进行管理。
（4）个人中心
此版块包括我的书架，我的粉丝，我的客服等内容，加入书架的书籍可以从此处进入查看和阅读。
3.3 系统业务流程分析
在本次设计中，用户可以通过扫码进入小程序，进行书籍浏览，添加到书架以及从书架移除，也能看到各种分类，排行榜等，下面是系统流程图：
图3-2 系统流程图
4 数据库设计
数据库选择MySQL数据库，它不仅简单易用，支持查询语言（SQL），而且性能较高，多个客户机可以同时使用数据库，此外具有很好地连接性和安全性，运行速度快等。最重要的一点是，它与此次设计所采用的的后端语言PHP具有很好地支持，可以很好地交互。
4.1 数据库概念结构设计
数据库概念结构设计的过程是通过对用户需求进行综合、归纳与抽象，形成一个独立于具体DBMS的概念模型。概念结构设计是使用E-R模型和视图集成设计法进行设计的，E-R图是描述概念模型的有效工具[19]，E-R图由实体、属性、联系三个要素组成，例如本系统中用户信息就是一个实体，它包含描述用户的众多属性，联系表示实体之间的关系，实体与实体之间的联系可以分为三种：一对一、一对多、多对多。
在本次设计中，规划了以下几个实体信息，分别是用户信息实体，书籍分类信息实体，基础配置信息实体，热门推荐实体，阅读记录实体。下面是详细信息：
（1）用户信息实体
图4-1 用户信息实体图
（2）书籍分类信息实体
图4-2 书籍分类信息实体图
（3）基础配置信息实体
图4-3 基础配置信息实体图
（4）阅读记录实体
图4-4 阅读记录实体图
（5）热门推荐实体
图4-5 热门推荐信息实体图
下面是实体关系的E-R图：
图4-6 实体E-R图
4.2 数据库逻辑结构设计
根据概念结构设计中的E-R图进行数据库的规则转换，将E-R图实体和实体间的联系转换为关系模式，并确定关系模式中的属性和码。实体中的属性与关系模式中的属性相对应，实体中的码与关系中的码相对应[20]。本系统最后的数据模型以数据表的形式展现，具体说明了数据表中属性名称、主键、含义、约束条件，是否为空等信息，系统中主要的数据库表设计详细如下：
（1）用户信息表
表4-1 用户信息表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
用户id
2
open_id
varchar
60
否
用户id
3
img
varchar
255
否
头像
4
nickname
varchar
255
否
昵称
（2）书籍分类信息表
表4-2 书籍分类信息表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
书籍id
2
title
varchar
255
否
分类标题
3
img
varchar
255
否
分类图片
4
url
varchar
255
否
跳转链接
5
urlType
tinyint
1
否
跳转类型
（3）基础配置信息表
表4-3 基础配置信息表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
主键id
2
indexShowNum
int
11
否
首页显示个数
3
img
varchar
255
否
背景图片
4
shareTitle
varchar
255
否
分享标题
5
userCenter
varchar
255
否
个人中心
（4）热门推荐信息表
表4-4 热门推荐信息表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
主键id
2
title
varchar
255
否
名称
3
img
varchar
255
否
图片信息
4
msg
varchar
255
否
跳转信息
5
type
tinyint
1
否
跳转类型
6
hot
int
11
否
热度值
（5）阅读记录表
表4-5 阅读记录表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
主键id
2
uid
int
11
否
用户id
3
readtime
intr
10
否
首次阅读时间
4
Novel_name
varchar
255
否
小说名称
5 系统实现
5.1 个人中心界面设计
图5-1 个人中心界面
如上图所示，个人中心页面包含我的书架，推荐好友，我的粉丝以及客服等功能，下面是具体设计内容。
5.1.1 登录界面
用户在首次使用时先要登录，常见的小程序登录方式有三种，分别是自有账号登录、使用第三方平台账号登录、使用微信账号登录[21]，由于小程序中没有cookie的机制，所以在使用前两种方式时要确认要使用的API是否有依赖，还有小程序中也不支持HTML页面，那些需要使用页面重定向来进行登录的第三方API就需要改造。这里我们就采用微信账号登录。
使用微信账号登录，是官方推荐的登录方式，毕竟小程序是基于微信，这种登录方式在安全性也比其他的要高（微信对数据做了数据签名和加密）。下面是微信小程序登录时序流程图：
图5-2 小程序登录时序流程
由以上图可以看出首先调用wx.login()获取临时登录凭证code，并回传到开发者服务器。然后调用auth.code2Session()接口，换取用户唯一标识OpenID和会话密钥session_key。之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份[22]。
通过用户登录小程序接受微信授权来获取用户的基本信息。这个过程需要先调用微信的微信登录wx.login()API接口来获取用户的临时登陆凭证code码，在小程序中code码可以作为用户本小程序中的唯一标识。然后再调用微信的获取用户信息的wx.getUserInfo()API接口来获取用户的基本信息，此时若用户接受微信登陆时的授权请求，则会在wx.getUserInfo()API接口中返回用的基本信息，主要包括：用户昵称、用户头像、以及所用的语言等信息。此时在我的信息页面就会显示用户的微信头像和昵称信息，否则打印出登录失败。
5.1.2 我的书架界面
图5-3 书架界面
在书架界面设置上，在bookShelf.wxml中myContainer类中又有bookshelfContainer和operation两个分类，它们共同构成整个界面的框架显示，其中bookshelfContainer用于存放要添加的书籍，operation里面是一些可以进行的操作，比如编辑，删除等。当添加完书籍后，在点击书籍封面时可跳转到对应阅读界面，此时会调用getbookInfo()方法从API接口请求数据，成功则返回对应数据。
当用户首次登录时后，书架是空的，会提示去书城浏览添加书籍，我的书架主要实现存放用户想看的书籍，可以进行移除，增加，显示是否有更新等功能
5.2 小说首页界面设计
小说首页页面主要实现小说搜索，男女生热门榜单以及排行等内容。所有的页面都在app.json文件中定义，若想把某个页面设置为首页，则把它放置到最前面即可。点击搜索框可跳转到搜索页面，并且会提供热门搜索词，若之前有搜索过，会保留历史搜索记录，点击历史搜索记录便会跳转到相应书籍详情页面，同样热门搜索词也提供多组可供选择。榜单设计使用list数组来绑定，然后通过wx:for等渲染对数组列表进行遍历循环。数据的获取则在逻辑页面通过调用wx.request()来对api接口进行请求，成功后用setData()方法将数据打印出来，页面显示如下图所示：
图5-4 首页页面
5.3 书籍分类页面设计
5.3.1 书城页面布局
书城页面是本次设计中的主要内容，它包括各种分类以及书籍详情页，以及各个分类索收录的书籍数量，点击每个分类可获取详细书籍，然后可选择阅读或加入书架。页面如下图所示：
图5-5 书城分类页面
这个页面的设计中使用了小程序中scroll-view这个组件，它是用来设置一个可滚动视图区域。使用竖向滚动时，需要给<scroll-view>一个固定高度，通过WXSS设置height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)[23]。它有两个主要属性分别是scroll-x，scroll-y，用来设置是否允许横向或者纵向滚动，属于布尔类型，默认值为false，此处是纵向滚动，因此scroll-y要设置为true。在页面布局上使用了三个view视图容器，相当于三个div，用于三大分类，然后对于详细的分类信息则通过在wxml里面绑定数据和列表渲染，然后在js逻辑页面中通过wx.request()方法来请求api接口，请求成功则返回结果给前端页面中显示。
而对于点击页面跳转时则使用navigator这个导航组件，即跳转页面链接，通过设置不同属性如target、url、open-type等，可以在点击跳转时有不同效果。
5.3.2 阅读页面设计
阅读页面是一个阅读小程序核心的页面，所有书籍的阅读都需要它来完成，进入阅读界面后，点击屏幕可以唤起菜单，即目录，阅读模式和字体大小等。其中阅读模式又分为正常模式，夜间模式和护眼模式，也可以通过Aa+，Aa-调整字体大小[24]，点击目录即可获取对应目录。
图5-6 阅读界面
（1）阅读界面
首先，整个阅读界面依然使用scroll-view这个组件来进行纵向滚动以实现阅读功能，直到一章内容完结停止，章节末有两个按钮，分别为上一章和下一章，点击即可跳转到对应页面。
（2）菜单栏
对于点击屏幕中心唤起菜单栏，这里设置了一个范围，即在屏幕哪个区域内点击屏幕可以唤起菜单栏，下面是部分源码：
openMenu:function(t){
Var a=this.data.clientWidth/2,
e=this.data.clientHeight/2,
o=t.detail.x,s=t.detail.y;
a-100<o&&o<a+100&&s<e+100&&
e-100<s&&this.setData({
showMenu:!this.data.showMenu});},
这里面有几个参数说明一下，a代表屏幕宽度的一半，e代表屏幕高度的一半，o和t分别表示横向纵向点击屏幕可唤起菜单栏的区域。
（3）阅读模式设计
在阅读模式上分为正常模式以及夜间模式与护眼模式，各自属性如下：
正常模式：background: #cb1c36; color: #fff; width: 150rpx; line-height: 60rpx; font-size:15px;
夜间模式：frontColor: "#ffffff", backgroundColor: "#080C10" readerCss.color ="#696969" backgroundColor="#080C10"
护眼模式：frontColor:"#ffffff",backgroundColor:"#000000"readerCss.color="#333"
backgroundColor="#C7EDCC"
5.3.3 书籍详情信息获取
本次设计中书籍信息的获取是通过对第三方api接口的请求来实现的。首先，在api.js中对第三方api接口进行封装，设置返回格式，然后在前端页面通过wx.request()方法对已经封装好的api接口发起请求，成功则使用success：function()回调函数返回所请求到的内容显示在页面上。如果请求失败，则执行失败函数fail()。在详情页面还有加入书籍，点击阅读，推荐书籍等功能。界面显示如下：
图5-7 详情页面
5.4 后台管理设计
本次后台采用微擎框架管理，用PHP+MySQL搭建一个本地服务器，在前文中提到，此次后台搭建是使用phpStudy这个程序集成包，包含PHP、MySQL、Apache、PHPMyAdmin等必需的一些环境，首先下载安装PHPstudy，我们下载安装后界面如下图所示：
图5-8 phpstudy操作界面
打开后显示如图，点击其他选项菜单可是打开配置文件进行配置，打开php.ini文件将以下几行内容取消注释，
图5-9 修改配置文件
之后打开站点管理，设置自己的站点域名等信息并保存生成配置文件。
图5-10 站点管理
然后打开navicat--一套高性能数据库管理及开发工具。它可以用于任何版本3.21或以上的MySQL数据库服务器，并支持大部份MySQL最新版本的功能，包括触发器、存储过程、函数、事件、视图、管理用户等。在连接名里面输入所要链接的数据库名，填入密码即可连接，如下图所示：
图5-11 Navicat连接数据库
在左边可以看到其中的表及其它信息，
图5-12 连接成功界面
接下来是微擎的安装，但是这个安装过程比较繁琐，不过官网有给出详细的安装教程，在官网下载后按照教程一步一步的安装并设置一些相关参数后，再把对应的应用添加到微擎管理平台上，最终搭建好了后台管理服务，如下图：
图5-13 后台管理界面
至此，整个设计算是接近尾声，接下来就是进行系统测试，对还存在的问题进行调试解决。
6 系统功能测试
6.1 系统测试目的及原则
一般来说，为了让软件开发更有价值，需要针对软件进行测试，以便在使用过程中具备稳定性，并确保用户获得最佳使用体验。在小程序使用过程中，为了确保其智能性和准确性，就有必要对软件进行不断的开发和测试。这样做的目的除了能够保证软件的正确运行之外，还可以根据测试结果适当提升软件质量[25]，高质量的阅读体验更具普遍性，能够大范围推广，所以更需要在软件开发时、软件使用前就做好软件的反复测试。这样，在软件的使用过程中可以尽量减少出现问题的机率。
一般来说，检测在开发过程中是能够避免细节失误的，而一旦细节上出现任何失误，检测都能够妥善处理，不至于引发致命性的错误，所以在软件的结构、软件的数据、软件的业务流程上都需要进行一系列的测试，反复校对后才可以确保软件功能的正确运行。
6.2 系统测试
6.2.1 我的书架页面测试
用户在打开小程序后，首先进行授权登录，然后就可以进入个人中心页面进行浏览及管理。如下图所示，分别是首次进入和点击登录后的界面。
图6-1 登录页面测试
点击我的书架后则可以查看书架中的书籍，若书架中还未加入书籍，则可移步至首页或书城进行搜索或点击浏览并加入书架，具体如下图所示：
图6-2 书架页面测试
点击加入书架后则会在调试框内显示如下信息，
图6-3 请求数据成功
再去到书架则可以看到已经添加成功，如图所示
图6-4 加入书架成功
6.2.2 书籍分类及书籍详情页面测试
书籍详情页面是否能够运行成功决定着这款小程序是否最终可以发布，因此这一块的测试尤为重要，测试内容主要是页面间的跳转是否流畅，点击相应的按钮或者界面是否会进行相应的操作，以及数据的获取和页面的显示是否正确，在进入首页后可以看到搜索框以及男女生榜单如下图所示：
图6-5 首页搜索页面测试
点击搜索框后可以正常跳转到搜索页面并且对应的热搜词以及历史搜索记录都可以正常显示，而在测试的过程中当然也存在网络不好则也会导致延时或者请求失败，这是一个普遍存在的问题。
书城页面以及点击对应分类跳转页面显示如下图所示：
图6-6书城页面测试
当点击对应的小说去进行阅读时，在console框会返回请求成功的信息，如下：
图6-7 获取数据成功
而且在后台数据库中也会相应的显示刚才阅读的书籍信息：
图6-8数据库信息
6.2.3 后台管理测试
本次设计中后台使用微擎框架管理，在前面也介绍了微擎框架，微擎是一款免费开源的微信公众号和微信小程序管理系统，如下图所示，是微擎后台界面：
图6-9后台管理界面测试
在后台添加如下信息：
图6-10 后台添加任务
我们返回到小程序前端页面可以看到如下图所示：
图6-11 小程序页面
从中可以看出后台有一些基础配置以及相应的功能设置，配置对应的功能即可在小程序页面显示，还可以在后台添加管理操作人员，给与权限方便管理。
至此测试已经基本完成，在这过程中，整个设计的基本功能上都可以达到预期的目标，没有出现很严重的错误及问题，前后端也能够进行良好的交互。还有一点，因为是基于在线的小说阅读，因此页面跳转或者数据获取会随着网络延迟而延时，总体来说，是一次比较成功的设计。
总 结
本文通过对阅读小程序的开发，从零开始一步一步学习并实际操作，完整的走了一个流程。从刚开始的需求分析，到架构搭建与设计，到编码实现，数据库设计，以及服务器搭建，这个过程虽然不是很顺利，但终究还是完成了预期目标。
本次设计通过微信web开发者工具与phpstudy+微擎框架搭建了一个带有后台管理的电子阅读器，在实现基本功能的前提下，增加了一些其他休闲体验。
在设计的过程中还是有很多地方去更加深入学习，比如在前端框架的选择，以及后台搭建语言的选择，现在各种技术发展的很快，只掌握一种很显然还不够。还有对于数据库的设计上尤显生疏，对于概念结构设计和逻辑结构设计的掌握也略欠缺。最主要的一点是本次设计没有实现在真机上使用，只是停留在模拟器上，真实的测试也得不到验证。
作为当前生活中非常火热的微信小程序，此次正值毕业设计，选择这样一个课题来作为自己这四年的大学生活的一个结束，还是很有成就感的，因为自己比较喜欢看小说，而且专业又是计算机相关，合适的时间，合适的环境，做一件合适的事。不过又说回来，这是一个好的开端，以后的学习生涯还很长，继续努力。
在这次完成毕业设计和论文的过程中，遇到了很多困难，但克服困难的过程也是一次自我提高的机会，实践使我对理论知识有了更深的理解，也提高了解决问题的能力。
参考文献：
[1] 张小龙.微信小程序入口在哪?有什么用?[J].计算机与网络,2017,43(4):50-50.
[2] 移动互联时代有声读物的发展现状、问题与对策——基于有声读物用户的实证调查[D]. 河南大学, 2016.
[3] 刘红卫.微信小程序应用探析[J].无线互联科技,2016(23):11-12,40.
[4] 张福平.碎片化阅读背景下全民阅读的推进——电子阅读与纸质阅读的对比分析及融合探讨[J].郑州轻工业学院学报(社会科学版),2016,17(1):43-51.
[5] 马洪波.移动互联网时代读者阅读习惯分析[J].中国报业,2019(07):72-73.
[6] 王松基于用户需求的高校图书馆微信小程序移动服务设计研究[D].东北师范大学,2018.
[7] 毛鑫渝.基于使用与满足理论的小程序特征分析[J].新闻研究导刊,2017,8(22):89+102.
[8] 程子珍.基于微信小程序的网上购物系统的设计与实现[D].首都经济贸易大学,2018.
[9] 罗锦莉.微信小程序正式上线[J].金融科技时代,2017(2):86-86.
[10] 张茂林,白海涛,王铂智.基于微信小程序的驾校预约系统[J].电子世界,2018(9):161-161.
[11] 帅志军,陈园园.基于“微信小程序”调查测试类程序的研究与开发[J].电脑迷,2018,No.100(7):155.
[12] 陈世宇,邓秋雪,陈正铭,等.试析微信小程序前端界面与网站前端界面实现技术的异同[J].电脑编程技巧与维护,2017(20):5-8.
[13] 张志强,郑涛,王伟钧,等.一种基于网络请求的数据访问接口设计与实现[J].成都大学学报(自然科学版),2018,v.37；No.126(2):60-64.
[14] 刘庆.基于WeChat和WebServer的考试信息查询系统的设计与实现[J].电脑知识与技术,2016,12(19):38-39.
[15] 程子珍.基于微信小程序的网上购物系统的设计与实现[D].首都经济贸易大学,2018.
[16] 王亮,邹志鹏,姜虹.基于微信小程序的医患交流平台的设计与研究[J].中国数字医学,2017,12(11):71-73+99.
[17] 罗启强.基于PHP+MySQL的高校教务管理系统的设计与实现[D].吉林大学,2016.
[18] 面向Web2.0的web应用前端开发框架的设计与实现[D].北京邮电大学,2014.
[19] 孙卓.关于E-R图向关系数据模型转换的探讨[J].电大理工,2011(04):23-24+27
[20] 李威.基于E-R图的关系数据库关键字查询[D].山东建筑大学,2012.
[21] 微信公众账号服务平台微服务的设计与研究[J].通讯世界,2017(6):84-85.
[22] 黄富就.基于微信的高校图书管理系统的设计与实现[D].华南理工大学,2015.
[23] 龙政.基于微信小程序的图书推荐前台设计与实现[J].内蒙古科技与经济,2018(08):71-73.
[24] 王玉洋.基于微信小程序的移动学习平台环境构建与系统设计开发[D].南京大学,2018.
[25] 郭金金.基于测试设计标准化的软件质量保证[D].西南大学,2011.
致 谢
时间如梭，四年大学生活转眼便已到结束之时，在此次毕业设计中，同学们以及老师都给与我以最大限度的帮助。首先感谢老师的悉心指导，从开始选题，到中间设计过程中很多问题的指导，以及最后论文的撰写都孜孜不倦的授予指导，最重要的是教授给我实践经验和做事的方法。还有一起的同学也提供了莫大帮助，由于本人在前端页面设计过程中的一些疏忽而导致出现bug，进而程序运行出错，是他们帮我调试代码，找到问题所在，成功运行。
其次，感谢学校的培养，在这四年中是您提供了良好的学习环境以及方便的学习平台，似驾一帆船畅游在知识的海洋中，让我有了更高的知识面，更宽广的视野，为以后的学习生活打下更坚实的基础。
最后要感谢父母，是你们一直以来默默付出，不仅仅是在经济上的支持，更重要的是在精神方面培养，让我能够健康成长，走向更远的未来！
从中也悟出一个道理，不管一个人的力量有多强大，终究会遇到一些难题，有句话说的好，人多力量大，几乎所有成功的背后都会有一大群支持你的人，给你帮助，给你力量，人生路漫漫，心齐比天高！
