web快速入门web阅读器开发教程

前置学习

• Vue.js的基本语法
• CSS3和scss的基本语法
• 静态资源服务器（Nginx）的搭建方法

学习建议

• 先理解原理，再着手实现
• 语法学习和实践学习相结合
• 重视产品体验，开发高质量的产品（可用+交互）

涉及知识点

image.png

电子书的工作原理

image.png

ePub和mobi

• ePub（Electronic Publication）电子出版物
• mobi是Amazon Kindle的电子书格式

开发流程

image.png

ePub 实际上是一个zip文件
mineType
comtainer.xml
content.opf

• metadata
• manifest
• spine
• guide

开发准备工作（生成字体图标）

https://icomoon.io

开发准备+搭建Vue脚手架

• 安装Node.js和Vue.js
• 通过vue init 搭建Vue脚手架
• 通过VSCode打开项目，使用npm run dev启动项目

教程环境版本：
node：8.9.0
npm：5.5.1
vue：2.9.3

offline模式：

vue init webpack --offline ebook-demo

vue init webpack --offline ebook-demo

viewport 配置

• viewport 用来设置用户在手机上的可视区域
• width=device-width:指定viewport宽度为设备宽度
  initial-scale=1.0：指定默认缩放比例为1:1
• 通过maximum-scale 和 minimum-scale 限定屏幕的缩放比例为 1:1 通过 user-scalable 限制用户对屏幕进行缩放

rem 配置

• rem 是CSS3新增的一个相对长度单位
• rem 的值相当于根元素font-size值得倍数
  1rem = 根元素font-size
  2rem = 根元素font-size * 2
• DOMContentLoaded 事件动态设置根元素 font-size
  html.style.fontSize = window.innerWidth / 10 +'px'

reset.scss 和 global.scss

• reset.scss的目的是为了消除不同浏览器默认样式的不一致性
• global.scss 规定了整个站点的公共样式、公共方法和公共参数等
• 实现px2rem方法，将px转化为rem

epubjs的核心工作原理解析

epubjs核心工作原理解析

禁用eslint规则

/* eslint-disable space-before-function-paren */

transition 动画原理

• 使用 v-show 动态显示或隐藏元素时，会触发过渡动画
• transition需要指定name，并包裹一个包含 v-show 的div
• vue 会为 transition 包裹的div 动态添加 class ，供6种
  1. v-enter (Option:0)
  2. v-enter-active
  3. v-enter-to (Option:1)
  4. v-leave (Option:1)
  5. v-leave-active
  6. v-leave-to (Optacity:0)

image.png