基于Vue.js的音乐播放器（Webapp）

2019年8月25日 170次阅读 来源: waterc

概述

项目是基于Vue.js，制品是一个挪动端的音乐播放器，泉源于imooc的实战课程。本身着手实践并加以修正拓展。
项目标大抵流程是Vue-cli构建开辟环境，剖析需求，设想构想，计划目次构造，最先编码。

视图层

  • 引荐页

  • 歌手页

    • 歌手概况

  • 歌曲排行榜

    • 排行榜概况

  • 搜刮页

  • 用户中间

数据泉源

一切数据都来自于QQ音乐，抓取自QQ的接口，大部分接口都是JSONP，抓取比较轻易，个中一些接口限定了host，不能直接抓取，采纳的要领是用axios代办，设置header，以此绕过host的限定。
PS：详细代码请看prod.server.js文件

手艺栈

  • Vue

  • Vuex

  • Vue-Router

  • Vue-cli

  • Stylus

  • Axios

  • ESlint

  • Better-scroll

src目次构造

《基于Vue.js的音乐播放器（Webapp）》

难点

player组件

讲一讲player 播放器组件，播放器组件可谓是全部项目标中心，固然数据处置惩罚和用户体验方面也是不简朴的（逃。
播放器是全局组件，放在App.vue下面，经由过程Vuex通报数据，触发action提交mutation，从而使播放器最先事情。固然，个中的数据交互说庞杂也不是很庞杂，就是要花多点时刻明白，player组件由多个基本组件组成，详细请看项目代码，下面上图
《基于Vue.js的音乐播放器（Webapp）》

为了防备切换歌曲时点击速率过快致使歌曲播放毛病，运用了audio的onplayAPI，连系Vuex猎取到数据，推断当前歌曲数据请求到才能够切换下一首歌曲，推断函数以下

 ready() {
   this.songReady = true
 }

数据处置惩罚

经由过程挪用QQ音乐的JSONP接口，猎取的数据并不能直接拿来用，需要做进一步的规格化，到达我们运用的请求，所以在这方面零丁封装了一个class来处置惩罚这方面的数据，详细请看src/common/js/song.js

在请求JSONP的时刻，用到了一个JSONP库，这个库代码非常简短，只要几十行，有兴致的同砚能够进修下。

运用时，就是将请求的参数拼接在请求url上，然后挪用这个库的jsonp要领。所以，在此封装了两个函数，一个是将参数拼接在url上，另一个是将库内里的jsonp要领Promise化，轻易我们运用，详细请检察src/common/js/jsonp.js。

将请求的数据格式化后再经由过程Vuex通报，组件间同享，完成歌曲的播放切换等。

交互体验

该项目标很多处所都涉及到转动，包含下拉转动，下拉转动革新等。这内里用到了一个库(better-scroll)，来完成一切涉及到的转动，发起进修下它的API。

其他动画包含了Vue的transition动画，路由之间切换时的简朴动画，播放器翻开时的动画，这个处所比较难，也比较好玩。

翻开页面时的加载Loading结果，实在就是一个Loading组件，也比较简朴。

为了削减流量，图片加载运用了懒加载的体式格局，转动时再加载实在的图片。
详细结果请本身体验：）

结果

《基于Vue.js的音乐播放器（Webapp）》
《基于Vue.js的音乐播放器（Webapp）》
《基于Vue.js的音乐播放器（Webapp）》
《基于Vue.js的音乐播放器（Webapp）》

构建

开辟环境

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run e2e tests
npm run e2e

# run all tests
npm test

临盆环境

# build for production with minification
npm run build
# run
node prod.server.js

总结

经由过程进修该项目，本身收成了很多，实践中也遇到了大大小小很多问题，经由过程断点调试等终究处理了，对我来讲无疑是最大的勉励，也愿望能与人人一同进修。
项目地点：https://github.com/k-water/vue-music
喜好的点个赞
完 ：）

    原文作者：waterc
    原文地址: https://segmentfault.com/a/1190000010403542
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞