epubjs 阅读器

需求分析

项目难点

阅读器开发

分页算法，全文搜索算法，引入Web字体，主题设计。

离线存储机制设计

LocalStorage + IndexedDB

交互操作

实现各种复杂手势 + 交互动画
兼容手势操作和鼠标操作

解耦

利用vuex + mixin实现组件的解耦 + 复用，大大精简代码量。
使用 ES6 实现数据结构变化，如 array--->Object 等等

科大讯飞web在线语音合成API开发

笔记部分

如何引入web字体 (vue-cli4)

字体网址 googleFonts
下载字体文件
引入css 使用 @font-face , 并且在 main.js 中引入
将font-family:设置为 font-face的值

配置meta标签

viewport配置，添加 maximum-scale=1.0,minimum=1.0,user-scalable=no
分别表示 : 最大放大比例和最小缩小比例都是1.0，同时禁止用户缩放。

REM适配！

document.addEventListener('DOMContentLoaded',()=>{
  // 获取到html元素
  const html = document.querySelector('html')
  // 当前屏幕总宽度 / 10 = 1rem
  let fontSize = window.innerWidth / 10
  // 如果fontSize 大于 50 , 则限制上限为 50
  fontSize = fontSize>50?50:fontSzie
  // 动态设置html字体大小
  html.style.fontSize = fontSize + 'px'
})

定义函数动态转换rem

$ratio:375 / 10
@function px2rem($px){
  @return $px / $ratio + rem;
}

使用该函数

.text{
    font-family:'Piedra';
    font-size:px2rem(50);
    color:red;
  }

VUEX

state 中定义数据
mutations : 修改state中数据
actions：提交mutation ，对state进行修改
getters 相当于组件中的 computed计算属性，相比计算属性，getters不会缓存数据
modules ：分模块管理 VUEX

访问VUEX

this.$store.state.xxx 访问vuex
this.$store.commit(' ') 调用mutations中的方法
this.$store.dispatch(' ') 调用actions中方法
getters使用方法如下

// 定义
1. 新建getters.js , 定义一个对象并且暴露
export default const book = {
  test : state=> state.book.test   //获取到state中的test 并且return 回去
}
2. 在store/index.js中引入 , 并且配置到getters 属性

// 访问：
1. 引入 mapGetters  import {mapGetters} from 'vuex'
2. computed:{
  ...mapGetters(['test'])
}
3. this.test 即可 访问

配置一个简单的nginx静态文件托管

在nginx的配置文件 nginx.conf中，配置以下代码（在第一个server之后）
参考： https://juejin.im/post/5eb7e6fa5188256b246a1350

server {
  listen 8081;  //监听8081端口 
  server_name myresource; // 服务的名称
  root C:\Users\longer\Desktop\myresource;  // 静态文件资源存储的路径，访问时会自动定位到该路径,记住有个坑，任何资源路径中不要带有`resource`，否则会解析错误，导致服务500，所以这里是`myresource`代替
  autoindex on;
  locations / {
      // 配置允许跨域，即使端口不同也可以请求资源文件
      add_header Access-Control-Allow-Origin *;
  }
  add_header Cache-Control "no-cache,must-revalidate";  //不缓存资源，每次访问都要验证其有效性
}