关于前端:uniapp主题切换功能的第一种实现方式scss变量vuex

随着用户端体验的一直晋升，很多利用在上线的时候都要求做不同的主题，最根本的就是白天与夜间主题。

就像 b 站 app 主题切换，像这样的

​

​

uniapp 因为能轻松实现多端公布而失去很多开发者的青眼，但每个端的实现也有可能不同，现我把已实现的性能一点点的大家分享给大家，须要的能够参考一下，可扫码看成果。

​

​

那么用 uniapp 如何实现多主题切换呢？

第一种实现形式：CSS 变量 + Vuex

第一步：创立 store\index.js

创立 store，用来保留不同的变量

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
    state: {
        // 写上默认皮肤的数据
        skin: `
            --nav-bg:#42b983;
            --nav-color:#ffffff;
        `
    },
    getters: { },
    mutations: {
        // 皮肤更换
        skinPeeler(state,skin = []){
            // 将皮肤配置 JSON 转为以 ; 宰割的字符串（style 值）let style = skin.map((item,index)=>{return `${item.name}:${item.value}`
            }).join(";");
            state.skin = style;
        }
    }
})
 
export default store

第二步：main.js 中引入 store

import Vue from 'vue'
import App from './App'

// 援用 Vuex 文件
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    // 应用 Vuex
    store,
    ...App,
})
app.$mount()

第三步：页面应用

利用 css 变量来更新皮肤

<template>
    <view :style="skin">
        <view class="nav-bar"> 换肤示例 </view>
        <view style="padding: 100rpx;">
            <button type="default" hover-class="none" class="btn"> 按钮 - 页面中的元素 </button>
        </view>
        <view class="card">
            <view style="padding-bottom: 20rpx;"> 请抉择皮肤格调 </view>
            <radio-group @change="radioChange">
                <label class="h-flex-x list-item" v-for="(item, index) in items" :key="index">
                    <view>
                        <radio :value="index.toString()" :checked="index === current" />
                    </view>
                    <view style="padding-left: 30rpx;">{{item.name}}</view>
                </label>
            </radio-group>
        </view>
    </view>
</template>
 
<script>
    export default {data() {
            return {
                items: [
                    {
                        value: [{name:'--nav-bg',value:'#42b983'},
                            {name:'--nav-color',value:'#ffffff'}
                        ],
                        name: '默认'
                    },
                    {
                        value: [{name:'--nav-bg',value:'#12b7f5'},
                            {name:'--nav-color',value:'#333'}
                        ],
                        name: '手机 QQ'
                    },
                    {
                        value: [{name:'--nav-bg',value:'#ff5500'},
                            {name:'--nav-color',value:'#F0E0DC'}
                        ],
                        name: '淘宝'
                    },
                ],
                current: 0
            }
        },
        computed: {skin() {return this.$store.state.skin;}
        },
        methods: {radioChange: function(e) {let item = this.items[Number(e.detail.value)].value;
                this.$store.commit("skinPeeler",item);

                // 动静设置导航条色彩
                uni.setNavigationBarColor({
                    frontColor:'#ffffff',
                    backgroundColor:item[0].value
                });
                
                // 动静设置 tabbar 款式
                uni.setTabBarStyle({backgroundColor:item[0].value,
                    color: '#FFF',
                    selectedColor: '#FFF',
                    borderStyle: 'white'
                });
            }
        }
    }
</script>
 
<style lang="scss">
    page {
        background-color: #fff;
        font-size: 28rpx;
    }
    
    .h-flex-x{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
    }
    .card{background-color: var(--nav-bg);
        color:var(--nav-color);
        padding: 30rpx;
    }
    .list-item{
        height: 90rpx;
        border-top: var(--nav-color) solid 1px;
    }
 
    .nav-bar {
        box-sizing: content-box;
        height: 44px;
        background-color: var(--nav-bg);
        padding-top: var(--status-bar-height);
        color: var(--nav-color);
        line-height: 44px;
        text-align: center;
        font-size: 16px;
    }
 
    .btn {background-color: var(--nav-bg) !important;
        color: var(--nav-color) !important;
    }
</style>

最初总结

这就是主题切换的第一种实现

它的益处就是：能实时更换显示主题

但也有有余的中央

有余点：

• 每个页面款式都保护着主题，耦合度高
• 一套主题下实现不同页面区别化不不便
• 减少变量后批改的中央多
• …… 更多有余大家补充

还有不懂的中央能够看 b 站视频：https://www.bilibili.com/video/BV1av4y1K74j/?p=18