微信小程序夜间模式,实现更换皮肤,切换白天黑夜模式!
程序员文章站
2022-05-15 10:01:59
...
先看下效果图吧:
夜晚模式样式:
白天正常样式:
先讲一下具体的思路和实现方法吧,我这个功能是项目已经上线一年后才提出要加上去的,由于页面比较多,重构wxSS太费力了,就选了简单粗暴的方式,直接另外给一套夜间模式的单独样式,吧白天的样式给覆盖掉,用户在点击模式切换的时候,直接设置一个全局变量‘idDark’存入到缓存中,然后在去到每一个页面的时候,在onShow方法里面读取一下当前的’isDark’值,判断当前是否为夜间模式,如果是就显示夜间模式样式,如果不是就正常显示就ok,这里皮肤设置其实修改的全是文字和背景颜色,其实也没多少代码量,具体实现方式要你们自己去琢磨,稍微有点功底的应该就看得懂,简单贴一段代码吧;
wxml部分,直接在我们的盒子外围给一个view标签,根据isDark的值来动态控制是否需要显示夜间模式样式
<view class="{{isDark?'dark':''}}">
<view class="box">
我是内容...
</view>
<view class="footer">
我是底部...
</view>
</view>
wxss部分,这里需要两套css文件,可以自己建一个文件夹SKIN来存放皮肤wxss文件,新建一个dark.wxss,用于编写夜间模式样式,然后在需要配置夜间模式的页面引入dark.wxss文件,记得放在最后,这样不用加!important来覆盖样式
//正常页面显示样式index.wxss文件代码,就是白天样式
.box {
background: #ffffff;
color: #000000;
}
.footer {
background: #F2F2F2;
color: #7C7C7C;
}
@import '../../assets/skin/dark.wxss';
//夜间样式dark.wxss代码
.dark {
background: #000000;
color: #ffffff;
}
.dark .box {
background: #222222;
color: #ffffff;
}
.dark .footer {
background: #7C7C7C;
color: #ffffff;
}
看了应该就明白了,其实原理就是用.dark类名来覆盖原有白天样式,不要觉得麻烦,其实一个页面里面涉及到颜色的没有多少,改起来还是比较简单的,js部分我就不写了,上面已经说明白原理了,还有不会或者不太明白的可以留言,我看到会第一时间回复的!
上一篇: type=file多图片上传 预览和删除
下一篇: 实验吧-ctf-misc