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变量来更新皮肤

最后总结

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

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

但也有不足的地方

不足点：

• 每个页面样式都维护着主题，耦合度高
• 一套主题下实现不同页面区别化不方便
• 增加变量后修改的地方多
• ...... 更多不足大家补充

还有不懂的地方可以看b站视频：https://www.bilibili.com/video/BV1av4y1K74j/?p=18