微信读书项目记录

一、项目需求及阅读器引擎介绍

1.1epubjs阅读器引擎介绍，常用的类

Book，完成阅读器解析
Rendition，完成阅读器定位
Navigation，存储目录信息
View Manager，阅读器渲染视图管理
EpubCFI，利用CFI标准进行文字级别的定位
Theme，负责管理场景的切换
Spine，指定阅读顺序和管理Section
Section，指向一个章节，全文检索和章节切换依赖它
Contents，管理一个章节中的全部资源内容
Hook，定义了钩子函数，用来管理生命周期
Annotations，管理文字标签，如文字高亮显示

1.2vue-cli3.0脚手架创建项目

vue-cli3.0安装

本项目用vue-cli3.0搭建，在安装vue-cli3.0之前应把老版本卸载，
卸载命令：npm uninstall vue-cli -g
安装命令：cnpm -g @vue/cli
原型开发：npm install -g @vue/cli-service-global

脚手架创建项目

安装好vue-cli后，我们来用脚手架搭建一个项目，在D盘中
=> vue creat vue-book 创建一个叫vue-book的项目，并选择手动配置
=> 选中Router和Vuex回车（空格选中）
=> 路由router选择历史模式还是哈希模式，选择no哈希模式
=> ESLint+Standard config
=> 样式检查，默认Lint on save
=> 配置文件选默认 In dedicated config files
=>是否保存此设置在以后的项目，选No
这时，vue会帮我们创建一个空项目
=> cd vue-book/
=> npm run serve 启动项目

要想使用npm run dev运行项目，在package.json文件中修改：

"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
},

vue 3.0打包

在WebStorm中打开vue-book文件夹，在终端中运行：cnpm run build
但这时打开dist文件夹中的index.html文件会报错，这时需要创建配置文件

=>>在根目录下创建vue.config.js(这个名字为官方规定)

写入如下代码：

module.exports = {publicPath: process.env.NODE_ENV === 'production'? './': '/'
}

vue-cli3.5之前的版本：

baseUrl: process.env.NODE_ENV === 'production'

保存，重新打包，即可正常加载页面

安装epubjs

=> cnpm i --save epubjs

在Home.vue中引入

<script>import Epub from 'epubjs'global.ePub = Epubexport default {}
</script>

1.3项目技术难点

阅读器开发：分页算法，全文搜索算法，引入web字体，主题设计
离线存储机制设计：LocalStorage+IndexedDB（缓存）
实现各种复杂手势+交互动画：如何兼容手势+鼠标操作
利用vuex+mixin实现组件解耦+复用，大大精简代码量
利用ES6优雅的实现数据结构变化
科大讯飞web在线语音合成API开发

二、项目准备

2.1 字体图标准备

在https://icomoon.io/app/#/select中导入本地准备好的svg图标

全选下载到本地icomoon.zip并解压，将文件夹中的fonts+icon.css(原为style.css)拷贝到项目目录----src/assets/styles。

要想使用字体图标，还需要在main.js入口函数中引入

import './assets/styles/icon.css'

这是每个字体图标都可以当成一个类使用

<!--home.vue-->
<template><div class="home"><span class="icon-bookmark"></span><span class="icon-cart"></span></div>
</template><script>import Epub from 'epubjs'global.ePub = Epubexport default {}
</script>
<style scoped>.icon-bookmark {font-size: 20px;color: lightseagreen;}
</style>

2.2项目依赖包下载

一部分依赖包已下载完毕，还有一部分在项目完成的过程中下载，现在我们需要安装node-sass sass-loader即可，在终端中运行：

cnpm i --save-dev node-sass sass-loader

2.3准备web字体

CSS3中用户可以规定自己的字体，详情CSS3@font-face
两种使用方式：

方式1：

将准备好的web字体拷贝到/public/fonts中，在使用字体之前需在index.html中引入：

<link rel="stylesheet" href="<%= BASE_URL %>fonts/daysOne.css">

这时我们就可以使用字体样式：Days One，这时因为在字体文件中规定了font-family。

@font-face {font-family: 'Days One';font-style: normal;font-weight: 400;src: url('daysOne.woff2') format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

方式2：

将fonts文件夹复制到assets文件夹中，并在main.js中导入字体的css文件

import './assets/fonts/daysOne.css'

2.4 viewport配置

在index.html中增加viewport的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0,user-scalable=no">

maximum-scale=1.0------最大可缩放比例为1
minimum-scale=1.0-------最小可缩放比例为1
user-scalable=no----------用户不可缩放

2.5 rem设置，自适应布局

rem(Font size of the root element)指相对根元素的字体的大小单位。
在本项目中设置如下：

在App.vue中

<script>export default {}document.addEventListener('DOMContentLoaded', () => {// document.addEventListener---DOM操作，为元素添加事件const html = document.querySelector('html')let fontSize = window.innerWidth / 10// 设置字体上限fontSize = fontSize > 50 ? 50 : fontSizehtml.style.fontSize = fontSize + 'px'})
</script>

补充：JS中定义变量的三种方式：const、let、var

const定义的变量不可以修改，而且必须初始化

let是块作用域，函数内部使用let定义后，对函数外部无影响

var定义的变量可修改，不初始化则为undefined，不会报错

document.querySelector('html')
返回文档中与指定选择器或选择器组匹配的第一个html（这里的html不是括号里的选择器）元素，若匹配不到，则返回null。

如果需要返回指定选择器的所有元素列表，应使用document.querySelectorAll()