基于vue全家桶的移动端音乐web app

项目描述

这是一个基于 Vue2.x 和网易云音乐 API 制做的移动端 web app 项目；因为是出于练习和实验的目的，所以并不是是网易云音乐 app 的替代品，目前也没有涵盖所有的功能；

该项目主要使用的一些工具备：

1. webpack 和 webpack-dev-server
2. vue 全家桶
3. NeteaseCloudMusicApi 项目
4. axios
5. better-scroll
6. vue-lazyload
7. Iconfont
8. Muse-UI

github：github.com/xxf1996/vue…

线上地址：xiexuefeng.cc/app/music

使用须知

因为项目使用的 API 接口彻底是基于 NeteaseCloudMusicApi 项目，所以须要事先启动该项目做为接口服务器（不管是本地仍是云上）；启动好后修改 src/index.js 文件中的 API 接口设置为实际使用的接口地址便可。

如何运行

安装依赖

npm i
复制代码

开发

npm start
复制代码

默认端口为 8080；

打包发布

npm run build
复制代码

默认打包路径为 dist；

功能说明

因为是针对移动端设计的 web app，所以采用了 rem 布局来适应移动端不一样分辨率的设备；设计稿是基于 375px 宽度的设备，仿照网易云音乐 app 的页面布局和设计。目前制做的功能界面有：

登陆页面（伪）

为啥说是『伪』登陆，由于这里只是获取用户的 uid，此后获取到的数据都是一些公开只读的数据，而涉及到真正改变用户信息的操做（如收藏，点赞，评论等等）都不能使用；其实 NeteaseCloudMusicApi 项目提供了与网易云音乐 app 同样的手机或邮箱登陆的接口，可是因为个人目的不是制做替代品，只是练习项目和试验一些功能，利用 uid 获取一些『只读』数据已经足够了（何况还涉及到用户密码和安全问题）。

那么如何查询本身的网易云音乐帐户 ID 号呢？那就须要在网易云音乐 PC 网页端查看本身的我的主页，诸如https://music.163.com/#/user/home?id=xxxxxxx，id 后那串数字就是帐户 ID。

关于游客模式

游客模式实际上就是没有获取用户uid而已，所以有关『登陆』用户的信息就没法查看（好比侧边栏信息和首页的用户歌单等），其余的数据基本上没有影响。

首页

侧边栏

首页顶部左边的图标，点击可弹出侧边栏查看用户信息，以及一些设置；

向左滑动或点击外侧能够收回；

查看更多歌单项

首页歌单区块默认最多显示两排（2x3，6 个）歌单信息，点击栏目标题底部弹出所有信息：

歌单详情页

歌曲操做弹窗

带有 3 个竖排原点的图标，点击会出现一个关于歌曲操做的底部弹窗：

底部小播放器

点击歌单或专辑等页面的歌曲项后，底部会出现一个小播放器：

全屏播放

点击底部播放器会跳转到全屏播放页：

开启『显示频谱』选项后（默认关闭，由于有些浏览器对于 WebAuio API 支持不够），能够在封面看到实时的频谱图：

点击封面能够切换到全屏歌词页面：

当前播放列表

评论页面

专辑页面

歌手详情页面

用户详情页

搜索页

点击顶部菜单中的搜索图标便可进入搜索页面，在输入框中输入关键字，回车后便可获取搜索结果；目前只支持单曲类型。

我的笔记

在写这个项目的时候固然也遇到许多问题，基本上遇到的问题都会记录下来，其中有些专门进行了整理放在博客上：

1. 关于rem布局 | snowdream
2. 如何实现歌词同步显示 | snowdream
3. 音频播放器的制做与WebAudio API | snowdream
4. Event对象与自定义事件 | snowdream