Skip to content

QQMusic数据获取方式详解

Jump to bottom
yangbo edited this page May 25, 2017 · 2 revisions

因为QQMusic整个网站的数据几乎都是使用jsonp的方式，因此我们不需要专门处理跨域问题即可直接进行数据的获取与开发。具体的使用方式如下。

在develop分支里，项目的src文件里我创建了一个叫做utils的文件夹，该文件夹主要用来存放一些工具性的组件。 首先为了方便管理，我把所有的API都存在utils/API.js中，获取的具体方法统一存放在utils/request.js中，同时在utils/jsonp.js中封装了一个方法用于获取QQMusic网站的数据。具体的使用方式如下

jsonp(API.recomList, {
    params: {
        tpl: 'v12',
        page: 'other',
        callback: 'GetRecomListCallback5053087508676672',
        rnd: '5053087508676672',
        g_tk: '5381',
        jsonpCallback: 'GetRecomListCallback5053087508676672',
        loginUin: 0,
        hostUin: 0,
        format: 'jsonp',
        inCharset: 'utf8',
        outCharset: 'GB2312',
        notice: 0,
        platform: 'yqq',
        needNewCode: 0
    },
    jsonpCallback: 'GetRecomListCallback5053087508676672'
})

封装的这个jsonp方法主要有2个参数，第一个参数为接口的API，第二参数则主要为接口所需要的参数，为一个字面量对象。其中的属性分别对应如下：

  • params: 接口所需要的参数
  • jsonpCallback: jsonp数据外面包裹的方法名称
  • timeout: 超时时间，默认为6s
  • prefix: jsonp数据前缀，默认为__jp

jsonp方法返回一个Promise对象

数据获取的具体流程为：

  • 去QQ音乐网站上查看jsonp的请求情况，找到接口的所有信息，并弄明白接口的作用
  • 将API存放于utils/API.js中，如
// 热门搜索关键字
export const hotSearchKeysmod = 'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg'
  • 将数据获取方法存放于utils/request.js中，如
/**
 * 热门搜索关键字
 */
export const getHotSearchKeysmod = () => {
    return jsonp(API.hotSearchKeysmod, {
        // 暂时未确认那些参数可以动态传进来，所以先写死
        params: {
            g_tk: '5381',
            jsonpCallback: 'hotSearchKeysmod_top_search',
            loginUin: 0,
            hostUin: 0,
            format: 'jsonp',
            inCharset: 'utf8',
            outCharset: 'utf-8',
            notice: 0,
            platform: 'yqq',
            needNewCode: 0
        },
        jsonpCallback: 'hotSearchKeysmod_top_search'
    })
}
  • 使用时在当前组件引入request.js，调用对应的方法即可，例如我在Hello.vue中使用时
import * as request from '../utils/request'

request.getHotSearchKeysmod().then(resp => {
    // 在使用时，通过这样方式拿到数据即可
    console.log(resp)
})

例子中的resp就是我们拿到的数据，通过数据，我们就可以进行对应的展示了。具体的情况大家可以通过项目中的代码查看与调试

Clone this wiki locally