最近在做一个小程序,但由于小程序本身的一些限制,看似无法实现类似于原生应用整套的皮肤切换,例如页面背景,全局样式等,但真的就没有办法了吗,在这里我用一个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。
css">.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中的一小部分
css">/*******************PAGES*******************/
/*Index*/
.INDEX .welcometag {
opacity: 0.7;
background-color: #007AFF;
border-radius: 0 0 10rpx 10rpx;
color: #FFFFFF;
}
- 这是夜间模式_night.css中对应的一部分
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
},
},