uniapp换皮肤功能demo

不支持scss的需要提前安装：https://www.runoob.com/sass/sass-install.html

全代码下载地址

1.新建一个uni-app的默认模板

2.构建如下图的项目目录结构，uni.scss是默认模板中自带的

3.写style.scss文件

/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/
@mixin bg_color($color) { //更换背景颜色
	background-color: $color ;
	[data-theme = "theme1"] & {
		background-color: $background-color-theme1 !important;
	}
	[data-theme = "theme2"] & {
		background-color: $background-color-theme2 !important;
	}		
}
 
 @mixin bg_img($image) { //更换背景图片
 	background-image: $image ;
 	[data-theme = "theme1"] & {
 		background-image: url($background-image-theme1)!important;
 	}
 	[data-theme = "theme2"] & {
 		background-image: url($background-image-theme2)!important;
 	}
 }
  
 
@mixin ft_color($color) { //更换文字颜色
	color: $color;
	[data-theme = "theme1"] & {
		color: $text-color-theme1 !important;
	}
	[data-theme = "theme2"] & {
		color: $text-color-theme2 !important;
	}	
}

@mixin login_content($content) { //更换image标签内容
	content: $content;
	[data-theme = "theme1"] & {
		content:url($text-content-theme1) !important;
	}
	[data-theme = "theme2"] & {
		content: url($text-content-theme2) !important;
	}	
}

4.在uni.scss文件中定义样式的具体值

@import './scss/style.scss'; //引入自定义的混入样式scss文件
// 为变量赋值
$background-color-theme1:#007aff;
$background-color-theme2:#D6C3A3;

$background-image-theme1:'static/bg1.png';
$background-image-theme2:'static/bg2.png';

$text-color-theme1:#ffffff;
$text-color-theme2:#535532;

$text-content-theme1:'/static/logo.png';
$text-content-theme2:'/static/logo2.png';

5.在App.vue中引入全局背景图片，设置theme1中的背景图片为默认背景

<script>
	export default {
		onLaunch: function() {
		//setAttribute() 方法添加指定的属性，并为其赋指定的值；设置data-theme
			window.document.documentElement.setAttribute('data-theme', 'theme1');
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */ 
</style>
<style lang="scss">
	// page{
	// 	@include bg_img(theme)
	// }
	
	// @include 指令可以将混入（mixin）引入到文档中。
	uni-page-wrapper{
		@include bg_img(theme)
	}
</style>

不用page标签而用uni-page-wrapper标签的原因是，page标签表示的是<uni-page-body>，背景图片只能显示在content中而不能全屏

6.修改index.vue

<template>
	<view class="content">
		<image class="logo"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="">
			
		</view>
		<view>
			<button @tap="doSkinme('theme1')">皮肤1</button>
			<button @tap="doSkinme('theme2')">皮肤2</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
		onLoad() {

		},
		methods: {
			doSkinme(theme){
				window.document.documentElement.setAttribute('data-theme', theme);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
	}
</style>
<style lang="scss">
	.logo {
		@include login_content(theme)
	}
	.title {
		@include bg_color(theme)
		@include ft_color(theme)
	}
</style>

怎样将css样式修改为scss样式，以<image class="logo"></image>为例，将需要动态变化的值提取出来：

修改前
========文件index.vue=============
<style>
.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		content: url(../../static/bg1.png);
	}
</style>

*********************************

修改后
========文件index.vue=============
<style>
.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>
<style lang="scss">
	.logo {
		@include login_content(theme)
	}
</style>

========文件style.scss=============
@mixin login_content($content) { //更换image标签内容
	content: $content;
	[data-theme = "theme1"] & {
		content:url($text-content-theme1) !important;
	}
	[data-theme = "theme2"] & {
		content: url($text-content-theme2) !important;
	}	
}

========文件uni.scss=============
@import './scss/style.scss'; //引入自定义的混入样式scss文件
// 为变量赋值
$text-content-theme1:'/static/logo.png';
$text-content-theme2:'/static/logo2.png';

效果预览：