Vue 全家桶实现移动端酷狗音乐功能

Vue 已经用了不少时间，最近抽空把以前的未完成的酷狗音乐做完了，过来分享下，也可以直接点这里预览，注意切换成手机模式。

技术栈： vue-router、eventBus、vuex、vue-awesome-swiper

整体功能 vs 酷狗官网：

总体模拟官网，原来的亮点保留，如：

  1. 图片懒加载

除此之外，增加了

  1. 加了全局的 Loading 组件，根据不同页面调整 Loading 尺寸
  2. 搜索页面做了优化，可以在刷新时保留之前的搜索结果
  3. 播放页面单独做了一个路由，可以在刷新时保留当前歌曲页面
  4. 播放器的常驻以及滚动时最小化，避免遮挡歌曲名称
  5. 部分可以重用，极少更新的数据，譬如主页四大栏，避免了数据的二次请求。
  6. 增加了主页四栏手势滑动切换
  7. 歌词滚动等
  8. ...

如果参考网易云，后续可以加的新功能还有一些，不过暂时我要先去做其他事了。

CSS 觉得不难，都是手写的，采用的是 BEM 规范，js 是 ESLint。

总体难度适中，只不过，如果规范化，组件化抽象，任务还是不少的，具体的坑我就不说了，源代码都在这里，推荐想要熟悉 vue 的同学也自己试下。

作为一个练手项目，vue 全家桶都覆盖到了，当然，如果你只用 vue 和 vue-router 去实现，也不是不行，实现到一大半，就会明白为什么要全家桶了。

至于酷狗的接口以及跨域的问题，解决方案都在 README 里，都是借用的其他作者的分享与整理，在此还是要感谢下 ecitlm 和 JsonBird。

src/ 文件目录：

|__ App.vue
 |__ assets
  |__ css
   |__ base.less
   |__ constant.less
   |__ iconfont.css
   |__ reset.css
  |__ images
   |__ logo__grey.png
   |__ logo__text.png
   |__ logo__theme.png
  |__ js
   |__ api.js
   |__ bus.js
   |__ globalEvent.js
   |__ mobileLayout.js
   |__ utils.js
 |__ components
  |__ Main.vue
  |__ new_song
   |__ NewSong.vue
   |__ Slider.vue
  |__ player
   |__ NextButton.vue
   |__ PlayButton.vue
   |__ PlayerLyrics.vue
   |__ PlayerMax.vue
   |__ PlayerMed.vue
   |__ PlayerProgress.vue
   |__ PrevButton.vue
  |__ public
   |__ AppHeader.vue
   |__ AppLoading.vue
   |__ AppMusicList.vue
   |__ AppNav.vue
   |__ PubList.vue
   |__ PubModuleDes.vue
   |__ PubModuleHead.vue
   |__ PubModuleTitle.vue
  |__ rank
   |__ RankInfo.vue
   |__ RankList.vue
  |__ search
   |__ Search.vue
  |__ singer
   |__ SingerCategory.vue
   |__ SingerInfo.vue
   |__ SingerList.vue
  |__ song
   |__ SongList.vue
   |__ SongListInfo.vue
 |__ main.js
 |__ mixins
  |__ index.js
  |__ loading.js
 |__ router
  |__ index.js
 |__ store
  |__ device.js
  |__ images.js
  |__ index.js
  |__ loading.js
  |__ newSong.js
  |__ player.js
  |__ rank.js
  |__ search.js
  |__ singer.js
  |__ song.js

总结

以上所述是小编给大家介绍的Vue 全家桶实现移动端酷狗音乐功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue音乐播放器插件vue-aplayer的配置及其使用实例详解

    昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观. 首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-p

  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • vue一个页面实现音乐播放器的示例

    vue一个页面实现音乐播放器的示例

    本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标 本怀着

  • Vuejs仿网易云音乐实现听歌及搜索功能

    Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • vue使用jsonp抓取qq音乐数据的方法

    1.安装jsonp npm install jsonp 2.创建jsonp.js文件,内容如下: import originJSONP from 'jsonp' /** * 封装jsonp * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装 * @param {obj} data 参数 * @param {*} option jsonp的option */ export default function jsonp (u

  • Vue 全家桶实现移动端酷狗音乐功能

    Vue 全家桶实现移动端酷狗音乐功能

    Vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式. 技术栈: vue-router.eventBus.vuex.vue-awesome-swiper 整体功能 vs 酷狗官网: 总体模拟官网,原来的亮点保留,如: 图片懒加载 除此之外,增加了 加了全局的 Loading 组件,根据不同页面调整 Loading 尺寸 搜索页面做了优化,可以在刷新时保留之前的搜索结果 播放页面单独做了一个路由,可以在刷新时保留当前歌曲页面 播放器

  • 全面介绍vue 全家桶和项目实例

    全面介绍vue 全家桶和项目实例

    简介 "简单却不失优雅,小巧而不乏大匠". 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,"vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点".授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You). Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.

  • Vue全家桶实践项目总结(推荐)

    从前端的角度看,Vue可以说是目前最理想的前端MVVM框架,一切为界面服务,上手难度低,本文就将记录使用Vue全家桶(Vue+Vue-router+Vuex)重构一个jQuery+template项目的过程,以及期间的收获. 入门 Vue的官方文档就是学习Vue的最佳教程,没有之一,可能因为框架作者是设计出身,没有后端背景,因此各种抽象概念在Vue里都得以用最容易理解的方式被恰到好处的阐述,这里只简单介绍Vue.Vue-router.Vuex的概念,要全面学习建议去官方文档. Vue Vue的核

  • Vue全家桶入门基础教程

    Vue全家桶入门基础教程

    1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 可以使用其中的一个或者多个 优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /

  • vue全家桶-vuex深入讲解

    目录 使用 index.js getters.js system.js 全局使用:main.js文件中 Vuex概述 Vuex中的核心特性 A.State this.$store.state.全局数据名称-组件访问State中的数据的第一种方式 组件访问State中的数据的第二种方式:按需导入 B.Mutation this.$store.commit是触发Mutation的第一种方式 触发Mutation的第二种方式,按需导入 C.Action this.$store.dispatch()是触

  • JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • Java swing仿酷狗音乐播放器

    Java swing仿酷狗音乐播放器

    今天给大家介绍下用Java swing开发一款音乐播放器,高仿酷狗音乐播放器,完整源码地址在最下方,本文只列出部分源码,因为源码很多,全部贴不下,下面还是老规矩.来看看运行结果: 下面我们来看看代码: 首先看一下主窗口的实现代码: package com.baiting; import java.awt.Dimension; import java.awt.Toolkit; import com.baiting.menu.CloseWindow; /** * 窗口 * @author lmq *

  • java实现酷狗音乐临时缓存文件转换为MP3文件的方法

    本文实例讲述了java实现酷狗音乐临时缓存文件转换为MP3文件的方法.分享给大家供大家参考,具体如下: 酷狗临时缓存文件,其实已经是吧MP3文件下载好了,只是名字看上去好像是通过md5算法重命名的. 酷狗在缓存文件的时候会同时缓存歌词.这个程序就是根据md5管理对应的歌词文件和缓存文件,然后把缓存文件改成 歌曲名+.mp3格式. 原谅我取这么长也不知道对不对的类名. package com.zhou.run; import java.io.File; import java.util.HashM

  • python获取酷狗音乐top500的下载地址 MP3格式

    python获取酷狗音乐top500的下载地址 MP3格式

    下面先给大家介绍下python获取酷狗音乐top500的下载地址 MP3格式,具体代码如下所示: # -*- coding: utf-8 -*- # @Time : 2018/4/16 # @File : kugou_top500.py # @Software: PyCharm # @pyVer : python 2.7 import requests,json headers={ 'UserAgent' : 'Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 lik

  • python爬取酷狗音乐排行榜

    本文为大家分享了python爬取酷狗音乐排行榜的具体代码,供大家参考,具体内容如下 #coding=utf-8 from pymongo import MongoClient import time import requests from lxml import etree client = MongoClient() #连接mongo hello = client.hello #连接数据库 user = hello.song #连接表 headers = { 'User-Agent': 'M

随机推荐