在手機、電腦使用頻率如此高的當下,應用可以更換皮膚,以提升美觀性,並減輕屏幕對眼睛的刺激,無疑對用戶體驗有很大的幫助
這裏閒話少說,先放碼出來
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
該小程序的其他介紹: