在手機、電腦使用頻率如此高的當下，應用可以更換皮膚，以提升美觀性，並減輕螢幕對眼睛的刺激，無疑對使用者體驗有很大的幫助。
這裡閒話少說，先放碼出來
github地址：我的年目標-微信小程式
演示
掃碼即可體驗，或搜尋“我的年目標”
下面為更換皮膚效果圖
實現功能
要實現如上更換皮膚的效果，有幾個思路：
- 準備皮膚相關的wxss，引入到app.wxss中，方便每個頁面使用；
- 設定皮膚時，動態改變wxml中元素的類名或id，使頁面應用對應的皮膚；
- 將選中皮膚的值儲存在小程式本地快取中，保證其他頁面及下一次開啟小程式時，頁面展示正確的皮膚；
下面介紹一些實現的細節
wxml
<view class="page" id='{{skin}}'>
<view class="container">
...
</view>
</view>
複製程式碼wxml部分比較簡單，只需要動態切換id即可，注意因為page無法動態設定背景色，所以這裡的最外層需要width: 100%;height: 100%;，否則將無法使皮膚鋪滿頁面。
wxss
/* app.wxss主題顏色 */
/* 深黑 */
#dark-skin{
background: #000;
}
#dark-skin .bColor{
background: #333;
color: #999;
}
#dark-skin .borderColor{
border-color:#999;
}
/* 粉紅 */
#red-skin{
background: #f9e5ee;
}
#red-skin .bColor{
background: #f9e5ee;
color: #8e5a54;
}
#red-skin .borderColor{
border-color:#8e5a54;
}
/* 橘黃 */
#yellow-skin{
background: #f6e1c9;
}
#yellow-skin .bColor{
background: #f6e1c9;
color: #8c6031;
}
#yellow-skin .borderColor{
border-color:#8c6031;
}
...
複製程式碼寫好皮膚對應的顏色樣式，直接放入app.wxss中即可，如果樣式過多，可以使用單獨的wxss檔案，方便管理。
@import "style/skin/dark.wxss";
複製程式碼js
儲存選中的皮膚值
//wxml
//<view bindtap="setSkin" data-flag='yellow'>橘黃</view>
//bindtap事件函式
setSkin:function(e){
var skin = e.target.dataset.flag;
this.setData({
skin: skin + '-skin',
openSet:false
})
wx.setStorage({
key: "skin",
data: skin + '-skin'
})
app.setSkin(this);
}
複製程式碼這裡使用setData使頁面立即切換id，使用wx.setStorage儲存值，app.setSkin是定義在app.js上的公共方法，下面會有介紹
//app.js
App({
data: {
},
setSkin:function(that){
wx.getStorage({
key: 'skin',
success: function(res) {
if(res){
that.setData({
skin: res.data
})
var fcolor = res.data == 'dark-skin' ? '#ffffff' : '#000000',
obj = {
'normal-skin':{
color:'#000000',
background:'#f6f6f6'
},
'dark-skin': {
color: '#ffffff',
background: '#000000'
},
'red-skin': {
color: '#8e5a54',
background: '#f9e5ee'
},
'yellow-skin': {
color: '#8c6031',
background: '#f6e1c9'
},
'green-skin': {
color: '#5d6021',
background: '#e3eabb'
},
'cyan-skin': {
color: '#417036',
background: '#d1e9cd'
},
'blue-skin': {
color: '#2e6167',
background: '#bbe4e3'
}
},
item = obj[res.data],
tcolor = item.color,
bcolor = item.background;
wx.setNavigationBarColor({
frontColor: fcolor,
backgroundColor: bcolor,
})
wx.setTabBarStyle({
color: tcolor,
backgroundColor: bcolor,
})
}
}
})
}
})
複製程式碼app.setSkin提供給所有頁面呼叫，並通過已有的皮膚顏色，設定頭部和導航區域的背景及文字顏色。
開啟一個普通wxml頁面，並設定皮膚
const app = getApp();
Page({
data: {
skin: 'normal-skin',
},
onLoad: function() {
app.setSkin(this);
},
onShow:function(){
app.setSkin(this);
}
})
複製程式碼在onLoad及onShow觸發時設定皮膚，這裡的onShow是為了避免重新設定皮膚時，頁面還顯示上一次的皮膚，由於首次載入會設定兩次，onLoad裡的app.setSkin其實可以去掉。
至此，一個精美的設定皮膚功能就實現了，小夥伴們快去試一試吧！
最後
新的2019，新的人生目標，歡迎體驗微信小程式“我的年目標”，如有建議，望告知或pull requests，tks 。
該小程式的其他介紹：