Vue 全家桶实现移动端酷狗音乐功能


Posted in Javascript onNovember 16, 2018

Vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式。

技术栈: vue-router、eventBus、vuex、vue-awesome-swiper

整体功能 vs 酷狗官网:

Vue 全家桶实现移动端酷狗音乐功能

总体模拟官网,原来的亮点保留,如:

  1. 图片懒加载

除此之外,增加了

  1. 加了全局的 Loading 组件,根据不同页面调整 Loading 尺寸
  2. 搜索页面做了优化,可以在刷新时保留之前的搜索结果
  3. 播放页面单独做了一个路由,可以在刷新时保留当前歌曲页面
  4. 播放器的常驻以及滚动时最小化,避免遮挡歌曲名称
  5. 部分可以重用,极少更新的数据,譬如主页四大栏,避免了数据的二次请求。
  6. 增加了主页四栏手势滑动切换
  7. 歌词滚动等
  8. ...

如果参考网易云,后续可以加的新功能还有一些,不过暂时我要先去做其他事了。

CSS 觉得不难,都是手写的,采用的是 BEM 规范,js 是 ESLint。

总体难度适中,只不过,如果规范化,组件化抽象,任务还是不少的,具体的坑我就不说了,源代码都在这里,推荐想要熟悉 vue 的同学也自己试下。

作为一个练手项目,vue 全家桶都覆盖到了,当然,如果你只用 vue 和 vue-router 去实现,也不是不行,实现到一大半,就会明白为什么要全家桶了。

至于酷狗的接口以及跨域的问题,解决方案都在 README 里,都是借用的其他作者的分享与整理,在此还是要感谢下 ecitlm 和 JsonBird。

src/ 文件目录:

|__ App.vue
 |__ assets
  |__ css
   |__ base.less
   |__ constant.less
   |__ iconfont.css
   |__ reset.css
  |__ images
   |__ logo__grey.png
   |__ logo__text.png
   |__ logo__theme.png
  |__ js
   |__ api.js
   |__ bus.js
   |__ globalEvent.js
   |__ mobileLayout.js
   |__ utils.js
 |__ components
  |__ Main.vue
  |__ new_song
   |__ NewSong.vue
   |__ Slider.vue
  |__ player
   |__ NextButton.vue
   |__ PlayButton.vue
   |__ PlayerLyrics.vue
   |__ PlayerMax.vue
   |__ PlayerMed.vue
   |__ PlayerProgress.vue
   |__ PrevButton.vue
  |__ public
   |__ AppHeader.vue
   |__ AppLoading.vue
   |__ AppMusicList.vue
   |__ AppNav.vue
   |__ PubList.vue
   |__ PubModuleDes.vue
   |__ PubModuleHead.vue
   |__ PubModuleTitle.vue
  |__ rank
   |__ RankInfo.vue
   |__ RankList.vue
  |__ search
   |__ Search.vue
  |__ singer
   |__ SingerCategory.vue
   |__ SingerInfo.vue
   |__ SingerList.vue
  |__ song
   |__ SongList.vue
   |__ SongListInfo.vue
 |__ main.js
 |__ mixins
  |__ index.js
  |__ loading.js
 |__ router
  |__ index.js
 |__ store
  |__ device.js
  |__ images.js
  |__ index.js
  |__ loading.js
  |__ newSong.js
  |__ player.js
  |__ rank.js
  |__ search.js
  |__ singer.js
  |__ song.js

总结

以上所述是小编给大家介绍的Vue 全家桶实现移动端酷狗音乐功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 #Javascript
You might like
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python 合并文件的具体实例
2013/08/08 Python
python连接字符串的方法小结
2015/07/13 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python else语句在循环中的运用详解
2020/07/06 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
小学生成长感言
2014/01/30 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
软件项目实施计划书
2014/05/02 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
高中地理教学反思
2016/02/19 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技