一.目標
提供幾種主題色給用戶選擇，然后根據用戶的選擇改變應用的主題色；
二.實現原理
1.准備不同主題色的樣式文件；
2.將用戶的選擇記錄在本地緩存中；
3.每次進入應用時，讀取緩存，根據緩存的信息判斷要加載哪個樣式文件即可；
三.具體實現思路
1.准備四個對應不同主題色的樣式文件：
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；
四.其他
賣個小廣告：我有一個小程序，可以掃碼商品的條碼進行留言；別人掃同一個商品的條碼就可以看到你的留言；
讓條形碼變成你的郵差~~~~
歡迎掃碼體驗：
