小程序实现换肤功能
⼩程序实现换肤功能
在⼿机、电脑使⽤频率如此⾼的当下，应⽤可以更换⽪肤，以提升美观性，并减轻屏幕对眼睛的刺激，⽆疑对⽤户体验有很⼤的帮助。
这⾥闲话少说，先放码出来
  github地址：
演⽰
扫码即可体验，或搜索“我的年⽬标”
下⾯为更换⽪肤效果图
实现功能
要实现如上更换⽪肤的效果，有⼏个思路：
1. 准备⽪肤相关的wxss，引⼊到app.wxss中，⽅便每个页⾯使⽤；
2. 设置⽪肤时，动态改变wxml中元素的类名或id，使页⾯应⽤对应的⽪肤；
3. 将选中⽪肤的值保存在⼩程序本地缓存中，保证其他页⾯及下⼀次打开⼩程序时，页⾯展⽰正确的⽪肤；
下⾯介绍⼀些实现的细节
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;
元旦作文450字color: #8c6031;
}
#yellow-skin .borderColor{
border-color:#8c6031;
}
...
复制代码
写好⽪肤对应的颜⾊样式，直接放⼊app.wxss中即可，如果样式过多，可以使⽤单独的wxss⽂件，⽅便管理。
@import "style/skin/dark.wxss";
复制代码
js
存储选中的⽪肤值
//<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({
data: {
},
祝福事业的祝福语setSkin:function(that){
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 = lor,科目二补考
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 。
该⼩程序的其他介绍：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。