一.界面展示
二.知识点
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布局
先留坑,之后填