Vue 实现网易云音乐 WebApp

?? 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。

?? 项目演示地址:移动端音乐 WebApp,或者可以扫描二维码访问:

  • 电脑在 Chrome 调试模式下食用效果更佳,开启调试模式的手机模式后,如果不能滚动,刷新一下页面即可

?? 源码地址:vue-music-webapp,欢迎 star 和 fork 哦~

如果你觉得我做的不错的话,我就厚着脸皮求个 star ?? 哈,star 是对我最大的鼓励(老脸一红)

预览

图片虽然压缩过了,但是几张加载一起还是有 3MB 左右,所以请耐心等待一下啦??。感觉不错的可以去上面 ??的地址体验一下呦~

推荐、排行榜、歌手

歌单详情、个人中心

播放器、播放列表

搜索页面

开发目的

通过学习开发一个 Vue 全家桶项目,让自己更熟练的使用 Vue 全家桶、模块化开发、ES6 等等知识,提高自己的技术能力。

技术栈

前端

  • Vue:用于构建用户界面的 MVVM 框架
  • vue-router:为单页面应用提供的路由系统,使用了 Lazy Loading Routes 技术来实现异步加载优化性能
  • vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷
  • vue-lazyload:实现图片懒加载,节省用户流量,优化页面加载速度
  • better-scroll:解决移动端各种滚动场景需求的插件,使移动端滑动体验更加流畅
  • SCSS:css 预编译处理器
  • ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用

后端

  • Node.js:利用 Express 搭建的本地测试服务器
  • vue-axios:用来请求后端 API 音乐数据
  • NeteaseCloudMusicApi:网易云音乐 NodeJS 版 API,提供音乐数据

其他工具

  • vue-cli:Vue 脚手架工具,快速初始化项目代码
  • eslint:代码风格检查工具,帮助我们规范代码书写(一定要养成良好的代码规范)
  • iconfont :阿里巴巴图标库,谁用谁知道
  • fastclick :消除 click 移动游览器 300ms 的延

实现功能

播放器内核、推荐页面、热榜页面、歌手页面、歌单详情、歌手详情、排行榜详情、搜索页面、播放列表、用户中心等等功能。

推荐页面

推荐页分成三个部分,分别是 banner 轮播图、推荐歌单、推荐歌曲,数据都是使用 axios 请求 API 获取得到的,图片都使用 vue-lazyload 实现懒加载。

轮播图:使用 better-scroll 实现,具体可以看这里 Slide点击跳转方面只实现歌曲和歌单的跳转,因为暂时只实现了这两个功能。

推荐歌单,推荐歌曲:使用 vuex 管理数据,方便组件之间的数据交互(播放器播放歌曲)。因为数据上还有播放数量,所以就顺便也加上去了。

排行榜页面

同样是通过 API 获取到排行榜的数据,但是因为 API 获取到的是排行榜中所有歌曲的数据,所以难免在加载速度上有点慢,后期再看能不能优化一下,加载的慢毕竟太影响用户体验了,别的就没什么了。

歌手页面

实现歌手列表的左右联动(这个需要理解理解),因为之前已经写过和这个有关的博客,所以就不多写了,具体可以看我之前的这个笔记 ?? 移动端字母索引导航

歌曲列表组件

用来显示歌曲列表,在很多的地方都进行了复用,例如:歌单详情页、排行榜详情页、歌手详情页、搜索结果、用户中心等等。

歌单详情页

通过歌单的 ID 来获取歌单中的歌曲数据,然后还做了一些体验上面的交互,比如上滑显示状态栏然后将状态栏标题变为歌单名,具体可以尝试一下就知道了。

然后就是复用 歌曲列表组建 来显示歌曲。

排行榜详情、歌手详情

和歌单详情基本上没有什么区别,除了 UI 界面方面有细微的改动(根据不同的内容作出不同的优化)。

播放器

最最最重要的组件,毕竟是个音乐播放器,不能放歌那啥都是扯淡了。

实现功能:顺序播放、单曲循环、随机播放、收藏等。

播放、暂停使用 HTML5 的 audio 实现。

数据、播放状态、播放历史、习惯歌曲等方面使用了 vuex 来进行管理,因为数据太多,组件直接传递的话是会死人的,所以还是老老实实的用 vuex 吧,数据之前的传递真的很方便。

图标使用 iconfont 阿里巴巴图标库,中间的唱片旋转动画使用了 animation 实现。

歌词部分获取到网易的歌词数据,然后使用 第三方库 lyric-parser 进行处理。实现显示歌词、拖动进度条歌词同步滚动、歌词跟随歌曲进度高亮。

通过 localstorage 存储喜欢歌曲、播放历史数据。

audio 标签在移动端不能够自动播放的问题

电脑端是没有这个问题的,这个问题真的是让我很头大,最后是用了很鬼畜的方法解决了(使用 addEventListener 监听 touchend 事件,然后在回调函数中让 audio 播放一次,具体看 App.vue 文件,注释有写)。

播放列表

显示和管理当前播放歌曲,可以用来删除列表中的歌曲、以及选择播放歌曲。

搜索功能

实现功能:搜索歌手、歌单、歌曲、热门搜索、数据节流、上拉刷新、保存搜索记录。

通过关键字请求 API 获取搜索数据,显示歌手、歌单、歌曲。

实现了上刷新,因为搜索可以设置请求数据的条数,所以可以用来实现上刷新的功能。

通过节流函数实现数据节流,通过 localstorage 存储搜索数据。

用户中心

将在本地存储的数据显示出来,方便用户使用,后期准备添加更多功能。

TODO

  1. 优化排行榜加载速度
  2. 优化重复代码
  3. 增加歌曲评论
  4. 增加 MV、电台 功能
  5. emm,更多功能容我再想想哈

感谢

最后

最后的最后当然是厚着脸皮的再求个 star 啦,如果觉得我的项目还不错的话 ??,就给个 star ? 鼓励一下吧~

原文地址:https://www.cnblogs.com/cccj/p/9043012.html

时间: 2024-10-29 19:05:41

Vue 实现网易云音乐 WebApp的相关文章

用vuejs仿网易云音乐(实现听歌以及搜索功能)

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

使用flex进行网易云音乐界面构建和布局解析

1.为什么要用flex进行webapp布局 第一,float布局 需要清除浮动,很麻烦. 第二,绝对定位需要考虑位置和空间占位 第三,元素垂直水平居中问题. 2.网易云音乐首页分析3.啥也别说,直接上代码 先来一个html, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

Python爬一爬网易云音乐

结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这前十首发现: 薛之谦现在真的很火啦~ 几乎都是男歌手啊,男歌手貌似更受欢迎?(别打我),男歌手中周杰伦.薛之谦.许嵩(这三位我都比较喜欢)几乎占了榜单半壁江山... <Fade>电音强势来袭,很带感哈(搭配炫迈写代码完全停不下来..) 根据结果做了网易云音乐歌单 : 评论数

我喜欢的网易云音乐

使用了很多音乐APP,无论是付费,还是免费APP,网易云音乐是目前为止最好的云音乐APP,没有之一. 云音乐UI 配色简介大方 布局合理舒适 功能简洁实用 我喜欢的理由 在听歌时候没有广告 纯粹的播放音乐,没有乱起八糟的广告,唯一的广告在首页的slash有推广,并且明确表示出来是推广.如果我有兴趣我自然会点击.如果没有兴趣,强制让我点击,不仅对广告带来的是负面的收益,对音乐app也是很差的体验.其它免费的音乐在你听音乐的时候会强行插入广告,立马听歌的兴趣就没了. 所有歌曲音质都是高清无损 很多音

Ubuntu16.04安装网易云音乐

去网易云音乐官网下载deb包: http://music.163.com/#/download 打开终端: cd 下载 sudo dpkg -i netease-cloud-music_1.0.0_amd64_ubuntu16.04.deb sudo apt-get -f install sudo dpkg -i netease-cloud-music_1.0.0_amd64_ubuntu16.04.deb

实现 60fps 的网易云音乐首页

网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的首页来作为Demo,语言是Swift 3. 本文的内容包括: 实现网易云音乐首页的思路如何建立一个轻量级的UITableViewController(不到100行)性能瓶颈原因以分析及如何优化到接近60fps Note:本文并没有用Reveal去分析网易云音乐iOS客户端的原始UI布局,所以实现方式

将 QQ 音乐、网易云音乐和虾米音乐资源「整合」一起的Chrome 扩展Listen 1

原文地址:http://whosmall.com/?post=418 本文标签: Chrome扩展 Chrome浏览器 Chrome扩展Listen1 音乐资源整合 Listen1安装方法 在 Chrome 上安装了这款名为 Listen 1 的插件,妈妈可是再也不用担心你找不到想听的歌了.它将 QQ 音乐.网易云音乐以及虾米音乐的音乐资源「整合」在了一起,你只需要输入音乐关键词,就可以方便地三大曲库中跳转搜索. 安装方法 Listen 1 的安装方法与一般的 Chrome Extension

《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + MVVM-DataBinding架构开发.开发中所遇到的各种问题已归纳在这里. github地址:CloudReader What can be learned about this project 那么,从本项目中你能学到哪些知识呢? 1.干货集中营内容与豆瓣电影书籍内容. 2.高仿网易云音乐歌单

详解Qt动画框架(2)--- 实现网易云音乐tag切换

在详解Qt的动画框架(一)介绍了关于Qt动画框架一些基础知识,在这一节中,将会实际的看到有关与动画框架的实现,该案例主要实现的具体是网易云音乐tag的切换,网易云音乐中的切换如图所示: 本文介绍的方法也可以达到这种切换的简易效果. 设计动画框架 首先我们需要设计对于动画框架,其需要的动画效果是什么?对于上图,我们需要的是三个tag可以不停的切换,可以抽象为左移以及右移,即一个tag从一个矩形区域,移动到另外的矩形区域,那么对于Tag的承载体选为什么较为合适呢?因为我们仅仅只需要图片的显示,因此Q