网易云音乐接口+vue全家桶开发一款移动端音乐webApp-白红宇

网易云音乐接口+vue全家桶开发一款移动端音乐webApp

阅读量：6148 次

发布时间：2019-06-21

本文共 2219 字，大约阅读时间需要 7 分钟。

项目介绍

网易云音乐接口+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进行管理

动画

头部下坠和底部的上浮


        /*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同理