qq音乐——获取歌曲图片和名称

最新推荐文章于 2023-11-28 10:23:52 发布

耶啵奶膘

最新推荐文章于 2023-11-28 10:23:52 发布

阅读量734

点赞数

分类专栏：微信小程序文章标签： javascript 前端

本文链接：https://blog.csdn.net/xulihua_75/article/details/127847524

版权

微信小程序专栏收录该内容

17 篇文章

订阅专栏

效果展示：

在这里插入图片描述

wxml代码:

<!--music/pages/music/music.wxml-->
<view class="container">
    <view class="listTitle">最新音乐</view>
    <view class="list">
        <view class="item" wx:for="{{songlist}}">
            <view class="number">{{item.cur_count}}</view>
            <view class="leftImg">
                <image src="{{item.data.image}}" mode="aspectFill"></image>
            </view>
            <view class="rightBox">
                <view class="songName">{{item.data.songname}}</view>
                <view class="singer">{{item.data.singer[0].name}}</view>
            </view>
            <view class="playBtn" bindtap="audioPlay" data-key="{{index}}">
            </view>
        </view>
    </view>
</view>

js代码：

// music/pages/music/music.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 音乐列表
        songlist: []
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getMusic()
    },
    getMusic() {
        wx.request({
            url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=36&_=1520777874472',
            data: {},
            header: {
                'content-type': 'application/json'
            },
            success: (res) => {
                console.log(res.data.songlist);
                let songlist = res.data.songlist
                // 生成图片地址
                songlist.forEach((item) => {
                    item.data.image = `http://imgcache.qq.com/music/photo/album_300/${item.data.albumid%100}/300_albumpic_${item.data.albumid}_0.jpg`
                })
                // 生成歌曲地址
                songlist.forEach((item) => {
                    item.data.audioUrl = `https://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?songid=${item.data.songid}&tpl=yqq_song_detail&format=jsonp&callback=getOneSongInfoCallback`
                })
                this.setData({
                    songlist: songlist
                })
                
            }
        })
    },
    audioPlay(e) {
        // 下标
        console.log(e.currentTarget.dataset.key);
    },
})