微信小程序解决夜间和白天模式

[微信小程序夜间模式!]

1.首先写出小程序的夜间模式的样式wxss

2.在切换夜间模式的时候将原本的样式覆盖掉

3.在每一个页面加载的时候判断一下是否切换黑夜模式(可以写在公共的变量中,在每一个页面取出变量进行判断)

1.wxml

2.wxss

3.js

在阅读类软件中，夜间模式和日间模式是经常用到的功能，使用Towify中的样式，即可轻松实现。

效果展示：

通过使用样式的默认与选中模式，同时配置触发器，完成点击开关切换日间模式及夜间模式。

效果图

样式配置：

选中容器

点击检查面板的样式

新增样式

样式切换为Selected

配置显示的颜色

触发器配置：

注意：激活有两种状态，分别为激活和非激活，激活对应了样式中的Selected状态，而非激活对应了样式中的Default状态。

选中容器

点击检查面板中的触发器

创建夜间模式触发器

注意：触发行为展示有两种状态，分别为展示、隐藏、切换，主要用于组件在当前界面中的显示状态。

选中图标

点击检查面板中的触发器

创建图标展示触发器

注意：执行其它触发器 是触发器的触发行为，主要用于同时执行其它多个组件的触发器。前置条件是执行该触发器的前置检查，在该案例使用的是检查开关组件的状态，当开关是非激活时，点击开关打开夜间模式，当开关是激活时，关闭开关打开日间模式。

选中开关组件

点击检查面板中的触发器

创建触发器，执行容器、图标、开关组件的触发器

这样你就可以在小程序中轻松配置日间模式和夜间模式的切换了。

老规矩，先上效果图

个人对夜间模式这个功能情有独钟

晚上黑灯瞎火的看手机，屏幕亮度就算调到最低依然很是刺眼呀

所以我一直用某浏览器，因为有夜间模式

言归正传，依然是分析功能点

1.点击按钮，切换一套css（这个功能很简单）

2.把皮肤设置保存到全局变量，在访问其它页面时也能有效果

3.把设置保存到本地，退出应用再进来时，依然加载上次设置的皮肤

先从切换开始吧，switch很少用，还是贴一下吧

按钮功能OK了，现在我们去写样式

像这种黑的风格的皮肤，大背景色用#000

小背景用#333，文字用#999吧，我也懒得用取色器了

既然需要一套皮肤，那我们就去文件夹外面写一个样式文件

就新建一个skin目录，下面写一个dark.wxss吧

然后呢

我们把普通模式下的wxss复制一份，贴进来

把和颜色有关的属性留下来，其它删除

像background呀，border，color等。。其它统统不要

最后发现就剩这么点了。。

大家发现，我这些样式名称都有dark-box

这个dark-box就是最外面，也是最大的盒子（除了默认的page哈）

my-box是普通模式，dark-box就是夜间模式

当然你也可以在写一个皮肤样式，黄、红、蓝。。。

现在这个写法，我们只用控制变量 skinStyle的值就能改变皮肤样式了

我们还能写个blue-box的皮肤，然后设置变量为skinStyle为blue就行了

还有关键一步，在wxss文件中把这个皮肤文件引入要显示的页面

接下来第二步，这就简单了。。

设置到全局变量嘛，先getApp(),然后传过去就行了

现在在访问其它页面的时候，dark皮肤也会传进去

我只写了一个页面哈，所以只有这个页面会有变化

现在第三步了，保存到localstroge中

完了吗？并没有。。

我们要在程序打开时就获取皮肤设置

所以要在app.js去get与皮肤相关的信息

现在我们设置黑色皮肤，然后退出，进去之后不是黑色

因为我们在页面加载时没设置

现在再来看看

结果按钮的状态是关闭，皮肤却是开着

因为开关重置了

这个就交给大家自己解决啦，启动时判断一下就OK啦

需要源码的话我再上传吧

---