排行榜 统计
  • 建站日期:2017-05-08
  • 文章总数:446 篇
  • 评论总数:6393 条
  • 分类总数:25 个
  • 最后更新:10月9日

uniapp夜间模式实现方法,日间夜间自动变化

本文阅读 6 分钟
广告

先说在前头,我觉得我目前分享的实现流程还是太过于匆忙,毕竟是在做很紧急的项目中弄出来的快捷实现方案,估计还有很大的优化空间,所以这篇文章分享的流程和代码,可以自己根据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类强制写完所有的页面模式属性,就基本实现了。

screenshot-20210813-202257.png

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/2610/
门罗币安卓手机脚本挖矿
« 上一篇 07-31
typecho利用CodeMirror实现后台页面编辑代码高亮
下一篇 » 09-17
广告

发表评论

成为第一个评论的人

作者信息

热门文章

标签TAG

热评文章