基于React的移动阅读APP前端的设计与实现.docx
《基于React的移动阅读APP前端的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于React的移动阅读APP前端的设计与实现.docx（43页珍藏版）》请在冰豆网上搜索。
基于React的移动阅读APP前端的设计与实现
本科毕业论文（设计）
题目
基于React的移动阅读APP前端
的设计与实现
学生姓名
我姓牙
学号
99999999
院名
信息工程学院
专业年级
计算机科学与技术2013级
指导教师
陈老师
职称
教授
单 位
中国学院信息工程学院
辅导教师
职称
单 位
完成日期
2017
年
5
月
10
日
基于React的移动阅读APP前端的设计与实现
摘要
近十年来，随着互联网加时代的到来和移动互联网的飞速发展，人们的阅读方式和阅读习惯也随着发生了深刻的变革。
人们利用生活中的碎片时间来进行移动阅读随之成为了一种比较流行的阅读方式，看纸质书看纸质报的人越来越少，看电子书的人越来越多了，紧随着，大量的移动阅读APP也随之涌现。
我们经常在各种场合看到人们拿着手机追看着自己喜欢的小说，而基于React的移动阅读APP特色在于占用内存小、绿色无广告以及支持小说本地缓存等别具一格的功能，非常适合广大人民群众使用。
因此研究基于React移动阅读APP前端的设计与实现具有不错的经济效益和很强的现实意义。
基于React的移动阅读APP不仅是使用目前主流的前端MVC框架React，使前后端分离，大大提高了开发效率，其UI设计也是结合了目前主流的前端UI框架Ant对APP前端的进行视觉设计和交互设计，其更是涵盖了HTML5/CSS3/JavaScript全方位的前端技术。
关键词：
React；HTML5；MobilereadingAPP
DesignandimplementationofmobilereadingAPPfrontendbasedonReact
Abstract
Inrecentyears,withtherapiddevelopmentofmobileInternet,people'sreadingstylehasalsoundergoneprofoundchanges,andthepopularityofmobileterminalshaschangedthewaypeopleread.Peopleusefragmentedtimeformobilereadingtobecomeapopularwaytoread,followedbyalargenumberofmobilereading,APPalsoemerge.Weoftenseepeopleholdingmobilephoneafterwatchinghislovenovelsonvariousoccasions,andReactmobilereadingAPPfeaturesasmallmemory,greenfreeadvertisingandsupportlocalnovelshaveauniquestylebasedonthefunctionofcachingisverysuitableforthemassestouse.Therefore,itisofgreatpracticalsignificancetostudythedesignandimplementationofAPPfront-endbasedonReactmobilereading.BasedontheReactAPPmobilereadingisnotonlyusingthecurrentmainstreamMVCframeworkReact,thefrontandrearendseparation,greatlyimprovingtheefficiencyofdevelopment,theUIdesignisacombinationofthecurrentmainstreamofthefront-endUIframeworkAntAPPfront-endforvisualdesignandinteractiondesign,whichiscoveringthefullrangeofHTML5/CSS3/JavaScriptfront-endtechnology.
Keywords：
React;HTML5;NovelAPP
1绪论
React是目前前端三大主流MVC框架之一，它用于构建用户界面的JavaScript库，具有着较高的性能，代码逻辑简单易解，受广大开发者的热衷。
移动阅读是指使用手机或者平板等智能终端进行阅读。
APP简而言之为手机软件，也就是我智能手机上的软件应用。
基于React的移动阅读APP的设计与实现，是指用React的框架来设计和实现一款移动阅读类的手机端软件。
1.1我国移动阅读的现状
伴随着互联网时代的到来，互联网再给我们带来方便的同时也改变了我们的生活方式和生活习惯。
在我们的阅读领域，人们的阅读习惯也随之而变化，由传统的纸质文本阅读逐步向着互联网阅读转移，其中移动阅读占据比例最大。
移动阅读是数字阅读的深化阅读形式，读者通过智能手机、平板电脑或专用手持阅读器就可以对电子资源进行无线接收和阅读，它是一种全新阅读模式，深刻地影响了人们的阅读习惯[1]。
根据Analysys易观智库发布的《中国移动阅读市场趋势预测报告2016-2018》数据显示，2015年中国移动阅读市场规模预计达到101.0亿元人民币，同比增长14.3%，较前两年增长有所放缓。
[2]。
显而易见，移动阅读的方式已经慢慢以成为了人们生活中进行阅读的主要方式了，随之而来的是，大量关于移动阅读的APP发布。
可见，一款符合大众需求的小说阅读APP是非常重要的。
据相关调查显示，移动阅读的主要受众是70后、80后和90后，他们保持着大量的阅读习惯。
人们进行移动阅读的方式大多都是利用碎片的时间，例如睡前、工作休息的间隙、如厕时以及周末等时间片段。
据亚马逊中国的《亚马逊：
2016年全民阅读调查报告》显示，有超过80%的人会选择睡前进行阅读，而睡前阅读的前提是手机上有着一款能阅读的手机APP。
据调查，许多90后在睡觉前都会阅读着自己喜欢的小说，因此我们的90后便成为了移动阅读的主体。
当代90后基本上人手一台智能机，看小说的人更是需要一款合适的小说APP。
目前阅读类APP市场可以说是百花齐放，在手机终端上看阅读小说已成为了一种普遍的现象。
基于不同的阅读动机而发展出各类细分不同的移动阅读应用。
对此，前瞻指南研究院电商研究组依据截止至今国内三大移动应用分发平台360手机助手、XX手机助手、腾讯应用宝，对其在移动端的下载量进行汇总，以及用户评价方面做出综合分析，列出2017年最受人们喜爱的阅读类APP排行榜[3]。
虽然不同的人选择了不同的移动阅读APP，但是我们可以看出，移动阅读应用的下载量是非常庞大的,也就是说在中国在阅读数量本来就不多的人群里面，现在有很大一部分是在选择了移动阅读的方式。
表1-12017年最受人们喜爱的阅读类APP排行榜
序号
APP名称
下载量（万）
1
掌阅iReader
5445
2
咪咕阅读
3232
3
QQ阅读
3012
4
书旗小说
2643
5
追书神器
2145
6
宜搜小说
1974
7
塔读文学
1926
8
起点读书
1918
9
多看阅读
1888
10
熊猫看书
1770
伴随着国家大力发展全名阅读，越来阅读的人会加入到阅读领域中，移动阅读用户量也会随之而增加。
现在人们娱乐消费也逐渐提高，居民娱乐教育用户稳步提升。
人民日益增长的精神文化需求，也会随之而促进了我们移动阅读市场容量以及消费的稳步增加。
在我国，随着智能终端（平板、手机、可穿戴设备等）的普及，移动阅读市场的前景显得极为广阔。
现状，自主一款适合大众化的移动阅读APP显得十分重要。
1.2国内外研究与应用现状
在这个互联网加时代，它不仅成为我们获取信息的快速有效的方式，它的飞速发展也促进了人们消费方式的转变以及生活方式的变化。
在以前，我们的阅读习惯基本上定位在报纸和纸质版的书籍上。
随着互联网时代的到来以及智能手机的普及，我们随处可见，越来越多的人在进行移动阅读，无论是休息区还是在工作区，特别是上班一族最为居多。
上班一族没有太多的时间去阅读，因为他们大部分的时间都是上班，他们的休息时间就是上班的时候和下班的时候，所以他们会利用这些零碎的时间来进行阅读，而在手机端进行阅读无疑是一个很好的选择。
因为在上班的时候，在地铁上你可能不会看报纸看书，但是你一定会看着自己的手机，所以移动阅读渐渐成为了上班族的一种普遍的阅读方式。
随着越来越多的人热爱于移动阅读，现在无论是国内外，也有越来越多的移动阅读APP出现。
随着前端技术的不断改革和优化，许多知名网站都会用上HTML5技术和MVC开发框架，实现前后端分离。
目前在国内网站和APP的开发都逐步走向前后端分离的道路，也就是说我们的MVC框架也会越来越受欢迎以及使用。
在我们的移动阅读APP的构建上，也基本都是利用MVC框架，也是前后端分离。
国内相对比较出名的，例如掌阅iReader、QQ阅读、宜搜小说、追书神器等都是MVC开发模式。
只是它们用的MVC框架不同，但都是前端三大MVC框架之一，包括React、Vue以及Angular等。
作为前端三大MVC开发框架之一的React其拥有很强的性能，可以实现繁杂的数据交互，真正做到前后端分离，大大提高了开发效率。
所谓前后端分离开发模式，只是前端和后端分离开发，后端开发人员只管数据逻辑，提供给前台数据接口就行了，而前端开发人员不仅仅只是写写页面，还会对数据的流向进行灵活的控制。
这样的开发模式不仅提高开发进度，更能提升页面性能，更容易后期维护。
因此，目前国内的一些知名网站都会使用MVC开发框架，在国内，对React框架应用比较出名的网站是“蚂蚁金服”。
在国内知名的移动阅读APP“追书神器”也是使用了React框架来开发。
我们使用HTML5技术主要是为了让页面更加美观，提升用户体验，同时也方便我们前端开发人员对页面进行维护。
在这个HTML5横行的时代，无论是国内外的网站都是随处可见。
在国内应用HTML5技术相对出门的网站有淘宝、京东、起点中文网、纵横中文网等。
React起源于国外，是Fackbook的内部项目，在国外的网站以及APP也会用到这个框架。
如今的智能手机和移动设备更新和发展迅速，人们的阅读方式已然发生了变化。
在国内比较著名的移动阅读APP有掌阅iReader、QQ阅读、追书神器等，在他们的平台上都有些不尽人意的地方，或是找不到相适应的书籍，或是因为占用内存过大，或是广告过多。
目前在国内也是比较流行的开发模式是前后端分离，而React框架更是前后端分离MVC开发框架的首选项，它占内存小，功能强大，逻辑简单，便于维护。
由此可见，基于React这个MVC框架开发出适合广大人民群众的一款移动阅读APP，将会是一次历史性的跨越。
1.3研究内容
（1）探索移动阅读行业现状、移动阅读APP的发展现状及未来前端网站开发技术的发展趋势。
（2）采用PS（Photoshop）和AI（AdobeIllustrator）技术完成移动阅读APP前端的设计与建模。
（3）采用HTML5/CSS3/JavaScript+React/Ant技术实现家居移动阅读APP前端。
（5）调用网站提供的免费API接口，实现对移动阅读APP的数据渲染。
（6）使用目前市场上主流浏览器Chrome（谷歌）浏览器、Firefox（火狐）浏览器、QQ浏览器上对APP的兼容性进行测试，同时连接真机进行调式。
2相关技术
2.1HTML5简介
HTML5的新特性主要体现在语义的标准化、简洁化，跨平台性优、无需插件支持、实时更新等等[4]。
HTML5是一种超文本语言，是html的第五代版本，是由W3C和WHATWG共同推动出来的成果，它包含了三大模块，分别是结构层（html、XHTML、xml）、表现层（css）以及行为层（JavaScript）。
从代码的方面来说，HTML5不仅是能够很好的支持在之前版本中的HTML标签，其新增的标签还可以替代原来部分繁琐的标签，简化了当前整个页面的构建，使页面更具语义化，更方便开发人员的开发以及维护。
HTML5的表单也是其一大亮点，其全新的表单自带了一些校验功能。
表单的属性及其用法如表1-1所示。
表2-1Input表单属性表
属性
用法
说明
required
required=”required”
限制表单值不可为空
placeholder
placeholder=”textword”
输入框中默认的提示灰色语句，在输入框获取焦点时默认值消失
multiple
multiple=”multiple”
允许同时上传多个文件
2.2CSS3简介
CSS3是CSS技术的升级版本，它是倾向于模块化开发。
CSS其全名为CascadingStyleSheets，我们国内的开发人员开发中称之为“层叠样式表”,它是由W3C推出，其中由选择符和声明两部分组成。
CSS文件名目前主要有三种格式，分别是css、less以及scss，而在本设计的阅读APP使用的是其less格式（面向对象式的写法）。
在我们的开发中使用CSS技术，我们不仅可以精准的把握住页面布局，还能对页面的样式美化进行更为精确的控制。
CSS3是在原来样式层中新增了许多新的特效，起可以有2D效果亦可以有3D效果，还可以模仿出某些动画效果。
CSS3最大的两个亮点便是其3D的控制和动画的完美演绎。
CSS3部分样式如表1-2所示。
表2-2CSS3样式表
效果
代码
圆角
border-radiuslinear-gradient
渐变
linear/radial/repeating-linear/repeating-radial-gradient
2D/3D转换
Transform（skew,matrix,rotate,scale,translate）
过渡
transition
动画
@keyframesanimation
媒体查询
@mediascreenand（min-width:
320px）{}
2.5JavaScript简介
JavaScript是面向WEB的编程语言，也可以说它是一种解释型语言，即是一行一行的执行，发现错误即终止。
JavaScript最早开发的时候并不是现在的命名，而是被称为LiveScript，由于它看起来像java，所以才被称之为JavaScript,但是其和java是没有什么关系的。
现在绝大多数网站都会使用JavaScript技术，而且目前我们使用的web浏览器（基于桌面系统、平板电脑以及智能手机的浏览器）几乎都包含了JavaScript解释器，这使得JavaScript能够成为编程史上使用得最多的编程语言之一。
JavaScript作为一种直译式脚本语言，是一种基于原型、弱类型、动态类型的语言，内置支持类型。
它的解释器被人们称之为JavaScript引擎，是属于浏览器的一部分，是被运用推广于客户端的脚本语言，最早是在HTML网页上应用，主要用来使HTML网页增加动态功能。
用JavaScript编写的程序能够访问Web页面的元素和运行它的浏览器，对这些元素执行操作，还可以创建新元素[5]。
2.5React简介
React是一个JavaScript的MVC开发框架，其起源于美国著名的Facebook，它本来是Facebook的内部项目，用来架设Instagram的网站，并在2013年5月开源。
React主要用于构建UI，很多开发者都称之为MVC中的V（视图）。
所谓MVC即是模型（model）－视图（view）－控制器（controller）的缩写。
React采用声明范式，它可以轻松描述应用，他的文件格式不仅是js格式，还有jsx格式（JSX是JavaScript语法的扩展）。
React区别于其他框架的最大之处在于它是单向响应数据流，其他开发框架多数多有是双向数据绑定，我们的React使用单向的数据流响应可以减少重复代码，比起传统的数据绑定更加简单。
React也是组件化开发，可以使得代码得到更好的复用，能够很好的应用到大项目的开发中。
如果我们的后台管理系统需要用到前端框架，我们开发者首选的就是React。
同时，React操作的对象都是虚拟的DOM节点，可以最大减少了页面与DOM的交互，从而大大提高了页面性能。
在React中还有几种常用语的架构，包括redux和flux，而我们所设计的移动阅读APP就是使用了redux架构，其数据配置包含三大部分，分别是api（数据接口）、action（创建交互事件）以及reduce（创建交互事件处理器）。
2.5Ant简介
Ant全称为AntDesign，是一个UI设计语言，也是匹配于React的UI框架，主要是用于构建页面的样式，以及一些数据的快速获取。
从2015年4月起，AntDesign在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统400个以上。
定位于中台业务的AntDesign兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率[6]。
Ant在国内的很多知名网站都会应用到，除了蚂蚁金服，还包括了金融云、服务包天平台以及OceanBaseCloudPlatform（云平台）等知名网站。
Ant的实用性在于其拥有丰富、灵活、实用的组件基础，而且其致力于提升用户和设计者的使用体验。
本设计的移动阅读APP简单的使用了该框架所提供的UI设计。
3APP前端总体设计
3.1内容分析
（1）首页：
本页面主要是存放书籍列表，即是客户已经收藏阅读的图书。
此外还还包含了六大功能。
一是本APP的APP名字，即是“移动阅读APP”。
二是书籍的展示形式选择，本APP主要供市面上主流的两种展示形式，即是九宫格展示（主要显示书籍封面以及书籍名）和列表展示（显示书籍封面、书名以及最新章节）两种，用户可以根据自己的喜好来设定自身想要的展示形式。
三是有关于本APP的一些声明的链接，可以看到关于本APP在设计的一些声明和帮助。
四是书籍的搜索按钮，点击可以跳转到搜索界面进行书籍搜索，用户可以找自己想看的想读的书籍。
五是长安书籍封面可以实现删除功能，如果用户不想再阅读某本书籍了，可以长按对应的书籍封面或者该书籍所在列表实现删除功能。
六是下拉刷新功能，即是在首页按住页面，下拉，松开后，即可完成下拉的刷新重新请求数据，获取最新数据。
（2）书籍阅读：
本页面主要是展示书籍具体内容，包括当前章节的章节号章节名以及该章节的具体内容。
此外这个页面还包含了九大功能。
一是在章节的末尾有章节的切换，用户在阅读完本章节后可以选择阅读下一章，或者返回上一章。
二是点击文章显示出导航栏，再点击左上角的返回按钮可以返回到APP首页，可重新选择想要阅读的书籍。
三是点击文章显示出导航栏，再点击右上角按钮可以进入换源界面，当用户对当前数据源不满意或者页面排版错乱或者页面出现乱码的的时候，可以点击换源，切换到自己想要看的网站，以实现更好的阅读效果。
三是点击文章显示出导航栏，点击底部的“皮肤”，用户可以根据自己的阅读喜好来调整当前章节内容的背景颜色（目前APP提供市面比较流行的六种背景皮肤）以及字体大小（可以任意大小，且显示当前章节字体号大小）。
四是点击文章显示出导航栏，点击底部的“章节”，用户就可以在任何时候进行章节切换，比如用户看到了一半了，不想看本章节了，又不想滑动到底部切换章节，这时候就可以点击“章节”按钮实现章节的切换，除此外，还可以显示当前章节号以及总的章节号，使用户随时明白自己的阅读进度。
五是点击当前章节内容的任意地方显示出导航栏，用户可以点击“页面”选择夜间阅读模式，这是为了方便习惯在晚上睡觉前阅读书籍的用户提供方便。
六是在显示导航栏的情况下，点击目录可以弹出目录窗口，用户可以随意选择自己想看的章节，点击对应的章节即可阅读。
七是默认记住当前阅读进度，会在本地默认保存。
八是默认记住当前的皮肤设置，即是用户在选择了对应的背景和调整了对应的字体后，做默认保存，下次进入APP的时候还会是原来的皮肤原来的味道。
九是阅读进度本地缓存，即是阅读到哪都会在本地进行缓存，方便用户再下次进行阅读的时候可以从上次阅读的地方开始。
（3）书籍换源：
本页面从用户的友好体验效果出发，简单明了，同时筛选出用户使用的最多的网站作为第一列，即是“优质书源”，用户可以直接点击实现阅读换源。
此外，换源页面还列出其他可以免费阅读该书籍的网站，每条数据源都包含了数据的网站名称、最近更新时间以及最近更新章节，用户可以通过主观判断选择适合的书源进行更加优质地阅读。
（4）书籍搜索：
用户可以在本页面搜索相关书籍。
用户只需在头部输入框输入书籍名称或者作者名称点击右侧搜索按钮或者按下键盘回车（手机电脑均可）即可实现搜索功能，即是可以在网上搜索到相应的书籍。
本搜索为模糊搜索，只要输入相关的词语就有可能能找到用户想要的结果。
不想搜索的可以点击点击左上角的返回按钮返回到首页。
点击输入框的清除按钮可以清除输入框的值。
搜索到的内容会一列表的形式展示在APP页面中，其中包括了对应的书籍封面、目前正在看此书的用户数量、收藏此书到自己书架的用户百分比以及书籍的作者。
此外本页面还有一个大的亮点在于，保存用户的搜索历史。
用户可以在下次进来的时候或者点击清除按钮后看到之前搜索过的词汇，如果用户想再次搜索，点击对应的内容块即可实现搜索，如果不想保留当前的搜索历史，点击页面的“清空搜索历史”即可清空用户之前的搜索的记录。
（5）书籍详情：
此页面为书籍详情页，包含了五大模块。
第一大模块，标题和分享，点击分享按钮可以复制当前地址与好友进行分享。
第二大模块分为书籍详情和用户操作，书籍详情主要显示当前书籍封面、书名、作者、类型、字数以及最近的更新时间，用户操作主要分为两分部分，分别是“加入书架”和“开始阅读”，在点击“加入书架”之后可以进行“移出书架”将书籍移出书架。
第三大模块是书籍的火热度，主要分为三块，分别是“正在看人数”、“读者收藏率”和“日更新字数”。
第四大块是书籍的标签，例如书籍的类型、特色、风格、适合人群等标签。
第五大部分就是书籍简介。
如图3-1所示。
图3-1移动阅读APP前端内容分析结构图
3.2原型设计
APP首页（列表模式）原型设计图如图3-2所示。
图3-2APP首页（列表模式）原型设计图
APP首页（宫格模式）原型设计图如图3-3所示。
图3-3APP首页（宫格模式）原型设计图
APP阅读页原型设计图如图3-4所示。
图3-4APP阅读页原型设计图
APP换源页原型设计图如图3-5所示。
图3-5APP换源页原型设计图
APP搜索页（搜索前）原型设计图如图3-6所示。
图3-6APP搜索页（搜索前）原型设计图
APP搜索页（搜索后）原型设计图如图3-7所示。
图3-7APP搜索页（搜索后）原型设计图
APP详情页原型设计图如图3-8所示。
图3-8APP书籍详情原型设计图
3.3视觉设计
3.3.1APP色彩
APP
升级会员 