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-themewindow.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';

效果预览：

uniapp换皮肤功能demo相关推荐

JavaScript+Css+Html实现网页换皮肤功能
描述:JavaScript+Css+Html实现网页换皮肤功能原理:使用不同网页背景保存在不同CSS里面,当点击切换的时候通过JavaScript将原来的样式表改为新的CSS就可以完成换肤功能代码 ...
vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了. 那么我们怎么在vue中实现这个换皮肤的功能呢? 实现思路我们用vue一般都是写 ...
用SkinMagic工具包创建换皮肤程序
<script type="text/javascript"> </script> <script src="http://pagead2. ...
vue实战-换皮肤2（使用less实现）
在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能.但是这种方法有一个缺陷,那就是只能用css的语法来实现.这个缺陷在某些变态的需求下会增加我们很多工作量,因此本节中将介绍 ...
umi配置webpack_umi/antd pro换肤功能
一个基于umi搭建的项目的换肤的实现因为webpack和umi的层层封装,在线换肤功能实现变得复杂了,antdpro之前提供了动态编译less的方案,可惜中间的webpack插件有问题,而且说实话这 ...
java怎样实现换肤功能_umi项目换肤功能的实现
一个基于umi搭建的项目的换肤的实现因为webpack和umi的层层封装,在线换肤功能实现变得复杂了,antdpro之前提供了动态编译less的方案,可惜中间的webpack插件有问题,而且说实话这 ...
android应用换肤功能,如何给Android应用更换皮肤
Android应用更换皮肤功能的实现思路我们可以将皮肤包做成一个apk文件,在应用apk中读取皮肤包中的数据. 应用apk读取皮肤包apk的数据的条件 1. 有相同签名 2. AndroidMani ...
Android 实现切换主题皮肤功能（类似于众多app中的夜间模式，主题包等）
首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: 1 <resources>2 3 <!-- Base application theme ...
android 手机壁纸源码,Android工程实现换壁纸功能【附源码】
最近工作要实现换壁纸小功能,将代码做成demo发出来没有采用zip格式换肤,因为只是更换一张图片背景 1.将三张图放入drawable-hdpi,我放的是480*800的 2.用sharedPref ...

uniapp换皮肤功能demo

uniapp换皮肤功能demo相关推荐

最新文章

热门文章