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

本 科 毕 业 论 文 （ 设 计 ）题 目 基于 React 的移动阅读 APP 前端的设计与实现学生姓名 我姓牙 学 号 99999999院 名 信息工程学院专业年级 计算机科学与技术 2013 级指导教师 陈老师 职 称 教授单 位 中国学院信息工程学院辅导教师 职 称单 位中国学院本科毕业论文（设计）完成日期 2017 年 5 月 10 日中国学院本科毕业论文（设计）目 录摘 要 .IAbstract .I1 绪论 .11.1 我国移动阅读现状 .11.2 国内外研究与应用现状 .21.3 研究内容 .32 相关技术 .42.1 HTML5 简介 .42.2 CSS3 简介 .52.3 JavaScript 简介 .52.4 React 简介 .62.5 Ant 简介 .63 APP 前端总体设计 .73.1 内容分析 .63.2 原型设计 .93.3 视觉设计 .123.3.1 APP 色彩 .123.3.2 APP 的视觉设计 .143.4 交互设计 .174 APP 前端的实现 .184.1 首页界面的实现 .18中国学院本科毕业论文（设计）4.2 阅读页界面的实现 .224.3 换源页界面的实现 .324.4 搜索页界面的实现 .344.5 详情页界面的实现 .385 总结 .41参考文献 .43致 谢 .44中国学院本科毕业论文（设计）诚信保证书 .45中国学院本科毕业论文（设计）I基于 React 的移动阅读 APP 前端的设计与实现摘 要近十年来，随着互联网加时代的到来和移动互联网的飞速发展，人们的阅读方式和阅读习惯也随着发生了深刻的变革。人们利用生活中的碎片时间来进行移动阅读随之成为了一种比较流行的阅读方式，看纸质书看纸质报的人越来越少，看电子书的人越来越多了，紧随着，大量的移动阅读 APP 也随之涌现。我们经常在各种场合看到人们拿着手机追看着自己喜欢的小说，而基于 React 的移动阅读 APP 特色在于占用内存小、绿色无广告以及支持小说本地缓存等别具一格的功能，非常适合广大人民群众使用。因此研究基于 React 移动阅读 APP 前端的设计与实现 具有不错的经济效益和很强的现实意义。基于 React 的移动阅读 APP 不仅是使用目前主流的前端 MVC 框架React，使前后端分离，大大提高了开发效率，其 UI 设计也是结合了目前主流的前端UI 框架 Ant 对 APP 前端的进行视觉设计和交互设计，其更是涵盖了HTML5/CSS3/JavaScript 全方位的前端技术。关键词： React； HTML5；Mobile reading APPDesign and implementation of mobile reading APP front end based on ReactAbstractIn recent years, with the rapid development of mobile Internet, peoples reading style has also undergone profound changes, and the popularity of mobile terminals has changed the 中国学院本科毕业论文（设计）IIway people read. People use fragmented time for mobile reading to become a popular way to read, followed by a large number of mobile reading, APP also emerge.We often see people holding mobile phone after watching his love novels on various occasions, and React mobile reading APP features a small memory, green free advertising and support local novels have a unique style based on the function of caching is very suitable for the masses to use. Therefore, it is of great practical significance to study the design and implementation of APP front-end based on React mobile reading. Based on the React APP mobile reading is not only using the current mainstream MVC framework React, the front and rear end separation, greatly improving the efficiency of development, the UI design is a combination of the current mainstream of the front-end UI framework Ant APP front-end for visual design and interaction design, which is covering the full range of HTML5/CSS3/JavaScript front-end technology.Key words： React; HTML5; Novel APP 中国学院本科毕业论文（设计）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 手机助手、百中国学院本科毕业论文（设计）2度手机助手、腾讯应用宝，对其在移动端的下载量进行汇总，以及用户评价方面做出综合分析，列出 2017 年最受人们喜爱的阅读类 APP 排行榜 3。虽然不同的人选择了不同的移动阅读 APP，但是我们可以看出，移动阅读应用的下载量是非常庞大的,也就是说在中国在阅读数量本来就不多的人群里面，现在有很大一部分是在选择了移动阅读的方式。表 1-1 2017 年最受人们喜爱的阅读类 APP 排行榜序号 APP 名称 下载量（万）1 掌阅 iReader 54452 咪咕阅读 32323 QQ 阅读 30124 书旗小说 26435 追书神器 21456 宜搜小说 19747 塔读文学 19268 起点读书 19189 多看阅读 188810 熊猫看书 1770伴随着国家大力发展全名阅读，越来阅读的人会加入到阅读领域中，移动阅读用户量也会随之而增加。现在人们娱乐消费也逐渐提高，居民娱乐教育用户稳步提升。人民日益增长的精神文化需求，也会随之而促进了我们移动阅读市场容量以及消费的稳步增加。在我国，随着智能终端（平板、手机、可穿戴设备等）的普及，移动阅读市场的前景显得极为广阔。现状，自主一款适合大众化的移动阅读 APP 显得十分重要。中国学院本科毕业论文（设计）31.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 也会用到这个框架。中国学院本科毕业论文（设计）4如今的智能手机和移动设备更新和发展迅速，人们的阅读方式已然发生了变化。在国内比较著名的移动阅读 APP 有掌阅 iReader、 QQ 阅读、追书神器等，在他们的平台上都有些不尽人意的地方，或是找不到相适应的书籍，或是因为占用内存过大，或是广告过多。目前在国内也是比较流行的开发模式是前后端分离，而 React 框架更是前后端分离 MVC 开发框架的首选项，它占内存小，功能强大，逻辑简单，便于维护。由此可见，基于 React 这个 MVC 框架开发出适合广大人民群众的一款移动阅读 APP，将会是一次历史性的跨越。1.3 研究内容（1）探索移动阅读行业现状、移动阅读 APP 的发展现状及未来前端网站开发技术的发展趋势。（2）采用 PS（Photoshop）和 AI（Adobe Illustrator）技术完成移动阅读 APP 前端的设计与建模。（3）采用 HTML5/CSS3/JavaScript+React/Ant 技术实现家居移动阅读 APP 前端。（5）调用网站提供的免费 API 接口，实现对移动阅读 APP 的数据渲染。（6）使用目前市场上主流浏览器 Chrome（谷歌）浏览器、Firefox（火狐）浏览器、QQ 浏览器上对 APP 的兼容性进行测试，