先说在前头，我觉得我目前分享的实现流程还是太过于匆忙，毕竟是在做很紧急的项目中弄出来的快捷实现方案，估计还有很大的优化空间，所以这篇文章分享的流程和代码，可以自己根据uniapp的特性再优化一遍，估计可以做到更加精简和公共化。
uniapp的夜间模式，估计是做项目到后期比较常遇到的需求，因为现在的主流就是页面模式的应用了，所以在之前做某个项目的时候，我也是费了一些时间才实现了夜间模式，目前的效果还不算太好，虽然支持夜间和日间模式的手动切换，以及根据已有的设置，自动在晚上变为夜间模式，但还是在一些细节方面存在问题。我看网上的其它教程是直接重新制作出夜间模式的页面，虽然工作量很大，但是最终的效果会比我的好一点，不过也可以根据情况自己取舍。
不过我的方法，倒是全平台兼容。
教程开始
一：单个页面添加的代码
1.首先在初始字段data中定义如下：
isDark:false,
2.在onshow生命周期中加入如下代码：
//夜间模式
var that = this;
var showStyle = 1;
if(localStorage.getItem('showStyle')||localStorage.getItem('showStyle')==0){
var showStyle = localStorage.getItem('showStyle');
}
if(showStyle==1){
that.isDark = false;
// plus.setStatusBarStyle("dark");
}else if(showStyle==2){
that.isDark = true;
// 关于tabBar的深色模式修改
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
}
})
// 关于导航栏的深色模式修改
uni.setTabBarStyle({
color: '#7e858f',
selectedColor: '#e91d42',
backgroundColor: '#18202d',
borderStyle: 'black'
})
}else{
// #ifdef APP-PLUS
if(uni.getSystemInfoSync().platform === 'android'){
// 获取当前时间
let timeNow = new Date();
// 获取当前小时
let hours = timeNow.getHours();
// 设置默认文字
let state= ``;
// 判断当前时间段
if (hours > 18 && hours <= 24) {
that.isDark = true;
}
if (hours < 6) {
that.isDark = true;
}
}else{
var style = plus.navigator.getUIStyle();
if('dark'==style){
that.isDark = true;
}else{
}
}
// #endif
// #ifdef H5
// 获取当前时间
let timeNow = new Date();
// 获取当前小时
let hours = timeNow.getHours();
// 设置默认文字
let state= ``;
// 判断当前时间段
if (hours > 18 && hours <= 24) {
that.isDark = true;
}
if (hours < 6) {
that.isDark = true;
}
// #endif
if(that.isDark){
// 关于tabBar的深色模式修改
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
}
})
// 关于导航栏的深色模式修改
uni.setTabBarStyle({
color: '#7e858f',
selectedColor: '#e91d42',
backgroundColor: '#18202d',
borderStyle: 'black'
})
}
}
//夜间模式结束
上面代码的含义包括读取localStorage本地存储的字段，以及对导航栏还有底部的tab进行颜色的替换，还包括了在ios设备下，晚上6点自动切换为夜间模式，当然如果要全平台支持localStorage，需要在官方的插件市场安装这个免费插件：mp-storage，引入方法如下：
import { localStorage } from '../../js/mp-storage/index.js'
3.在页面最外层的view代码里，加入如下代码，绑定class，这里了解vue的肯定懂，我就不多补充了。
:class="isDark?'dark':''"
4.完成上面的代码加入后，就可以创建一个公共的dark.css，当然也可以直接放在公共的css里面，将css代码以绑定的dark类进行强制加入属性，比如如下，具体的自己定义就好了，反正就是在夜间状态下，强制将页面之前的属性修改为暗色就行：
.dark{
min-height: 100vh;
background-color: #0b0e17 !important;
overflow: hidden;
}
.dark input{
color: #c7cddb;
}
二：模式切换页面代码
1.在这个页面定义两个字段，styleList对应模式列表，radio对应当前的模式。
styleList:["日间模式","夜间模式","跟随系统"],
radio:0,
2.在页面上循环输出上面的数组（这里肯定是根据自己的实际情况来写循环，我这里用的是ui库的组件，千万别拿去复制）。
<radio-group class="block" @change="RadioChange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(item,index) in styleList" :key="index">
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">{{item.name}}</view>
<radio class="round" :class="radio==index?'checked':''" :checked="radio==index?true:false"
:value="index"></radio>
</label>
</view>
</view>
</radio-group>
3.定义一个点击事件的方法，用途是点击切换模式之后，就保存localStorage并自动重启应用。我的代码为了配合ui库拆分成了两个，实际上一个方法就够了，就是将数组里的当前指针直接保存就行，同样的，里面涉及到的颜色什么的，都可以自己改。
submit(){
var that = this;
localStorage.setItem('showStyle',that.radio);
var showStyle = that.radio;
if(showStyle==1){
that.isDark = false;
}else if(showStyle==2){
that.isDark = true;
// 关于tabBar的深色模式修改
that.refreshstyle = "black";
that.rebackground = "#262626";
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
}
})
// 关于导航栏的深色模式修改
uni.setTabBarStyle({
color: '#7e858f',
selectedColor: '#e91d42',
backgroundColor: '#18202d',
borderStyle: 'black'
})
}else{
// #ifdef APP-PLUS
if(uni.getSystemInfoSync().platform === 'android'){
// 获取当前时间
let timeNow = new Date();
// 获取当前小时
let hours = timeNow.getHours();
// 设置默认文字
let state= ``;
// 判断当前时间段
if (hours > 18 && hours <= 24) {
that.isDark = true;
}
if (hours < 6) {
that.isDark = true;
}
}else{
var style = plus.navigator.getUIStyle();
if('dark'==style){
that.isDark = true;
}else{
}
}
// #endif
// #ifdef H5
// 获取当前时间
let timeNow = new Date();
// 获取当前小时
let hours = timeNow.getHours();
// 设置默认文字
let state= ``;
// 判断当前时间段
if (hours > 18 && hours <= 24) {
that.isDark = true;
}
if (hours < 6) {
that.isDark = true;
}
// #endif
if(that.isDark){
// 关于tabBar的深色模式修改
// that.refreshstyle = "black";
// that.rebackground = "#262626";
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
}
})
// 关于导航栏的深色模式修改
uni.setTabBarStyle({
color: '#7e858f',
selectedColor: '#e91d42',
backgroundColor: '#18202d',
borderStyle: 'black'
})
}
}
uni.reLaunch({
url: '/pages/home/home'
})
// #ifdef APP-PLUS
plus.runtime.restart();
// #endif
},
4.这个页面也别忘记在onshow中写获取当前模式的代码，赋值到radio。
if(localStorage.getItem('showStyle')){
that.radio = localStorage.getItem('showStyle');
}
之后，就是把单页面的代码添加到所有页面，并且留一个设置的页面用来对模式进行切换，以及在css里面通过dark类强制写完所有的页面模式属性，就基本实现了。
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.ruletree.club/archives/2610/
推荐使用Vuex做响应
学习