PWA Project practical sharing – BookPlayer listen to the book App every day

Because I have a need, a special itch, day and night. I started to work on this project the next day. In my spare time, it lasted about 10 days (because I was learning while doing), from design to data (including parsing physical files) to front-end. Always make the effect THAT I want. Because the data is related to copyright issues, so I only made part of the data for demonstration, haha.

Results demonstrate

portal

The project address

portal

The Android App to download

The project achieved:

  • Player functions
    • Times the speed of playback
    • Continuous playback
    • The playlist
    • .
  • listen
    • The sorting
    • Browse by month/interval
    • Read gray
    • To view a larger version
    • Parse the Xmind file into tree-structured text
    • Book Search
    • The historical record
  • course
    • It’s similar to listening to a book
    • There is no Xmind, only image files
  • App
    • PWA integration
    • Android apps can be generated with Lavas
  • .

Technology stack

  • Vue + vuex + vue-router + vue cli3 + LeanCloud + PWA (you can use Lavas to generate AndroidApp) + Tencent cloud object storage

Project running

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

cdBookPlayer NPM I or yarn NPM run devCopy the code

LeanCloud configuration

  1. To register firstLeanCloudaccount
  2. Create an application named asBookPlayerOr something you like
  3. After entering the application, in the storedCreate a ClassWith the plus sign next to it, click Select Data Import
  4. Import the JSON file from the directory
  5. Look at the sidebarSettings -> Apply key, copy and replace the item.env 的 VUE_APP_LEANCLOUD_APP_ID 和 VUE_APP_LEANCLOUD_APP_KEY
  6. Restart the project and see what happens