Vue.js高级实战开发移动端音乐App

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第一章 课程内容介绍

Vue.js高级实战开发移动端音乐App

第一章 课程内容介绍

1-1导学.mp4

做什么？
开发一个媳美原生的移动端音乐APP
哪些功能？
歌手页面、歌手详情页、播放器内核搜索页面、歌曲列表页面等
技术栈？
Vue全家桶

按照App的功能依次开发页面组件
对于可复用的组件会抽象出基础组件
手写每一行JS代码，CSS部分弱化

课程收获
了解一个中度复杂规模的应用开发
掌握Vue.js的高级应用
学会组件化、模块化的开发方式
了解类原生App体验交互的实现原理

http://coding.imooc.com/lesson/107.html#mid=4307 2017 6 12

1-2课前必读（源码获取方式）.mp4

https://github.com/ustbhuangyi/vue-music 源代码

280309453@qq.com

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第二章 项目准备工作

第二章 项目准备工作

2-1需求分析.mp4

2-2Vue-cli脚手架安装.mp4

2-3项目目录介绍及图标字体丶公共样式等资源准备.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第三章页面骨架开发

第三章页面骨架开发

3-1页面入口+header组件的编写.mp4

fastclick 解决 移动端 3ms 点击延迟 问题

babel-polyfill

3-2路由配置+顶导组件开发.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第四章推荐页面开发

第四章推荐页面开发

4-1页面简介+轮播图数据分析.mp4

https://m.y.qq.com

https://i.y.qq.com/n2/m/

4-2JSONP原理介绍+P封装.mp4

https://github.com/webmodules/jsonp

4-3jsonp的应用+轮播图数据抓取.mp4

正确0 大厂

4-4轮播组件实现（上）.mp4

this.$refs.sliderGroup.children 子元素

this.$refs.slider.clientWidth 宽度

4-5轮播图组件实现（中）.mp4

4-6轮播图组件实现（下）.mp4

4-7歌单数据接口分析.mp4

destroyed 清除 定时器 内存释放 好编程习惯

4-8介绍和后端接口代理.mp4

var apiRoutes = express.Router()
// 欺骗手段 它网站发  其实是自己
apiRoutes.get('/getDiscList', function (req, res) {var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'axios.get(url, {headers: {referer: 'https://c.y.qq.com/',host: 'c.y.qq.com'},params: req.query}).then((response) => {res.json(response.data)}).catch((e) => {console.log(e)})
})

后端代理

4-9歌单列表组件开发和数据的应用.mp4

flex

4-10SCROLL组件的抽象和应用（上）.mp4

dom 插件BScroll

4-11roll组件的抽象和应用（下）.mp4

@load 标志位flag

4-12-lazyload懒加载插件介绍和应用.mp4

https://github.com/hilangjw/vue-lazyload 图片需要加载 懒加载

:src= => v-lazy=

4-13loading基础组件的开发和应用.mp4

*.length 有没有时

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第五章歌手页面开发

第五章歌手页面开发

5-1歌手页面布局和设计讲解.mp4

5-2歌手数据接口抓取.mp4

Object.assign({},{a:1},{b:2}) 合并对象

5-3歌手数据处理和inger类的封装.mp4

arr.sort(fn)排序  charCodeAt(0)

5-4基础组件的开发和应用-滚动列表实现.mp4

5-5listview基础组件开发和应用-右侧快速入口实现（1）.mp4

@touchstart @touchmove.stop.prevent触摸滚动

listview.vue

不关心变化 不在 data数据

5-6listview基础组件的开发和应用-右侧快速入口实现（2）.mp4

_fn 私有方法放下面

固定联动 滑动联动 高亮 难点

5-7listview基础组件的开发和应用-右侧快速入口实现（3）.mp4

5-8基础组件的开发和应用-右侧快速入口实现（4）.mp4

5-9listview基础组件的开发和应用-滚动固定标题实现（上）.mp4

5-10listview基础组件的开发和应用-滚动固定标题实现（下）.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第六章歌手详情 页开发

第六章歌手详情 页开发

6-1歌手详情页布局和设计详解.mp4

6-2子路由配置以及转场动画实现.mp4

6-3初识Vuex.mp4

6-4Vuex初始化及歌手数据的配置.mp4

const debug=process.env.NODE_ENV!=='production'
import createLogger from 'vuex/dist/logger'
export defualt new Vuex.Store({actions,getters,state,strict:debug, //严格模式开启 耗性能 开发使用plugins:debug?[createLogger()]:[], //使用插件控制台输出什么
})

6-5歌手详情数据抓取.mp4

边界处理

6-6歌手详情数据处理和Song类的封装（上）.mp4

类集中维护 可扩展

6-7歌手详情数据处理和Song类的封装（下）.mp4

地址重新抓取

6-8music-list组件开发（1）.mp4

6-9music-list组件开发（2）.mp4

6-10music-list组件开发（3）.mp4

6-12music-list组件开发（5）.mp4

图层 滚动 偏移位

backdrop-filter:blur(3px)高斯模糊

6-13music-lis组件开发（6）.mp4

6-14music-list组件开发（7）.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第七章播放器内置组件开发

第七章播放器内置组件开发

7-1播放器页面设计详解.mp4

7-2播放器Vuex数据设计.mp4

[xx](){}

7-3播放器Vuex的相关应用.mp4

业务代码写在components目录下

7-4播放器基础样式及歌曲数据的应用.mp4

7-5播放器展开收起动画（上）.mp4

7-6播放器展开收起动画（中）.mp4

transtion vue 贝塞尔曲线

动画钩子

https://github.com/HenrikJoreteg/create-keyframe-animation css3动画库

7-7播放器展开收起动画（下）.mp4

player.vue

window.innerWidth
window.innerHeight

7-8播放器歌曲播放功能实现.mp4

audio标签 @canplay事件 @error事件 标志位 快速点击

图标字体库

7-9播放器歌曲前进后退功能实现（上）.mp4

7-10播放器歌曲前进后退功能实现（下）.mp4

7-11播放器播放时间获取和更新.mp4

audio标签 派发事件@timeupdate

int | 0 向下取整
函数返回
{{fun(int)}}
fun(){return xx;
}

7-12播放器Progress-bar进度条组件实现（上）.mp4

offset偏移 watch改变

7-13播放器progress-bar进度条组件实现（中）.mp4

触摸事件
@touchstart
@touchmove
@touchend
e.touches[0].pageX第一个手指位置

7-14播放器progress-bar进度条组件实现（下）.mp4

7-15播放器progress-circle圆形进度条组件实现.mp4

svg标签----circle-描边

7-16播放器模式切换功能实现（上）.mp4

7-17播放器模式切换功能实现（中）.mp4

findIndex

7-18播放器模式切换功能实现（下）.mp4

7-19 少了

7-199播放器歌词数据抓取.mp4

接口保护 绕过

改headers.referer和host

7-20播放器歌词数据解析.mp4

base64字符串

https://github.com/dankogai/js-base64 base64解码

https://github.com/ustbhuangyi/lyric-parser 歌词库

7-21播放器歌词滚动列表实现.mp4

7-22播放器歌词左右滑动实现（上）.mp4

7-23播放器歌词左右滑动实现（下）.mp4

7-24播放器歌词剩余功能实现.mp4

7-25播放器底部播放器适配+mixin的应用.mp4

mixin vue

throw new Error('xx')

动手敲代码

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第八章歌单页面开发

第八章歌单页面开发

8-1歌单详情页布局介绍Vuex实现路由数据通讯.mp4

8-2歌单详情页数据抓取.mp4

8-3歌单详情页数据的处理和应用.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第九章排行榜及详情页开发

第九章排行榜及详情页开发

9-1排行榜页面布局介绍给排行榜数据抓取.mp4

9-2排行页排行榜数据应用.mp4

9-3榜单详情也布局介绍及Vuex实现路由数据通讯.mp4

9-4榜单详情页数据抓取和应用.mp4

ajax不能跨域 jsonp可以

www.bejson.com 在线格式 不是标准json 不影响使用

9-5带排行的song-list组件扩展和应用.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十章搜索页面开发

第十章搜索页面开发

10-1搜索页面页面布局和功能介绍.mp4

10-2搜索页面search-box组件开发.mp4

this.$watch('xx',()=>{})
====
watch:{xx(){}
}    

10-3搜索页面热门搜索数据抓取和应用.mp4

10-4搜索yemiansuggest组件开发（1）.mp4

语义化强 常量

10-5搜索页面suggest组件开发（2）.mp4

10-6搜索页面suggest组件开发（3）.mp4

xx.splice(index,0,song) 替换

10-7搜索页面suggest组件开发（4）.mp4

10-8搜索页面suggest组件开发（5）.mp4

10-9搜索页面suggest组件开发（6）.mp4

10-10搜索页面suggest组件开发（7）.mp4

10-11搜索页面搜索结果保存功能实现（1）.mp4

10-12搜索页面搜索结果保存功能实现（2）.mp4

https://github.com/ustbhuangyi/storage 开源localStorage库

内部key 双下划线 search

10-13搜索页面搜索结果保存功能实现（3）.mp4

10-14搜索页面search-list组件功能实现（上）.mp4

10-18搜索页面剩余功能实现（下）.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十章 补缺少的章节

第十章 补缺少的章节

10-1.mp4

10-2

10-3

10-4

10-5-10-14

10-15

10-16.mp4

10-17.mp4

10-18

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十一章 歌曲列表组件

第十一章 歌曲列表组件

11-1歌曲列表组件布局和功能介绍.mp4

11-2歌曲列表组件显示和隐藏的控制.mp4

@click.stop 单独使用也可以 阻止冒泡

11-3歌曲列表组件播放列表的实现（1）.mp4

11-4歌曲列表组件播放列表的实现（2）.mp4

ref 引用

11-5歌曲列表组件播放列表的实现（3）.mp4

11-6歌曲列表组件播放列表的实现（4）.mp4

transition-group 里面 tag='ul' 变成ul 子元素有:key="item.id"
mixins 米醒

11-7歌曲列表组件播放列表的实现（5）.mp4

11-8歌曲列表组件playerMixin的抽象（上）.mp4

11-9歌曲列表组件playerMixin的抽象（下）.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十一章 补缺少的章节

第十一章 补缺少的章节

11-1.mp4--------11-9

11-10.mp4

11-11.mp4

11-12.mp4

基础组件不实现业务逻辑

11-13.mp4

11-14.mp4

11-15.mp4

11-16.mp4

11-17.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十二章 用户中心页面

第十二章 用户中心页面

12-1.mp4

12-2.mp4

12-3.mp4

12-4.mp4

12-5.mp4

12-6.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十三章 编译打包

第十三章 编译打包

13-1.mp4

13-2.mp4

13-3.mp4

vue2 路由懒加载
https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

13-4.mp4

F:\Vue教程\Vue高级实战-移动端音乐WebApp\第十四章 课程回顾

第十四章 课程回顾

14完结.mp4

https://github.com/WechatFE/vConsole 移动端调试 eslint不使用报错 排除

抓包工具 Charles

用到的技术

fastclick 解决 移动端 3ms 点击延迟 问题 
babel-polyfill
https://github.com/webmodules/jsonp
https://github.com/ustbhuangyi/better-scroll  也可做轮播图
https://github.com/mzabriskie/axios
小程序插件	左右联动(固定高亮触摸)
backdrop-filter高斯模糊
https://github.com/hilangjw/vue-lazyload  图片需要加载 懒加载
https://github.com/HenrikJoreteg/create-keyframe-animation css3动画库
https://github.com/dankogai/js-base64 base64解码
https://github.com/ustbhuangyi/lyric-parser 歌词库
https://github.com/ustbhuangyi/storage 开源localStorage库
vue2 路由懒加载
https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
https://github.com/WechatFE/vConsole 移动端调试
抓包工具 Charles