小程序如何实现“皮肤”切换

最近在做一个小程序，但由于小程序本身的一些限制，看似无法实现类似于原生应用整套的皮肤切换，例如页面背景，全局样式等，但真的就没有办法了吗，在这里我用一个uni-app小程序为大家提供一个小程序皮肤切换的思路。

背景图

首先App.vue通过设置page的background-image方式来做背景图的方式是无法进行自由切换的了，因此在这里使用的方法是：在每个界面设置一个mask，通过改变mask的background-image来改变页面背景。

<view class="mask" :class="computedbgp">view>

computed: {
	computedbgp(){
		return 'bgp'+getApp().globalData.classsuffix
	}
},

在App.vue声明一个全局变量，这样好控制每个页面背景图相同。全局变量的注意事项和使用方法都可以在uniapp的官方文档中找到，这里就不赘述了。

<script>
	export default {
		globalData:{
			classsuffix:''
		},
		onLaunch: function() {
			
		},
		onShow: function() {
			var time = new Date();
			if (time.getHours() >= 22) {
				this.$scope.globalData.classsuffix='_night'
				uni.setNavigationBarColor({
					frontColor:'#000000',
					backgroundColor:'#34495e'
				});
			}
		},
		onHide: function() {

		}
	}
</script>

通过这样的方法，我们就可以得到一个动态的class名，mask绑定的class为：‘bgp’+后缀，后缀可通过后端获取每个用户对应的背景图，或是根据时间切换。例如夜间模式我引入的class是‘bgp_night’，接下来可以在全局引入一个BGP.css，里面是不同class后缀对应的background-image。

.mask{
	position:fixed;
	bottom:0;
	top:0;
	left:0;
	right:0;
}

.bgp_night {
 	z-index: -1;
 	background-image: url('xxx');
 }

样式

看明白了上面背景图的切换方法，样式也是一样的，建议将所有可以改变的样式写到一个css里，这样不同的皮肤分别对应一个不同名称的css，将这些css全部引入，用上面的方法改变绑定的class名称即可。
举一个小小的例子：

• 这是全局默认皮肤css中的一小部分

/*******************PAGES*******************/
/*Index*/
.INDEX .welcometag {
	opacity: 0.7;
	background-color: #007AFF;
	border-radius: 0 0 10rpx 10rpx;
	color: #FFFFFF;
}

• 这是夜间模式_night.css中对应的一部分

/*******************PAGES*******************/
/*Index*/
.INDEX_night .welcometag {
	opacity: 0.4;
	background-color: #007AFF;
	border-radius: 0 0 10rpx 10rpx;
	color: #FFFFFF;
}

可以看到我是用的方法是：在页面最顶层的view里绑定一个动态的class，页面下面的所有部件class根据最顶层的.INDEX+后缀而改变

<template>
	<keep-alive>
		<view class="main" :class="computedClass">

computed: {
	computedClass() {
		return 'INDEX' + getApp().globalData.classsuffix
	},
},