网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp
项目还在develop中,感兴趣想要参与的小伙伴可以私我
效果图:
骨架屏
首页
侧边栏
每日推荐
歌单
播放器(小)
播放器(大)
详细信息
测试地址
开发总结
项目结构
vue-cli搭建
新增目录如下:
---src ------api // 放置api的目录---------base.js // 放置axios的一些配置,接口域名地址,以及公共参数配置,与后台约定跨域的配置,全局loading配置等---------urls.js // 放置接口url ---------api.js // 放置封装的promise请求------base // 放置一些基础组件 ------common ---------js // 公共js ---------sass // 公共样式 复制代码
类库使用
fastclick解决移动端300ms延迟
vux 快速构建一些常规页面
vue-lazyLoad 对图片进行懒加载处理
better-scroll 轮播图
NeteaseCloudMusicApi wy音乐接口,node封装转发,部署在自己服务器上
路由按需加载
const view = (path, name) => () => import(`@/components/${path}${name}`)// 路由按需加载//这边用的是vue异步组件的方式实现路由的按需加载new Vue({// ...components: {'my-component': () => import('./my-async-component')}})复制代码
- 路由加载时用了transition动画组件添加了一个切换动画
- 注意如果你希望在 Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。
播放器组件
大小播放器分别写了 MiniPlayer.vue
和 NormalPlayer.vue
两个组件,因为想要职责单一,就没有放在一起
隐藏显示 通过vuex进行管理
动画
头部下坠和底部的上浮
<transition name="example"></transition>/*css 样式*/ // 给 transition下第一个元素显示或隐藏时添加的样式//这两个类名都是定义开始到结束的持续时间 方式 以及延迟 .example-enter-active{transition:all 0.4s linear 对所有属性执行0.4s的动画 匀速 } .example-leave-active{transition:all 0.4s linear 对所有属性执行0.4s的动画 匀速 } // 进入过度的开始状态 触发时机 元素被插入前 插入后下一帧移除 .example-enter{} // 离开过度的结束状态 触发时机 example-leave下一帧 动画过度完成被移除 .example-leave-to{}可以使用碟中谍6中的halo跳伞来理解.example-enter-active就是从飞机上离开到开伞的时间.example-enter 下坠前在飞机上的最后一刻.example-enter-to 开始下坠,具备加速度的那一刻 .example-leave-active 开伞到着陆的时间.example-leave 开伞命令发出时.example-leave-to 伞开下一刻 复制代码
播放器的cd的位移及缩放
先计算出小播放器图片离最终大播放器cd的x,y轴上的距离
使用
create-keyframe-animation
进行一个css3
动画状态的注册再利用transition的动画方法钩子
在
enter
时run
动画,afterEnter
时清除动画leave
同理播放器的旋转
定义一个旋转的
css
动画,在一个class
中进行调用,在play
的状态下给它addClss
,pause
时加上animation-play-state: paused
audio的使用
使用 html5
的 audio
结合 vuex
来进行播放器功能的实现,包括进度条,播放,暂停,上一曲,下一曲,播放模式等
布局
绝大多数使用了flex webpack中配置低版本安卓,ios加前缀
考虑到fixed元素的移动端问题,在这种场景下,使用100%高度+absolute方案更适合
使用媒体查询,兼容一下某些样式在768px以上的样式变形
使用rem 在vue实例的
mounted
的钩子里注册resize
和onload
监听,进行最外层rem基准的计算使用骨架屏进行加载资源白屏时填充,待优化至完全的主页面服务端渲染
感谢
vue
vuex
vue-router
vux
vue-lazyLoad
NeteaseCloudMusicApi
github地址,欢迎star.
作者:小笼包
链接:https://juejin.im/post/5b927479e51d450e9942df40
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
网易云音乐接口+vue全家桶开发一款移动端音乐webApp相关推荐
- elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)主页布局开发-Go语言中文社区...
1.引言 寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目主页布局,请多指教~ 2.整体布局 3 .主页 3.1 实现基本的主页布局 3.2 美化主页的header区域 3.3 实现导航菜单的 ...
- vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言 用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...
- 2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)商品分类篇
文章目录 1.引言 2.商品分类篇 2.1 通过路由加载商品分类组件 2. 2 绘制商品分类组件的基本页面布局 2.3 调用API获取商品分类列表数据 2.4 初步使用vue-table-with-t ...
- 2021 Vue全家桶开发电商管理系统(Element-UI)08 商品列表功能的实现
商品列表功能的实现 1 自定义格式化时间的全局过滤器 打开main.js,创建过滤器 Vue.filter('dateFormat', function (originVal) {const dt = ...
- (近5w字)面向小白のVue全家桶开发电商管理系统项目总结文档
引言 这个项目是我第二次做了,第一次做的时候好多地方不是很懂,而现在学习了基础知识后,回过来再做一次,发现原来不是很懂的地方也弄明白了,然后又在B站找了项目实战撸了一把,想通过这篇文章,对其中的模块实 ...
- 基于Vue 全家桶实现网易云音乐 WebApp
基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓 ...
- vue @input带参数_Vue 全家桶开发的一些小技巧和注意事项
前言 用 vue 全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家.以下内容基于最新版的 vue + vuex + vue-router + axios + ...
- vue音乐笔记_基于vue全家桶的移动端音乐web app
项目描述 这是一个基于 Vue2.x 和网易云音乐 API制作的移动端 web app 项目:由于是出于练习和实验的目的,因此并非是网易云音乐 app 的替代品,目前也没有涵盖全部的功能: 该项目主要 ...
- Vue 全家桶实现一个移动端酷狗音乐
Vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式. 技术栈: vue-router.eventBus.vuex.vue-aweso ...
最新文章
- keras实现 vgg16
- 小学计算机学情分析报告,小学信息技术_重点文字图说话教学设计学情分析教材分析课后反思...
- java maven导入导出_Java +EasyUI+SpringMvc实现Excle导入导出(上)
- fcpx插件:Beautiful Slideshow - 时尚简洁图片幻灯片开场
- 使用实体框架核心创建简单的审计跟踪
- deepshare android,DeepShare Android 集成
- AFNetworking到底做了什么?(二)
- 树莓派_树莓派初体验
- java .jar怎么打开_java打开jar文件的方法
- 小米路由器3c 虚拟服务器,小米路由器怎么设置_小米路由器3c设置教程-WIFI之家...
- c语言五子棋中怎么设置开局,五子棋教程:指定开局
- 空间解析几何与向量代数
- Python不是内部或外部命令的(完美解决)
- 员工转正申请书_员工转正申请书
- IJCAI 2019 | 通过交互提升机器翻译质量
- Cocos适配带虚拟导航栏手机(HUAWEI 荣耀6 Plus)
- 装部署VMware vSphere 5.5文档 (6-2) 为IBM x3850 X5服务器安装配置VMware ESXi
- 高楼扔鸡蛋问题-经典动态规划
- signed和unsigned的比较
- shopex php5.3 无法安装,php版本导致shopex4.8.5安装的问题_PHP教程