【Web】Vue2.0 音乐APP实战中的知识点总结（一）

一.界面展示

二.知识点

1.jsonp

APP数据是从QQ音乐上爬取的，使用了jsonp的库。

npm install jsonp

jsonp:处理跨域请求，之所以可以跨域，不是发送AJAX请求，而是动态创建script标签，因为script是没有同源策略限制的，是可以跨域的。通过创建script标签，把src指向真实服务端地址，包含参数callback，例如callback=a,那么就会在返回的参数里，用a包裹一个方法，在前端执行这个方法，获得来自后端的数据。

使用方法：

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

2.后端接口代理

由于header里host和refer的限制，jsonp请求被拒绝。而前端无法修改header，因此采用后端代理的方式。

使用axio库：vue官方ajax库。在node.js中发送http请求
使用方法：

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)//返回json数据
  }).catch((e)=>{
    console.log(e)
  })
})

3.滑动效果

借助better-scroll

注意：由于在滑动过程中需要计算界面宽高，而整个界面加载过程是异步的，因此需要在一下几个位置调用refresh方法：

（1）歌单列表加载完毕时
scroll组件中，添加监听：

watch:{
            data(){
                setTimeout(()=>{
                    this.refresh()
                },20)
            }
        }

在主界面：discList发生变化时调用以上方法
<scroll ref="scroll" class="recommend-content" :data="discList">

（2）广告轮播屏加载完毕时

监听图片加载出来后，执行刷新操作。由于只要又一张
图片加载出来即可计算宽高，无需重复加载，因此写法如下（常用技巧）

 loadImage(){
    if(!this.checkLoaded){
       this.$refs.scroll.refresh()
       this.checkLoaded=true
    }

    }

4.图片的懒加载

由于列表图片加载时比较耗费流量，为了优化显示，只加载用户可以看到的图片，即图片的懒加载技术。

使用的库：Vue-Lazyload

使用方法：

import VueLazyLoad from 'vue-lazyload'
fastclick.attach(document.body)//手机端下面的点击都没有300hs延迟
/* eslint-disable no-new */


Vue.use(VueLazyLoad,{
    loading:require('common/image/default.png')
})

 <img width="60" height="60" v-lazy="item.imgurl">

5.fastclick与better-scroll冲突问题

click事件发生冲突，导致移动端点击失效。

解决办法：添加类needsclick

  <img class="needsclick" @load="loadImage" :src="item.picUrl"/>

6.flex布局

先留坑，之后填