码迷,mamicode.com
首页 > 移动开发 > 详细

Vue 实现的音乐项目 music app 知识点总结分享

时间:2018-06-14 11:36:30      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:bug   rank   改变   function   初始   webpack   轻松   +=   http   

其他

此应用的全部数据来自 QQ音乐,利用 axios 结合 node.js 代理后端请求抓取

全局通用的应用级状态使用 vuex 集中管理

全局引入 fastclick 库,消除 click 移动浏览器 300ms 延迟

页面是响应式的,适配常见的移动端屏幕,采用 flex 布局

疑难总结 & 小技巧

关于 Vue 知识 & 使用技巧

v-html 可以转义字符,处理特定接口很有用

watch 对象可以观测 属性 的变化

像这种父组件传达子组件的参数通常都是在data()里面定义的,为什么这里要放到created()定义,两者有什么区别呢?

因为这个变量不需要观测它的变化,因此不用定义在 data 里,这样也会对性能有所优化

不明白什么时候要把变量放在data()里,什么时候又不需要放 ?

需要监测这个数据变化的时候,放在 data() 里,会给数据添加 getter 和 setter

生命周期 钩子函数

生命周期钩子函数,比如 mounted 是先触发子组件的 mounted,再会触发父组件的 mounted,但是对于 created 钩子,又会先触发父组件,再触发子组件。

销毁计数器

如果组件有计数器,在组件销毁时期要记得清理,好习惯

对于 Vue 组件,this.$refs.xxx 拿到的是 Vue 实例,所以需要再通过 $el 拿到真实的 dom

关于 JS 知识 & 技巧

setTimeout(fn, 20)

一般来说 JS 线程执行完毕后一个 Tick 的时间约17ms内 DOM 就可以渲染完毕所以课程中 setTimeout(fn, 20) 是非常稳妥的写法

关于 webpack 知识 & 技巧

" ~ " 使 SCSS 可以使用 webpack 的相对路径

@import "~common/scss/mixin";
@import "~common/scss/variable";

babel-runtime 会在编译阶段把 es6 语法编译的代码打包到业务代码中,所以要放在dependencies里。

Fast Click 是一个简单、易用的库,专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时

为什么会存在延迟呢?

从触摸按钮到触发点击事件,移动端浏览器会等待接近300ms,原因是浏览器会等待以确定你是否执行双击事件

何时不需要使用

  1. FastClick 不会伴随监听任何桌面浏览器
  2. Android 系统中,在头部 meta 中设置 width=device-width 的Chrome32+ 浏览器不存在300ms 延时,所以,也不需要

<meta name="viewport" content="width=device-width, initial-scale=1">

  1. 同样的情况也适用于 Android设备(任何版本),在viewport 中设置 user-scalable=no,但这样就禁止缩放网页了
  2. IE11+ 浏览器中,你可以使用 touch-action: manipulation; 禁止通过双击来放大一些元素(比如:链接和按钮)。IE10可以使用 -ms-touch-action: manipulation

请求接口

jsonp:

XHR:

手写轮播图

利用 BScroll

BScroll 设置 loop 会自动 clone 两个轮播插在前后位置

如果轮播循环播放,是前后各加一个轮播图保证无缝切换,所以需要再加两个宽度

 

if (this.loop) {
  width += 2 * sliderWidth
}

初始化 dots 要在 BScroll 克隆插入两个轮播图之前

dots active状态 是通过判断 currentIndex 与 index 是否相等

currentIndex 更新是通过获取 scroll 当前 page,BScroll 提供了 api 方便调用

this.currentPageIndex = this.scroll.getCurrentPage().pageX

为了保证改变窗口大小依然正常轮播,监听窗口 resize 事件,重新渲染轮播图

window.addEventListener(‘resize‘, () => {
  if (!this.scroll || !this.scroll.enabled) return

  clearTimeout(this.resizeTimer)
  this.resizeTimer = setTimeout(() => {
    if (this.scroll.isInTransition) {
      this._onScrollEnd()
    } else {
      if (this.autoPlay) {
        this._play()
      }
    }
    this.refresh()
  }, 60)
})

在切换 tab 相当于 切换了 keep-alive 的组件
轮播会出问题,需要手动帮助执行,利用了 activated , deactivated 钩子函数

activated() {
  this.scroll.enable()
  let pageIndex = this.scroll.getCurrentPage().pageX
  this.scroll.goToPage(pageIndex, 0, 0)
  this.currentPageIndex = pageIndex
  if (this.autoPlay) {
    this._play()
  }
},
deactivated() {
  this.scroll.disable()
  clearTimeout(this.timer)
}

实测,首次打开网页并不会执行 activated,只有在之后切换 tab ,切回来才会执行

在组件销毁之前 beforeDestroy 销毁定时器是好习惯,keep-alive 因为是将组件缓存了,所以不会触发

beforeDestroy() {
  this.scroll.disable()
  clearTimeout(this.timer)
}

后端接口代理

简单设置一下 Referer, Host,让别人直接通过浏览器抓到你的接口
但是这种方式防不了后端代理的方式

前端 XHR 会有跨域限制,后端发送 http 请求则没有限制,因此可以伪造请求

axios 可以在浏览器端发送 XMLHttpRequest 请求,在服务器端发送 http 请求

(在项目编写阶段,可以将后端代理请求写在 webpack 的 dev 文件的 before 函数内)

before(app) {
  app.get(‘/api/getDiscList‘, function (req, res) {
    const 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) // axios 返回的数据在 response.data,要把数据透传到我们自定义的接口里面 res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  });
}

定义一个路由,get 到一个 /api/getDiscList 接口,通过 axios 伪造 headers,发送给QQ音乐服务器一个 http 请求,还有 param 参数。
得到服务端正确的响应,通过 res.json(response.data) 返回到浏览器端

另外 因为是 http 请求数据,是ajax,所以 format 参数要将原本接口的 jsonp 改为 json

大公司怎么防止被恶意代理呢?当你的访问量大的时候,出口ip会被查到获取封禁,还有一种就是参数验签,也就是请求人家的数据必须带一个签名参数,然后这个签名参数是很难拿到的这个正确的签名,从而达到保护数据的目的

当然,获取的数据并不能直接拿来用,需要做进一步的规格化,达到我们使用的要求,所以在这方面单独封装了一个 class 来处理这方面的数据,具体请看src/common/js/song.js

flex 布局,热门歌单推荐

左侧 icon 固定大小,flex: 0 0 60px

flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。后两个属性可选。

  1. flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
  2. flex-shrink 属性定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。
  3. flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

右侧 text 区块 自适应占据剩下的空间,并且内部也采用 flex,使用 flex-direction: column; justify-content: center; 来达到纵向居中排列

recommend 页面 利用 BScroll 滚动

Scroll 初始化但却没有滚动,是因为初始化时机不对,必须保证数据到来,DOM 成功渲染之后 再去进行初始化
可以使用父组件 给 Scrol组件传 :data 数据,Scroll 组件自己 watch 这个 data,有变化就立刻 refesh 滚动

新版本 BScroll 已经自己实现检测 DOM 变化,自动刷新,大部分场景下无需传 data 了

所以也就 无需监听 img 的 onload 事件 然后执行 滚动刷新 了

<img @load="loadImage" class="needsclick" :src="item.picUrl">
loadImage() {
  if (!this.checkloaded) {
    this.checkloaded = true
    this.$refs.scroll.refresh()
  }
}

歌手页面 数据重构

歌手页面的结构是 热门、 A-Z 的顺序排列,但抓取的接口数据只是 100条常见的歌手,并且是乱序的,但我们可以利用接口的 Findex 进行数据的重构

首先可以定义一个 map 结构

let map = {
  hot: {
    title: HOT_NAME,
    item: []
  }
}

接着遍历得到的数据,将前10条添加到热门 hot 里
然后查看每条的 Findex ,如果 map[Findex] 没有,创建 map[Findex] push 进新条目,如果 map[Findex] 有,则向其 push 进新条目

list.forEach((item, index) => {
  if (index < HOT_SINGER_LEN) {
    map.hot.item.push(new SingerFormat({
      id: item.Fsinger_mid,
      name: item.Fsinger_name,
    }))
  }
  const key = item.Findex
  if (!map[key]) {
    map[key] = {
      title: key,
      items: []
    }
  }
  map[key].items.push(new SingerFormat({
    id: item.Fsinger_mid,
    name: item.Fsinger_name
  }))
})

这样就得到了一个 符合我们基本预期的 map 结构,但是因为 map 是一个对象,数据是乱序的,Chrome 控制台在展示的时候会对 key 做排序,但实际上我们代码并没有做。

所以还要将其进行排序,这里会用到 数组的 sort 方法,所以我们要先把 map对象 转为 数组

let hot = []
let ret = []
let un = []
for (let key in map) {
  let val = map[key]
  if (val.title.match(/[a-zA-z]/)) {
    ret.push(val)
  } else if (val.title === HOT_NAME) {
    hot.push(val)
  } else {
    un.push(val)
  }
}
ret.sort((a, b) => {
  return a.title.charCodeAt(0) - b.title.charCodeAt(0)
})
return hot.concat(ret, un)

根据 title 字母的 Unicode 编码大小排序的(比如:‘A‘.charCodeAt(0)=65;‘B‘.charCodeAt(0)=66)然后就a,b,c,d...的顺序了

歌手页面

shortcut 定位

因为 shortcut 整体的高度是不确定的,所以采用的是 top:50% 之后,transform: translateY(-50%); 这样就能动态的根据内容高度而垂直居中

歌手页面 区块与锚点 的联动

点击或滑动 shortcut 不同的锚点 ,自动滚动至相应的标题列表

利用了 BScroll 的 api ,scrollToElement

  • scrollToElement 可以滚动至相应的 index 值的区块

第一次点击触碰 shortcut ,获取点击具体锚点的 index 值,记录触碰位置的 index ,利用 scrollToElement ,滚动至相应 index 的区块
而之后,滑动锚点实现滚动是利用 touchmove 事件,将两次触碰的的位置计算值变成 delta 差值:变成改变后的锚点区块 index 值,再将首次触碰的 index 值 + 改变的 delta 值,再利用 scrollToElement ,滚动至相应的区块

onShortcutTouchStart(e) {
  let anchorIndex = getData(e.target, ‘index‘)  // 获取 点击具体锚点的 index 值
  let firstTouch = e.touches[0]   // 第一次触碰的位置
  this.touch.y1 = firstTouch.pageY  // 保存 第一次触碰的位置的Y值
  this.touch.anchorIndex = anchorIndex  // 保存 第一次触碰时的锚点 index 值
  this._scrollTo(anchorIndex)
},
onShortcutTouchMove(e) {
  let firstTouch = e.touches[0]
  this.touch.y2 = firstTouch.pageY
  let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0 // 两次触碰 Y 轴的偏移锚点值
  let anchorIndex = +this.touch.anchorIndex + delta  // 获取 偏移了多少 index 值  ,因为 anchorIndex 是字符串,所以要转成数字再相加
  this._scrollTo(anchorIndex)
},
_scrollTo(index) {
  this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 200)
}
<Scroll class="listview" ref="listview">
    <!--歌手列表-->
    <ul>
      <li v-for="group in data" class="list-group" ref="listGroup">
        <h2 class="list-group-title">{{group.title}}</h2>
        <!--首字母条目-->
        <ul>
          <li v-for="item in group.items" class="list-group-item">
            <img :src="item.avatar" class="avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
      <ul>
        <li v-for="(item, index) in shortcutlist" :data-index="index" class="item">
          {{item}}
        </li>
      </ul>
    </div>
</Scroll>

滑动主列表,侧边 shortcut 自动高亮不同锚点

  1. 首先 BScroll 组件 监听滚动事件,并派发事件以供父组件监听,将 pos 值传出去
if (this.listenScroll) {
  let self = this
  this.scroll.on(‘scroll‘, (pos) => { // 实时监测滚动事件,派发事件:Y轴距离
    self.$emit(‘scroll‘, pos)
  })
}
  1. 父组件监听到滚动派发的事件
@scroll="scroll"

将 pos.y 存在 this.scrollY

scroll(pos) {
  this.scrollY = pos.y    // 实时获取 BScroll 滚动的 Y轴距离
}
  1. 再用 watch 检测数据的变化,一旦变化,重新计算每个区块的高度列表。再判断当前滚动的 Y轴值 是否落在相应的 group 高度区间,然后更新 currentIndex ,使 shortcut 的锚点高亮
  2. watch: {
      data() {
        // 延时,确保DOM渲染之后执行,通常是nextTick,这里用setTimeout是为了兼容更低
        setTimeout(() => {
          this._calculateHeight()
        }, 20)
      },
      
      // 这里的 scrollY 是当前组件上的,和 BScroll 的并不是一个
      scrollY(newY) {
      const listHeight = this.listHeight
      // 1. 当滚动至顶部以上
      if (newY > 0) {
        this.currentIndex = 0
        return
      }
      // 2. 当在中间部分滚动,length之所以 -1 是因为 当初高度列表定义必须多一个
      for (let i = 0; i < listHeight.length - 1; i++) {
        let height1 = listHeight[i]
        let height2 = listHeight[i + 1]
        if (-newY >= height1 && -newY < height2) {
          this.currentIndex = i
          this.diff = height2 + newY  // height 上限 - newY 的值
          return
        }
      }
      // 3. 当滚动至底部,且 newY 大于最后一个元素的上限
      this.currentIndex = listHeight.length - 2
      }
    }

    每个区块的高度列表是 通过 _calculateHeight 函数实现

    1. _calculateHeight() {
        this.listHeight = []
        const list = this.$refs.listGroup
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < list.length; i++) {
          let item = list[i]
          height += item.clientHeight
          this.listHeight.push(height)
        }
      }
      1. 最后只要在 li 上绑定class就可以实现不同位置的锚点高亮了
      2. :class="{‘current‘: currentIndex === index}"
        这里的 Vue 用法提示:
        watch 的 scrollY(newY){}
        
        当我们在 Vue 里修改了在 data 里定义的变量,就会出发这个变量的 setter,经过一系列的处理,会触发 watch 的回调函数,也就是 scrollY(newY) {} 这里的函数会执行,同时,newY 就是我们修改后的值。
        scrollY 是定义在 data 里的,列表滚动的时候,scroll 事件的回调函数里有修改 this.scrollY,所以能 watch 到它的变化。
        watch 的回调函数的第一个参数表示变化的新值
        滚动固定标题 效果实现
        在中间部分滚动时,会不断设置 diff 值,每个区块的高度上限(也就是底部)减去 Y轴偏移的值
        this.diff = height2 + newY // 就是 height 上限 - newY 的值

        watch 检测 diff 变化,判断如果 diff>0 且 小于 title 块的高度,设为差值,否则为0
        再将 fixed 的 title 块 translate 偏移

      3. diff(newVal) {
          let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
          if (this.fixedTop === fixedTop) return   // 判断如果两个title区块没有碰到,是不会触发 DOM 操作的
          this.fixedTop = fixedTop
          this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
        }

        歌手详情页

        singer page 页面 引入 singer-detail 二级路由

        index.js 路由里配置

      4. {
          path: ‘/singer‘,
          component: Singer,
          children: [
            {
              path: ‘:id‘, // 表示 id 为变量
              component: SingerDetail
            }
          ]
        }

        singer.vue 里设定跳转路由 this.$router.push({})
        html:

      5. <router-view></router-view>

        js:

      6. selectSinger(singer){
          this.$router.push({
            path: `/singer/${singer.id}`
          })
        }

        Vuex

        Vuex 教程见:Vuex

        通常的流程为:

        1. 定义 state,考虑项目需要的原始数据(最好为底层数据)
        2. getters,就是对原始数据的一层映射,可以只为底层数据做一个访问代理,也可以根据底层数据映射为新的计算数据(相当于 vuex 的计算属性)
        3. 修改数据:mutations,定义如何修改数据的逻辑(本质是函数)。

        在定义 mutations 之前 要先定义 mutation-types (通常为动词+名词)

        actions.js 通常是两种操作

        1. 异步操作
        2. 是对mutation的封装,比如一个动作需要触发多个mutation的时候,就可以把多个mutation封装到一个action中,达到调用一个action去修改多个mutation的目的。

        歌手页面,数据利用 vuex 传递

        1. 首先 listview.vue 检测点击事件,将具体点击的歌手派发出去,以供父组件 singer 监听

      7. selectItem(item) {
          this.$emit(‘select‘, item)
        },

        2. 父组件监听事件执行 selectSinger(singer)

        1. 指向子路由,向地址栏加上 singer.id
        2. 向 mutation 提 SET_SINGER 的 commit
        3. selectSinger(singer) {
            this.$router.push({
              path: `/singer/${singer.id}`
            })
            this.setSinger(singer)
          },
          
          ...mapMutations({ // 语法糖,‘...‘将多个对象注入当前对象
            setSinger: ‘SET_SINGER‘ // 将 this.setSinger() 映射为 this.$store.commit(‘SET_SINGER‘)
          })

          mapMutations (语法糖) 映射 mutations ,this.setSinger(singer) 相当于执行 this.$store.commit(‘SET_SINGER‘)(singer 为 mutation 的第二个参数)
          而 mutations 内 SET_SINGER 的逻辑为

        4. [types.SET_SINGER](state, singer) {
            state.singer = singer
          }

          3. singer-detail 取 vuex 中存好的数据

        5. computed: {
            ...mapGetters([
              ‘singer‘
            ])
          }

          getters 内 singer 的逻辑为

          singer = state => state.singer

          musiclist 与 songlist

           
        6. 滑动 songlist 与背景图的联动

          主要是 监听滚动距离,根据不同的距离条件发生不同的效果

        7. mounted() {
            this.imageHeight = this.$refs.bgImage.clientHeight
            this.$refs.list.$el.style.top = `${this.imageHeight}px` // 对于 Vue 组件,this.$refs.xxx 拿到的是 Vue 实例,所以需要再通过 $el 拿到真实的 dom
            this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT
          },
          
          watch: {
            scrollY(newY) {
              let translateY = Math.max(this.minTransalteY, newY)   // 最远滚动改变的距离就是 minTransalteY
              let zIndex = 0
              let scale = 1
              const percent = Math.abs(newY / this.imageHeight)
          
              this.$refs.layer.style.transform = `translate3d(0,${translateY}px,0)`
              this.$refs.layer.style.webkitTransform = `translate3d(0,${translateY}px,0)`
              if (newY < this.minTransalteY) {
                zIndex = 10
                this.$refs.bgImage.style.paddingTop = 0
                this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
              } else {
                this.$refs.bgImage.style.paddingTop = ‘70%‘
                this.$refs.bgImage.style.height = 0
              }
              if (newY > 0) {
                scale = 1 + percent
                zIndex = 10
              }
              this.$refs.bgImage.style.zIndex = zIndex
              this.$refs.bgImage.style.transform = `scale(${scale})`
              this.$refs.bgImage.style.webkitTransform = `scale(${scale})`
            }
          }

          自动判断浏览器加CSS兼容前缀 prefixStyle

        8. let elementStyle = document.createElement(‘div‘).style
          
          let vendor = (() => {
            let transformNames = {
              webkit: ‘webkitTransform‘,
              Moz: ‘MozTransform‘,
              O: ‘OTransform‘,
              ms: ‘msTransform‘,
              standard: ‘transform‘
            }
          
            for (let key in transformNames) {
              if (elementStyle[transformNames[key]] !== undefined) return key
            }
            return false
          })()
          
          export function prefixStyle(style) {
            if (vendor === false) return false
          
            if (vendor === ‘standard‘) return style
          
            return vendor + style.charAt(0).toUpperCase() + style.substr(1)
          }
          1. 首先生成基于用户浏览器的div样式
          2. 根据 vendor 供应商定义的不同浏览器前缀,去测试用户浏览器。

          方法就是判断创建的 div 样式是否有相应的前缀样式,如果有,则返回前缀样式的key,也就是需要的 前缀

          1. 通过 prefixStyle 函数,参数为我们需要兼容的样式。如果需要加签注,返回的格式是 前缀 + 首字母大写的样式(应为通常前缀样式为 -webkit-transform-origin,JS操作时,不能写 -,可以采用驼峰写法,也就是样式首字母大写)

          播放器 player

          把播放器组件放在 App.vue 下,因为它是一个跟任何路由都不相关的东西。在任何路由下,它都可以去播放。切换路由并不会影响播放器的播放。

          播放器 vuex 设计

          点击 歌手/歌单 都会进入详情页,详情页 created() 会根据点击的歌手请求相应的数据,然后利用 _normalizeSongs 将数据整理,其中很重要的函数是 createSong ,生成自定义 song 类,方便以后读取

          播放器 图片旋转

          animation-play-state 
          animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。
          恢复一个已暂停的动画,将从它开始暂停的时候,而不是从动画序列的起点开始在动画。

          修复BUG:ios下safari与chrome浏览器,animation-play-state样式失效 #60
          点击暂停播放的时候,歌曲的图片会继续转动,导致的原因是因为animation-play-state:paused这个样式失效了
          修复具体代码
          核心代码:

        9. /**
           * 计算内层Image的transform,并同步到外层容器
           * @param wrapper
           * @param inner
           */
          syncWrapperTransform(wrapper, inner) {
            if (!this.$refs[wrapper]) return
          
            let imageCdWrapper = this.$refs[wrapper]
            let image = this.$refs[inner]
            let wTransform = getComputedStyle(imageCdWrapper)[transform]
            let iTransform = getComputedStyle(image)[transform]
            imageCdWrapper.style[transform] = wTransform === ‘none‘ ? iTransform : iTransform.concat(‘ ‘, wTransform)
          }
          解决快速切换歌曲引发的错误
          这个错误是由于切换的太快,歌曲并未获取到播放地址,而提前播放
          
          利用了H5新api: canplay
          当终端可以播放媒体文件时触发该canplay事件,估计加载足够的数据来播放媒体直到其结束,而不必停止以进一步缓冲内容。
          利用这个api,在audio上监听 canplay 派发的事件,做成标志位
          
          后来 api 改至 playing
          播放器 进度条 功能
          normal 的长形进度条
          
          在 progress 上监听 touchstart, touchmove, touchend 三个事件
          
          touchstart: 获取第一次点击的横坐标和已播放的进度条长度
          touchmove: 获取移动后的横坐标,并定义 delta 为 移动后坐标 - 第一次点击的横坐标
          设置 偏移量 offsetWidth 为 已播放的进度条长度 + delta
          在去设置 progress 和 progressBtn 的宽度和transform 量都为 offsetWidth
          
          touchend: 一些组件特有的逻辑,和进度条不太相关暂不赘述
          而点击任意位置,移动进度按钮,则是通过为 progress 进度条添加点击事件
          progressClick(e) {
            this._offset(e.offsetX - progressBtnWidth / 2)
            this._triggerPercent()
          }

          mini 的圆形进度条

          利用了 SVG 实现,其中有两个圆,一个是背景圆形,另一个为已播放的圆形进度

        10. <div class="progress-circle">
            <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
              <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent"    :stroke-dasharray="dashArray"
              :stroke-dashoffset="dashOffset"/>
            </svg>
            <slot></slot>
          </div>

          修复进度条的 BUG

          迷你播放器暂停状态,进入全屏,按钮在进度条最左边

          • 原因:当播放器最小化的时候,progress-bar 仍然在监听 percent 的变化,所以在不断计算进度条的位置,然而这个时候由于播放器隐藏,进度条的宽度 this.$refs.progressBar.clientWidth 计算为0,因此计算出来的 offset 也是不对的,导致再次最大化播放器的时候,由于播放器是暂停状态, percent 并不会变化,也不会重新计算这个 offset ,导致 Bug。
          • 解决方案:当播放器最大化的时候,手动去计算一次 offset,确保进度条的位置正确。

          progress-bar 组件要 watch 下 fullScreen,在进入全屏的时候调用一下 移动按钮函数

          歌词 lyric

          获取歌词,虽然我们约定返回数据是 json,但QQ音乐 返回的是依然是 jsonp,所以我们需要做一层数据的处理

          const reg = /^\w+\(({.+})\)$/
          就是将返回的jsonp格式摘取出我们需要的json字段

          ret = JSON.parse(matches[1])
          将正则分组(就是正则括号内的内容)捕获的json字符串数据 转成 json 格式

          然后我们在 player 组件中监听 currentSong 的变化,获取 this.currentSong.getLyric()

        11. axios.get(url, {
            headers: {
              referer: ‘https://c.y.qq.com/‘,
              host: ‘c.y.qq.com‘
            },
            params: req.query
          }).then((response) => {
            let ret = response.data
            if (typeof ret === ‘string‘) {
              const reg = /^\w+\(({.+})\)$/
              const matches = ret.match(reg)
              if (matches) {
                ret = JSON.parse(matches[1])
              }
            }
            res.json(ret)
          })

          然后我们得到的返回数据的是 base64 的字符串,需要解码,这里用到了第三方库: js-base64
          (我们这次用的是QQ音乐pc版的歌词,需要解码base64,而移动版的QQ音乐是不需要的)

        12. this.lyric = Base64.decode(res.lyric)

          之后利用第三方库: js-lyric ,解析我们的歌词,生成方便操作的对象

        13. getLyric() {
            this.currentSong.getLyric()
              .then(lyric => {
                this.currentLyric = new Lyric(lyric)
              })
          }

          歌词滚动

          当前歌曲的歌词高亮是利用 js-lyric 会派发的 handle 事件

        14. this.currentLyric = new Lyric(lyric, this.handleLyric)

          js-lyric 会在每次改变当前歌词时触发这个函数,函数的参数为 当前的 lineNum 和 txt

          而 使当前高亮歌词保持最中间 是利用了 BScroll 滚动至高亮的歌词

        15. let middleLine = isIphoneX() ? 7 : 5  // 鉴于iphonex太长了,做个小优化
          if (lineNum > middleLine) {
            let lineEl = this.$refs.lyricLine[lineNum - middleLine]
            this.$refs.lyricList.scrollToElement(lineEl, 1000)
          } else {
            this.$refs.lyricList.scrollTo(0, 0, 1000)
          }

          cd 与 歌词 之间滑动

          通过监听 middle 的 三个 touch 事件

          offsetWidth 是为了计算歌词列表的一个偏移量的,首先它的偏移量不能大于0,也不能小于 -window.innerWidth
          left 是根据当前显示的是 cd 还是歌词列表初始化的位置,如果是 cd,那么 left 为 0 ,歌词是从右往左拖的,deltaX 是小于 0 的,所以最终它的偏移量就是 0+deltaX;如果已经显示歌词了,那么 left 为 -window.innerWidth,歌词是从左往右拖,deltaX 是大于 0 的,所以最终它的偏移量就是 -window.innerWidth + deltaX

        16. middleTouchStart(e) {
            this.touch.initiated = true
            this.touch.startX = e.touches[0].pageX
            this.touch.startY = e.touches[0].pageY
          },
          middleTouchMove(e) {
            if (!this.touch.initiated) return
            const deltaX = e.touches[0].pageX - this.touch.startX
            const deltaY = e.touches[0].pageY - this.touch.startY
            if (Math.abs(deltaY) > Math.abs(deltaX)) {
              return
            }
            const left = this.currentShow === ‘cd‘ ? 0 : -window.innerWidth
            const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
            this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
            console.log(this.touch.percent)
            this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
            this.$refs.lyricList.$el.style[transitionDuration] = 0
            this.$refs.middleL.style.opacity = 1 - this.touch.percent
            this.$refs.middleL.style[transitionDuration] = 0
          },
          middleTouchEnd() {
            let offsetWidth, opacity
            // 从右向左滑 的情况
            if (this.currentShow === ‘cd‘) {
              if (this.touch.percent > 0.1) {
                offsetWidth = -window.innerWidth
                opacity = 0
                this.currentShow = ‘lyric‘
              } else {
                offsetWidth = 0
                opacity = 1
              }
            } else {
              //  从左向右滑 的情况
              if (this.touch.percent < 0.9) {
                offsetWidth = 0
                opacity = 1
                this.currentShow = ‘cd‘
              } else {
                offsetWidth = -window.innerWidth
                opacity = 0
              }
            }
            const durationTime = 300
            this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
            this.$refs.lyricList.$el.style[transitionDuration] = `${durationTime}ms`
            this.$refs.middleL.style.opacity = opacity
            this.$refs.middleL.style[transitionDuration] = `${durationTime}ms`
          }

          优化

          Vue 按需加载路由:

          当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

          结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

          • 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

          const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

          • 第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):

          import(‘./Foo.vue‘) // 返回 Promise

          在我们的项目中的 router/index.js 是这样定义的:

        17. // Vue 异步加载路由
          // 引入5个 一级路由组件
          const Recommend = () => import(‘components/recommend/recommend‘)
          const Singer = () => import(‘components/singer/singer‘)
          const Rank = () => import(‘components/rank/rank‘)
          const Search = () => import(‘components/search/search‘)
          const UserCenter = () => import(‘components/user-center/user-center‘)
          // 二级路由组件
          const SingerDetail = () => import(‘components/singer-detail/singer-detail‘)
          const Disc = () => import(‘components/disc/disc‘)
          const TopList = () => import(‘components/top-list/top-list‘)

           

Vue 实现的音乐项目 music app 知识点总结分享

标签:bug   rank   改变   function   初始   webpack   轻松   +=   http   

原文地址:https://www.cnblogs.com/catbrother/p/9180984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!