Vue2.0移动版网易云音乐

原创 Sea404 随笔 Vue 3429阅读 2017-06-15 00:07:35 举报

1.项目简介
高仿app版网易云音乐,实现基本搜歌,歌曲切换,同步歌词功能。
技术全栈:vue-cli + vuex + vue-router + less + axios + jquery + 简单php
github地址:https://github.com/xinghaiyang1994/vue-music
线上展示:http://music.xinghaiyang.com/
欢迎star
线上项目展示二维码:

线上项目展示

1.首页

Vue2.0移动版网易云音乐
首页侧边:

Vue2.0移动版网易云音乐
首页底部歌曲列表:

Vue2.0移动版网易云音乐

2.歌曲列表页

Vue2.0移动版网易云音乐

3.歌曲播放页:

Vue2.0移动版网易云音乐

Vue2.0移动版网易云音乐

4.歌曲搜索页

Vue2.0移动版网易云音乐

项目总结:
基于QQ音乐API构造搜索功能,歌词同步是根据返回的xml文件进行正则替换构造成包含键值为时间的数组,使用axios进行数据请求,后台php代理解决跨域问题问题,不过axios貌似只能异步,所以也用了jquery中的ajax同步请求数据的功能。Vuex进行数据管理真心好用,但是不是每个数据都放在Vuex中,歌曲搜索页的数据就是放在当前页面。二维码的生成用php进行生成动态img图片。底部歌曲列表这样的弹出层用的是transform来减少卡顿,底部的原型开始/暂停按钮使用canvas绘制,但貌似还是没有解决retina屏幕下的轻微锯齿感的问题。播放页中音量和播放进度都可以拖拽调整,貌似在手机上用的时候音量有点不灵,歌曲也支持上一首/下一首切换以及列表循环、随机循环、单曲循环三种模式,这里单循循环主要是通过绑定audio的loop属性来做的。刚学Vue没多久,还需要继续努力。

评论 ( 19 )
最新评论
Sea404 18F 2017-06-29 09:46:07 19F

qq1295306442

前端的路上有我 16F 2017-06-29 08:56:24 18F

vue1.0有个ready方法,能加一发好友么,我用vue1.0版本做没啥问题,用vue2.0老是报错,想请教一下

younglam21 15F 2017-06-28 14:18:53 17F

2.0的ready用mounted替代了

Sea404 15F 2017-06-28 14:16:57 16F

ready?你是指一般jq中的ready事件吗?如果是的话,直接把放在mounted方法内就行了,可以看看这个https://cn.vuejs.org/v2/guide/instance.html#实例生命周期

前端的路上有我 2017-06-28 09:26:51 15F

问一下,我用vue2.0的时候初始化数据该怎么做,用ready好像不好使,而且绑定body提示我有错误

Sea404 13F 2017-06-26 13:35:11 14F

大概一周 音量做了,貌似上线后音量功能可以拖拽,但是音量没变,估计可能是浏览器权限问题,本地开发的时候是可以调节音量的

lad 2017-06-26 11:09:37 13F

挺好的,花了很长时间吧,音量你没做了吧,

Sea404 11F 2017-06-20 09:50:34 12F

xudao 2017-06-20 09:31:51 11F

这个做的不错

Sea404 8F 2017-06-19 17:39:52 10F

嘿嘿
互相学习哈

Sea404 7F 2017-06-19 17:39:22 9F

黄灿灿 2017-06-19 16:32:27 8F

我也在开始学习vue,希望以后不懂能请教请教一下

15296174004 2017-06-19 09:13:28 7F

mark。。

Sea404 5F 2017-06-16 14:57:14 6F

可以呀,github上面都有源码,右滑的模块在component中的side模块里。右侧部分先定位到左侧不可显示区域,然后点击菜单,改变transform:translateX()就可以了。这是源码地址 https://github.com/xinghaiyang1994/vue-music

1549607208 2017-06-16 14:17:59 5F

能分享下右滑拉出个人中心代码吗

Sea404 3F 2017-06-15 18:22:00 4F

加油

飞段 2017-06-15 17:46:09 3F

真心不错!我也刚接触vue ,学习了!

Sea404 1F 2017-06-15 16:20:05 2F

谢谢

gtd_alp 2017-06-15 15:01:01 1F

给你star啦