在手机、电脑使用频率如此高的当下，应用可以更换皮肤，以提升美观性，并减轻屏幕对眼睛的刺激，无疑对用户体验有很大的帮助。
这里闲话少说，先放码出来
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
#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
存储选中的皮肤值
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){ 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 。
该小程序的其他介绍：
你的年目标实现了吗，记一次开发微信小程序
