小程序系列--3.这可能是最完整的换肤功能（夜间模式）的实现

如果你不想听我叨叨，直接看我的demo，这是GitHub地址：https://github.com/liweibo/miniProgram--NightModel/tree/master

建议大家把代码当下来，对着代码看本文，可能理解起来更简单。

这是本demo的效果展示动图：

demo实现的效果

 

推荐大家体验小程序“IT面试题库”体验完整版的换肤功能，下面是其演示效果。

“IT面试题库”演示效果

 

下面进入正题，如何实现？思路分为如下几步：

 

1. 点击switch控件时，切换一套对应的class样式。

2. 将换肤设置值保存为全局变量，保证其他页面也能显示对应的样式。

3. 把皮肤设置值保存到本地，便于小程序在后台销毁后，下次进来依然按照之前的设置显示对应的皮肤。

4. 在app.js文件中把保存到本地的皮肤设置值赋给全局变量。

 

写代码时，就按照以上思路进行，下面细说：

 

首先，皮肤的样式文件的编码应该按照如下形式：

/* 白天模式对应的样式 */
.textindex {
  padding: 5px;
  background-color: #f8f8f8;
  color: rgb(51, 29, 29);
}
/* 夜间模式对应的样式 */
.textindexdark {
  padding: 5px;
  color: rgb(51, 29, 29);
  background-color: #708090;
}

然后，这些样式应这样被用在.wxml文件中，看代码：

<view class='textindex{{skinStyle}}'>
  <text>朱自清--背影</text>
</view>

 

代码中的skinStyle的值就是dark或''，dark或''是根据全局变量skin的值来确定的，当switch控件点开(对应true)或者关闭(对应false)时，会有true或false值，若为true，就把全局变量skin的值设为dark，否则设为''，同时把skin的值保存到本地，这些逻辑都是在switch点击事件中实现。

 

总结：代码的执行逻辑是这样的。

 

1.switch点击事件函数中根据switch是否开启的真假值设置全局变量skin是''还是dark，再将全局变量设为本地存储。

 

 

2.下次进入小程序时，App.js中自动从本地取值，存到全局变量中，各个需要显示的页面获取全局变量来显示对应的样式。

 

更多技术文章，请大家关注我的公众号：一根羊毛

一根羊毛