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

.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里配置如下:

<view

class=“gross”

:class=“themeType === ‘dark’ ? ‘gross-dark’ : ‘’”

style=“min-height: 100%”

</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’

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
1KereTH-1714978049881)]

[外链图片转存中…(img-Y3G76wdf-1714978049882)]

[外链图片转存中…(img-i6QdTKvr-1714978049882)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！