自己利用業餘時間,為了更加資料vue和es6的特性,自學著和做了vue的移動端webapp專案。在專案中也是遇到了很多的問題。
接下來,先說一下怎麼實現這個需求,然後再說我遇到的問題,以用來糾錯。
第一步,再vue專案中引入jsonp
,並進行jsonp
的封裝。
使用npm
引入,輸入:
npm install jsonp --save複製程式碼
安裝好之後可以在自己的package.json
檔案中檢視是否有此依賴。如下圖所示:
如果有紅框中顯示的內容,說明安裝成功,進入下一步封裝:
import originJSONP from 'jsonp' //引入jsonp
//進行封裝並export
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進行處理,並encodeURIComponent()進行轉碼。
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) : ''
}複製程式碼
封裝完成jsonp.js
檔案之後,進入第二步:
在專案檔案中配置需要的api
。第一個api
,命名為config.js.
export const commonParams = { //配置一些公共引數
g_tk:5381,
format: 'json',
inCharset: 'utf-8',
outCharset:'utf-8',
notice: 0,
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0 //設定屬性
複製程式碼
然後再建立一個recommend.js
的檔案:
import jsonp from 'common/js/jsonp' //引入jsonp
import {commonParams,options} from './config' //引入config.js
export function getRecommend(){
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({},commonParams,{ //es6的assign將commonParams和
uin: 0, //之後的物件合併為一起,放在
platform:'h5', //前面的{}之中。
needNewCode: 1,
})
return jsonp(url,data,options)
}
複製程式碼
其中的data最後的資料為:
然後,最後一步,就是在專案中所需要的.vue檔案中去請求資料啦。
import {getRecommend} from 'api/recommend' //引入recommend.js中的getRecomend方法
import {ERR_OK} from 'api/config' //引入recommend.js中的getRecomend方法
import Slider from 'base/slider/slider'
export default {
data() {
return{
recommends : []
}
},
created(){
this._getRecommend()
},
methods:{
_getRecommend() {
getRecommend().then((res)=>{
if(res.code === ERR_OK){
this.recommends = res.data.slider
}
})
},
}
}
複製程式碼
如果在頁面中瀏覽器返回以下圖片所示的內容,就說明成功啦。
注意:在專案中遇到的坑
一:在請求資料的時候遇到以下截圖所示的情況:
找原因找了好久,最後才發現是encodeURIComponent()這裡出錯了。注意不能寫成
、url += '&' + k + '=' + encodeURIComponent(value)、複製程式碼
有可能不支援es6這樣的語法。應該寫成
for(var k in data) {
let value = data[k] !== undefined? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}複製程式碼
第二點:關於地址
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'複製程式碼
不能寫成
const url = 'https://m.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'複製程式碼
好啦,就總結這麼多啦。請求到資料之後,就是一些基本的DOM操作啦。