介绍
小编给大家分享一下小程序如何实现皮肤的夜间模式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
老规矩,先上效果图
个人对夜间模式这个功能情有独钟
晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀
所以我一直用某浏览器,因为有夜间模式
言归正传,依然是分析功能点
1。点击按钮,切换一套css(这个功能很简单)
2。把皮肤设置保存到全局变量,在访问其它页面时也能有效果
3。把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤
先从切换开始吧,开关很少用,还是贴一下吧
& lt; switch bindchange=皊witchChange", color =? F39C89",类=皊witch"/祝辞 页面({
,数据:{
,skinStyle:““
},
,onLoad: function (选项),{
},
,switchChange:函数(e) {
,var that =var 风格
,//如果开启
,如果(e.detail.value ==, true) {
风格才能=癲ark"
,其他}{//否才能则
style.skin 才能=,““
,}
,//保存信息
,that.setData ({
skinStyle才能:风格
,})
,}
}) 按钮功能好了,现在我们去写样式
像这种黑的风格的皮肤,大背景色用# 000
小背景用# 333,文字用# 999吧,我也懒得用取色器了
既然需要一套皮肤,那我们就去文件夹外面写一个样式文件
就新建一个皮肤目录、下面写一个黑暗。wxs吧
然后呢
我们把普通模式下的wxs复制一份,贴进来
把和颜色有关的属性留下来,其它删除
像背景呀、边界、颜色等。其它统统不要
最后发现就剩这么点了. .
/*夜间模式*//* * * *个人信息页面* * * */.dark-box {
,背景:# 000,!重要;
}/*用户信息部分*/.dark-box .user-box {
,背景:# 333,!重要;
,颜色:# 999;
}/*列表部分*/.dark-box .extra-box {
,背景:# 333,!重要;
}
.dark-box .extra-box .extra-item {
,边界底部:1 px solid # 000, !重要;
}
.dark-box .extra-box .item-head {
,颜色:# 999;
}
.dark-box .between-box {
,背景:# 333,!重要;
}
.dark-box .between-left {
,背景:# 333,!重要;
}
.dark-box .between-left .item-head {
,颜色:# 999;
}/* * * *个人信息页面结束* * * */ 大家发现,我这些样式名称都有黑盒
这个黑盒就是最外面,也是最大的盒子(除了默认的页面哈)
我的箱子是普通模式,黑盒就是夜间模式
& lt; view 类=癿y-box {{skinStyle}} -box"在 当然你也可以在写一个皮肤样式,黄,红,蓝。
现在这个写法,我们只用控制变量skinStyle的值就能改变皮肤样式了
我们还能写个蓝盒子的皮肤,然后设置变量为skinStyle为蓝就行了
还有关键一步,在wxs文件中把这个皮肤文件引入要显示的页面
@import “. ./. .//dark.wxss"皮肤; 接下来第二步,这就简单了. .
设置到全局变量嘛,先getApp(),然后传过去就行了
var 应用=getApp ()
页面({
,数据:{
,skinStyle:““
},
,onLoad: function (选项),{
},
,switchChange:函数(e) {
,var that =,//设置全局变量
,如果(e.detail.value ==, true) {
app.globalData.skin才能=癲ark"
,其他}{
app.globalData.skin 才能=,““
,}
,that.setData ({
skinStyle才能:app.globalData.skin
,})
,}
}) 现在在访问其它页面的时候,黑色皮肤也会传进去
我只写了一个页面哈,所以只有这个页面会有变化
现在第三步了,保存到localstroge中
var 应用=getApp ()
页面({
,数据:{
,skinStyle:““
},
,onLoad: function (选项),{
},
,switchChange:函数(e) {
,var that =,//设置全局变量
,如果(e.detail.value ==, true) {
app.globalData.skin才能=癲ark"
,其他}{
app.globalData.skin 才能=,““
,}
,that.setData ({
skinStyle才能:app.globalData.skin
,})
,//保存到本地
,wx.setStorage ({
,,关键:“skin",
数据:才能app.globalData.skin
,})
,}
})
