微信小程序实现皮肤功能(夜间模式)

前端之家收集整理的这篇文章主要介绍了微信小程序实现皮肤功能(夜间模式)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

老规矩,先上效果

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

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

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

言归正传,依然是分析功能

1.点击按钮,切换一套css(这个功能很简单)

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

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

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

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

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

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

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

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

然后呢

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

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

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

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

页面****/ .dark-Box{ background: #000 !important; } /*用户信息部分*/ .dark-Box .user-Box{ background: #333 !important; color: #999; } /*列表部分*/ .dark-Box .extra-Box{ background: #333 !important; } .dark-Box .extra-Box .extra-item{ border-bottom: 1px solid #000 !important; } .dark-Box .extra-Box .item-head{ color: #999; } .dark-Box .between-Box{ background: #333 !important; } .dark-Box .between-left{ background: #333 !important; } .dark-Box .between-left .item-head{ color: #999; } /****个人信息页面结束****/

大家发现,我这些样式名称都有dark-Box

这个dark-Box就是最外面,也是最大的盒子(除了默认的page哈)

my-Box是普通模式,dark-Box就是夜间模式

Box {{skinStyle}}-Box">

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

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

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

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

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

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

全局变量 if(e.detail.value == true){ app.globalData.skin="dark" }else{ app.globalData.skin = "" } that.setData({ skinStyle: app.globalData.skin }) } })

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

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

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

},switchChange:function(e){
var that =this

//设置全局变量
if(e.detail.value == true){
app.globalData.skin="dark"
}else{
app.globalData.skin = ""
}
that.setData({
skinStyle: app.globalData.skin
})
//保存到本地
wx.setStorage({
key: "skin",data: app.globalData.skin
})
}
})

完了吗?并没有。。

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

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

现在我们设置黑色皮肤,然后退出,进去之后不是黑色 因为我们在页面加载时没设置

现在再来看看

皮肤没问题了

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

因为开关重置了

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

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/weapp/38531.html

猜你在找的微信小程序相关文章