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 滚轮事件使用说明
Mar 07 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
JS实现微信摇一摇原理解析
Jul 22 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php上传大文件设置方法
2016/04/14 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
类似框架的js代码
2006/11/09 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现八大排序算法(1)
2017/09/14 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python基础教程之while循环
2019/08/14 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记