用vue全家桶写一个“以假乱真”的网易云音乐

clasnake 发布于2019-08-20 18:19 / 2726人阅读

摘要：关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，，大概这样，点击查看。

标题略夸张了，但是这个从ui还原上已经很接近官方版本了。虽然目前这个是很多人造过的轮子，但是可能每个人的实现方式都不一样，自己写一遍也会有许多收获。

项目地址

预览地址

api：ap使用的是一个开源的nodejs封装的网易云音乐api，地址

技术栈

vue2：基础框架

vue-router2：路由跳转

vuex：全局数据管理

es6：采用部分es6特性，大大简化了写法

webpack：vue-cli基于webpack，修改了部分配置

axios：基于Promise的http库，用来请求数据

scss：写起css来十分方便，需要安装sass-loader，另外使用自定义其中的自定义函数配合rem来适配移动端设备简直不要太方便

flex：弹性布局，在移动端兼容性较好，写各种布局非常方便

vue-material：一个Android上material design风格的组件库

说明

这个项目大小组件大概二十几个，目前还未完工，以后还会继续更新，目标是还原整个网易云音乐（虽然不知道什么时候能填完坑o(╯□╰)o）。

关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，/root/index/recommed，大概这样，点击查看。

关于体会，写到这个项目也算是对vue全家桶比较熟了，体会就是，不论是简单的复杂的项目，只要分割成一个个组件再拼起来，也没什么难的，组件之间通信又有vuex，也是非常简单的，总之就是熟能生巧。

关于难点，对于自己来说，audio标签以前没有接触过，有点麻烦，不过还算有相关文档；歌词滚动，参考这里，部分歌曲还是有点问题，待解决;播放器背景图，这个当时考虑了很久，因为网易云音乐的播放器背景图就是当前歌曲的专辑图，还是模糊效果，最后实现方式是在当前组件的二级div设置当前歌曲的背景图，大小覆盖父元素，为防止第一次播放或者切歌的时候没有图，在组件的根元素也设置一张背景默认图，具体可以点击查看；当前歌曲在播放列表中的索引获取，通过es5中数组的findIndex方法，找到当前歌曲的id在数组中的位置，具体可以点击查看。

关于打包后的资源路径，比如要放在二级目录www.xxx.com/music，那么修改config/index.js中的assetsPublicPath: "/music/"即可。

关于移动设备适配，我使用的是js动态设置html元素font-size的方式，页面元素使用rem，这样可达到在不同设备下显示内容基本一样的效果，具体可以点击，使用方式比如width:100px;可以写成width:pr(100)。

关于图标，使用的是淘宝的iconfont字体图标方案，相比于使用图片图标有许多优势，比如任意缩放、改变颜色、响应式适配设备等等，具体可以参考这篇文章。

功能

[x] 首页歌单推荐

[x] 歌单详情

[x] 播放器

[x] 播放暂停

[x] 播放模式切歌（顺序和随机）

[ ] 歌词滚动（待修改）

[x] 歌曲拖动

[x] 播放器底部背景

[x] 播放底栏

[x] 底栏歌词同步

[x] 播放列表

[x] 歌曲评论

[x] 搜索推荐

[x] 搜索分类

部分截图

专线服务超融合服务器仿网易云音乐api数据服务器的搭建网易云音乐网易云音乐解析网易云音乐下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84340.html

用Vue搭建一个应用盒子（三）：音乐播放器

摘要：组件结构接着我们就该搭建这个播放器的组件了。总的原理是首先获取音频的持续时间，然后通过一个定时器，不断更新显示时间，播放完成时，计时器停止。这个页面比较简单，播放器标签，绑定了事件，即播放完成后执行。这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲...

appetizerio 2019-08-26 11:33 评论0 收藏0
Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

摘要：库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目音乐播放器虽然烂大街了，但是作为前端没自己撸一个一直是个遗憾，而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了，社区仿pc客户端的网易云也不多见，为了弥补这个遗憾，就用vue全家桶模仿mac客户端的ui实现了一个，欢迎提出意见和star~ 预览地址源码地址...

mgckid 2019-08-26 10:23 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

leap_frog 2019-08-29 12:42 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

graf 2019-08-20 17:03 评论0 收藏0