# Web阅读器

**Repository Path**: mingyunyuziyou/reading_web

## Basic Information

- **Project Name**: Web阅读器
- **Description**: vue开发的读书Web项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-08-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## viewport 配置

1.viewport 用来设置用户在手机上的可视区域

2.width= device- width：指定ⅵewport 宽度为设备宽度,initial-scale=1.0: 指定默认缩放比例为 1:1

3.通过 maximum-scale 和 minimum-scale 限定屏幕缩放比例为 1:1,通过 user-scalable 限制用户对屏幕进行缩放

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





## rem 配置

1.rem 是 css3 新增的一个相对长度单位 

2.rem 的值相当于根元素 font-size 值的倍数

   1rem=根元素 font-size 

   2rem=根元素 font-size*2

3.DOMContentLoaded 事件动态设置根元素 font-size

   html.style.fontSize=window.innerWidth/10+'px'





## reset.scee和global.scss

1.reset.scss 的目的是为了消除不同浏览器默认样式的不一致性

2.global.scss 规定了整个站点的公共样式、公共方法和公共参数等

3.实现 px2rem方法，将 px 转化为 rem



## epubjs工作原理

通过epubjs解析epub，创建Book对象

调用renderTo方法生成Rendition对象（负责电子书的渲染），通过Rendition，得到Theme对象（负责电子书的样式和主题）比如 切换字体大小，样式，更改主题颜色等。

Location：负责电子书的定位，拖动进度条的定位功能，由Book对象生成

Navigation：由Book对象生成，用来展示电子书目录，并提供目录所在的路径

![<https://img4.mukewang.com/5d2147e60001126e16000900.jpg>](https://img4.mukewang.com/5d2147e60001126e16000900.jpg)

## Transition 动画原理

1.使用 v-show 动态显示或隐藏元素时，会触发过渡动画

2.transition 需要指定 name，并包裏一个包含 v-show 的 div

3.vue 会为 transition 包裏的 div 动态添加 class，共 6 种



![https://tva1.sinaimg.cn/large/006Xmmmgly1g5r1wqqbakj318g0p0753.jpg](https://tva1.sinaimg.cn/large/006Xmmmgly1g5r1wqqbakj318g0p0753.jpg)





# 快速入门Web阅读器开发

> 作者：sam

## 课程地址

本课程为[慕课网](https://www.imooc.com)的免费课，可以点击[这里](https://www.imooc.com/learn/1038)进行学习

## 课程介绍

通过本课程，大家可以了解电子书阅读器的基本工作原理及ePub格式电子书的解析原理，我会手把手带大家用Vue.js来实现一个手机阅读器，实现电子书的阅读功能，以及一些辅助功能，如翻页、字号设置、主题设置、阅读进度调整和电子书目录。本课程浅显易懂，配合实际应用案例，适合初学者和有一定前端知识的同学进行学习。

## 课程主要知识点

- ePub电子书解析和渲染

```javascript
// 生成Book对象
this.book = new Epub(DOWNLOAD_URL)
// 通过Book.renderTo生成Rendition对象
this.rendition = this.book.renderTo('read', {
  width: window.innerWidth,
  height: window.innerHeight,
  method: 'default'
})
// 通过Rendtion.display渲染电子书
this.rendition.display()
```

- ePub电子书翻页

```javascript
// 上一页
function prevPage() {
  if (this.rendition) {
    this.rendition.prev()
  }
}
// 下一页
function nextPage() {
  if (this.rendition) {
    this.rendition.next()
  }
}
```

- ePub电子书的字号设置和场景切换

```javascript
// 设置主题
function setTheme(index) {
  this.themes.select(this.themeList[index].name)
  this.defaultTheme = index
}
// 注册主题
function registerTheme() {
  this.themeList.forEach(theme => {
    this.themes.register(theme.name, theme.style)
  })
}
// 设置字号大小
function setFontSize(fontSize) {
  this.defaultFontSize = fontSize
  if (this.themes) {
    this.themes.fontSize(fontSize + 'px')
  }
}
```

- ePub电子书生成目录和定位信息

```javascript
// Book对象的钩子函数ready
this.book.ready.then(() => {
  // 生成目录
  this.navigation = this.book.navigation
  // 生成Locations对象
  return this.book.locations.generate()
}).then(result => {
  // 保存locations对象
  this.locations = this.book.locations
  // 标记电子书为解析完毕状态
  this.bookAvailable = true
})
```

- ePub电子书通过百分比进行定位

```javascript
function onProgressChange(progress) {
  const percentage = progress / 100
  const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
  this.rendition.display(location)
}
```

- HTML5 range控件

```html
<input class="progress" 
       type="range"
       max="100"
       min="0"
       step="1"
       @change="onProgressChange($event.target.value)" 
       @input="onProgressInput($event.target.value)"
       :value="progress"
       :disabled="!bookAvailable"
       ref="progress">
```