需求分析
项目难点
阅读器开发
- 分页算法，全文搜索算法，引入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"; //不缓存资源，每次访问都要验证其有效性
}
