uni-app框架开发App如何更换主题皮肤？

桃扇骨 2022-08-30 11:56 988阅读 0赞

最近使用uni-app开发App，其中有个功能是可以一键切换App的主题皮肤。其中主题皮肤分为黑夜版和白天版。经过一番研究，终于大功告成，因此记录一下。

之前，在做web端进行更换皮肤的时候，是在页面的根元素上自定义一个data-theme属性，属性的值分别是data-theme=“dark”和data-theme=“light”，然后通过切换dark和light来进行皮肤的动态更换：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

但是在App环境当中没有window对象，因此只能另辟蹊径。

经过一番思考，决定仍然采用切换dark和light。首先，明确换肤换的是什么？换肤换的是背景色、字体颜色、边框色。其中，白天版light是默认。然后，在uni.scss当中定义全局的颜色变量，再义一个class类，在切换到dark的时候，显示这个class类，用于覆盖light下的原有颜色，用于显示黑夜版的皮肤。切换到light的时候，这个类消失，展示出白天版的皮肤。

具体做法如下：

1、在页面放置一个切换皮肤的按钮：

![2021072018492228.png][]

切换函数如下：

handleChangeSkin() {
          const isDark = this.isDark;
          const theme = isDark ? 'dark' : 'light';
          console.log(theme);
          this.setCurThemeType(theme);
          uni.setStorageSync('theme', theme);
          this.$store.dispatch('handleActionTheme', theme);
          getApp().handleSetTabBar();
          if (isDark) {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#2B3757'
            });
          } else {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#fff'
            });
          }
        },

其中 uni.setStorageSync('theme', theme);是将切换的主题缓存起来，下次进入的时候在缓存当中直接取值。

this.$store.dispatch('handleActionTheme', theme);用于动态的改变定义在vuex当中的变量，达到动态换肤的效果。

//上面的代码用于动态的改变APP底部导航的颜色。
     if (isDark) {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#2B3757'
            });
          } else {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#fff'
            });
          }

2、在uni.scss当中定义变量：

// light background
    $light-bg-main: #f5f5f5;
    $light-bg-gross: #fff;
    $light-bg-menu: #f5f5f5;
    // dark background
    $dark-bg-main: #19223a;
    $dark-bg-gross: #1d2742;
    $dark-bg-menu: #2b3757;
    // light font
    $light-font-title: #666;
    $light-font-gross: #666;
    // dark font
    $dark-font-title: rgba(255, 255, 255, 0.7);
    $dark-font-gross: rgba(255, 255, 255, 0.7);
    // light border
    $light-border-divide: #dfdfdf;
    // dark border
    $dark-border-divide: #364364;

3、在sass文件当中定义两种不同的类，用于切换不同的皮肤下，所展示出来的颜色。

.main {
      background-color: $light-bg-main;
      &-dark {
        background-color: $dark-bg-main;
      }
    }
    .menu {
      background-color: $light-bg-menu;
      &-dark {
        background-color: $dark-bg-menu;
      }
    }
    .gross {
      background-color: $light-bg-gross;
      color: $light-font-gross;
      &-dark {
        background-color: $dark-bg-gross;
        color: $dark-font-gross;
      }
    }
    .divide {
      border-bottom-style: solid;
      border-bottom-width: 1px;
      font-size: 12px;
      border-color: $light-border-divide;
      &-dark {
        border-color: $dark-border-divide;
      }
    }
    .titleFont {
      color: #333;
      &-dark {
        color: rgba(255, 255, 255, 0.9);
      }
    }

4、在vuex的index.js当中定义切换的变量、切换的函数：

export default new Vuex.Store({
      state: {
        curThemeType: 'light',
      },
      mutations: {
        setCurThemeType(state, data) {
          state.curThemeType = data;
        }
      },
      actions: {
        handleActionAgree({ commit }, boo) {
          commit('handleAgree', boo);
        },
      },
      getters: {
        themeType(state) {
          return state.curThemeType;
        }
      },
      modules: {}
    });

5、使用 mixin混合机制，让主题变量themeType，成为全局变量，是的每个组件都能获得拥有 mixin中的方法和属性:

import { mapGetters, mapMutations } from 'vuex';
    export default {
      install(Vue) {
        Vue.mixin({
          mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin
          data() {
            return {
            };
          },
          methods: {
            ...mapMutations(['setCurThemeType']),
          },
          computed: {
            ...mapGetters(['themeType'])
          },
         
        });
      }
    };

6、然后再main.js里引入  minxin.js：

import Vue from 'vue';
    import App from './App';
    import moment from 'moment';
    import VueI18n from 'vue-i18n';
    import store from './store';
    import myMixin from './common/mixins.js';
    import uView from 'uview-ui';
    const en = require('@/lang/en-us.json');
    const zh = require('@/lang/zh-cn.json');
    const tw = require('@/lang/zh-tw.json');
    const ja = require('@/lang/ja-jp.json');
    const mergeZH = Object.assign({}, zh);
    const mergeEN = Object.assign({}, en);
    const mergeTW = Object.assign({}, tw);
    const mergeJA = Object.assign({}, ja);
    // import VConsole from 'vconsole';
    //let vConsole = new VConsole();
    Vue.use(VueI18n);
    Vue.use(myMixin);
    Vue.use(uView);
    const i18n = new VueI18n({
      locale: store.state.lang,
      messages: {
        'en-US': {
          lang: mergeEN
        },
        'zh-CN': {
          lang: mergeZH
        },
        'zh-TW': {
          lang: mergeTW
        },
        'ja-JP': {
          lang: mergeJA
        }
      }
    });
    App.mpType = 'app';
    Vue.prototype._i18n = i18n;
    Vue.prototype.moment = moment;
    const app = new Vue({
      i18n,
      store,
      ...App
    });
    app.$mount();
    export default app;

7、最后在需要切换主题的界面，例如index.vue里配置如下:

<template>
      <view
        class="gross"
        :class="themeType === 'dark' ? 'gross-dark' : ''"
        style="min-height: 100%"
      >
      </view>
    </template

最后，通过点击按钮就可以进行主题的切换。

8、配置默认显示主题:  
在APP.vue里 配置如下:  
onLaunch()   这个方法是当App加载完毕后就执行;  
如果缓存有 主题,就用缓存中的主题, 没有则用 light主题

import { mapMutations } from 'vuex';
     onLaunch() {
        this.$store.dispatch('handleGetWordKey');
        this.handleInit();
        this.handleSetTabBar();
        const list = this.auth.getWallets();
        getApp().globalData.account_list = list ? list : [];
      },
     methods: {
        ...mapMutations(['setCurThemeType']),
        handleSetTabBar() {
          const theme = uni.getStorageSync('theme');
          this.setCurThemeType(theme);
          if (theme === 'dark') {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#2B3757'
            });
          } else {
            uni.setTabBarStyle({
              color: '#9299A7',
              selectedColor: '#3C79FF',
              backgroundColor: '#fff'
            });
          }
    }

9、总结:  
⊙ 实际上只是切换了 class类名  gross 和 gross-dark  
⊙ 使用Vuex的作用: 通过 this.setCurThemeType()传参 light 或者 drak, 然后将主题存在 state里面;方便任何组件使用;  
⊙ 使用ximin()的作用:  
        因为每个页面都会使用到   <view class="gross" :class="themeType==='dark' ? 'gross-dark':''">  
        所以直接在 mixin.js里面 引用了 Vuex, 并且把Getters 和 Mutations 存放在  computed 和  methods里面;  
        最后通过  Vue.mixin(themeMixin)  把这computed 和  methods混入到所有 Vue组件里面;  
        这样任何组件可以直接使用 computed 里面的 themeType,

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20220829/e28c085d722744f5b2c9b5d93147205e.png
[2021072018492228.png]: /images/20220829/4808f4c056e34780bcf467b54d307326.png