PWA項目實戰分享

PWA項目實戰分享 - BookPlayer 天天聽本書App

由於本身有個需求，特別的癢，晝夜不免。次日就開始起手作這個項目，利用業餘時間，大概持續了10天時間（由於邊學邊作），從設計到數據（包括解析物理文件）到前端。總於把我想要的效果作出來了。
由於數據涉及到版權問題，因此只搞了部分數據來作演示，哈哈。

效果演示

傳送門

項目地址

傳送門

Android App 下載

該項目實現了：

• 播放器功能

  • 倍速播放
  • 連續播放
  • 播放列表
  • ...

• 聽書

  • 排序
  • 分月/區間瀏覽
  • 已讀變灰色
  • 查看大圖
  • 解析xmind文件爲樹結構文本
  • 書籍的搜索
  • 歷史記錄

• 課程

  • 和聽書相似
  • 沒有xmind只有圖片文稿

• App

  • PWA 集成
  • 可藉助 Lavas 生成 Android App
• ...

技術棧

• vue + vuex + vue-router + vue cli3 + LeanCloud + PWA（能夠藉助Lavas生成AndroidApp） + 騰訊雲對象存儲

項目運行

git clone https://github.com/worklinwu/BookPlayer.git

cd BookPlayer

npm i  或 yarn

npm run dev

LeanCloud 配置

1. 先註冊 LeanCloud 帳號
2. 建立應用，命名爲 BookPlayer, 或者本身喜歡的
3. 進入應用後，在存儲的建立 Class旁邊有個加號，點擊選擇數據導入
4. 把目錄下的 json 文件導入
5. 查看側邊欄的設置 -> 應用key，複製替換掉該項目的 .env 的 VUE_APP_LEANCLOUD_APP_ID 和 VUE_APP_LEANCLOUD_APP_KEY
6. 重啓項目，看看效果吧