React全家桶构建一款Web音乐App实战（九）：皮肤切换

时间 2019-12-02

标签 react 全家构建一款 web 音乐 app 实战皮肤切换栏目 React 繁體版

原文原文链接

这一节是这款React Web音乐App实战的最后一节：皮肤切换功能。皮肤切换是Web音乐App中一个与核心无关的功能，加入这个功能能够为应用增添很多趣味性css

实现思路

实现皮肤切换功能的大体原理就是将样式提取出来做为一份单独的样式，给须要作皮肤切换的dom元素添加上这些样式，切换样式的时候替换指定样式属性值，再动态插入到DOM中，使CSS样式生效react

准备

在作这个功能前，须要新加入一些小图标，新增的小图标在下图红色方框中标出git

在第一节已经制做了一份字体图标文件和样式，此次加入新的图标须要使用svg图片从新来制做新的字体图标文件和样式，和第二节同样使用icomoon这个网站来制做，详细步骤见第一节字体图标制做github

字体图标制做完成后会有一份icomoon.zip包，解压后将里面fonts目录下的4个文件重命名为icomusic，而后进入到项目中将src/assets/stylus/fonts目录下面的4个文件替换成刚刚重命名的4个字体图标文件。回到src/assets/stylus下面的font.styl中，打开解压后的目录中的style.css，复制里面的.icon-开头的全部样式，替换掉font.styl中.icon-开头的样式redux

提取样式

在作皮肤切换功能前先将须要切换的样式提取出来。这里由于是全部功能作完以后再作皮肤切换功能，因此提取样式是很是繁琐的过程。如下是列举出全部须要提取样式的地方bash

文件位置	样式名称
app.styl	.app,.app-header,.music-tab,.active
recommend/recommend.styl	.title,.album-wrapper,.album-name
album/album.styl	.music-album,.album-wrapper,.song-name,.song-singer,.album-title
ranking/ranking.styl	.ranking-wrapper,.ranking-title,.index,.singer
ranking/rankinginfo.styl	.ranking-info,.ranking-wrapper,.song-name,.song-singer,.ranking-title
singer/singer.styl	.music-singer,.singer-wrapper,.song-name,.song-singer
singer/singerlist.styl	.nav,a.choose,.singer-name
search/search.styl	.search-box,.search-input,.title,.hot-item,.album-wrapper .song,.singer,.song-wrapper .song
play/miniplayer.styl	.mini-player,.player-img,.singer,.player-right,.filter:after

将以上样式中的color或background-color属性注释掉app

实现皮肤切换的作法有不少种。可能你见过将不一样的样式写在一份css文件里面，多少种皮肤就有多少份css文件，使用某种皮肤的时候将其引入，这种作法重复定义的属性太多，大量的css属性冗余，复用性太差。还有可能你见过写一份样式文件，样式属性的值使用指定字符占位，须要切换皮肤的时候请求这个文件，拿到样式文本后，替换掉占位的字符为实际的属性值，而后插入到HTML DOM中，这种作法每次切换皮肤的时候都要发送一次请求dom

这里将利用字符串模板返回一个样式文本字符串，样式属性值使用对象的属性占位，将css属性值定义成对象属性值，在切换皮肤的时候传入指定的对象。在util目录下新建skin.js，先定义用来保存样式属性值的对象skin，和一个返回样式文本的方法getSkinStylesvg

const skin = {};

skin.coolBlack = {
    appColor: "#DDDDDD",
    appBgColor: "#212121",
    /* 首页header */
    appHeaderColor: "#FFD700",
    appHeaderBgColor: "transparent",
    /* 首页tab */
    tabColor: "#DDDDDD",
    tabBgColor: "transparent",
    /* 最新专辑 */
    albumColor: "rgba(221, 221, 221, 0.7)",
    albumNameColor: "#FFFFFF",
    /* 排行榜 */
    rankingWrapperBgColor: "#333333",
    rankingSingerColor: "rgba(221, 221, 221, 0.7)",
    /* 搜索 */
    searchBgColor: "#212121",
    searchBoxBgColor: "#333333",
    searchBoxWrapperBgColor: "#212121",
    searchTitleColor: "#FFD700",
    searchHotColor: "#DDDDDD",
    searchHotBorderColor: "transparent",
    searchResultBorderColor: "transparent",
    /* 详情 */
    detailBgColor: "#212121",
    detailSongColor: "#FFFFFF",
    detailSingerColor: "rgba(221, 221, 221, 0.7)",
    /* mini播放器 */
    miniPlayerBgColor: "#333333",
    miniImgBorderColor: "rgba(221, 221, 221, 0.3)",
    miniProgressBarBgColor: "rgba(0, 0, 0, 0.3)",
    miniRightColor: "#FFD700",
    miniSongColor: "#FFFFFF",
    activeColor: "#FFD700"
};

let getSkinStyle = (skin) => {
    if (!skin) {
        return "";
    }
    return `
    .skin-app {
      color: ${skin.appColor};
      background-color: ${skin.appBgColor};
    }
    .skin-app-header {
      color: ${skin.appHeaderColor};
      background-color: ${skin.appHeaderBgColor};
    }
    .skin-music-tab {
      color: ${skin.tabColor};
      background-color: ${skin.tabBgColor};
    }
    .skin-recommend-title {
      color: ${skin.activeColor};
    }
    .skin-album-wrapper {
      color: ${skin.albumColor};
    }
    .skin-album-wrapper .album-name {
      color: ${skin.albumNameColor}
    }
    .skin-ranking-wrapper {
      background-color: ${skin.rankingWrapperBgColor};
    }
    .skin-ranking-wrapper .ranking-title {
      color: ${skin.albumNameColor};
    }
    .skin-ranking-wrapper .singer {
      color: ${skin.rankingSingerColor};
    }
    .skin-music-singers .choose {
      color: ${skin.activeColor} !important;
      border: 1px solid ${skin.activeColor} !important;
    }
    .skin-search {
      background-color: ${skin.searchBgColor};
    }
    .skin-search .title {
      color: ${skin.searchTitleColor};
    }
    .skin-search .hot-item {
      border: 1px solid ${skin.searchHotBorderColor};
      color: ${skin.searchHotColor};
      background-color: ${skin.searchBoxBgColor};
    }
    .skin-search-box {
      background-color: ${skin.searchBoxBgColor};
    }
    .skin-search-box input {
      color: ${skin.appColor};
    }
    .skin-search-box-wrapper {
      background-color: ${skin.searchBoxWrapperBgColor};
    }
    .skin-search-result .singer {
      color: ${skin.albumColor};
    }
    .skin-search-result .singer-wrapper .singer {
      color: ${skin.appColor};
    }
    .skin-search-result .singer-wrapper .info {
      color: ${skin.albumColor};
    }
    .skin-detail-wrapper {
      background-color: ${skin.detailBgColor};
    }
    .skin-detail-wrapper .song-name {
      color: ${skin.detailSongColor};
    }
    .skin-detail-wrapper .song-singer {
      color: ${skin.detailSingerColor};
    }
    .skin-mini-player {
      background-color: ${skin.miniPlayerBgColor};
    }
    .skin-mini-player .player-img {
      border: 2px solid ${skin.miniImgBorderColor};
    }
    .skin-mini-player .progress-bar {
      background-color: ${skin.miniProgressBarBgColor} !important;
    }
    .skin-mini-player .progress {
      background-color: ${skin.miniRightColor} !important;
    }
    .skin-mini-player .player-right {
      color: ${skin.miniRightColor};
    }
    .skin-mini-player .song {
      color: ${skin.miniSongColor};
    }
    .skin-mini-player .singer {
      color: ${skin.detailSingerColor};
    }
    .music-album, .ranking-info, .music-singer {
      background-color: ${skin.detailBgColor};
    }
    .nav-link.active {
      color: ${skin.activeColor} !important;
      border-bottom: 2px solid ${skin.activeColor};
    }
  `;
};
复制代码

skin.coolBlack中的颜色值是从上述表格中的样式中提取出来的post

编写一个把样式插入到HTML DOM中的方法setSkinStyle

let setSkinStyle = (skin) => {
    let styleText = getSkinStyle(skin);
    let oldStyle = document.getElementById("skin");
    const style = document.createElement("style");
    style.id = "skin";
    style.type = "text/css";
    style.innerHTML = styleText;
    oldStyle ? document.head.replaceChild(style, oldStyle) : document.head.appendChild(style);
};
复制代码

在skin.js中调用setSkinStyle并传入skin.coolBlack

// 设置皮肤
setSkinStyle(skin.coolBlack);
复制代码

最后导出skin对象和setSkinStyle，后续使用

export {skin, setSkinStyle}
复制代码

在程序运行的时候须要把这些样式插入到HTML DOM中，因此在Root.js中导入skin.js

import "../util/skin"
复制代码

接下来把提取出来的样式添加到各个组件中的标签上，下表列出来样式添加的位置

组件位置	元素	须要添加的样式
App.js	div.app div.app-header div.music-tab	.skin-app .skin-app-header .skin-music-tab
recommend/Recommend.js	div.album-wrapper h1.title	.skin-album-wrapper
album/Album.js	div.album-wrapper	.skin-detail-wrapper
ranking/Ranking.js	div.ranking-wrapper	.skin-ranking-wrapper
ranking/RankingInfo.js	div.ranking-wrapper	.skin-detail-wrapper
singer/SingerList.js	div.music-singers	.skin-music-singers
singer/Singer.js	div.singer-wrapper	.skin-detail-wrapper
search/Search.js	div.music-search div.search-box-wrapper div.search-box div.search-result	.skin-search .skin-search-box-wrapper .skin-search-box .skin-search-result
play/MiniPlayer.js	div.mini-player

应用上以上样式后，若是没有问题总体外观和以前会相差无几

自定义皮肤

除了以上的默认皮肤外，再定义几种样式。先定义一个芒果颜色作皮肤色，另外再使用酷狗、网易、QQ音乐三大音乐播放器的主色作皮肤色，接下来扩展skin对象，在skin.js中加入如下代码

芒果黄

skin.mangoYellow = {
    appColor: "#333333",
    appBgColor: "#F8F8FF",
    appHeaderColor: "#FFFFF0",
    appHeaderBgColor: "#FFA500",
    tabColor: "rgba(0, 0, 0, .7)",
    tabBgColor: "#FFFFFF",
    albumColor: "rgba(0, 0, 0, 0.6)",
    albumNameColor: "#333333",
    rankingWrapperBgColor: "#FFFFFF",
    rankingSingerColor: "rgba(0, 0, 0, 0.5)",
    searchBgColor: "#FFFFFF",
    searchBoxBgColor: "#FFFFFF",
    searchBoxWrapperBgColor: "#F8F8FF",
    searchTitleColor: "rgba(0, 0, 0, .7)",
    searchHotColor: "#000000",
    searchHotBorderColor: "rgba(0, 0, 0, .7)",
    searchResultBorderColor: "#E5E5E5",
    detailBgColor: "#F8F8FF",
    detailSongColor: "#000000",
    detailSingerColor: "rgba(0, 0, 0, 0.6)",
    miniPlayerBgColor: "#FFFFFF",
    miniImgBorderColor: "#EEEEEE",
    miniProgressBarBgColor: "rgba(0, 0, 0, 0.1)",
    miniRightColor: "#FFD700",
    miniSongColor: "#333333",
    activeColor: "#FFA500"
};
复制代码

酷狗蓝

skin.kuGouBlue = Object.assign({}, skin.mangoYellow, {
  appHeaderBgColor: "#2CA2F9",
  activeColor: "#2CA2F9",
  searchTitleColor: "#2CA2F9",
  miniRightColor: "#2CA2F9"
});
复制代码

网易红

skin.netBaseRed = Object.assign({}, skin.mangoYellow, {
  appHeaderBgColor: "#D43C33",
  activeColor: "#D43C33",
  searchTitleColor: "#D43C33",
  miniRightColor: "#D43C33"
});
复制代码

QQ绿

skin.qqGreen = Object.assign({}, skin.mangoYellow, {
  appHeaderBgColor: "#31C27C",
  activeColor: "#31C27C",
  searchTitleColor: "#31C27C",
  miniRightColor: "#31C27C"
});
复制代码

以上对象中，后三个继承自mangoYellow对象，而后将不一样属性值覆盖，能够很好的减小了相一样式的冗余

皮肤切换实现

为了实现皮肤切换，须要编写一个皮肤中心组件，皮肤中心从App组件中的菜单列表进入

在App.js中添加constructor，并初始化控制显示菜单的state属性menuShow

constructor(props) {
    super(props);

    this.state = {
        menuShow: false
    };
  }
复制代码

header.app-header元素中添加图标i.icon-et-more，并添加点击事件处理，点击后将menuShow设置为true

<header className="app-header skin-app-header">
  <i className="icon-et-more app-more" onClick={() => {this.setState({menuShow: true});}}></i>
  <img src={logo} className="app-logo" alt="logo" />
  <h1 className="app-title">Mango Music</h1>
</header>
复制代码

样式以下

App.styl

.app-header
    height: 55px
    line-height: 55px
    /*color: #FFD700*/
    text-align: center
    position: relative
    .app-more
      position: absolute
      top: 15px
      left: 15px
      font-size: 20px
复制代码

在components目录下新建setting目录，而后新建Menu.js和menu.styl

Menu.js

import React from "react"
import {CSSTransition} from "react-transition-group"

import "./menu.styl"

class Menu extends React.Component {
    constructor(props) {
        super(props);
    }
    close = () => {
        this.props.closeMenu();
    }
    render() {
        return (
            <div>
                <CSSTransition in={this.props.show} timeout={300} classNames="fade"
                       onEnter={() => {
                           this.refs.bottom.style.display = "block";
                       }}
                       onExited={() => {
                           this.refs.bottom.style.display = "none";
                       }}>
                    <div className="bottom-container" onClick={this.close}  ref="bottom">
                        <div className="bottom-wrapper">
                            <div className="item">
                                皮肤中心
                            </div>
                            <div className="item-close" onClick={this.close}>
                                关闭
                            </div>
                        </div>
                    </div>
                </CSSTransition>
            </div>
        );
    }
}

export default Menu
复制代码

menu.styl请在源码中查看

在App.js中导入Menu组件

import MusicMenu from "./setting/Menu"
复制代码

放置在以下位置，并传递show、closeMenu两个props，其中show用来控制Menu组件的显示和隐藏动画，closeMenu传递给Menu，当点击取消或背景遮罩时关闭自身

<Router>
  <div className="app skin-app">
    ...
    <MusicPlayer/>
    <MusicMenu show={this.state.menuShow}
               closeMenu={() => {this.setState({menuShow: false});}} />
  </div>
</Router>
复制代码

咱们把当前皮肤的key值交给Redux，在Skin组件中列出全部的皮肤，将Redux中保存的key对应的皮肤打上对钩的标记，点击单个皮肤能够设置当前皮肤。给皮肤添加Redux属性skin，actionType，action和reducer

actionTypes.js

export const SET_SKIN = "SET_SKIN";
复制代码

actions.js

export function setSkin(skin) {
	return {type:ActionTypes.SET_SKIN, skin};
}
复制代码

reducers.js

const initialState = {
    skin: "coolBlack",
    ...
};

//设置皮肤
function skin(skin = initialState.skin, action) {
	switch (action.type) {
		case ActionTypes.SET_SKIN:
			return action.skin;
		default:
			return skin;
	}
}

...

const reducer = combineReducers({
    skin,
    ...
});
复制代码

在setting目录下新建Skin.js和skin.styl

import React from "react"
import {CSSTransition} from "react-transition-group"

import "./skin.styl"

class Skin extends React.Component {
    constructor(props) {
        super(props);
        this.skins = [
            {key: "mangoYellow", name: "芒果黄", color: "#FFD700"},
            {key: "coolBlack", name: "炫酷黑", color: "#212121"},
            {key: "kuGouBlue", name: "酷狗蓝", color: "#2CA2F9"},
            {key: "netBaseRed", name: "网易红", color: "#D43C33"},
            {key: "qqGreen", name: "QQ绿", color: "#31C27C"}
        ]
    }
    render() {
        return (
            <CSSTransition in={this.props.show} timeout={300} classNames="pop"
                           onEnter={() => {
                               this.refs.skin.style.display = "block";
                           }}
                           onExited={() => {
                               this.refs.skin.style.display = "none";
                           }}>
                <div className="music-skin" ref="skin">
                    <div className="header">
                        皮肤中心
                        <span className="cancel" onClick={() => {this.props.close();}}>取消</span>
                    </div>
                    <div className="skin-title">推荐皮肤</div>
                    <div className="skin-container">
                        {
                            this.skins.map(skin => (
                                <div className="skin-wrapper" key={skin.key}>
                                    <div className="skin-color" style={{backgroundColor: skin.color, boxShadow: `0 0 3px ${skin.color}`}}>
                                        <i className="icon-right" style={{display: skin.key === this.props.currentSkin ? "" : "none"}}></i>
                                    </div>
                                    <div>{skin.name}</div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </CSSTransition>
        );
    }
}

export default Skin
复制代码

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

上诉代码在constructor中定义5中皮肤对象，用key属性标识某一个皮肤，这个key值对应到Redux中的skin，name和color对应皮肤名称和皮肤主色。在containers目录下新建Skin.js将Skin包装成容器组件

import {connect} from "react-redux"
import {setSkin} from "../redux/actions"
import Skin from "../components/setting/Skin"

const mapStateToProps = (state) => ({
    currentSkin: state.skin
});

const mapDispatchToProps = (dispatch) => ({
    setSkin: (skin) => {
        dispatch(setSkin(skin));
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Skin)
复制代码

在Menu组件中导入Skin容器组件，而后添加一个state属性skinShow控制Skin显示或隐藏，同时编写一个改变skinShow的方法showSetting

导入Skin

import Skin from "../../containers/Skin"
复制代码

constructor初始化skinShow

constructor(props) {
    super(props);
    this.state = {
        skinShow: false
    };
}
复制代码

showSetting方法中先关闭当前页面，而后将skinShow设置为true或false

showSetting = (status) => {
    this.close();
    // menu关闭后打开设置
    setTimeout(() => {
        this.setState({
            skinShow: status
        });
    }, 300);
}
复制代码

SKin组件放置在以下位置，传入show控制显示和隐藏，close方法用来关闭皮肤中心页面

<div>
    <CSSTransition in={this.props.show} timeout={300} classNames="fade"
       ...
    </CSSTransition>
    <Skin show={this.state.skinShow} close={() => {this.showSetting(false);}} />
</div>
复制代码

给皮肤中心添加点击事件，点击后调用showSetting，显示皮肤中心页面

<div className="bottom-wrapper">
    <div className="item" onClick={() => {this.showSetting(true);}}>
        皮肤中心
    </div>
    ...
</div>
复制代码

回到Skin组件中，给皮肤添加点击事件，点击后将当前皮肤的key传入，调用util下skin.js中导出的setSkinStyle方法设置皮肤，而后将皮肤设置到Redux的状态属性中保存，再调用props中的close方法关闭页面

skin.js

import {skin, setSkinStyle} from "../../util/skin"
复制代码

setCurrentSkin = (key) => {
    // 设置皮肤
    setSkinStyle(skin[key]);
    this.props.setSkin(key);
    // 关闭当前页面
    this.props.close();
}
复制代码

<div className="skin-wrapper" onClick={() => {this.setCurrentSkin(skin.key);}} key={skin.key}>
    ...
</div>
复制代码

皮肤持久化保存

作完皮肤切换功能后，每次刷新或从新进入页面上次设置的皮肤会切换为默认的黑色，咱们想让上一次设置的皮肤在刷新或从新进入时都是同样的，这时须要将皮肤的key值保存到本地

在util目录下的storage.js中添加两个方法

let localStorage = {
    setSkin(key) {
        window.localStorage.setItem("skin", key);
    },
    getSkin() {
        let skin = window.localStorage.getItem("skin");
        return !skin ? "coolBlack" : skin;
    },
    ...
}
复制代码

在reducers.js将skin写死的默认值从localStorage中获取，设置skin的reducer方法中将皮肤的key保存到localStorage中

const initialState = {
    skin: localStorage.getSkin(),  //皮肤
    ...
};

//设置皮肤
function skin(skin = initialState.skin, action) {
    switch (action.type) {
        case ActionTypes.SET_SKIN:
            localStorage.setSkin(action.skin);
            return action.skin;
        default:
            return skin;
    }
}
复制代码

而后在util下的skin.js中将调用setSkinStyle(skin.coolBlack)中的skin.coolBlack换成从localStorage中获取

import localStorage from "./storage"

...

setSkinStyle(skin[localStorage.getSkin()]);
复制代码

效果

总结

本节主要内容是切换皮肤的功能，实现的原理总的来讲就是提取样式，切换的时候替换样式，再插入到HTML DOM中，实现的方式有多种，这里主要选取一种比较合适的方式来作。

本系列全部章节到此结束

本章节代码在chapter9分支

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

体验地址：code-mcx.github.io/mango-music