Vue2.0开发移动端音乐app

1、header组件的开发

1）样式

2）先引用组件m-header组件

2）除了css样式以外

2、路由及导航栏（css忽略）

1）配置路由，在index.js里，一共有4个路由组件，引用及挂载。

2）导航栏的制作以及引用

3、封装jsonp

1）先添加依赖以及安装

2）建立一个jsonp.js然后完场url的拼接和jsonp的封装

4、recommend组件的制作(slider组件的自作)

1）样式

yan

2）获取轮播图数据

3）建立slider组件

实现途径：使用better-scroll插件来实现滚动原理

实现原理：1、先计算整个slider-group的总宽度，以及给每一个子元素遍历样式，addClass是自己封装的基本js函数。用于class的添加

2、应用better-scroll插件

3、添加按钮和按钮的active样式（定义一个currentPageIndex数据，用于判断是否添加active样式）

4、利用索引关联页面与按钮，关联的时机实在滚动结束后

5、增加定时器，使其自动进行页面跳转，在滑动结束后，继续自动播放，在滑动开始前清除一遍计时器。

6、当视口发生改变时，重新计算图片宽度及slider-group宽度

7、在组件激活，组件停用，实例销毁之前停用定时器

5、获取歌单数据（axios应用）

6、歌单制作（css不展示）

7、scroll组件的制作

1、template模块，用了slot插槽，可以忘里面添加内容

2、先定义几个可能要传入的数据

8、loading组件的制作

1、template模板

2、定义一个可能传入的props

9、歌手页面的数据获取

因为歌手页面数据为jsonp的格式，所以用jsonp来获取

10、拆分和合并所需的数据

1）定义一个_normalList方法，把数据整理成每个具有title数据格式的列表，然后再将数据做排序得到便于遍历的数据列表

2）歌手页面数据的获取

11、listView组件的页面部分编辑

1）页面样子

2）template部分，在最外围引用了scroll组件

3）引用歌手的数据

12、listview的shortcut侧栏的编辑

1）template部分

2）引用数据的计算

13、左右联动的实现

实现这部分的主要逻辑分两块

1）视口栏改变，影响shortcut的样式

⑴先在滚动事件中监听滚动事件，实时输出scrollY

⑵在将列表的高度计算出来，每一块的上下限，以便与计算scrollY落在哪个区域

⑶判断scrollY落在哪个区域，并对其做边界处理，在设置一个：class来判断是否高亮

2）shortcut上面移动，视口相应发生变化

⑴给shortcut部分加上touchstart事件和touchmove事件

⑵给两个事件添加计算方法，第一个是touchstart的方法，利用根据索引值的变化来控制页面的跳转，利用scroll中的scrollToElement方法

⑶第二个是touchmove的方法，第一个的方法。计算出shortcut的移动变化的索引值对应到视口上的宽度，来计算move所需滚动的距离

⑷滚动边界条件的控制

14、fixtitle的实现

1）fixtitle的样子

2）数据的选取，利用计算属性计算获得

3）边界条件的控制以及偏移动画

偏移动画的样子

15、获取歌手详情页的数据及处理

1）采用二级路由的方式形成跳转

⑴创建组件singer-datail

⑵在router的index.js文件下

⑶在singer组件中应用router

⑷抓取listview中的数据，派发点击事件

⑸在singer中接受点击事件并产生跳转

2）用vuex进行数据的管理

⑴安装vuex

⑵store的文件布局

⑶配置各个文件，此例子为配置singer的数据

index.js

mutations-type.js

mutation.js

getter.js

state.js

⑷在main.js中引用

3）song数据的整理

⑴先获取singer的数据，因为song的数据是根据跳转的singerID来的

vuex的语法糖

获取歌手数据

在singer-details组件中获取数据

⑵整理想要的数据格式

定义一个song的类

⑶获取数据

获得song数据

16、组件muisc-list开发

1）页面样式

2)路由回退功能

template

methods

3）背景的制作

⑴背景图片的获取

⑵playBtn的制作

⑶还有覆盖层的制作

4）滚动块的制作形成主体内容块

⑴引用scroll组件

⑵获取滚动的距离

定义数据scrollY

定义探针和滚动监听事件

获取滚动的纵坐标

⑶当滚动发生时，layer背景层跟随滚动

效果图

边界条件的处理

17、song-list组件的开发

1）遍历数据

18、内置播放器组件

⑴播放器的样式

展开状态

缩小状态

⑵给vuex添加要管理的数据

getter

mutation-types

actions

mutations

⑶歌单数据的获取

⑷歌单数据的应用（略）

⑸缩放按钮的设置

⑹缩放动画

⑺播放暂停按钮

根据playing来判断audio的播放和暂停

绑定一个点击事件

⑻前进后退功能

19、进度条组件

⑴传入rate计算播放进度

⑵绑定3个事件

⑶进度条点击事件以及其他封装的方法