微信小程序开发：了解换肤效果如何

演示

尝试代码测试一下，或者搜索“我的年度目标”

下面是换肤效果图

执行功能

要实现上面换皮肤的效果有以下几种思路：

1. 准备一个与皮肤相关的wxss，添加到app.wxss中，让每个页面更容易使用；
2. 安装皮肤时，动态更改wxml中元素的类名或id，根据页面应用皮肤；
3. 将选择的皮肤值存储在小程序本地缓存中，以保证在其他页面以及打开小程序时显示正确的皮肤；

这里是一些应用细节

wxml

<view class="page" id='{{skin}}'>  
  <view class="container">
  	...
  </view>
</view>
复制代码

wxml部分很简单。您需要动态更改 id。注意，由于页面无法动态设置背景色，所以这里最外层需要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中定义的公共方法，如下所示，通过现有的肤色。

打开自定义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其实是可以去掉的。

至此，美肤设置就已经实现了。朋友们，我们来试试吧！

作者：悟空
链接：https://juejin.im/post/5c37563d6fb9a049ea392771
来源：作者掘金
。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。