uniapp主题切换

近期公司一直在搞uniapp，搞着搞着发现最麻烦的就是没有根元素，导致好多功能在开发中非常麻烦，近期遇到两个：

由于前期对uniapp考察不是很全面，导致在功能开发1/3以后才发现没有一个公共头，这时发现没法全局收发消息；
主题前期有人搞，接手的时候发现是通过localstorage做的，感觉有点点low，而且是从后台传过来的，根本没必要，还会越存越多。

这篇先提个解决主题的办法。
网上找了一些解决方案，发现基本的思路都是通过vuex将颜色存起来，然后在每个页面引用后style，个人感觉不点不太优雅。然后，我想能不能像vue那样通过uniapp的uni.createSelectorQuery()找到根元素绑上固定主题。但是，最后发现H5可行，app不行，就要重新再找别的方法了。
我是通过scss来做主题切换的，大家一般都是通过&选择器渲染到最外层，例如：

@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/background-color:$color;[data-theme="theme1"] & {background-color:$background-color-theme1;}[data-theme="theme2"] & {background-color:$background-color-theme2;}[data-theme="theme3"] & {background-color:$background-color-theme3;}
}

但是由于uniapp是没有根元素的，且项目在最开始的时候并没有注意到，app上更是找不到根元素，所以只能想如何在已有class的dom元素上加上能够判断的标识。
说了这么多直接上代码了
scss-mixin.scss：

/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/// 默认主题的变量集合
$default-theme : (bg-color: rgb(22, 194, 194),//背景色text-color: rgb(22, 194, 194),//字体颜色
);
// 白天主题的变量集合
$day-theme : (bg-color: rgb(145, 96, 255),//背景色text-color: rgb(145, 96, 255),//字体颜色
);
// 夜晚主题的变量集合
$night-theme : (bg-color: rgb(24, 94, 255),//背景色text-color: rgb(24, 94, 255),//字体颜色
);
//定义主题对象
$themes: (// key为主题  value为主题的变量集合default-theme: $default-theme,day-theme: $day-theme,night-theme: $night-theme
);// 生成主题背景色样式
@mixin base-background(){@each $themename , $theme in $themes {&.#{$themename} {background-color: map-get($map: $theme, $key: bg-color) !important;}}
}
// 生成主题字体色样式
@mixin text-color(){@each $themename , $theme in $themes {&.#{$themename} {color: map-get($map: $theme, $key: text-color) !important;}}
}

html：

<view type="primary" @click="login" class="login_btn" :class="[vtheme]"><uni-icons type="arrowthinright" size="25" class="login_icon" style="color: #ffffff;" />
</view>

scss：

.login_btn {border-radius: 40px 40px 40px 40px;height: 50px;background-color: #ffb9b8;text-align: center;@include base-background();
}

js：

defaultTheme() {let theme = uni.getStorageSync('padTheme');if (theme === '') {               uni.setStorageSync('padTheme', 'default');theme = 'default'vGetTheme(theme)}
},

vuex：

const state = {theme: 'default-theme'
}const mutations = {GET_THEME(state,theme) {// debuggerstate.theme = theme+'-theme'},
}const actions = {}const getters = {theme: state => state.theme
}export default {namespaced: true,state,mutations,actions,getters
}

由于这么写肯定是哪个页面要用哪个页面就要引入vuex，所以利用Vue.mixin()方法进行混入，上代码：
mixin代码，可放在static中，static/mixin/themeMixin.js：

import { mapGetters,mapMutations } from 'vuex'
import Vue from 'vue'
export default {install(Vue) {Vue.mixin({computed:{...mapGetters({vtheme: 'theme/theme',})},methods:{...mapMutations({hide:'app/hide',show: 'app/show',vGetTheme:'theme/GET_THEME',})}})}
}

main.js

import mixin from '@/static/mixin/themeMixin.js'
Vue.use(mixin)

全文完~~~

uniapp主题切换相关推荐

ios 主题切换思路_iOS 实现主题切换的最佳方案
投资证券的小伙伴儿,应该非常熟悉很多 App 的夜间模式.打开夜间模式时,App 所有的页面由白色变为黑色,这样做有两个好处:一个是可以保护眼睛:另一个是相关的红绿行情图像,也显得更加协调.Andro ...
英语阅读推荐：主题切换控件 ExpressionBuilder
这里是Cat in dotNET的Random Clippings系列,专门向大家推荐.NET相关的英文技术文章,每期推荐两篇文章,第一篇适合于英语技术文章阅读的入门者练习阅读能力,而第二篇则适合于进 ...
CI框架主题切换的功能
CI框架主题切换的功能本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量如 : ...
主题切换时如何主动去刷新一些资源？
近来不少同学在修改主题时遇到,切换主题,部分页面不更新的问题,下面来介绍一种切换主题时,主动刷新的方法:1.监听主题切换的广播private static final String DATA_TYPE ...
仿知乎客户端的白天黑夜主题切换
仿知乎客户端的白天黑夜主题切换转载请注明出处作者:AboutJoke ( http://blog.csdn.net/u013200308 ) 原文链接:http://blog.csdn.net/u ...
SpringMVC实现i18n和主题切换
一.什么是i18n i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是"国际化"的简称.对于程序开发来说,i18n就是能够 ...
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小demo,感觉很棒,所以拿过来了,并且自己新增了一些小挂件,加上了关键帧动画,圣诞树等元素.主题切换按钮原理和以前教程里面提到的暗 ...
【Web技术】1431- 总结前端主题切换的思考和现代前端样式的解决方案落地
关于本文来自:codercao https://juejin.cn/post/7106702604024938503 demo在线体验地址:https://hongqingcao.github.io ...
【Web技术】1374- 纯 JS 实现灵活的前端主题切换功能
demo在线体验地址:https://hongqingcao.github.io/v-theme-colors/ 源码地址:https://github.com/HongqingCao/v-theme ...
vue3实现主题切换功能
本文使用的技术主要包括 vue3+vite+scss 1.配置全局scss变量首先在src目录下创建styles文件夹,并新建common.scss文件,内容如下: // 文字颜色 $fontCol ...

uniapp主题切换

uniapp主题切换相关推荐

最新文章

热门文章