【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布局

先留坑，之后填