小程序换肤方案整理

最新推荐文章于 2023-11-19 12:29:02 发布

原创最新推荐文章于 2023-11-19 12:29:02 发布 · 667 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

换肤专栏收录该内容

1 篇文章

订阅专栏

本文探讨了三种前端动态换肤的实现方案。方案一通过创建theme.css文件，但存在更新困难和空间占用大的问题；方案二使用内联样式，利于整体修改但降低代码可读性；方案三结合CSS变量，提高了代码可读性和灵活性，为当前最佳实践。

换肤方案一：

具体操作 ：创建一个theme.css样式文件。每种样式的最外层使用不用的主题类名，但是里面的对应类名相同。通过接口获取不同的主题类名并应用到页面的最外层。在后台需要有可以配置主题对应的类名和颜色的地方。

适用情况 ：适用于固定主题样式，并不经常的添加的情况。

缺点：每次添加新的主题都需要更换theme.css，并发版。不利于颜色更新，工作量巨大，占用很大的空间，小程序本身就2Mb。耦合度太高，html和css混合了，耦合度太高。

// theme.css
.theme1 {
  .km-btn-color {
      color: #fff;
  }
  .km-btn-background {
      background: #5577ee;
  }
}
.theme2 {
  .km-btn-color {
      color: #fff;
  }
  .km-btn-background {
      background: #ddd;
  }
}

换肤方案二：

具体操作 ：通过后端接口返回所有主题色相关字段，前端通过内联方式使用这些主题相关字段对页面元素样式进行设置。

适用情况 ：主题需要后台灵活配置的情况。

缺点：大量内联样式使得代码可读性变差，前端工作量增加。

优点：整体修改方便

// 采用vue的混入统一处理数据  mixin/commonMixin.js
export const commonMixin = {
  data() {
    return {
      themeColor: 'rgba(24,45,76,1)', // 主题色
      themeColorStyle: ''
    };
  },
  onShow() {
      this.themeColorStyle = 'background: ' + colorSet.themeColor + '); color: #fff';
  }
};

// index.vue
// html
<div class="box" :style="themeColorStyle">测试</div>
// JS
import { commonMixin } from '../mixin/commonMixin';
export default {
  mixins: [commonMixin]
}

换肤方案三：（综合情况目前最佳）

具体操作 ：通过后端接口返回所有主题色相关字段，前端通过css的var函数对页面元素样式进行设置。

适用情况 ：主题需要后台灵活配置的情况。

优点：代码可读性增加，整体修改方便

// 采用vue的混入统一处理数据  mixin/commonMixin.js
export const commonMixin = {
  data() {
    return {
      kmThemeStyle: ''
    };
  },
  onShow() {
      this.kmThemeStyle = `--color:#574;--bgcolor:#57e`;
  }
};

// app.vue引入css样式配置文件
@import "common/style/common";

// common.css
.box {
  margin: 50rpx 0;
  width: 200rpx;
  height: 200rpx;
  color: var(--color);
  background: var(--bgcolor);
}

// index.vue
// html 
<template>
  <div :style="kmtheme">
      <div class="box">测试</div>
  </div>
</template>
// JS
import { commonMixin } from '../mixin/commonMixin';
export default {
  mixins: [commonMixin]
}