全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP
来源:互联网 发布:sql 去掉重复行 编辑:程序博客网 时间:2024/06/05 20:23
CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP
学习要趁早,点滴记录,学习就是进步!
随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了。对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料.
CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP
下载地址:http://pan.baidu.com/s/1jI05TPW
基于 Vue 全家桶 (2.x) 制作的移动端音乐 WebApp ,一个媲美原生的移动端音乐 App,项目完整、功能完备、UI美观、交互一流。
学会能直接用在工作中的组件
13个
基础组件
1.confirm:确认对话框组件
2.listview:通讯录列表组件
3.loading:加载态组件
4.no-result:无结果展示组件
5.progress-bar:进度条组件
6.progress-circle:圆形进度条组件
7.scroll:移动端滚动组件
8.search-box:搜索框组件
9.search-list:搜索列表组件
10.slider:轮播图组件
11.switches:开关切换组件
12.top-tip:顶部消息提示组件
13. song-list:歌曲列表组件
15个
业务组件
1.add-song:添加歌曲到列表组件
2.disc:歌单详情页组件
3.m-header:页面头部组件
4.music-list:歌曲列表页面组件
5.player:播放器内核组件
6.playlist:播放列表组件
7.rank:排行榜页面组件
9.search:搜索页面组件
8.recommend:推荐页面组件
10.singer:歌手页面组件
11.singer-detail:歌手详情页组件
12.suggest:搜索提示列表组件
13.tab:顶部导航栏组件
14.top-list:排行榜详情页组件
15.user-center:用户中心页组件
技术栈
【前端】
Vue
:用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件vue-router
:为单页面应用提供的路由系统,项目上线前使用了Lazy Loading Routes
技术来实现异步加载优化性能vuex
:Vue 集中状态管理,在多个组件共享某些状态时非常便捷vue-lazyload
:第三方图片懒加载库,优化页面加载速度better-scroll
:iscroll 的优化版,使移动端滑动体验更加流畅Sass(Scss)
:css 预编译处理器ES6
:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用
【后端】
Node.js
:利用 Express 起一个本地测试服务器jsonp
:服务端通讯。抓取 QQ音乐(移动端)数据axios
:服务端通讯。结合 Node.js 代理后端请求,抓取 QQ音乐(PC端)数据
【自动化构建及其他工具】
vue-cli
:Vue 脚手架工具,快速初始化项目代码eslint
:代码风格检查工具,规范代码书写vConsole
:移动端调试工具,在移动端输出日志
收获
- 总结了一套 Vue 通用组件,可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件
- 总结了一套常用的 SCSS mixin 库
- 总结了一套常用的 JS 工具函数库
- 体会到组件化、模块化开发带来的便捷
- 体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例
- 学会利用
js
编写过渡效果及动画效果制作良好的用户交互体验
TODO
- 歌曲数据全部来自 QQ 音乐,接口改变了可能就要修改
jsonp
和axios
代码 - 由于项目的应用级状态不多(10个左右),所以就没有将
action
、mutation
、和getters
分割到单独的文件。但这样架构并不便于维护
实现细节
主要页面:播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。
核心页面:播放器内核页
组件树
# clone the repo into your disk.$ git clone https://github.com/bxm0927/music-app.git# install dependencies$ npm install# serve with hot reload at localhost:8080$ npm run dev# build for production with minification$ npm run build
推荐页
上部分是一个轮播图组件,使用第三方库 better-scroll
辅助实现,使用 jsonp
抓取 QQ音乐(移动端)数据
下部分是一个歌单推荐列表,使用 axios + Node.js
代理后端请求,绕过主机限制 (伪造 headers),抓取 QQ音乐(PC端)数据
歌单推荐列表图片,使用图片懒加载技术 vue-lazyload
,优化页面加载速度
为了更好的用户体验,当数据未请求到时,显示 loading
组件
推荐页 -> 歌单详情页
由于歌手的状态多且杂,这里使用 vuex
集中管理歌手状态
这个组件更加注重 UX,做了很多类原生 APP 动画,如下拉图片放大、跟随推动、ios 渐进增强的高斯模糊效果 backdrop-filter
等
歌手页
左右联动是这个组件的难点
左侧是一个歌手列表,使用 jsonp
抓取 QQ音乐(PC端)歌手数据并重组 JSON 数据结构
列表图片使用懒加载技术 vue-lazyload
,优化页面加载速度
右侧是一个字母列表,与左侧歌手列表联动,滚动固定标题实现
歌手页 -> 歌手详情页
复用歌单详情页,只改变传入的参数,数据同样爬取自 QQ音乐
播放器内核页
核心组件。用 vuex
管理各种播放时状态,播放、暂停等功能调用 audio API
播放器可以最大化和最小化
中部唱片动画使用第三方 JS 动画库 create-keyframe-animation
实现
底部操作区图标使用 iconfonts
。
抽象了一个横向进度条组件和一个圆形进度条组件,横向进度条可以拖动小球和点击进度条来改变播放进度,圆形进度条组件使用 SVG <circle>
元素
播放模式有:顺序播放、单曲循环、随机播放,原理是调整歌单列表数组
歌词的爬取利用 axios
代理后端请求,伪造 headers
来实现,先将歌词 jsonp 格式转换为 json 格式,再使用第三方库 js-base64
进行 Base64 解码操作,最后再使用第三方库 lyric-parser
对歌词进行格式化
实现了侧滑显示歌词、歌词跟随进度条高亮等交互效果
增加了当前播放列表组件,可在其中加入/删除歌曲
排行页
普通组件,没什么好说的
排行页 -> 歌单详情页
复用歌单详情页,没什么好说的
搜索页
抓数据,写组件,另外,根据抓取的数据特征,做了上拉刷新的功能
考虑到数据量大且频繁的问题,对请求做了节流处理
考虑到移动端键盘占屏的问题,对滚动前的 input
做了 blur()
操作
对搜索历史进行了 localstorage
缓存,清空搜索历史时使用了改装过的 confirm
组件
支持将搜索的歌曲添加到播放列表
个人中心
将 localstorage
中 “我的收藏” 和 “最近播放” 反映到界面上
其他
此应用的全部数据来自 QQ音乐,推荐页的歌单列表及歌词是利用 axios
结合 node.js
代理后端请求抓取的。
全局通用的应用级状态使用 vuex
集中管理
全局引入 fastclick
库,消除 click 移动浏览器300ms延迟
页面是响应式的,适配常见的移动端屏幕,采用 flex
布局
- 全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP
- Vue 2.0 高级实战-开发移动端音乐WebApp
- Vue 2.0 高级实战-开发移动端音乐WebApp
- Vue 2.0 实战之仿Eleme WebApp SPA(学习)
- 用vue实现简易的音乐webApp
- WebApp开发实战视频教程
- Vue.js 2.0和Cordova开发webApp环境搭建
- Vue.js 2.0和Cordova开发webApp环境搭建
- 独立开发音乐播放器
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- Vue开发实战
- vue实战开发原理
- 基于Vue移动音乐webapp跨域获取QQ音乐歌单接口
- Cordova webapp实战开发:(1)为什么选择 Cordova webapp?
- 独立开发音乐播放器2
- 独立开发音乐播放器3
- maven项目中pom文件报错xx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径)的解决
- mySQL基本语句
- NOI2014 魔法森林 LCT维护MST
- FZU 2238 Daxia & Wzc's problem【规律+lucas】
- js获取图片宽高的方法
- 全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP
- 【未写完】微信小程序做的步骤
- 序时簿、编辑页 增加合计行
- linux 后台运行jar
- 算法系列(12)LeetCode292 Nim Game
- 能让你少写1000行代码的20个正则表达式
- idea来搭建Springboot项目
- 第一次发帖
- MySQL与JDBC