[微信小程序夜间模式!]
思路
1.首先写出小程序的夜间模式的样式wxss
2.在切换夜间模式的时候将原本的样式覆盖掉
3.在每一个页面加载的时候判断一下是否切换黑夜模式(可以写在公共的变量中,在每一个页面取出变量进行判断)
实例
1.wxml
- 可以在原本代码的外层添加一个view(建议将所有代码包裹，之后可以随意更改里面的样式)
- 根据当前页面的js的判断，如果是黑夜模式就加上一个外层的class (通过这个最外层的class来控制盒子内部的样式)
- 如果当前是夜间模式，就用自己的黑夜模式的wxss来覆盖之前的wxss
- 通过?表达式来进行判断是否将之前的样式覆盖
<view class="{{night_mode?'black':''}}">
<!--如果night_mode为真就将black添加否则什么也不做-->
</view>
2.wxss
- 在当前页面引入wxss
//正常页面显示样式index.wxss文件代码，就是白天样式
.box {
background: #ffffff;
color: #000000;
}
.footer {
background: #F2F2F2;
color: #7C7C7C;
}
@import '../../black/black/black.wxss';
//下面是我们自己加的夜间样式black.wxss代码
.black{
background: #000000;
color: #ffffff;
}
.black.box {
background: #222222;
color: #ffffff;
}
.black.footer {
background: #7C7C7C;
color: #ffffff;
}
3.js
- 取出是否为黑夜模式的变量进行判断
Page({
/**
* 页面的初始数据
*/
data: {
night_mode:false,//是否开启了黑夜模式 默认为否
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;
let black_type = wx.getStorageSync('black_type');
if(black_type==1){
//没有开启
}else{
that.setData({
night_mode:true
})
}
}
})
总结
- 原理就是用.black类名来覆盖原有白天样式
有新的方法会继续更新
