基于React的移动阅读APP前端的设计与实现

本科毕业论文（设计）题目基于React的移动阅读APP前端的设计与实现学生姓名我姓牙学号99999999院名信息工程学院专业年级计算机科学与技术2013级指导教师陈老师职称教授单位中国学院信息工程学院辅导教师职称单位完成日期2017年5月10日中国学院本科毕业论文（设计）目录摘要.....................................................................IAbstract..................................................................I1绪论....................................................................11.1我国移动阅读现状..................................................11.2国内外研究与应用现状..............................................21.3研究内容..........................................................32相关技术................................................................42.1HTML5简介.........................................................42.2CSS3简介..........................................................42.3JavaScript简介....................................................52.4React简介.........................................................42.5Ant简介...........................................................43APP前端总体设计........................................................73.1内容分析..........................................................63.2原型设计..........................................................93.3视觉设计.........................................................123.3.1APP色彩....................................................123.3.2APP的视觉设计..............................................143.4交互设计..........................................................174APP前端的实现.........................................................184.1首页界面的实现...................................................184.2阅读页界面的实现.................................................224.3换源页界面的实现.................................................324.4搜索页界面的实现.................................................344.5详情页界面的实现.................................................385总结..................................................................411参考文献.................................................................43致谢....................................................................44中国学院本科毕业论文（设计）诚信保证书...................................45中国学院本科毕业论文（设计）I基于React的移动阅读APP前端的设计与实现摘要近十年来，随着互联网加时代的到来和移动互联网的飞速发展，人们的阅读方式和阅读习惯也随着发生了深刻的变革。人们利用生活中的碎片时间来进行移动阅读随之成为了一种比较流行的阅读方式，看纸质书看纸质报的人越来越少，看电子书的人越来越多了，紧随着，大量的移动阅读APP也随之涌现。我们经常在各种场合看到人们拿着手机追看着自己喜欢的小说，而基于React的移动阅读APP特色在于占用内存小、绿色无广告以及支持小说本地缓存等别具一格的功能，非常适合广大人民群众使用。因此研究基于React移动阅读APP前端的设计与实现具有不错的经济效益和很强的现实意义。基于React的移动阅读APP不仅是使用目前主流的前端MVC框架React，使前后端分离，大大提高了开发效率，其UI设计也是结合了目前主流的前端UI框架Ant对APP前端的进行视觉设计和交互设计，其更是涵盖了HTML5/CSS3/JavaScript全方位的前端技术。关键词：React；HTML5；MobilereadingAPPDesignandimplementationofmobilereadingAPPfrontendbasedonReactAbstractInrecentyears,withtherapiddevelopmentofmobileInternet,people'sreadingstylehasalsoundergoneprofoundchanges,andthepopularityofmobileterminalshaschangedthewaypeopleread.Peopleusefragmentedtimeformobilereadingtobecomeapopularwaytoread,followedbyalargenumberofmobilereading,APPalsoemerge.Weoftenseepeopleholdingmobilephoneafterwatchinghislovenovelsonvariousoccasions,andReactmobile中国学院本科毕业论文（设计）IIreadingAPPfeaturesasmallmemory,greenfreeadvertisingandsupportlocalnovelshaveauniquestylebasedonthefunctionofcachingisverysuitableforthemassestouse.Therefore,itisofgreatpracticalsignificancetostudythedesignandimplementationofAPPfront-endbasedonReactmobilereading.BasedontheReactAPPmobilereadingisnotonlyusingthecurrentmainstreamMVCframeworkReact,thefrontandrearendseparation,greatlyimprovingtheefficiencyofdevelopment,theUIdesignisacombinationofthecurrentmainstreamofthefront-endUIframeworkAntAPPfront-endforvisualdesignandinteractiondesign,whichiscoveringthefullrangeofHTML5/CSS3/JavaScriptfront-endtechnology.Keywords：React;HTML5;NovelAPP中国学院本科毕业论文（设计）11绪论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手机助手、百度手机助手、腾讯应用宝，对其在移动端的下载量进行汇总，以及用户评价方面做出综合分析，列出2017年最受人们喜爱的阅读类APP排行榜[3]。虽然不同的人选择了不同的移中国学院本科毕业论文（设计）2动阅读APP，但是我们可以看出，移动阅读应用的下载量是非常庞大的,也就是说在中国在阅读数量本来就不多的人群里面，现在有很大一部分是在选择了移动阅读的方式。表1-12017年最受人们喜爱的阅读类APP排行榜序号APP名称下载量（万）1掌阅iReader54452咪咕阅读32323QQ阅读30124书旗小说26435追书神器21456宜搜小说19747塔读文学19268起点读书19189多看阅读188810熊猫看书1770伴随着国家大力发展全名阅读，越来阅读的人会加入到阅读领域中，移动阅读用户量也会随之而增加。现在人们娱乐消费也逐渐提高，居民娱乐教育用户稳步提升。人民日益增长的精神文化需求，也会随之而促进了我们移动阅读市场容量以及消费的稳步增加。在我国，