react實現換膚功能

一.目標

  提供幾種主題色給用戶選擇，而後根據用戶的選擇改變應用的主題色；

二.實現原理

  1.準備不一樣主題色的樣式文件；
  2.將用戶的選擇記錄在本地緩存中；
  3.每次進入應用時，讀取緩存，根據緩存的信息判斷要加載哪一個樣式文件便可；

三.具體實現思路

1.準備四個對應不一樣主題色的樣式文件：

![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

2.在主頁給用戶提供主題色選擇的html：

```
   <span style={{color:"#0097e5"}} >
               <i  className={`skinTag skinTag0 ${this.state.skinIndex==0?'active':''}`}  onClick={this.toggleSkin.bind(this,0)}></i>
               <i  className={`skinTag skinTag1 ${this.state.skinIndex==1?'active':''}`}  onClick={this.toggleSkin.bind(this,1)}></i>
               <i  className={`skinTag skinTag2 ${this.state.skinIndex==2?'active':''}`}  onClick={this.toggleSkin.bind(this,2)}></i>
               <i  className={`skinTag skinTag3 ${this.state.skinIndex==3?'active':''}`}  onClick={this.toggleSkin.bind(this,3)}></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //將最新的主題色名稱更新到本地緩存中  
      this.loadingToast('主題色更換中..')
      location.reload()       //主題色更改後刷新頁面
  }

```

3.主題色選擇後，在入口文件根據緩存判斷要加載哪一個主題色樣式：

var aa=''
   if(getItem('skin')=='0'){
        aa='app'
   }else if(getItem('skin')=='1'){
       aa='app-skin1'
   }else if(getItem('skin')=='2'){
       aa='app-skin2'
   }else if(getItem('skin')=='3'){
        aa='app-skin3'
   }else{
       aa='app'
   }
  require([`./static/css/${aa}.scss`], function(list){});

  在這裏遇到了一個坑，剛開始的時候我是直接用 require(./static/css/${aa}.scss);的，結果不知道爲何把四個樣式文件都加載了，改爲上面那個就沒問題了，有空再研究一下require；

四.其餘

   賣個小廣告：我有一個小程序，能夠掃碼商品的條碼進行留言；別人掃同一個商品的條碼就能夠看到你的留言；
   讓條形碼變成你的郵差~~~~
   歡迎掃碼體驗：