基于微信小程序的书籍阅读的设计与实现

1、内容摘要现如今，随着触屏手机的出现以及移动互联网的快速发展，大部分用户的阅读方式发生了巨大的改变，从书本上阅读到从手机中阅读。微信小程序的出现，让手机阅读更加方便，在小程序里可以简化很多阅读APP的功能。相比较于阅读APP来讲，微信阅读小程序能够大大地降低开发成本和难度；现在的APP动不动就要上百兆内存，或者几百兆甚至是上万兆内存，下载要消耗大量的流量不止，还要占手机的内存，这样手机的东西多了，就会影响手机的运行；而小程序只是微信里的一个功能，不占内存不用花费下载流量，微信的用户量大，小程序触手可及，用户更加能接受。也就是这样，我选择了用微信小程序来实现书籍的阅读。在微信小程序的开发下，采用了

2、JavaScript,HTML,CSS等编程语言实现了小说阅读。关键词：微信小程序小说阅读微信阅读阅读APPAbstractNowadays, with the emergence of touch-screen mobile phones and the rapid development of mobile Internet, the way most users read has changed greatly, from books to mobile phones. WeChat small program, let the mobile phone reading more con

3、venient, in the small program can simplify a lot of reading APP functions. Compared with reading APP, WeChat reading applet can greatly reduce the development cost and difficulty; At present, the APP needs hundreds of megabytes of memory at every turn, or hundreds of megabytes or even tens of thousa

4、nds of megabytes of memory at every turn. Downloading will consume a lot of traffic and occupy the memory of the phone. And the small program is just a function in WeChat, does not occupy the memory does not need to spend the download traffic, WeChat user number is large, the small program at your f

5、ingertips, the user is more acceptable.That is, I chose to use WeChat small program to achieve the reading of books. In the development of WeChat small program, the use of JavaScript, HTML, CSS and other programming languages to achieve the novel reading.Key words： WeChat applet ，A novel to read ，We

6、Chat reading，Read the APP 目 录1. 绪论11.1 设计背景11.2 设计意义12. 微信小程序开发相关技术介绍22.1 微信小程序22.2 微信小程序的基本功能22.3 微信小程序开发技术23. 系统分析与总体设计43.1系统需求分析43.1.1 书架功能43.1.2 书城功能43.1.3 分类功能43.1.4 搜索功能43.1.5书籍页面43.2 系统总体设计43.2.1 系统总体架构43.2.2 系统功能模块设计53.2.3 功能结构图53.2.4 系统流程53.3 系统开发环境54. 系统详细设计与实现64.1 书架模块64.1.1 书架界面设计64.1.2

7、书架逻辑实现64.2 书城模块74.2.1 书城界面设计74.2.2 书城的逻辑实现74.3 分类列表84.3.1 分类列表界面设计84.3.2 分类列表逻辑实现94.4 书籍详情94.4.1书籍详情界面设计94.4.2 书籍详情逻辑实现94.5 阅读器模块104.5.1 阅读器界面设计104.5.2阅读器逻辑实现115. 数据库分析与设计145.1 数据库需求分析145.2 数据库概念设计145.3 数据逻辑结构设计145.4 小程序系统E-R图155.5 数据表设计166. 项目测试186.1 测试目的186.2 测试方法186.3 测试用例186.3.1 功能测试用例

8、书架 书城 书籍类型列表 搜索 书籍详情206.3.2 界面测试用例21总结23参考文献24致谢251. 绪论1.1 设计背景现在啊，互联网的快速发展，移动互联网和手机使用的普及，给人们的生活带来了很多不一样的变化，其中书籍的阅读方式就受到了很大的影响。在手机还没有阅读书籍功能的时候，人们都是捧着书本在阅读，而随着手机功能越来越多，出现了手机阅读功能。各种阅读APP的出现，让人们有了选择，选择在手机上通过网络来阅读书籍。微信的出现，很快就成为了国内最大的社交平台，现在，微信已经成为了人们生活和交往的重要组成部分，基本每个人

9、手机里都会有微信。在微信正式发布了微信小程序后，小程序借助着微信的大量用户，微信小程序迅速发展，在PC端和APP端中脱颖而出。APP的流量天天增长，内存越来越大，对于一些手机用户承受不起，这时，无需下载即可使用的微信小程序就成了这些用户的首选，而且小程序使用简单，运行得也快，这使小程序成为了一个很好的阅读平台。1.2 设计意义现在，手机已经不是以前那种老人机了，现在各种触屏手机的出现，还有移动互联网的快速发展，很多手机用户已经从纸质书本阅读改为了移动阅读，也就是手机阅读。移动APP的内存增加，流量增加，在2017年微信小程序的出现，让很多人都瞄上了小程序，而阅读小程序也就如此应运而生。手机用户

10、几乎都会有微信，而且微信小程序的方便和快捷，大家也开始选择了小程序来阅读书籍。现在很多人都是上网在线看书籍，然后看完退出后记录也没有了，下次还要自己重新找，而且网站上的书籍阅读会有很多广告、错别字一些乱七八糟的问题，那么这个微信小程序的阅读呢，则可以解决这个问题，和阅读APP一样，你看了这本书，下次还想看，那你可以将其放入书架以便下次直接在书架上进入阅读，微信用户在阅读书籍的时候也可以像使用APP一样，调节字体的大小，背景颜色等等，小程序的界面也比较简单干净，让用户看着也舒服。本程序有着书架和书城两大模块，其中也有一些主要模块，这些模块互相连接和配合，为用户提供便捷和合适的阅读体验，让用户能更

11、多的简单且不付费的读到自己喜欢的书籍。本次设计的目的就是让广大书友能够有个良好的环境阅读书籍，不用东找西找的，不用为找到一本想读的书而没有地方阅读的烦恼。2. 微信小程序开发相关技术介绍2.1 微信小程序微信小程序是一个全新的一种程序方式，它连接着用户和服务。现如今微信的用户可以直接通过扫码或者进行小程序搜索获得小程序，又或者在公众号关联的小程序码进入小程序。因为小程序占用的内存不大，所以在微信用户获取小程序到进入开始使用小程序应用的过程速度很快，这个过程几乎感受不到。小程序因为使用简单以及触手可及和用完可以直接退出受到微信用户的广泛使用。2.2 微信小程序的基本功能小程序的基本功能与APP差

12、不多，不过用户可以直接通过线下扫码就可以进入小程序了。而分享小程序的时候，只要点击一下小程序的右上角的分享按钮就可以选择分享给好友或者是群聊，可以单独分享页面或者分享整个小程序。当微信用户使用过了小程序后，就算退出了，只要在微信首页下拉到小程序模块，在那里就有用户使用过的小程序历史记录，不用担心丢失需要重新找。微信小程序现在可以跟公众号合作，微信小程序可以在公众号里宣传，这样微信用户就可以在公众号里看到这个小程序，再通过介绍，用户可以在公众号里的连接进入小程序。2.3 微信小程序开发技术小程序有框架、组件、API，WXML语法、WXS语法等等。组件有视图容器、基础内容、表单组件、导航、媒体组件

13、、地图、画布、导航栏等等。API就是一些路由、界面、网络、数据缓存、接口等等。云开发有云函数、数据库、存储管理、云调用等等所需要的功能，不用再去搭建什么服务器，后端和运维也减轻了很多，这就方便了我这种后台小白来做小程序的开发门槛，仅需通过小程序云开发提供的接口，就能实现因缺乏后端知识而无法实现的需求。前端开发所需的技术：JS、HTML、CSS。JavaScript（JS）是一种页面脚本语言。可以使用它来为页面添加删除修改页面上的元素和属性，在页面中写入文本、数字、图表，响应页面中的事件，做出相应处理。HTML是一种超文本的语言，它是页面编写必须的工具，页面里面的内容都是用它来编写的，什么图片、

14、文字、连接等等。CSS是一种用来表现文件样式的语言，修饰网页，进行格式化，页面元素位置的排版，字体字号样式等等。虽然微信小程序开发和网页开发有些差别，但是并不影响这三种语言的使用。数据库方面，因为是云开发，所以呢不用搭建服务器，可以直接借助云函数来链接mysql数据，操作mysql数据库。小程序云开发的云函数呢，它是基于node.js的。那么我们可以通过使用node.js的mysql2模块来链接并操作mysql数据库。3. 系统分析与总体设计3.1系统需求分析3.1.1 书架功能书架展示用户加入书架的书籍以及记录书籍阅读的进程。用户可以看到自己已经加入书架的书籍，并且可以直接阅读；用户也可以通

15、过书架前往书城添加自己喜欢的书籍；用户也拥有把书籍移出书架的功能。3.1.2 书城功能书城总体分为三个部分，一个是小说分类模块，一个是搜索按钮，一个是热门推荐模块。第一个是分类模块，这里用户可以通过自己的喜好选择不同类型的书籍进行阅读；第二个是搜索按钮，用户可以点击这里的搜索按钮从而跳转进入到搜索页面，搜索自己想要阅读的书籍；第三个是热门推荐模块，这里直接放置了一些热门的书籍，用户可以直接进入书籍详情页面。3.1.3 分类功能分类功能就是把不同类型的书籍归纳到不同的分类中去，用户可以更方便的寻找喜欢的书籍，点击不同的类型会进入不同的分类中去。3.1.4 搜索功能用户可以通过输入书籍名称或者作者

16、名字进行查找书籍阅读。3.1.5书籍页面用户可以通过点击书籍进入书籍详情页面，这个详情页面有书籍的一些详细信息，书籍的名字，作者，类型以及字数和书籍简介。在这里，页面有两个按钮，一个加入书架按钮，一个开始阅读按钮，用户可以选择是否将该书籍加入书架，或者直接开始阅读书籍。3.2 系统总体设计3.2.1 系统总体架构本系统在总体架构上主要分为微信小程序客户端、云后台两个部分。小程序客户端也就是前端，这里使用了js、wxml、wxss进行编写框架，书架、书城、阅读器等等采用了MINA架构模式来开发前端页面布局以及功能的设计与实现。在前端，通过书架、书籍详情进入阅读器，而书城进行分类与推荐热门，可以进

17、入到分类列表和书籍详情页。云后台主要采用了云开发。这里可以利用云开发的存储、函数、数据库来实现书籍信息的存储、读写。系统采用MINA架构技术框架，这分为三个部分：逻辑层（App Service）和视图层（View），还有一个系统层。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑以及系统层的文件存储，网络请求等。3.2.2 系统功能模块设计（1）小程序书架模块：添加删除书籍、进入阅读器进行阅读书籍。（2）小程序书城模块：书籍分类、搜索按钮跳转到搜索页面、热门推荐（3

18、）小程序书籍分类列表模块：展示同一个类型的书籍（4）小程序书籍详情模块：可以看到书籍的详细信息，开始阅读书籍，添加进入书架3.2.3 功能结构图3.2.3 功能结构图3.2.4 系统流程小程序的流程是用户进入小程序，用户根据自己的需求选择分类、选择自己想看的书籍，加入书架或者直接阅读，或者也可以在热门推荐里选择想看的书籍。在书架上，用户可以直接进入阅读器开始阅读书籍，可以选择章节、字体、大小、背景，用户可以自己选择在书架上添加书籍和移除书籍。3.3 系统开发环境书籍阅读开发所在的环境以及所需的工具都有以下这些：（1） 开发使用的操作系统：Windows 10（2） 小程序开发工具：微信官方开发

19、者工具4. 系统详细设计与实现4.1 书架模块4.1.1 书架界面设计4.1.1 书架展示图用户首次使用的时候书架是空的，用户可以前往书城添加书籍。4.1.2 书架逻辑实现用户在书架上可以通过添加按钮前往书城，在书城寻找到书籍加入书架，书架就会获取该书籍的信息以及接口展示在书架上，用户就可以在书架上直接进入书籍阅读。当用户已经看完或者不想看一个书的时候，用户可以选择将它移除出书架。在书架页面判定书籍是否为空，以及如果已有书籍存在，则显示书籍的封面以及其名字，添加新书的按钮往下移。在js文件中定义方法，在云后台存入数据。当点击书籍时发生页面跳转到阅读器页面，在路径中封装请求参数，接着获取到参数进

20、行访问云后台获取数据信息并且赋值，将逻辑层数据给到视图层。当用户删除书籍将书籍移除书架时，将这条数据从数据库中删除。用户想要添加书籍，点击添加按钮将跳转到书城页面。4.2 书城模块4.2.1 书城界面设计4.2.1 书城展示图书城的界面分为了三个模块，分别为分类、搜索、热门，采用的是上下布局结构。4.2.2 书城的逻辑实现书城的主要逻辑有，点击分类进入该类型的列表页面，不同的分类有着不同的列表；点击搜索按钮可以跳转到搜索页面，在搜索页面用户可以在搜索框中输入书籍的名字或者作者的名字进行查找；在热门推荐模块中，已经有了一些书籍简介信息，用户可以根据自己的喜好是否选择查看，点击该模块的书籍时会进入

21、书籍详情页面，在那里用户可以看到更详细的书籍介绍。热门推荐图书列表的实现，在热门推荐模块获取书籍数据的方法中编写对象，然后添加方法把需要放在热门推荐的书籍数据从后台获取出来，在onload函数中通过这个对象的方法，把从后台获取到的书籍数据存储到页面data中，新建一个book组件，储存单条book数据。在书城页面中编写wxml文件，把数据利用wx:for循环，把遍历出来的每一项item赋值给book这个组件暴露给父组件接受数据的变量,再到子组件通过perties进行渲染。4.3 分类列表4.3.1 分类列表界面设计4.3.1 分类列表图该分类列表与热门模块类似，都有着书籍封面、

22、名字、作者以及简介，这里将同一个类型的书籍分类到同一个列表中。在分类列表中，与热门推荐相似，先获取书籍数据信息，然后存储在data中，再编写wxml用wx:for进行循环使用数据，进行整个列表的渲染。4.3.2 分类列表逻辑实现这里的逻辑实现和热门推荐差不多，也是点击书籍模块进入书籍详情页面。4.4 书籍详情4.4.1书籍详情界面设计4.4.1 书籍详情页面图该页面第一个模块包含了书籍的封面，书籍名字，作者笔名，书籍类型以及书籍的字数，这模块采用的是横向布局加纵向布局；第二个模块是两个按钮，“加入书架”按钮和“开始阅读”按钮，两个按钮是纵向布局；接着最后一个模块就是书籍的简介，内容是简单地介绍

23、了一下该书籍要讲的是什么。4.4.2 书籍详情逻辑实现通过热门推荐、搜索或者是分类列表进入书籍详情页面，该页面的逻辑有加入书架和开始阅读两个。点击“加入书架”按钮，该书籍的数据信息将添加到书架上去，而这时“加入书架”按钮则改变状态为“已加入书架”按钮。如果再点击“已加入书架”按钮，该书籍就将会被移出书架，按钮也会变回“加入书架”按钮。当用户点击“开始阅读”按钮时，用户将会进入该书籍的阅读页面进行阅读。在每个book组件js文件中增加一个点击的方法，用来获取到书籍的id作为参数，接着把书籍详情页面所需要的数据将获取数据的方法封装到自己的模块中。在“加入书架”按钮中写一个判定，当用户点击了之后，将

24、会把页面获取到的书籍信息传送到书架，从而在书架上添加该书籍，而这时按钮则切换为将书籍从书架上删除的方法。当点击了“开始阅读”按钮后，页面将获取的书籍信息打包跳转到阅读器页面。4.5 阅读器模块4.5.1 阅读器界面设计 阅读器页面 底部工具栏4.5.2阅读器逻辑实现当用户在书籍详情页面或者在书架点击书籍进入阅读器时，前端会通过接口连接云数据库获取书籍的信息，内容章节等。这里分了三个部分，顶部的自定义导航栏，中间的书籍内容，点击后显示的底部工具，还有点击底部按钮时显示的字体背景等调节工具。页面内容：底部工具：点击底部工具后的工具栏：在js文件中进行页面渲染以及事件监听

25、，在wxss文件中进行布局的样式调整。5. 数据库分析与设计5.1 数据库需求分析需求就是用户在要求数据库应用系统需要完成满足的所有功能和限制，它包括了功能需求、性能需求、可靠性需求、安全性和完整性需求和开发费用、开发周期等等限制。需求分析呢，其实就是通过去跟用户沟通和交流，然后获取用户的需求，并且对需求进行分析和整理。首先，进行调查，去收集用户的需求，这包括了信息要求，处理要求，安全性和完整性的要求。然后就是去确定一下，都有哪些功能模块，接着就量根据这些功能模块去完成规划数据。规划如何完成数据建表，建完表后就要规划表与表之间的关联关系了，有没有符合数据库的三大范式。最后就是要考虑以后还要不要

26、添加功能模块，数据库那里还能不能进行更改。数据库是云开发后台中最常用的功能之一，在云后台里面，可以快速搭建数据集合，就是平时学习的数据库建表。可在云后台中建立新的集合，添加记录有三种方式：控制台手动添加、文件导入以及调用api。调用api会在每条记录中自动插入用户_openid。5.2 数据库概念设计数据库设计是指在对于一个给定的应用环境，然后构建优化的数据模型，并且在这个基础上，根据数据模型建立数据库和其小程序系统，让它可以有效地存储和管理数据，满足各种用户的应用需求。这阶段可用的工具很多。用的最多的是E-R图。概念结构设计是根据需求分析的基础上，设计出小程序系统的概念模型，而这个概念模型一

27、般都是用E-R图模型来表示的，所以啊，概念结构设计也就是在设计E-R模型。设计E-R模型的时候，通常用到的办法是自低向上的方法，其中，具体的步骤是先设计各个局部应用的E-R模型，然后就是将这些局部的E-R模型集合成为全局E-R模型，最后再去对全局E-R模型进行优化。5.3 数据逻辑结构设计数据逻辑结构设计， 它要做的是将上面概念结构设计那里获得的概念模型转换成具体DBMS所能够支持的数据模型，还要优化它。E-R图的转化，要把E-R图转化成关系模式，数据库的逻辑设计其主要就是把概念模型转换成一般的关系模式，就是把E-R图里面的三大元素轮换为关系模式，这三大元素就是实体，实体的属性，实体之间的联系

28、。这个概念模型转化完后就是数据模型了，这个数据模型是需要优化的，所以要修改数据模型的结构，提高性能。5.4 小程序系统E-R图本小程序一共设计出了2个表，分别是书籍基本信息表、章节信息表。书籍基本信息表包含了书籍的基本信息，其中就有书籍ID、书籍名字、书籍简介、书籍封面图片地址、书籍字数、书籍章节数组、书籍类型。章节信息表是书籍基本信息表的子表，它的ID被包含在基本信息表中的章节数组里。其中包含了章节ID、章节数（第几章）、章节标题、章节内容。下面是这些表的ER图：5.2 E-R图5.5 数据表设计书籍基本信息表：字段名数据类型描述book_idObjectId书籍idbookNameStri

29、ng书籍名字desString书籍简介headerImageString书籍封面图片地址authorString书籍作者sectionArrayArra章节id数组bookTypeString书籍类型wordNumInt书籍字数章节信息表：字段名数据类型描述chapter_idObjectId章节idchapterNumInt章节数chapter_titleString章节标题chapterConString章节内容6. 项目测试6.1 测试目的测试的目的呢，是要在真实的系统工作运行的环境里通过与系统的需求定义作一下比较，要检查一下完成的软件配置功能是不是可以和系统正常连接，发现软件和系统设计

30、文档有没有什么不同的地方，或者是有矛盾的地方。小程序测试就是要通过测试系统，与手机、模拟器、数据和用户等系统元素结合起来，在真实的运行环境里，对小程序进行一系列的测试。为了发现系统存在的BUG或者缺陷，按照系统的功能和性能需求来进行测试。6.2 测试方法在编写功能测试用例时用到的测试方法有：场景分析法、等价类划分法、边界值分析法在编写用户界面测试用例时用到的测试方法有：界面测试6.3 测试用例6.3.1 功能测试用例 书架用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.0

31、4.21用例描述测试小程序的书架页面能否正常使用编号测试项操作步骤预期结果数据实际结果结果比较1阅读器1、点击书架的书籍能正常进入相应的书籍内容能正常进入相应的书籍内容正常2阅读器的底部工具1、点击书籍进入阅读器；2、点击页面阅读器底部显示工具栏阅读器底部显示工具栏正常3底部工具栏1、点击底部工具栏的工具；2、选择调节工具进行调节阅读器能做出相应的调节阅读器做出了相应的调节正常 书城用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.04.21用例描述测试小程序的书城页面能否

32、正常使用编号测试项操作步骤预期结果数据实际结果结果比较1分类1、点击分类中的类型能正确进入相应的分类列表能正常进入相应的分类列表正常2搜索按钮1、点击搜索按钮跳转到搜索页面跳转到搜索页面正常3热门推荐的书籍列表1、点击其中的一个书籍块 能够进入相应的书籍详情页面进入相应的书籍详情页面正常 书籍类型列表用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.04.21用例描述测试小程序的书籍类型列表页面能否正常使用编号测试项操作步骤预期结果数据实际结果结果比较1从书籍列表进入书籍详

33、情页面1、点击分类中的类型2、点击书籍跳转到书籍详情页面能正常进入书籍页面正常 搜索用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.04.21用例描述测试搜索页面的搜索按钮能否正常使用编号测试项操作步骤预期结果数据实际结果结果比较1搜索书籍正确输入1、点击书城中的搜索按钮2、点击搜索页面的搜索框3、输入正确的书名4、点击搜索按钮能够搜索出书籍百炼成神搜索页面显示出百炼成神的书籍正常2搜索书籍错误输入1、点击书城中的搜索按钮2、点击搜索页面的搜索框3、输入错误的书名4、点击

34、搜索按钮提示没有该书籍王王王王弹出提示没有该书籍正常 书籍详情用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.04.21用例描述测试书籍详情页面的开始阅读和加入书架按钮能否正常使用编号测试项操作步骤预期结果数据实际结果结果比较1“开始阅读”按钮1、点击“开始阅读”按钮1、能够进入阅读器开始阅读书籍进入阅读器正常2“加入书架”按钮1、点击“加入书架”按钮1、“加入书架”按钮改变状态2、书架上添加书籍1、“加入书架”按钮改变状态2、书架上添加了书籍正常6.3.2 界面测试用例用例标识WDXCX001项目名称微读小程序开发人员蒙标版本号1.0设计日期2020.04.20测试方法模拟器测试测试类型手工测试测试人员蒙标测试日期2020.04.21用例描述界面是否正常显示编号测试项操作步骤预期结果数据实际结果结果比较1书架正常显示书籍封面以及添加按钮一切显示正常正常2书城小说分类正常显示，搜索按钮正常显示，热门推荐模块正常显示一切显示正常正常3阅读器阅读器能够显示出书籍内容一切显示正常正常4分类列表书籍类型列表能够显示出图片以及一些信息一切显示