最近学习了一下如何用vue2.0开发app。这里只是记录一下学习中遇到的好的方法和知识点,里面用的好多es6语法,我也不是很懂,怕忘了,so 还是再总结一下。
1,首先新建一个jsonp.js 封装一个函数方法。当然前提要在项目中安装jsonp 的依赖,npm install jsonp --save
看下面代码,解释一下,先引入jsonp,接着写了2个函数,一个是jsonp(),另一个是param();
param()是为了把传递过来的参数拼接到url里面,而这个文档默认的是暴露第一函数,看到这个就应该明白,export default function jsonp()
而第二个函数是 function param(data)
import originJSONP from 'jsonp'
// indexOf('?') 判断url 里面有没有?号,<0 时成立就是没有问号。
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)
}
})
})
}
//封装 拼接data 到url 的方法
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() : ''
}
这里再写一个配置文档config.js 封装几个常量,
export const commonParams ={
g_tk:5381,
inCharset: 'utf-8',
outCharset:'utf-8',
notice:0
}
// 设置常量 param
export const options = {
param:'jsonpCallback'
}
// 设置常量 错误信息 0 是OK 没有问题的意思
export const ERR_OK =0
2,接着就是引用上面封装好的方法,
首先引入文档
import jsonp from 'common/js/jsonp.js'
import {commonParams, options} from './config'
在这个函数中使用上面的常量和函数方法
export function getRecommend() {
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
})
return jsonp(url, data, options)
}
3,在其他文档继续使用第二步封装好的获取参数的方法。
<script type="text/ecmascript-6">
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default{
created(){
this._getRecommend()
},
methods: {
_getRecommend (){
getRecommend().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.slider)
}
})
}
}
}
</script>
好了,看着很简单,封装常量和函数方法在其他文档使用。但是,里面很多es6语法,需要多研究。
看下,我打印出来的效果吧。