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. 重启项目，看看效果吧