uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

這篇具有很好參考價(jià)值的文章主要介紹了uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

需求：在現(xiàn)有已經(jīng)做好的后臺(tái)管理系統(tǒng)添加一個(gè)切換主題顏色的功能

分析：該項(xiàng)目用了很多uniapp的組件，css樣式?jīng)]有統(tǒng)一，類名也沒(méi)有統(tǒng)一

使用混合mixin.scss,并使用vuex

效果圖

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

功能：按鈕背景顏色、部分樣式、字體圖標(biāo)、分頁(yè)跟隨主題顏色變化也變化

每一個(gè)用戶喜歡的主題顏色都不一樣，后端已經(jīng)在用戶數(shù)據(jù)表加了一個(gè)用于存儲(chǔ)主題顏色的字段默認(rèn)是1（綠色）

1.先在用戶登錄成功后，把用戶的主題顏色保存在本地存儲(chǔ)中

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

 uni.setStorageSync('theme',data.Theme);//當(dāng)前用戶的主題配色

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-693564.html

2.在vuex添加全局變量

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

?有些人的可能不是這樣的，但是不重要，我們只需要在你們的vuex的 state、mutations、getters、actions添加對(duì)應(yīng)的方法就行，直接上代碼

curThemeType是存放當(dāng)前用戶的主題顏色的標(biāo)識(shí)符，我這邊后端用1，2，3，4來(lái)表示不同顏色，你們也可以不需要寫，

curThemeColor存放的是顏色值，后期是全局的一個(gè)顏色值，只需要在用的地方用插值表達(dá)式或者字符拼接的方式就行

?3.在存放公共文件里添加一個(gè)mixin.js

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

代碼：

import { mapGetters, mapMutations } from 'vuex';
export default {
install(Vue) {
Vue.mixin({
data() {
return {
};
},
methods: {
...mapMutations(['setCurThemeType','setCurThemeType2']),
},
computed: {
...mapGetters(['themeType','themeType2'])
},

});
}
};

?4.然后去入口文件引入

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

import myMixin from './common/mixin.js'; //--實(shí)現(xiàn)換膚 引入 myMixin
Vue.use(myMixin) //實(shí)現(xiàn)換膚 調(diào)用 myMixin

5.準(zhǔn)備工作已經(jīng)好了，現(xiàn)在去APP.vue里面判斷用戶上一次使用的主題顏色也就是之前在登錄存在本地存儲(chǔ)的值

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

代碼：

先在APP.vue引入

//換膚引入
import {mapMutations} from 'vuex';

然后在onLaunch（）里去拿本地存儲(chǔ)的值，然后賦予顏色值然后存在vuex，然后就可以使用了

onLaunch: function() {
console.log('App Launch');
const that = this;
//項(xiàng)目啟動(dòng)獲取緩存中的皮膚
let SwitchNameID = parseInt(uni.getStorageSync('theme')); //當(dāng)前配色I(xiàn)D
if (SwitchNameID == '') {
SwitchNameID = 1;
}
console.log('當(dāng)前配色I(xiàn)D', SwitchNameID);
// Vuex
that.setCurThemeType(SwitchNameID);
//用于動(dòng)態(tài)的改變定義在vuex當(dāng)中的變量，達(dá)到動(dòng)態(tài)換膚的效果
that.$store.dispatch('handleActionAgree', SwitchNameID); //存放當(dāng)前ID

//--------- color色--------------------------
// 背景顏色跟單選多選的顏色
let colorS = '';
if (SwitchNameID == 1) {
colorS = '#7AC463';
} else if (SwitchNameID == 2) {
colorS = '#EFB46F';
} else if (SwitchNameID == 3) {
colorS = '#cf2532';
} else if (SwitchNameID == 4) {
colorS = '#3c9cff';
}
// Vuex
console.log('當(dāng)前顏色值', colorS);
that.setCurThemeType2(colorS);
//用于動(dòng)態(tài)的改變定義在vuex當(dāng)中的變量，達(dá)到動(dòng)態(tài)換字體顏色換單選多選顏色的效果
that.$store.dispatch('handleActionAgree2', colorS); //存放當(dāng)前顏色
window.document.documentElement.setAttribute('data-theme', SwitchNameID);
},

6.去頁(yè)面使用，使用的方法是在頁(yè)面上使用style綁定變量值

1.:style="{ 'background-color': themeType2}" 

2.:style="'background-color:' + themeType2"  (微信小程序用這種)

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

themeType2就是一個(gè)全局的顏色值，在需要用的地方直接使用就行了

?在這里其實(shí)已經(jīng)可以實(shí)現(xiàn)根據(jù)后端的值去改變主題顏色了，

7.接下來(lái)寫功能.根據(jù)自己的需求在對(duì)應(yīng)的地方添加下拉框，或者選擇框，由于我這邊的框架是uniapp而且需要在頂部顯示，我就在對(duì)應(yīng)的文件寫以下的代碼

在你需要的地方的文件加入下拉框(uniapp官網(wǎng))，我這邊的下拉框數(shù)據(jù)是后端已經(jīng)寫好的，方便后期維護(hù)（你們根據(jù)自己的情況來(lái)，也可以自己定義下拉框內(nèi)容）

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

我的數(shù)據(jù)長(zhǎng)這樣

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

接下來(lái)在這個(gè)頁(yè)面的created（）或者onLoad()里把本地存儲(chǔ)的拿出來(lái)存到vuex中

主要代碼：

let SwitchNameID = parseInt(uni.getStorageSync('theme')); //當(dāng)前配色I(xiàn)D
if (SwitchNameID == '') {
SwitchNameID = 1;
}
// Vuex
that.setCurThemeType(SwitchNameID);
//用于動(dòng)態(tài)的改變定義在vuex當(dāng)中的變量，達(dá)到動(dòng)態(tài)換膚的效果
that.$store.dispatch('handleActionAgree', SwitchNameID);
window.document.documentElement.setAttribute('data-theme', SwitchNameID);

然后寫一個(gè)方法，在用戶在下拉框選擇了其他顏色，就是去修改vuex的值，實(shí)現(xiàn)切換項(xiàng)目中的主題顏色，然后再去修改數(shù)據(jù)庫(kù)該用戶里面的值

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

?代碼：

// 配色
ChangeSwitchTopic(e) {
const that = this;
let i = e.detail.value
that.SwitchTopicName = that.SwitchTopicAddList[i].BasicDataName;
let SwitchValue = that.SwitchTopicAddList[i].BasicDataCode;
// 將選中的模式存儲(chǔ)緩存
uni.setStorageSync('theme', parseInt(SwitchValue));
// Vuex
that.setCurThemeType(SwitchValue);
//用于動(dòng)態(tài)的改變定義在vuex當(dāng)中的變量，達(dá)到動(dòng)態(tài)換膚的效果
that.$store.dispatch('handleActionAgree', parseInt(SwitchValue));

// 然后再調(diào)用接口去修改當(dāng)前用戶喜歡的配色，下次就還是這套
let value = uni.getStorageSync("user");
api.get({
url: 'User/SetTheme',
data: {
UserID: value, //登錄的商家用戶ID
LanguageType: that.LanguageTypeId,
Theme: SwitchValue, //配色I(xiàn)D
},
success: data => {
console.log('配色切換', data);
}
});

//--------- color色--------------------------
// 顏色跟單選多選的顏色是在APP.vue跟top-window.vue設(shè)置的，如果要添加或者修改，需要修改兩個(gè)地方
let colorS = '';
if (SwitchValue == 1) {
colorS = '#7AC463';
} else if (SwitchValue == 2) {
colorS = '#EFB46F';
} else if (SwitchValue == 3) {
colorS = '#cf2532';
} else if (SwitchValue == 4) {
colorS = '#3c9cff';
}
// Vuex
this.setCurThemeType2(colorS);
//用于動(dòng)態(tài)的改變定義在vuex當(dāng)中的變量，達(dá)到動(dòng)態(tài)換字體顏色換單選多選顏色的效果
this.$store.dispatch('handleActionAgree2', colorS);

window.document.documentElement.setAttribute('data-theme', SwitchValue);
},

結(jié)束---------

這樣已經(jīng)可以實(shí)現(xiàn)基本切換主題顏色的顏色值了

注意：微信小程序以下方法不可用

但是那些用了uniapp組件的沒(méi)辦法直接在頁(yè)面上修改，就只能再添加一個(gè)混合了（mixin.scss）

1.再創(chuàng)建一個(gè)mixin.scss

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

?代碼：

// 想要在css用,需要先在uni.scss里引入
// 添加或者修改,需要在uni.scss里添加或者修改
// @include ft_color($bj-color-theme1);
// @include bg_color($bj-color-theme1);
// $bj-color-theme1 是在uni.scss里定義的顏色，data-theme會(huì)判斷當(dāng)前是什么值用對(duì)應(yīng)的顏色
//該方法針對(duì)uniapp原生組件無(wú)法在view視圖直接修改，要操作css樣式修改的

@mixin bg_color($color) { //更換背景
background-color: $color ;
[data-theme = "1"] & {
background-color: $bj-color-theme1 !important;
}
[data-theme = "2"] & {
background-color: $bj-color-theme2 !important;
}
[data-theme = "3"] & {
background-color: $bj-color-theme3 !important;
}
[data-theme = "4"] & {
background-color: $bj-color-theme4 !important;
}
}
@mixin ft_color($color) { //更換文字顏色
color: $color;
[data-theme = "1"] & {
color: $bj-color-theme1 !important;;
}
[data-theme = '2'] & {
color: $bj-color-theme2 !important;;
}
[data-theme = "3"] & {
color: $bj-color-theme3 !important;;
}
[data-theme = '4'] & {
color: $bj-color-theme4 !important;;
}
}

?然后去uni.scss引入并且定義初始顏色

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

 @import '@/common/mixin.scss';//引入混入背景

/*
切記一定要在 uni.scss 預(yù)加載文件中 引入 自定義的 mixin.scss 并設(shè)置皮膚色
*/

$bj-color-theme1: #7AC463; //背景主題顏色默認(rèn)（綠色）
$bj-color-theme2: #EFB46F; //背景主題顏色1（黃色）
$bj-color-theme3: #cf2532; //背景主題顏色2（紅色）
$bj-color-theme4: #3c9cff; //背景主題顏色3(藍(lán)色)

2.再去APP.vue修改組件顏色，F(xiàn)12找到對(duì)應(yīng)的類名，然后修改

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

<style lang="scss">

//時(shí)間選擇器選中顏色
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked,
.uni-calendar-item__weeks-box .uni-calendar-item--checked,
.uni-datetime-picker--btn,
{
@include bg_color($bj-color-theme1);
}
//時(shí)間選擇器選中顏色 -- 確定按鈕
.confirm-text{
@include ft_color($bj-color-theme1);
}

 </style>

?效果;

uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）

這是我的工作中實(shí)現(xiàn)的，有很多不足，還需要努力，供大家參考，網(wǎng)上還有很多方式，根據(jù)自己的需求來(lái)修改

到了這里，關(guān)于uniapp切換主題顏色（后臺(tái)管理系統(tǒng)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！