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中加入如下代碼

  1. 芒果黃
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"
};
複製代碼
  1. 酷狗藍
skin.kuGouBlue = Object.assign({}, skin.mangoYellow, {
  appHeaderBgColor: "#2CA2F9",
  activeColor: "#2CA2F9",
  searchTitleColor: "#2CA2F9",
  miniRightColor: "#2CA2F9"
});
複製代碼
  1. 網易紅
skin.netBaseRed = Object.assign({}, skin.mangoYellow, {
  appHeaderBgColor: "#D43C33",
  activeColor: "#D43C33",
  searchTitleColor: "#D43C33",
  miniRightColor: "#D43C33"
});
複製代碼
  1. 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程