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

先留坑，之后填