需求分析

項目難點

閱讀器開發(fā)

• 分頁算法，全文搜索算法，引入Web字體，主題設(shè)計。

離線存儲機制設(shè)計

• LocalStorage + IndexedDB

交互操作

• 實現(xiàn)各種復雜手勢 + 交互動畫
• 兼容手勢操作 和 鼠標操作

解耦

• 利用vuex + mixin實現(xiàn)組件的解耦 + 復用，大大精簡代碼量。
• 使用 ES6 實現(xiàn)數(shù)據(jù)結(jié)構(gòu)變化，如 array--->Object 等等

科大訊飛web在線語音合成API開發(fā)

筆記部分

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

1. 字體網(wǎng)址 googleFonts
2. 下載字體文件
3. 引入css 使用 @font-face , 并且在 main.js 中引入
4. 將font-family:設(shè)置為 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
  // 動態(tài)設(shè)置html字體大小
  html.style.fontSize = fontSize + 'px'
})

• 定義函數(shù) 動態(tài)轉(zhuǎn)換rem

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

• 使用該函數(shù)

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

VUEX

• state 中定義數(shù)據(jù)
• mutations : 修改state中數(shù)據(jù)
• actions：提交mutation ，對state進行修改
• getters 相當于組件中的 computed計算屬性，相比計算屬性，getters不會緩存數(shù)據(jù)
• modules ：分模塊管理 VUEX

訪問VUEX

• this.$store.state.xxx 訪問vuex
• this.$store.commit(' ') 調(diào)用mutations中的方法
• this.$store.dispatch(' ') 調(diào)用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靜態(tài)文件托管

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

server {
  listen 8081;  //監(jiān)聽8081端口 
  server_name myresource; // 服務的名稱
  root C:\Users\longer\Desktop\myresource;  // 靜態(tài)文件資源存儲的路徑，訪問時會自動定位到該路徑,記住有個坑，任何資源路徑中不要帶有`resource`，否則會解析錯誤，導致服務500，所以這里是`myresource`代替
  autoindex on;
  locations / {
      // 配置允許跨域，即使端口不同也可以請求資源文件
      add_header Access-Control-Allow-Origin *;
  }
  add_header Cache-Control "no-cache,must-revalidate";  //不緩存資源，每次訪問都要驗證其有效性
}