# Web读书商城

**Repository Path**: SacredWood/web_read

## Basic Information

- **Project Name**: Web读书商城
- **Description**: 采用vuejs开发的读书Web 项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-09-29
- **Last Updated**: 2021-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 读书项目：epubjs阅读器引擎介绍

### 概念

- 基于js的开源阅读器引擎
- 文档：<https://github.com/futurepress/epub.js/>
- 解决了ePub电子书的解析、渲染、定位等技术难题
- 提供了媲美原生app的阅读体验



### epub.js核心类介绍

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







## 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">
```









# epub.js开源中间件epub.js的使用及其中文api

epub是最流行的电子书规范之一，网络上对于Java Web有不少合适的方法来解析和呈现，但是关于epub.js的介绍比较少（尽管github上已经2K星了），更多的是概念性的内容，如：

```
epub.js是支持跨多个设备的，在浏览器端渲染EPUB文件的JavaScript库，提供通用的电子书功能界面（如渲染、持久和分页）不需要开发专用的应用程序或插件。
```

具体用法因人而异，在此我介绍结合React使用的案例：

epub.js中间件封装了解析epub文件的过程，ePubReader以控制器方式封装了页面动作响应。

以下是epub.js的官方文档：

https://github.com/futurepress/epub.js/blob/master/documentation/README.md

2017.11.22更新：

**如果使用ePubReader解析图书，还想应用epub.js的API，需要以这种形式：**

var reader = ePubReader("./book/"+newsid);//获得解析图书的实例

reader.book.on("book:ready",function(){alert('1')});//拿到book变量，然后就能使用epub.js的API了

原因是在ePubReader的源码中：



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



ePubReader解析并没有像epub.js一样返回一个book对象，而是返回了reader对象，这个reader对象在上图蓝色标记处创建了自己的book对象，这个book对象又来自epub.js的Book对象，所以reader.book就是epub.js中的book了，拿到book以后其他用法和epub.js都一样了。

------

 

## 方法：

#### ePub(bookPath, options) 

创建EPUB图书实例：

bookPath可选参数，指定epub文件路径，可以是网络资源，也可以是本地资源。

```javascript
var Book = ePub("url/to/book/"); // With default options
var Book = ePub({ restore: true }); 
Book.open("url/to/book/"); // Books can be opened later 
```

Options可选参数，配置解析参数

```javascript
{
  bookPath : null,
  version: 1, // Changing will cause stored Book information to be reloaded
  restore: false, // Skips parsing epub contents, loading from localstorage instead
  storage: false, // true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
  spreads: true, // Displays two columns
  fixedLayout : false, //-- Will turn off pagination
  styles : {}, // Styles to be applied to epub
  width : false, //width和height可以设置图书内容的宽和高，默认值是不设置，此时会填满父窗口。
  height: false, 
}
```

解析图书的更多方法：

#### Book.open(bookPath) 打开指定路径的图书，和构造函数的作用类似，只是将配置和解析的过程分开

```javascript
var Book = ePub({ restore: true }); 
Book.open("url/to/book/"); // Books can be opened later 
```

也可以带扩展名：

```javascript
Book.open("url/to/book.epub");
```

#### Book.renderTo(element) 将解析好的图书追加到某个HTML结点并渲染，此时epub图书内容在HTML中呈现。（使用的是iframe标签）

```javascript
var Book = ePub("url/to/book/", { restore: true });

var $el = document.getElementById("div-id");
Book.renderTo($el);
```

参数也可以是字符串表示：

```javascript
var Book = ePub("url/to/book/");
Book.renderTo("div-id");
```

#### Book.nextPage()

#### Book.prevPage()

在阅读页面中的翻页控制函数，添加到按钮事件函数：

```html
<div onclick="Book.prevPage();">‹</div>
<div onclick="Book.nextPage();">›</div>
```

必须在渲染之后，才会响应翻页。

#### Book.displayChapter(chap, end)   显示指定章节：

加载指定的章节到页面上，加载的是这一章的第一页：

```javascript
Book.displayChapter('/6/4[chap01ref]!/4[body01]/10');
```

第二个参数设置为true，将加载这一章的最后一页：

```javascript
`Book.displayChapter(3, ``true``);`
```

#### Book.goto(url)跳转到指定章节：

加载指定的章节（需要有pageMap）

```javascript
var skip = Book.goto("chapter_001.xhtml");
skip.then(function(){
    console.log("On Chapter 1");
})
```

通常用来显示一些带有指定章节链接的表格

#### Book.setStyle(style, val, prefixed)设置图书内容的样式：

```javascript
Book.setStyle("font-size", "1.2em");
```

#### Book.removeStyle(style)移除设置的样式。

#### Book.destroy()删除iframe和事件函数。

### Promises

#### Book.getMetadata()在回调函数中获取meta数据：

```javascript
Book.getMetadata().then(function(meta){
    document.title = meta.bookTitle+" – "+meta.creator;
});
```

返回一个对象：

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

```javascript
{
  "bookTitle": "The title of the book",
  "creator": "Book Author",
  "description": "The description/synopsis of the book",
  "pubdate": "",
  "publisher": "The Publisher",
  "identifier": "The ISBN",
  "language": "en-US",
  "rights": "Copyright text",
  "modified_date": "",
  "layout": "",
  "orientation": "",
  "spread": "",
  "direction": null
}
```

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

#### Book.getToc()在回调函数中获取toc，是一个包含目录结构的数组对象。

```javascript
Book.getToc().then(function(toc){
    console.log(toc);
});
```

#### Book.generatePagination()进行分页，可选参数为页面大小：

```javascript
book.generatePagination().then(function(toc){
    console.log("Pagination generated");
});
book.generatePagination(pageWidth, pageHeight).then(function(toc){
    console.log("Pagination generated");
});
```

## 响应的事件：

book:ready 

book:stored

book:online

book:offline

book:linkClicked

```javascript
book.on('book:linkClicked', function(href) {
    console.log(href);
});

```

book:pageChanged

```javascript
{
  anchorPage: 2
  percentage: 0.5
  pageRange: [1, 2, 3]
}
book.on('book:pageChanged', function(location){
    console.log(location.anchorPage, location.pageRange)
});

```

renderer:resized

renderer:chapterDisplayed

renderer:chapterUnloaded

renderer:locationChanged

```javascript
book.on('renderer:locationChanged', function(locationCfi){
    console.log(locationCfi)
});

```

renderer:visibleRangeChanged











# ebook

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run dev
```

### Compiles and minifies for production

```
npm run build
```

### Run your tests

```
npm run test
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).