# vue-music-webapp

**Repository Path**: LenGxinLove/vue-music-webapp

## Basic Information

- **Project Name**: vue-music-webapp
- **Description**: vue版本的QQ音乐简易版
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2019-09-25
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: multimedia

**Tags**: None

## README

# Vue全家桶 简易版QQ音乐webApp

## 项目查看运行：
### 1. 克隆项目并安装依赖
```shell
$ git clone https://gitee.com/LenGxinLove/vue-music-webapp.git
$ cd vue-music-webapp
$ npm install
```
### 2. 运行api接口
```shell
$ cd ./server

$ node app
```
### 3.预览项目：
```shell
$ npm run serve
```

## 功能：
- [x] 推荐
  - [x] 专辑歌曲列表
  - [ ] 专辑详情
- [x] 排行榜
  - [ ] 排行榜详情
- [x] 歌手
  - [x] 字母筛选
  - [ ] 歌手详情
- [x] 搜索功能
  - [x] 热门搜索
  - [x] 自定义搜索
- [ ] 播放器
  - [x] 迷你播放器
  - [x] 歌曲列表
  - [x] 歌曲播放模式
  - [x] 上一首
  - [x] 下一首
  - [x] 暂停
  - [ ] 进度条
- [x] 换肤

## 功能演示：
### 1. 换肤
![](https://raw.githubusercontent.com/guixianleng/images-store/master/images/change-skin.gif)

### 2. 歌手列表
![](https://raw.githubusercontent.com/guixianleng/images-store/master/images/vue-singer.gif)

### 3. 搜索
![](https://raw.githubusercontent.com/guixianleng/images-store/master/images/vue-search.gif)

## 功能实现介绍：

### 1. 换肤功能
换肤是`基于css自定义变量`来实现的

css自定义变量拥有像less/sass那种定义变量并使用变量的能力，声明变量的时候，变量名前面要加两根连词线（--），在使用的时候只需要使用var()来访问即可
```css
@import url('./variable.less');
body {
  --theme-color: @color-theme;
  --theme-bg-color: @color-theme;
  --bg-color: @background-color;
  --shortcut-color: @background-shortcut-color;
  --text-color: @text-color;
}
```
如果要局部使用，只需要将变量定义在元素选择器内部即可。具体使用详见[使用CSS变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)

使用 `css 自定义变量` 的好处就是我们可以使用 `js` 来改变这个变量：
- document.body.style.setProperty('--primary', '#31C27C') --> 设置变量
- document.body.style.getPropertyValue('--primary') --> 获取变量
- document.body.style.removeProperty('--primary') --> 删除变量

```js
// 换肤
document.body.style.setProperty('--theme-color', skin.name === '炫酷黑' ? '#B82525' : skin.color)
document.body.style.setProperty('--theme-bg-color', skin.color)
document.body.style.setProperty('--bg-color', skin.name === '炫酷黑' ? skin.color : '#fff')
document.body.style.setProperty('--shortcut-color', skin.name === '炫酷黑' ? '#333' : '#f2f3f4')
document.body.style.setProperty('--text-color', skin.name === '炫酷黑' ? '#FFF' : '#333')
```

### 2. better-scroll移动端scroll神器
```js
<template>
  <div ref='scroll' class="scroll-view">
    <div>
      <Loading :show="downLoading" />
      <slot></slot>
      <Loading :show="upLoading" />
    </div>
  </div>
</template>
```
```js
<script>
import BScroll from 'better-scroll'
import Loading from 'baseUI/Loading'
// import { debounce } from 'utils'

export default {
  name: 'Scroll',
  components: {
    Loading
  },
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: true
    },
    listenScroll: { // 监听滚动事件
      type: Boolean,
      default: false
    },
    pullUp: { // 开启上拉事件
      type: Boolean,
      default: false
    },
    pullDown: { // 开启下拉事件
      type: Boolean,
      default: false
    },
    bounceTop: { // 允许下拉
      type: Boolean,
      default: true
    },
    bounceBottom: { // 允许上拉
      type: Boolean,
      default: true
    },
    upLoading: { // 开启下拉loading
      type: Boolean,
      default: false
    },
    downLoading: { // 开启上拉loading
      type: Boolean,
      default: false
    },
    refreshDelay: {
      type: Number,
      default: 20
    }
  },
  mounted () {
    this._initScroll()
  },
  methods: {
    _initScroll () {
      // Options 参数
      const { probeType, click, bounceTop, bounceBottom } = this.$props
      // Events 事件
      const { listenScroll, pullUp, pullDown } = this.$props

      if (!this.$refs.scroll) return
      this.bScroll = new BScroll(this.$refs.scroll, {
        probeType: probeType,
        click: click,
        stopPropagation: true,
        // 是否启用上下拉效果
        bounce: {
          top: bounceTop,
          bottom: bounceBottom
        }
      })
      // 监听滚动事件
      if (listenScroll) {
        this.bScroll.on('scroll', pos => {
          this.$emit('scroll', pos)
        })
      }
      // 触底事件
      if (pullUp) {
        this.bScroll.on('scrollEnd', () => {
          if (this.bScroll.y <= (this.bScroll.maxScrollY + 50)) {
            // debounce(() => {
            //   this.$emit('pullUp')
            // }, 200)
            this.$emit('pullUp')
          }
        })
      }
      // 上拉事件
      if (pullDown) {
        this.bScroll.on('touchEnd', (pos) => {
          if (pos.y > 50) {
            // debounce(() => {
            //   this.$emit('pullDown')
            // }, 200)
            this.$emit('pullDown')
          }
        })
      }
    },
    refresh () {
      this.bScroll && this.bScroll.refresh()
    },
    scrollTo () {
      this.bScroll && this.bScroll.scrollTo.apply(this.bScroll, arguments)
    },
    scrollToElement () {
      this.bScroll && this.bScroll.scrollToElement.apply(this.bScroll, arguments)
    }
  },
  watch: {
    data () {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style lang="less">
  .scroll-view {
    height: 100%;
    overflow: hidden;
  }
</style>
```

### 3. Animate.css动画库引入使用
```shell
 yarn add animate.css
```
在`main.js`引入
```js
import animated from 'animate.css'

Vue.use(animated)
```
页面使用示例：
```html
<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div class="loading" v-if="show">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <span>{{title}}</span>
    </div>
  </transition>
</template>
```
*注意*：不要忘记`v-if`，不然看不出效果的哦！

### 5. loading加载动画
```js
<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div class="loading" v-if="show">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <span>{{title}}</span>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Loading',
  props: {
    title: {
      type: String,
      default: '拼命加载中...'
    },
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
@import "~assets/style/variable";
.loading {
  height: 10px;
  width: 120px;
  margin: auto;
  text-align: center;
  font-size: 10px;
  padding: 10px 0;
  > div {
    display: inline-block;
    background-color: var(--theme-bg-color);
    height: 100%;
    width: 2px;
    margin-right: 4px;
    animation: Dance 1s infinite;
    &:nth-child(2) {
      animation-delay: -0.4s;
    }
    &:nth-child(3) {
      animation-delay: -0.6s;
    }
    &:nth-child(4) {
      animation-delay: -0.5s;
    }
    &:nth-child(5) {
      animation-delay: -0.2s;
    }
  }
}

@keyframes Dance {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    transform-origin: center 100%;
  }
  20% {
    transform: scaleY(1.2);
  }
}
</style>

```

### 6. 歌词滚动
使用的是`lyric-parser`插件，
- 插件Api
- 播放歌词 play()
- 暂停歌词 stop()
- 歌词跳转 seek(startTime)
- 切换歌词播放/暂停状态 togglePlay()
```js
import Lyric from 'lyric-parser'
<script>
export default {
  data () {
    return {
      currentLyric: null, // 歌词
      currentLineNum: 0 // 词行
    }
  },
  methods: {
    // 获取歌词
    getLyric () {
      api.getLyric().then(lyric => {
        ...
        this.currentLyric = new Lyric(lyric, this.handleLyric)
        ...
      })
    },
    // Lyric插件的回调
    handleLyric ({ lineNum, txt }) {
      console.log('歌词', lineNum, txt)
      this.currentLineNum = lineNum
      if (lineNum > 5) {
        let lineEl = this.$refs.lyricLine[lineNum - 5]
        this.$refs.lyricList.scrollToElement(lineEl, 1000) // 滚动到元素
      } else {
        this.$refs.lyricList.scrollTo(0, 0, 1000) // 滚动到顶部
      }
    }
  }
}
</script>
```