- A+
需求：在现有已经做好的后台管理系统添加一个切换主题颜色的功能
分析：该项目用了很多uniapp的组件，css样式没有统一，类名也没有统一
使用混合mixin.scss,并使用vuex
效果图
功能：按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化
每一个用户喜欢的主题颜色都不一样，后端已经在用户数据表加了一个用于存储主题颜色的字段默认是1（绿色）
1.先在用户登录成功后，把用户的主题颜色保存在本地存储中
uni.setStorageSync('theme',data.Theme);//当前用户的主题配色
2.在vuex添加全局变量
有些人的可能不是这样的，但是不重要，我们只需要在你们的vuex的 state、mutations、getters、actions添加对应的方法就行，直接上代码
curThemeType是存放当前用户的主题颜色的标识符，我这边后端用1，2，3，4来表示不同颜色，你们也可以不需要写，
curThemeColor存放的是颜色值，后期是全局的一个颜色值，只需要在用的地方用插值表达式或者字符拼接的方式就行
state: {
//测试变色
curThemeType: 1,
curThemeColor:'',
},
mutations: {
//测试变色
setCurThemeType(state, data) {
state.curThemeType = data;
},
setCurThemeType2(state, data) {
state.curThemeColor = data;
},
},
getters: {
//测试变色
themeType(state) {
return state.curThemeType;
},
//测试变color色
themeType2(state) {
return state.curThemeColor;
}
},
actions: {
handleActionAgree(context, boo) {
context.commit('setCurThemeType', boo)
},
handleActionAgree2(context, boo) {
context.commit('setCurThemeType2', boo)
},
}
3.在存放公共文件里添加一个mixin.js
代码：
import { mapGetters, mapMutations } from 'vuex';
export default {
install(Vue) {
Vue.mixin({
data() {
return {
};
},
methods: {
...mapMutations(['setCurThemeType','setCurThemeType2']),
},
computed: {
...mapGetters(['themeType','themeType2'])
},
});
}
};
4.然后去入口文件引入
import myMixin from './common/mixin.js'; //--实现换肤 引入 myMixin
Vue.use(myMixin) //实现换肤 调用 myMixin
5.准备工作已经好了，现在去APP.vue里面判断用户上一次使用的主题颜色也就是之前在登录存在本地存储的值
代码：
先在APP.vue引入
//换肤引入
import {mapMutations} from 'vuex';
然后在onLaunch（）里去拿本地存储的值，然后赋予颜色值然后存在vuex，然后就可以使用了
onLaunch: function() {
console.log('App Launch');
const that = this;
//项目启动获取缓存中的皮肤
let SwitchNameID = parseInt(uni.getStorageSync('theme')); //当前配色ID
if (SwitchNameID == '') {
SwitchNameID = 1;
}
console.log('当前配色ID', SwitchNameID);
// Vuex
that.setCurThemeType(SwitchNameID);
//用于动态的改变定义在vuex当中的变量，达到动态换肤的效果
that.$store.dispatch('handleActionAgree', SwitchNameID); //存放当前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('当前颜色值', colorS);
that.setCurThemeType2(colorS);
//用于动态的改变定义在vuex当中的变量，达到动态换字体颜色换单选多选颜色的效果
that.$store.dispatch('handleActionAgree2', colorS); //存放当前颜色
window.document.documentElement.setAttribute('data-theme', SwitchNameID);
},
6.去页面使用，使用的方法是在页面上使用style绑定变量值
1.:style="{ 'background-color': themeType2}"
2.:style="'background-color:' + themeType2" (微信小程序用这种)
themeType2就是一个全局的颜色值，在需要用的地方直接使用就行了
在这里其实已经可以实现根据后端的值去改变主题颜色了，
7.接下来写功能.根据自己的需求在对应的地方添加下拉框，或者选择框，由于我这边的框架是uniapp而且需要在顶部显示，我就在对应的文件写以下的代码
在你需要的地方的文件加入下拉框(uniapp官网)，我这边的下拉框数据是后端已经写好的，方便后期维护（你们根据自己的情况来，也可以自己定义下拉框内容）
我的数据长这样
接下来在这个页面的created（）或者onLoad()里把本地存储的拿出来存到vuex中
主要代码：
let SwitchNameID = parseInt(uni.getStorageSync('theme')); //当前配色ID
if (SwitchNameID == '') {
SwitchNameID = 1;
}
// Vuex
that.setCurThemeType(SwitchNameID);
//用于动态的改变定义在vuex当中的变量，达到动态换肤的效果
that.$store.dispatch('handleActionAgree', SwitchNameID);
window.document.documentElement.setAttribute('data-theme', SwitchNameID);
然后写一个方法，在用户在下拉框选择了其他颜色，就是去修改vuex的值，实现切换项目中的主题颜色，然后再去修改数据库该用户里面的值
代码：
// 配色
ChangeSwitchTopic(e) {
const that = this;
let i = e.detail.value
that.SwitchTopicName = that.SwitchTopicAddList[i].BasicDataName;
let SwitchValue = that.SwitchTopicAddList[i].BasicDataCode;
// 将选中的模式存储缓存
uni.setStorageSync('theme', parseInt(SwitchValue));
// Vuex
that.setCurThemeType(SwitchValue);
//用于动态的改变定义在vuex当中的变量，达到动态换肤的效果
that.$store.dispatch('handleActionAgree', parseInt(SwitchValue));
// 然后再调用接口去修改当前用户喜欢的配色，下次就还是这套
let value = uni.getStorageSync("user");
api.get({
url: 'User/SetTheme',
data: {
UserID: value, //登录的商家用户ID
LanguageType: that.LanguageTypeId,
Theme: SwitchValue, //配色ID
},
success: data => {
console.log('配色切换', data);
}
});
//--------- color色--------------------------
// 颜色跟单选多选的颜色是在APP.vue跟top-window.vue设置的，如果要添加或者修改，需要修改两个地方
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);
//用于动态的改变定义在vuex当中的变量，达到动态换字体颜色换单选多选颜色的效果
this.$store.dispatch('handleActionAgree2', colorS);
window.document.documentElement.setAttribute('data-theme', SwitchValue);
},
结束---------
这样已经可以实现基本切换主题颜色的颜色值了
注意：微信小程序以下方法不可用
但是那些用了uniapp组件的没办法直接在页面上修改，就只能再添加一个混合了（mixin.scss）
1.再创建一个mixin.scss
代码：
// 想要在css用,需要先在uni.scss里引入
// 添加或者修改,需要在uni.scss里添加或者修改
// @include ft_color($bj-color-theme1);
// @include bg_color($bj-color-theme1);
// $bj-color-theme1 是在uni.scss里定义的颜色，data-theme会判断当前是什么值用对应的颜色
//该方法针对uniapp原生组件无法在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引入并且定义初始颜色
@import '@/common/mixin.scss';//引入混入背景
/*
切记一定要在 uni.scss 预加载文件中 引入 自定义的 mixin.scss 并设置皮肤色
*/
$bj-color-theme1: #7AC463; //背景主题颜色默认（绿色）
$bj-color-theme2: #EFB46F; //背景主题颜色1（黄色）
$bj-color-theme3: #cf2532; //背景主题颜色2（红色）
$bj-color-theme4: #3c9cff; //背景主题颜色3(蓝色)
2.再去APP.vue修改组件颜色，F12找到对应的类名，然后修改
<style lang="scss">
//时间选择器选中颜色
.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);
}
//时间选择器选中颜色 -- 确定按钮
.confirm-text{
@include ft_color($bj-color-theme1);
}
</style>
效果;
这是我的工作中实现的，有很多不足，还需要努力，供大家参考，网上还有很多方式，根据自己的需求来修改
