vue开发的音乐web-app
已经成功部署线上啦~，音乐web-app
源码在这,小妹在此求个star
项目描述
vue全家桶开发仿网易云音乐的web-ap
项目目的
学习vue的项目实战课程，认识到了很多关于模块化开发思想，复用代码，vue等知识点，继续努力加油！
前台
- vue 前台用户界面展示
- vue-router 为单页面提供路由系统，使用路由懒加载实现组件的异步加载
- vuex Vue组件数据状态共享
- axios 异步请求api数据
- es6 箭头函数，解构赋值，class类...
- localStorage 搜索记录存储
- Eslint 代码规范
后台
- NeteaseCloudMusicApi: 网易云音乐NodeJs版Api，为项目提供音乐数据
使用的库：
- better-scroll: 实现移动端滚动需求
- fastclick: 消除移动端点击事件的300ms延迟
- border.css: 消除Retina屏幕 1px border 在不同dpr下的显示
- pinyin: 取歌手数据首字母
- vue-lazyload: 实现图片的懒加载
实现的功能
导航分成四个区块：首页 | 独家歌手 | 排行榜 | 搜索
首页
- 图片轮播
- 推荐歌单组件
独家歌手
- 获取热门歌手
- 头字母索引导航
- 顶部显示当前字母索引
排行榜
- 获取热门歌单
- 上拉更新
搜索
- 热门搜索关键词
- localStorage保存搜索历史
- 输入字符串获取搜索数据（此处用到函数节流）
- 下拉加载
其他页面
歌手详情页 | 歌单详情页
- 随机播放歌手全部歌曲
- 可添加歌手歌曲到播放列表
播放器内核
- 暂停开始播放
- 前后切换歌曲
- 显示播放列表
- 可切换播放模式( 随机播放， 顺序播放， 循环播放)
- 拖动或点击播放进度条跳到指定时间
- 从后台获取歌词进行解析
- 播放当前歌词居中显示高亮
项目遇到的一些问题
在播放器上遇到的坑最多，最复杂也是这个，所以说说吧~
- 关于HTML5 的 audio标签
当不断触发切换歌曲的时候，audio会报错：Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().或者是
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
大致的意思是play() 请求被 pause() 或者 新的加载请求中断
原因：audio的 play() 方法调用会返回Promise，如果成功，Promise就会执行并且audio的playing同时触发事件，如果播放失败，Promise就会拒绝，显示失败原因
解决：既然返回的是promise对象，那就可以用then方法来选择播放媒体准备之前，播放功能不会执行
其他方法：
- 监听audio的loadedmetadata事件，判断在完全音频的元数据加载完毕之后才触发播放功能
- 监听audio的canplay事件，确保在已经有足够的媒体数据才触发播放功能
参考文章
https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events
ref是的渲染事件以及不是响应式
要取得$refs必须在dom渲染完毕的时候才能获取，所以可以在mounted 钩子或者nextTick()的回调函数中获取，但是如果碰到的ref是动态渲染的，也就是数据是由父组件通过异步获取数据(data)传递给子组件的时候才会渲染相关的dom节点，在这种情况下，可以使用watch对象，观察data的变化情况，在这个回调函数中便能获得ref数据；ref不是响应式的，所以如果动态添加相关的ref的节点，添加的节点的索引会出现在尾端，所以只能通过this.$refs去获取这些节点数组的父元素，通过$el.children获取所有子dom节点audio标签在移动端首次点击歌曲不能自动播放的问题
原因：移动端为了省用户流量，会对自动播放音频，视频做限制，所以当第一次播放audio的时候只能由用户手动触发audio.paly()事件才能播放
解决：思前想后，第一，在各种生命周期钩子里使用audio.play()是没用的，原因的获取歌曲的相关数据(url 等)这些都是异步行为，第二，使用autoplay="autoplay"也没有效果；
网上提供的解决方法：（一种hack做法 ,,ԾㅂԾ,,）
绑定一次touchstart()事件，当用户触摸屏幕时，回调中调用audio.play()方法
项目总结
第一次这么系统的完成一个作品，不过还有很多功能没有完善，后期再继续完善完善，例如用户登陆功能，用户评论。。。立个flag先。。。在整个学习过程中，学到了很多关于移动端开发的东西，包括布局方面(更加加深了弹性布局和定位布局相关知识点)，前后端的分离，前端如何获取数据转换成需要的数据等等，再遇到问题的时候，应该先找到问题根源，然后多查查着相关资料，出现问题的原因，想想解决办法，多试试看能不能，再考虑优化解决方法。。。
可以扫码观看啦~
A Vue.js project
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
