脚本宝典收集整理的这篇文章主要介绍了网易云音乐接口+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 // 公共样式
const view = (path, name) => () => import(`@/components/${path}${name}`)// 路由按需加载
//这边用的是vue异步组件的方式实现路由的按需加载
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
大小播放器分别写了MiniPlayer.vue
和NormalPlayer.vue
两个组件,因为想要职责单一,就没有放在一起
动画
头部下坠和底部的上浮
<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的x,y轴上的距离
使用 create-keyframe-animation
进行一个css3
动画状态的注册
再利用transition的动画方法钩子
在enter
时run
动画,afterEnter
时清除动画 leave
同理
定义一个旋转的css
动画,在一个class
中进行调用,在play
的状态下给它addClss
,pause
时加上animation-play-state: paused
使用html5
的 audio
结合vuex
来进行播放器功能的实现,包括进度条,播放,暂停,上一曲,下一曲,播放模式等
mounted
的钩子里注册resize
和onload
监听,进行最外层rem基准的计算Access-Control-Allow-Origin
是请求头里的orgin
,所以建议clone
接口库到本地运行,github
中运行方式已作修改。以上是脚本宝典为你收集整理的网易云音乐接口+vue全家桶开发一款移动端音乐webApp全部内容,希望文章能够帮你解决网易云音乐接口+vue全家桶开发一款移动端音乐webApp所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。