大概步驟：

目標效果

二、抓取排行榜首頁資料

• 要點
  • 進入QQ音樂移動端，查詢Network中的排行榜首頁資料，在XHR中找到
  • 使用之前寫好的jsonp解析資料的方法，傳入處理好的url

jsonp資料 url資料

• 相關程式碼

import jsonp from '@/common/js/jsonp'	//引入jsonp模組
import {commonParams,object} from './config'

//方法js不做成defaul，vue引入時要單花括號
export function getTopList(){
	//自己判斷截取出url前半段
	const urlfront =
 
 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
	//把hash做成物件,es6建立物件並賦值,
	//固定的hash寫在變數js模組 config.js裡，
	const thehash = Object.assign({},commonParams,{
		notice: 0,
		platform: 'h5',
		needNewCode: 1,
		uin:0,
	})
	//執行jsonp模組
	//console.log(jsonp(urlfront,thehash,object))
	return jsonp(urlfront,thehash,object)
 
	//執行封裝了jsonp的方法
}

^ rank.js定義獲取資料的方法

import {getTopList} from '@/api/rank'	//引入獲取資料方法的

getTopList().then((res)=>{
  			if(res.code===ERR_OK){
  				this.topList = res.data.topList
  			}
  		})

^ 在元件中呼叫獲取資料的方法

• 把資料應用到html中即可

專案來源：慕課網 如有建議和疑問可聯絡 QQ：1017386624 郵箱：[email protected]