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"等，快速实现换肤功能。这些插件通常封装了主题管理和样式切换逻辑。
实现注意事项
- 性能优化：避免频繁操作DOM，建议使用class切换或CSS变量方案
- 主题持久化：使用uni.setStorage存储用户选择的主题
- 默认主题：在App.vue的onLaunch中初始化默认主题
- 组件适配：确保自定义组件能响应主题变化
完整示例代码
以下是一个基于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);
}
