Vue仿网易云音乐移动端

521 阅读1分钟

技术栈

用户端: Vue(2.5) + Vuex + axios + vant + sass 等

服务端:koa2 + superagent + cheerio 等 (框架部分没用 express 而选用 koa 也是为了练习,关于两者的优劣,理解还不够深入...

开发目的

用于个人练手,开发周期比较长,属于有空就做一点,参照网易云移动端ios版本,开发中尽量去还原ios版本中的交互效果。页面逻辑中没有太多路由,以store去控制组件的挂载、销毁

服务端部分借鉴了非常出名的 NeteaseCloudMusicApi,原本是想用node从网易云pc端扒数据下来,用于前端的调用,也实现了歌单列表、歌单详情等接口,后来发现有现成的url可以用,就放弃了,整个服务端项目写的比较随意,待优化的内容还很多

项目地址

nekomusic,欢迎star

项目结构


项目预览(部分交互)

歌单


换肤


个人中心还未完成,所以换肤按钮暂时丢在主页。通过 sass 的混入 + store 实现,并保存在 storage 中

播放、切歌


其中播放为全局组件,并注册为插件可全局调用,并支持后台播放

播放组件及歌单里的背景用到的是高斯模糊算法,引用库 StackBlur

歌词


未实现的功能是自动滚动,待完善

显示评论


歌词数据采用了分页,上拉加载用到 vant 中的 list组件

写在后面

该项目未完成和待优化的部分还有很多,我会持续更新,欢迎issues欢迎star