关于vue.js:uniapp主题切换功能的第二种实现方式scss变量require

在上一篇 “uniapp主题切换性能的第一种实现形式（scss变量+vuex）” 中介绍了第一种如何切换主题，但咱们总结出一些不好的中央，例如扩展性不强，保护起来也艰难等等，那么接下我再给大家介绍另外一种切换主题的办法“scss变量+require”的形式

在介绍如何应用前，先看下最初的成果，以便大家能更好的了解，上面是效果图：

除了图上的这个页面切换了外，整体我的项目都有主题色的切换，具体成果可扫码自行查看。

接下来具体介绍下第二种实现形式

实现原理

定义两套主题色（多套再本人加）theme-dark.scss、theme-light.scss，每套主题色保护着本人的色彩，通过require动静引入scss的模式引入以后主题，从而达到切换主题的目标

第一步：创立不同主题色

创立白天与夜晚模式

创立白天模式

common/theme/theme-dark.scss

/* 切换主题次要切换的是  整体背景色、区块背景色、文字色彩等 */

// 页面主题
.theme-page{
    background-color: #333 !important;
    // 文字色彩
    .theme-color{
        color: #FFF !important;
    }
    // 区块主题色
    .theme-block{
        background-color: #FFFFFF !important;
        .theme-color{
            color: #000 !important;
        }
    }
}

// 如果想独自给集体核心设置一个主题色
.theme-user-page{
    background-color: #1a1a1a !important;
    // 文字色彩
    .theme-color{
        color: #FFF !important;
    }
    // 区块主题色
    .theme-block{
        background-color: #FFFFFF !important;
        .theme-color{
            color: #000 !important;
        }
    }
}

创立夜间模式

common/theme/theme-light.scss

/* 切换主题次要切换的是  整体背景色、区块背景色、文字色彩等 */

// 页面主题
.theme-page{
    background-color: #FFF !important;
    // 文字色彩
    .theme-color{
        color: #333 !important;
    }
    // 区块主题色
    .theme-block{
        background-color: #999 !important;
        .theme-color{
            color: #333 !important;
        }
    }
}

// 如果想独自给集体核心设置一个主题色
.theme-user-page{
    background-color: #F2F2F2;
    // 文字色彩
    .theme-color{
        color: #666 !important;
    }
    // 区块主题色
    .theme-block{
        background-color: #999 !important;
        .theme-color{
            color: #000 !important;
        }
    }
}

货色多了的状况，例如有5套主题色，离开不是很好保护，所以

能够思考把色彩值独立进来

改良：独立主题色

定义_theme.scss

$themes: (
    // 白天模式
    light:(
        page: (
            background-color: #fff,
            color: (
                color: #333,
            ),
            block: (
                background-color: #333,
                color: (
                    color: #fff,
                ),
            ),
        ),
        user-page: (
            background-color: #f2f2f2,
            color: (
                color: #666,
            ),
            block: (
                background-color: #999,
                color: (
                    color: #000,
                ),
            ),
        ),
    ),
    // 夜间模式
    dark:(
        page: (
            background-color: #333,
            color: (
                color: #fff,
            ),
            block: (
                background-color: #fff,
                color: (
                    color: #000,
                ),
            ),
        ),
        user-page: (
            background-color: #1a1a1a,
            color: (
                color: #fff,
            ),
            block: (
                background-color: #FFFFFF,
                color: (
                    color: #000,
                ),
            ),
        ),
    )
);

第二步：解决主题色

通过混入生成不同主题款式，代码如下

@mixin map-to-class($map, $divider: "-", $select: ".theme", $isRoot: false, $root-select: ".theme") {
    $select: if($select== "" and &, &, $select);
    @each $k, $v in $map {
        $currSelect: if($isRoot, #{$root-select}#{$divider}#{$k}, #{$select}#{$divider}#{$k});
        #{$currSelect} {
            @if type-of($v) ==map {
                @include map-to-class($v, $divider, "", true) {
                    @content;
                }
            } @else {
                @at-root #{$select} {
                    #{$k}: $v !important;
                }
            }
        }
    }
}

@each $key, $mode in $themes {
    @if $key== "light" {
        @include map-to-class($mode);
    }
}
// 或
@each $key, $mode in $themes {
    @if $key== "dark" {
        @include map-to-class($mode);
    }
}

大家能够用sass编辑器看一下最终的款式是什么样的

第三步：App.vue动静引入

在App.vue外面通过require动静引入主题，以后每次切换主题的时候要把以后主题数据进行保留。

onLaunch: function() {
    let theme = uni.getStorageSync('theme') || 'light';
    // import `@/common/theme/theme-${mode}.scss`;  //记住不能import哦
    require(`@/common/theme/theme-${theme}.scss`);
},
// ......

这样就实现了动静引入

当前只须要保护_theme.scss即可

最初测试

测试代码：

<template>
    <view class="tpf-page theme-page">
        <text class="theme-color">订单</text>
        <view class="theme-block block flex flex-align-center flex-pack-center">
            <text class="theme-color">板块外面的文本</text>    
        </view>
        <view class="flex flex-align-center flex-pack-justify change-theme">
            <text class="button" @tap="changeTheme('light')">白天模式</text>
            <text class="button dark" @tap="changeTheme('dark')">夜间模式</text>
        </view>    
    </view>
</template>

<script>
export default{
    data(){
        return {
            
        }
    },
    methods:{
        changeTheme(mode){
            uni.setStorageSync('theme',mode);
            setTimeout(()=>{
                location.reload();
            },200);
        }
    },
    onReady() {
        let theme = uni.getStorageSync('theme') || 'dark';
        if(theme == 'dark'){
            // 动静设置导航条色彩
            uni.setNavigationBarColor({
                frontColor:'#ffffff',
                backgroundColor:'#333333'
            });
            
            // 动静设置tabbar款式
            uni.setTabBarStyle({
                backgroundColor:'#333333',
                color: '#FFF',
                selectedColor: '#0BB640',
                borderStyle: 'white'
            });
        }else{
            // 动静设置导航条色彩
            uni.setNavigationBarColor({
                frontColor:'#000000',
                backgroundColor:'#FFFFFF'
            });
            
            // 动静设置tabbar款式
            uni.setTabBarStyle({
                backgroundColor:'#FFFFFF',
                color: '#333',
                selectedColor: '#0BB640',
                borderStyle: 'black'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.block{
    width: 710rpx;
    height: 300rpx;
    margin: 20rpx 0;
}
.change-theme{
    width: 400rpx;
}
.button{
    background-color:#FFF;
    color: #000;
    padding: 20rpx;
}
.dark{
        background-color: #000;
        color: #FFF;
}
</style>

在这里导航栏与tabbar都是通过手动设置的，因为必须是js操作，所以款式不能去读css，为了不便，咱们也能够定义一个theme.js专门来保护导航栏与tabar款式

补充theme.js

theme.js定义主题案例代码：

const themes = {
    light:{
        navBar:{
            bgColor:'#000',
            color:'#FFF'
        },
        tabBar:{
            bgColor:'#000',
            color:'#FFF',
            borderStyle:'black'
        }    
    },
    dark:{
        navBar:{
            bgColor:'#FFF',
            color:'#000'
        },
        tabBar:{
            bgColor:'#f2f2f2',
            color:'#333',
            borderStyle:'white'
        }
    }
}

let mode = 'dark'

export default themes[mode];

页面就能够通过引入这个js，通过以后主题引入相干的配置即可。这样不便对立保护与治理。

最初总结

scss变量+require的形式显著比第一种要好，缩小了页面与主题的耦合度，保护起来也不便

但出于一些性能上的问题（官网答复），在某些平台或版本曾经勾销了require动静引入款式的性能，因而这个是有兼容问题的。

这就是我给大家介绍的第二种unippa主题切换的形式，有问题欢送大家留言交换。

关于vue.js:uniapp主题切换功能的第二种实现方式scss变量require

实现原理

第一步：创立不同主题色

创立白天模式

创立夜间模式

改良：独立主题色

第二步：解决主题色

第三步：App.vue动静引入

最初测试

补充theme.js

最初总结

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于vue.js:uniapp主题切换功能的第二种实现方式scss变量require

实现原理

第一步：创立不同主题色

创立白天模式

创立夜间模式

改良：独立主题色

第二步：解决主题色

第三步：App.vue动静引入

最初测试

补充theme.js

最初总结

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复