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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js中top的作用深入剖析
Mar 04 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
a标签调用js的方法总结
Sep 05 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
微信小程序自定义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
菜鸟修复电子管记
2021/03/02 无线电
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP导入导出Excel代码
2015/07/07 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python如何读写字节数据
2020/08/05 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
python如何实现word批量转HTML
2020/09/30 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
医学实习生自我鉴定
2013/12/12 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
社会实践活动总结
2015/02/05 职场文书
签字仪式主持词
2015/07/03 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Java中使用Filter过滤器的方法
2021/06/28 Java/Android