uniapp换肤功能

uniapp换肤功能实现方法

uniapp可以通过多种方式实现换肤功能，以下是几种常见的实现方案：

动态class切换 在全局或页面data中定义当前皮肤变量，通过动态绑定class实现样式切换。在App.vue中定义全局样式类，各页面通过computed动态获取当前皮肤class。

CSS变量方案 利用CSS自定义属性（CSS Variables）定义主题色，通过js动态修改根节点的变量值。在App.vue的style中定义变量：

:root {
  --primary-color: #007AFF;
  --bg-color: #FFFFFF;
}

通过js修改：

document.documentElement.style.setProperty('--primary-color', newColor)

SCSS变量覆盖 使用SCSS的变量功能，通过编译时生成多套样式。需要配置不同的scss文件，在vue.config.js中配置loaderOptions：

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "@/styles/variables-${process.env.VUE_APP_THEME}.scss";`
    }
  }
}

uni.scss全局样式 在uni.scss中定义全局样式变量，通过条件编译或动态加载不同主题文件。可以配合uni.getStorageSync存储用户选择的主题。

插件市场方案 使用uni-app插件市场的换肤插件，如"changeSkin"等，快速实现换肤功能。这些插件通常封装了主题管理和样式切换逻辑。

实现注意事项

1. 性能优化：避免频繁操作DOM，建议使用class切换或CSS变量方案
2. 主题持久化：使用uni.setStorage存储用户选择的主题
3. 默认主题：在App.vue的onLaunch中初始化默认主题
4. 组件适配：确保自定义组件能响应主题变化

完整示例代码

以下是一个基于CSS变量的实现示例：

// theme.js
const themes = {
  light: {
    '--primary-color': '#007AFF',
    '--bg-color': '#FFFFFF'
  },
  dark: {
    '--primary-color': '#4CD964',
    '--bg-color': '#000000'
  }
}

export function changeTheme(themeName) {
  const theme = themes[themeName]
  Object.keys(theme).forEach(key => {
    document.documentElement.style.setProperty(key, theme[key])
  })
  uni.setStorageSync('theme', themeName)
}

在App.vue中调用：

import { changeTheme } from '@/utils/theme'

export default {
  onLaunch() {
    const savedTheme = uni.getStorageSync('theme') || 'light'
    changeTheme(savedTheme)
  }
}

使用时在页面中直接使用CSS变量：

.container {
  background-color: var(--bg-color);
  color: var(--primary-color);
}