我可能做了一个假的qq音乐demo, 本demo参考 https://y.qq.com
开发的,难怪跟网上其他人的案例界面不一样。。。Orz
Build Setup
git clone https://github.com/chengjun2014/qq_music.git
# 安装依赖
npm install
# serve with hot reload at localhost:8080 启动服务
npm run dev (会自动启动浏览器运行项目)
# build for production with minification
npm run build (对这里已经优化了配置文件使 build 生成的文件可以在本地查看,或作为静态页面线上预览)
# build for production and view the bundle analyzer report
npm run build --report
功能实现
首页:banner滚动效果实现,电台下级页面未接入(配的活动页或列表页,情况太复杂没有固定的借口)
排行榜:完成榜单列表和榜单歌曲list,并可播放榜单歌曲,榜单页播放按钮可播放当前专辑第一首歌曲
搜索页:搜索功能完成,并完成歌手的个人页面,添加搜索框回车提交;热词点击即触发搜索
播放页:歌曲正常播放,歌词同步高亮/滚动;播单显示正常;未做播放控制/收藏功能,播发完自动切换到停止状态
搜索结果页:搜索结果正常显示/跳转到对应播放页面
搜索历史去重/排序
自定义 localstorage 方法,添加/删除/清空数据;
优化 localstorage 可存/取数组类型(通过序列化和反序列化)
Vue 相关的技术栈
- “vue”: “^2.1.10”,
- “vue-awesome-swiper”: “^2.3.2”,
- “vue-resource”: “^1.2.0”,
- “vue-router”: “^2.2.0”,
- “vuex”: “^2.1.2”
- 代码格式比较整齐(换过一次IDE,可能个别文件缩紧不统一,见到时候会调整回来)
案例截图
截图是早期版本,最终完成效果以代码运行为准,建议clone代码到本地运行查看效果或 github源码
切换到手机模式在浏览器里打开 点击预览
转载http://www.tuicool.com/articles/vYJRN3m