React全家桶构建一款Web音乐App实战（七）：歌手列表及详情开发

时间 2019-11-26

标签 react 全家构建一款 web 音乐 app 实战歌手列表详情开发栏目 React 繁體版

原文原文链接

本节继续开发歌手列表和歌手详情vue

接口数据抓取

1.歌手列表react

用chrome浏览器打开QQ音乐官网，进入QQ音乐官网后打开开发者工具选择Network选项，点击js选项，在QQ音乐官网点击歌手git

点开上图红框中的请求，在右侧点击Preview，下方就是歌手列表数据，具体的请求连接参数在Headers选项中查看github

2.歌手详情web

选择歌手列表中的任意一个歌手点击，在左边的Network中查看具体请求数据chrome

接口具体说明见QQ音乐api接口梳理中的歌手列表和歌手详情json

接口请求方法

在api目录下面的config.js中加入接口url配置redux

config.jsapi

const URL = {
    ...
    /*歌手列表*/
    singerList: "https://c.y.qq.com/v8/fcg-bin/v8.fcg",
    /*歌手详情*/
    singerInfo: "https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg"
};
复制代码

在api下面新建singer.js，编写接口请求方法浏览器

singer.js

import jsonp from "./jsonp"
import {URL, PARAM, OPTION} from "./config"

export function getSingerList(pageNum, key) {
	const data = Object.assign({}, PARAM, {
		g_tk: 5381,
		loginUin: 0,
		hostUin: 0,
		platform: "yqq",
		needNewCode: 0,
		channel: "singer",
		page: "list",
		key,
		pagenum: pageNum,
		pagesize: 100
	});
	return jsonp(URL.singerList, data, OPTION);
}

export function getSingerInfo(mId) {
	const data = Object.assign({}, PARAM, {
		g_tk: 5381,
		loginUin: 0,
		hostUin: 0,
		platform: "yqq",
		needNewCode: 0,
		singermid: mId,
		order: "listen",
		begin: 0,
		num: 100,
		songstatus: 1
	});
	return jsonp(URL.singerInfo, data, OPTION);
}
复制代码

接下来新建歌手模型类Singer，在model目录下新建singer.js，属性以下

export class Singer {
    constructor(id, mId, name, img) {
        this.id = id;
        this.mId = mId;
        this.name = name;
        this.img = img;
    }
}
复制代码

根据歌手列表和歌手详情返回的数据编写两个对象建立函数，在singer.js中编写以下代码

export function createSingerBySearch(data) {
    return new Singer(
        data.singerid,
        data.singermid,
        data.singername,
        `http://y.gtimg.cn/music/photo_new/T001R68x68M000${data.singermid}.jpg?max_age=2592000`
    );
}

export function createSingerByDetail(data) {
    return new Singer(
        data.singer_id,
        data.singer_mid,
        data.singer_name,
        `http://y.gtimg.cn/music/photo_new/T001R300x300M000${data.singer_mid}.jpg?max_age=2592000`
    );
}
复制代码

歌手列表开发

先来看一下效果图

歌手页分两块，上部分是歌手分类，下部分就是对应的歌手列表。在歌手列表接口中有一个key参数，改参数就是对应的歌手分类，它是由第一栏分类和第二栏分类拼接而成的。在QQ音乐官网的歌手列表页面中经过浏览器调试工具查看DOM结构能够查看到分类对应的key值

其中data-key就是对应分类的key值

接下来初始化这些key值，回到componens下singer目录中的SingerList.js，在SingerList.js中使用构造函数初始化分类所须要的key值

constructor(props) {
        super(props);

        this.types = [
            {key:"all_all", name:"所有"},
            {key:"cn_man", name:"华语男"},
            {key:"cn_woman", name:"华语女"},
            {key:"cn_team", name:"华语组合"},
            {key:"k_man", name:"韩国男"},
            {key:"k_woman", name:"韩国女"},
            {key:"k_team", name:"韩国组合"},
            {key:"j_man", name:"日本男"},
            {key:"j_woman", name:"日本女"},
            {key:"j_team", name:"日本组合"},
            {key:"eu_man", name:"欧美男"},
            {key:"eu_woman", name:"欧美女"},
            {key:"eu_team", name:"欧美组合"},
            {key:"other_other", name:"其它"}
        ];
        this.indexs = [
            {key:"all", name:"热门"},
            {key:"A", name:"A"},
            {key:"B", name:"B"},
            {key:"C", name:"C"},
            {key:"D", name:"D"},
            {key:"E", name:"E"},
            ...
        ];
    }
复制代码

省内部分代码，完整代码请在源码中查看

而后初始化一些默认的state，继续在constructor中增长如下代码

this.state = {
	loading: true,
	typeKey: "all_all",
	indexKey: "all",
	singers: [],
	refreshScroll: false
}
复制代码

其中typeKey是第一栏默认选中的分类key，indexKey是第二栏默认选择的分类key，singer存放歌手列表

在效果图中每一个分类都是一行显示，超出屏幕是能够滚动的，这里一样使用第三节封装的Scroll组件，为何不使用浏览器自带的overflow: scroll，固然是由于原生的滚动效果体验太差，在有些浏览器自带右滑后退，左滑前进，这个时候冲突就很鸡肋了~_~。如今须要左右滚动，这时原来封装的Scroll组件不知足需求，接下来对Scroll组件进行改造

Scroll组件是基于better-scroll封装的，better-scroll默认支持纵向滚动，它也支持横向滚动，纵向滚动将scrollY设置为true，横向滚动将scrollX设置为true，有了这个配置后给Scroll组件增长一个direction属性表示滚动方向，它有两个值vertical（垂直方向）和horizontal（水平方向），默认值为vertical，而后用prop-types限制direction属性的值

代码以下

Scroll.js

Scroll.defaultProps = {
    direction: "vertical",
    ...
};

Scroll.propTypes = {
    direction: PropTypes.oneOf(['vertical', 'horizontal']),
    ...
};
复制代码

better-scroll配置参数修改以下

this.bScroll = new BScroll(this.scrollView, {
    scrollX: this.props.direction === "horizontal",
    scrollY: this.props.direction === "vertical",
    //实时派发scroll事件
    probeType: 3,
    click: this.props.click
});
复制代码

修改Scroll组件后，在SingerList.js的render方法中增长如下代码

let tags = this.types.map(type => (
    <a key={type.key}
       className={type.key === this.state.typeKey ? "choose" : ""}>
        {type.name}</a>
));
let indexs = this.indexs.map(type => (
    <a key={type.key}
       className={type.key === this.state.indexKey ? "choose" : ""}>
        {type.name}</a>
));
return (
    <div className="music-singers">
        <div className="nav">
            <div className="tag" ref="tag">
                {tags}
            </div>
            <div className="index" ref="index">
                {indexs}
            </div>
        </div>
    </div>
);
复制代码

使用Scroll组件包装分类元素，传入direction

import Scroll from "@/common/scroll/Scroll"
复制代码

<Scroll direction="horizontal">
    <div className="tag" ref="tag">
        {tags}
    </div>
</Scroll>
<Scroll direction="horizontal">
    <div className="index" ref="index">
        {indexs}
    </div>
</Scroll>
复制代码

此时Scroll组件的第一个子元素的宽度并无超过屏幕，须要设置为它下面的全部子元素占的宽度才能滚动，编写一个初始化Scroll第一个子元素宽度的方法，并在componentDidMount中调用

import ReactDOM from "react-dom"
复制代码

initNavScrollWidth() {
	let tagDOM = ReactDOM.findDOMNode(this.refs.tag);
	let tagElems = tagDOM.querySelectorAll("a");
	let tagTotalWidth = 0;
	Array.from(tagElems).forEach(a => {
		tagTotalWidth += a.offsetWidth;
	});
	tagDOM.style.width = `${tagTotalWidth}px`;

	let indexDOM = ReactDOM.findDOMNode(this.refs.index);
	let indexElems = indexDOM.querySelectorAll("a");
	let indexTotalWidth = 0;
	Array.from(indexElems).forEach(a => {
		indexTotalWidth += a.offsetWidth;
	});
	indexDOM.style.width = `${indexTotalWidth}px`;
}
复制代码

componentDidMount() {
    //初始化导航元素总宽度
    this.initNavScrollWidth();
}
复制代码

样式代码请在源码中查看

接下来调用歌手列表接口并渲染到页面上

导入须要的模块

import Loading from "@/common/loading/Loading"
import {getSingerList} from "@/api/singer"
import {CODE_SUCCESS} from "@/api/config"
import * as SingerModel from "@/model/singer"
复制代码

在SingerList.js中增长如下方法

getSingers() {
    getSingerList(1, `${this.state.typeKey + '_' + this.state.indexKey}`).then((res) => {
	    //console.log("获取歌手列表：");
	    if (res) {
            //console.log(res);
            if (res.code === CODE_SUCCESS) {
                let singers = [];
                res.data.list.forEach(data => {
                    let singer = new SingerModel.Singer(data.Fsinger_id, data.Fsinger_mid, data.Fsinger_name,
                `https://y.gtimg.cn/music/photo_new/T001R150x150M000${data.Fsinger_mid}.jpg?max_age=2592000`);
                    singers.push(singer);
                });
                this.setState({
                    loading: false,
                    singers
                }, () => {
                    //刷新scroll
                    this.setState({refreshScroll:true});
                });
            }
        }
    });
}
复制代码

在render方法return语句前增长如下代码

let singers = this.state.singers.map(singer => {
    return (
        <div className="singer-wraper" key={singer.id}>
            <div className="singer-img">
                <img src={singer.img} width="100%" height="100%" alt={singer.name}
                     onError={(e) => {
                         e.currentTarget.src = require("@/assets/imgs/music.png");
                     }}/>
            </div>
            <div className="singer-name">
                {singer.name}
            </div>
        </div>
    );
});
复制代码

return语句后的代码以下

return (
    <div className="music-singers">
        ...
        <div className="singer-list">
            <Scroll refresh={this.state.refreshScroll} ref="singerScroll">
                <div className="singer-container">
                    {singers}
                </div>
            </Scroll>
        </div>
        <Loading title="正在加载..." show={this.state.loading}/>
    </div>
);
复制代码

使用react-lazylaod优化图片加载，导入reat-lazyload，在歌手图片外层使用Lazyload组件包裹，同时监听Scroll组件滚动调用forceCheck方法检测图片是否出如今屏幕内

import LazyLoad, { forceCheck } from "react-lazyload"
复制代码

<LazyLoad height={50}>
    <img src={singer.img} width="100%" height="100%" alt={singer.name}
         onError={(e) => {
             e.currentTarget.src = require("@/assets/imgs/music.png");
         }}/>
</LazyLoad>
复制代码

<Scroll refresh={this.state.refreshScroll}
        onScroll={() => {forceCheck();}} ref="singerScroll">
    <div className="singer-container">
        {singers}
    </div>
</Scroll>
复制代码

图片加载更多说明见第三节优化图片加载

在分类点击的时候改变typeKey和indexKey的值，调用setState触发组件更新，让对应点击的分栏选中，组件更新后再调用getSingers方法获取歌手数

给分类添加点击事件处理

handleTypeClick = (key) => {
    this.setState({
        loading: true,
        typeKey: key,
        indexKey: "all",
        singers: []
    }, () => {
        this.getSingers();
    });
}
handleIndexClick = (key) => {
    this.setState({
        loading: true,
        indexKey: key,
        singers: []
    }, () => {
        this.getSingers();
    });
}
复制代码

<a key={type.key} 
	className={type.key === this.state.typeKey ? "choose" : ""}
	onClick={() => {this.handleTypeClick(type.key);}}>
	{type.name}</a>
复制代码

<a key={type.key}
	className={type.key === this.state.indexKey ? "choose" : ""}
	onClick={() => {this.handleIndexClick(type.key);}}>
	{type.name}</a>
复制代码

歌手详情开发

在compontents中的singer目录下新建Singer.js和singer.styl

Singer.js

import React from "react"

import "./singer.styl"

class Singer extends React.Component {
    render() {
        return (
            <div className="music-singer">
            </div>
        );
    }
}

export default Singer
复制代码

singer.styl代码请在源码中查看

为Singer编写容器组件Singer，在container目录下新建Singer.js

import {connect} from "react-redux"
import {showPlayer, changeSong, setSongs} from "../redux/actions"
import Singer from "../components/singer/Singer"

const mapDispatchToProps = (dispatch) => ({
    showMusicPlayer: (status) => {
        dispatch(showPlayer(status));
    },
    changeCurrentSong: (song) => {
        dispatch(changeSong(song));
    },
    setSongs: (songs) => {
        dispatch(setSongs(songs));
    }
});

export default connect(null, mapDispatchToProps)(Singer)
复制代码

在歌手列表页中加入子路由，和对应的点击事件，点击歌手进入歌手详情页。回到SingerList.js中，导入Route组件和Singer容器组件

import {Route} from "react-router-dom"
import Singer from "@/containers/Singer"
复制代码

将Route组件放置以下位置

render() {
    let {match} = this.props;
    ...
    return (
        <div className="music-singers">
            ...
            <Loading title="正在加载..." show={this.state.loading}/>
            <Route path={`${match.url + '/:id'}`} component={Singer}/>
        </div>
    );
}
复制代码

给列表的.singer-wrapper元素增长点击事件

toDetail = (url) => {
    this.props.history.push({
        pathname: url
    });
}
复制代码

<div className="singer-wrapper" key={singer.id}
     onClick={() => {this.toDetail(`${match.url + '/' + singer.mId}`)}}>
    ...
</div>
复制代码

继续编写Singer组件。在Singer组件的constructor构造函数中初始化如下state

constructor(props) {
    super(props);

    this.state = {
        show: false,
        loading: true,
        singer: {},
        songs: [],
        refreshScroll: false
    }
}
复制代码

show用来控制组件进入动画、singer存放歌手信息、songs存放歌曲列表。组件进入动画使用第四节实现动画中使用的react-transition-group

导入react-transition-group

import {CSSTransition} from "react-transition-group"
复制代码

当组件挂载后将status修改成true

componentDidMount() {
    this.setState({
        show: true
    });
}
复制代码

而后使用CSSTransition组件包裹Singer的根元素

<CSSTransition in={this.state.show} timeout={300} classNames="translate">
    <div className="music-singer">
    </div>
</CSSTransition>
复制代码

导入Header、Loadding和Scroll三个公用组件，接口请求方法getSingerInfo，接口成功CODE码，歌手和歌曲模型类

import Header from "@/common/header/Header"
import Scroll from "@/common/scroll/Scroll"
import Loading from "@/common/loading/Loading"
import {getSingerInfo} from "@/api/singer"
import {getSongVKey} from "@/api/song"
import {CODE_SUCCESS} from "@/api/config"
import * as SingerModel from "@/model/singer"
import * as SongModel from "@/model/song"
复制代码

render方法中编写如下代码

let singer = this.state.singer;
let songs = this.state.songs.map((song) => {
    return (
        <div className="song" key={song.id}>
            <div className="song-name">{song.name}</div>
            <div className="song-singer">{song.singer}</div>
        </div>
    );
});
return (
    <CSSTransition in={this.state.show} timeout={300} classNames="translate">
        <div className="music-singer">
            <Header title={singer.name} ref="header"></Header>
            <div style={{position:"relative"}}>
                <div ref="albumBg" className="singer-img" style={{backgroundImage: `url(${singer.img})`}}>
                    <div className="filter"></div>
                </div>
                <div ref="albumFixedBg" className="singer-img fixed" style={{backgroundImage: `url(${singer.img})`}}>
                    <div className="filter"></div>
                </div>
                <div className="play-wrapper" ref="playButtonWrapper">
                    <div className="play-button">
                        <i className="icon-play"></i>
                        <span>播放所有</span>
                    </div>
                </div>
            </div>
            <div ref="albumContainer" className="singer-container">
                <div className="singer-scroll" style={this.state.loading === true ? {display:"none"} : {}}>
                    <Scroll refresh={this.state.refreshScroll}>
                        <div className="singer-wrapper">
                            <div className="song-count">歌曲 共{songs.length}首</div>
                            <div className="song-list">
                                {songs}
                            </div>
                        </div>
                    </Scroll>
                </div>
                <Loading title="正在加载..." show={this.state.loading}/>
            </div>
        </div>
    </CSSTransition>
);
复制代码

在componentDidMount中初始化.singer-container的top值，值设置为.singer-img高度。而后getSingerInfo方法请求接口数据，请成功后更新singer和songs

let albumBgDOM = ReactDOM.findDOMNode(this.refs.albumBg);
let albumContainerDOM = ReactDOM.findDOMNode(this.refs.albumContainer);
albumContainerDOM.style.top = albumBgDOM.offsetHeight + "px";

getSingerInfo(this.props.match.params.id).then((res) => {
    console.log("获取歌手详情：");
    if (res) {
        console.log(res);
        if (res.code === CODE_SUCCESS) {
            let singer = SingerModel.createSingerByDetail(res.data);
            singer.desc = res.data.desc;

            let songList = res.data.list;
            let songs = [];
            songList.forEach(item => {
                if (item.musicData.pay.payplay === 1) { return }
                let song = SongModel.createSong(item.musicData);
                //获取歌曲vkey
                this.getSongUrl(song, song.mId);
                songs.push(song);
            });
            this.setState({
                loading: false,
                singer: singer,
                songs: songs
            }, () => {
                //刷新scroll
                this.setState({refreshScroll:true});
            });
        }
    }
});
复制代码

getSongUrl

getSongUrl(song, mId) {
    getSongVKey(mId).then((res) => {
        if (res) {
            if(res.code === CODE_SUCCESS) {
                if(res.data.items) {
                    let item = res.data.items[0];
                    song.url =  `http://dl.stream.qqmusic.qq.com/${item.filename}?vkey=${item.vkey}&guid=3655047200&fromtag=66`
                }
            }
        }
    });
}
复制代码

监听Scroll组件滚动实现上滑和往下拉伸效果

scroll = ({y}) => {
    let albumBgDOM = ReactDOM.findDOMNode(this.refs.albumBg);
    let albumFixedBgDOM = ReactDOM.findDOMNode(this.refs.albumFixedBg);
    let playButtonWrapperDOM = ReactDOM.findDOMNode(this.refs.playButtonWrapper);
    if (y < 0) {
        if (Math.abs(y) + 55 > albumBgDOM.offsetHeight) {
            albumFixedBgDOM.style.display = "block";
        } else {
            albumFixedBgDOM.style.display = "none";
        }
    } else {
        let transform = `scale(${1 + y * 0.004}, ${1 + y * 0.004})`;
        albumBgDOM.style["webkitTransform"] = transform;
        albumBgDOM.style["transform"] = transform;
        playButtonWrapperDOM.style.marginTop = `${y}px`;
    }
}
复制代码

<Scroll refresh={this.state.refreshScroll} onScroll={this.scroll}>
    ...
</Scroll>
复制代码

详细说明请看第四节实现动画列表滚动和图片拉伸效果

给歌曲增长点击播放功能，这里有两个地方一个是点击单个歌曲播放，另外一个是点击所有播放

selectSong(song) {
    return (e) => {
        this.props.setSongs([song]);
        this.props.changeCurrentSong(song);
    };
}
playAll = () => {
    if (this.state.songs.length > 0) {
        //添加播放歌曲列表
        this.props.setSongs(this.state.songs);
        this.props.changeCurrentSong(this.state.songs[0]);
        this.props.showMusicPlayer(true);
    }
}
复制代码

<div className="song" key={song.id} onClick={this.selectSong(song)}>
    ...
</div>
复制代码

<div className="play-button" onClick={this.playAll}>
    <i className="icon-play"></i>
    <span>播放所有</span>
</div>
复制代码

和上一节同样复制第5节的initMusicIco和startMusicIcoAnimation两个函数，而后在componentDidMount中调用initMusicIco

this.initMusicIco();
复制代码

在selectSong函数中调用startMusicIcoAnimation启动动画

selectSong(song) {
    return (e) => {
        this.props.setSongs([song]);
        this.props.changeCurrentSong(song);
        this.startMusicIcoAnimation(e.nativeEvent);
    };
}
复制代码

音符下落动画具体请看歌曲点击音符下落动画

效果

总结

这一节主要内容是根据新的滚动需求改造了Scroll基础组件，在实际开发中，封装了一些基础组件，前期可以知足需求，随着新的功能出现可能会对基础组件进行改造以知足新的需求。详情在几个页面中都是很是类似的，其实这里是能够把它作为一个公用的组件，获取数据后封装成其要求的数据格式传入。我最近使用vue开发这个web音乐app，其中详情页就已经抽取出来了

完整项目地址：github.com/code-mcx/ma…

本章节代码在chapter7分支

后续更新中...