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

项目描述

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

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

webpack 和 webpack-dev-server

vue 全家桶

axios

better-scroll

vue-lazyload

Iconfont

Muse-UI

使用须知

由于项目使用的 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 支持不够)，可以在封面看到实时的频谱图：

点击封面可以切换到全屏歌词页面：

当前播放列表

评论页面

专辑页面

歌手详情页面

用户详情页

搜索页

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

个人笔记

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