Skip to content

ajdcdy/vue-music

 
 

Repository files navigation

imooc-music

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Vue-开发移动端音乐WebApp

2-2

vue init webpack imooc-music

webpack.base.conf.js别名配置

使用后在main.js直接引入

import 'common/scss/index.scss'

context: path.resolve(__dirname, '..', dir),
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'src': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'api': resolve('src/api'),
      'base': resolve('src/base'),
    }
  },

es6转义

npm install babel-runtime --save

移动端点击300ms延迟

cnpm install fastclick --save

补丁,es6转义

cnpm install babel-polyfill --save-dev

3-2

router, tab

4-1

后端数据

chrome 工具使用

从qq音乐抓取数据

https://m.y.qq.com/ https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

4-2

jsonp原理:

动态创建script标签,没有同源限制,可以跨域,script src地址指向第三方的API网址 并提供一个回调函数来接收数据,第三方产生的响应为json数据的包装 浏览器会调用callback函数,并传递解析后json对象作为参数。 本站脚本可在callback函数里处理所传入的数据。

install jsonp

cnpm install jsonp --save

jsonp.js 封装

4-3

cnpm install axios --save

轮播图数据抓取

recommend.js 抓取数据函数

config.js 配置参数, qq音乐里面定义好的数据, fcg

发送jsonp请求

4-4, 4-5, 4-6

轮播图组件

cnpm install [email protected] --save

4-7

歌单数据接口

4-8

介绍和后端接口代理

ajax库axios,发起HTTPRequest

cnpm install axios --save

1.修改config目录下的index.js文件

修改host

/config/index.js

host: '0.0.0.0',

2.修改/build/webpack.dev.conf.js

异步定义后端接口

3. recommend.js -> getDiscList 调用后端接口

4-9

歌单列表组件

4-10

scroll组件

4-11

防止轮播图延迟加载,导致高度缺失

4-12

图片懒加载

cnpm install vue-lazyload --save

class="needsclick"

4-13

loading

5-1, 5-2

singer 后端接口

5-3

歌手数据

https://c.y.qq.com/v8/fcg-bin/v8.fcg?channel=singer&page=list&key=all_all_all&pagesize=100&pagenum=1&g_tk=295327561&jsonpCallback=GetSingerListCallback&loginUin=583520052&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0

singer 数据处理

5-4

singer.vue 界面实现

5-5, 5-6, 5-7, 5-8

listivew.vue 右侧滚动

5-9

fixtitle

5-10****

区块切换时,fixtitle有顶上去的效果

loading

6-1

introduce

6-2

子路由跳转到singer-detail bug

6-3, 6-4

Vuex

cnpm install vuex --save

6-5, 6-7

歌手数据

6-8

music-list 传入数据

6-9

列表数据

6-10, 6-11, 6-12

滚动效果

6-13

不同浏览器css的配置 bug!

6-14

返回按钮,加载效果

7-1

introduce

7-2

vuex数据操作定义

7-3

vuex的具体使用

7-4

播放器基本设置

7-5, 7-6, 7-7

动画效果

不同浏览器css的配置 bug!

动画

cnpm install create-keyframe-animation --save

7-8, 7-9, 7-10

歌曲控件,播放暂停,前进后退,控件失效

7-11

获取歌曲播放时间

7-12, 7-13, 7-14

不同浏览器css的配置

歌曲进度条, 可以拖动

7-15

mini 播放器环形进度条

svg

7-16, 7-17, 7-18

播放模式改变,播放列表改变

7-19

抓取歌词数据:

qq音乐播放歌曲界面 -> chrome network -> js fcg preview

点击fcg就可以在chrome里显示url

(api/song.js) 1: 前端调用,前台定义代理地址给后台

(webpack.dev.conf.js) 2: 后端绕过qq音乐限制,输出请求内容出去

(common/js/song.js) 3: 前端调用后端的输出内容

(player.vue) 4: 组件里面使用输出内容

7-20

播放器歌词数据解析

base64解码

cnpm install js-base64 --save

视频作者编写, 歌词解析, 每执行到时间点时都执行回调函数

cnpm install lyric-parser

7-21

歌词滚动

7-22, 7-23

歌词界面和唱片界面能左右切换

7-24

bug fix

7-25

mixin.js: 公共代码

设置mini播放器的正确位置显示

8-1

歌单详情页Vuex数据通讯

8-2

歌单详情页数据抓取

(api/recommend) 1:

8-3

歌单详情页数据应用

bug! jp1 is not defined !

About

慕课网-Vue 2.0开发企业级移动端音乐Web APP(学习笔记)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 62.9%
  • JavaScript 34.4%
  • CSS 2.5%
  • HTML 0.2%