首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

小程序换肤

导语 换肤,对于前端来说不算常见,却也肯定不陌生。但是大家有考虑过小程序端的换肤吗?今天我们就来聊一聊小程序的换肤。 ?...; 传统前端换肤方案 在聊小程序的换肤方案之前,我们大概看一下一般前端项目常见的换肤方案以及优缺点: 1、class 命名空间 这个应该是最简单的换肤方案,利用class 名称准备两个主题...css变量做引入使用: // 页面使用@import "../.....针对动态换肤,后端接口返回色值字段,前端通过 内联 方式对页面元素进行色值设置。...方案三 小程序中要实现动态换肤,目前能想到的办法就是在涉及到颜色设置时通过 内联(设置 style) 方式对页面元素进行色值设置。这种方法目前来说成本较高,对于已经成型的项目来说风险过大。

1.9K20

在线动态换肤思路

很早之前就在想在线换肤的实现思路,主要是之前有个项目有换肤,连布局图片都不一样,无能为力,只好写不同页面,然后通过打包的时候配置删除和替代文件实现,但是在线换肤还是没去做。...今天分享一下换肤的思路,只是单纯的颜色替换,没有包括连布局图片都不一样的换肤。 跟国际化一样,方案可能不难,难的是开发业务的时候很繁琐,写的不好就很难维护。...还有之前有提到过的css in js在这种换肤场景下好像也非常的合适。...自己知道的在线换肤的思路只有这三种了,如果真的有需求要做在线换肤功能,还真不知道哪种会比较好,只能是自己选型了,真正涉及项目的时候,可不只是这样说说而已,会碰见什么坑就不好说了。...讲道理,现在应该没多少在线换肤的功能网站了吧。 自己感觉还是有点不对劲,希望有做过换肤项目的(不只是demo)可以指点一波。 (完) Coding 个人笔记

1K20

换肤功能(scss、css变量)

博客地址:https://ainyi.com/104 产品 SaaS 化,通常需要有换肤功能 这里简单记录一下主题色及其衍生色(高亮、浅色)的更换功能 scss 全局定义 每个页面都有颜色,那么应该把颜色值定义在...color-primary-light: #C2D1FF; $color-primary-lightest: #EBF0FF; $color-primary-transparency: rgba(71,98,254,0.1); 每个页面的样式表引入此文件...sColorChange.join(',') + ',1)' } 最后只需要在==路由全局前置守卫==中计算颜色值,并赋值到 css 变量上,在 scss 全局变量中用 var() 函数引入 css 变量(各种颜色值) 换肤流程...通过接口获取主题色 --> js 计算衍生色值 --> 赋值到 css 变量 --> scss 全局变量用 var() 函数引入 css 变量 --> 页面样式引用 scss 全局颜色值 使用例子 global.scss

4K20

Hook源码实现阿里无闪烁换肤

那么能不能要实现一个全app内的一键换肤,一劳永逸~~~ 2 正文大纲 2.1 什么是一键换肤 2.2 界面上哪些东西是可以换肤的 2.3 利用HOOK技术实现优雅的“一键换肤" 2.4...一些换肤实现方式的对比 方案1:自定义View中,要换肤,那如同引言中所述,toggle方法,invalidate重绘。弊端:换肤范围仅限于这个View....在我换肤之前,和换肤之后,是不同的。...如题,我是用hook实现一键换肤。...收集我们需要换肤的View(用自定义view属性来标记一个view是否支持一键换肤),保存到变量中劫持了 系统创建view的逻辑之后,我们要把支持换肤的这些view保存起来 加载外部资源包,调用接口进行换肤外部资源包

1.3K10

基于Vue、ElementUI的换肤解决方案

写在前面 换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考。...这个 class 添加到 body 标签中,那么这个时候,我们的换肤效果就出来了。...,通过这个工具或者这个页面,我们可以自定义上面五种主色调以及辅助色。...所以,我们还是用上面的方法,给这个生成的css文件里面的每一个 css 样式加上一个独特的命名前缀,然后换肤的时候,就将这个 class 添加到 body 上面,如此一来,也能实现很丰富的换肤功能(因为我们可以自己配很多套好看的配色...方案四、实时更换主色调 前面已经介绍了几种方法可以做到换肤,但都是在我们的限定提供的几个皮肤范围内换肤;但我们有一个需求是,弹出一个颜色选择器,然后我们选了什么颜色,页面的主色调就立马改成什么颜色。

4.9K30

android使用SkinManager实现换肤功能的示例

试着用鸿洋大神写的SkinManager实现了换肤功能。...android.permission.WRITE_EXTERNAL_STORAGE"/ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/ 在使用换肤功能的页面...onCreate()中注册: //换肤功能页面注册 SkinManager.getInstance().register(this); 有注册当然有注销啊,在onDestroy方法中取消注册: //换肤功能注销...以第七项中的TextView点击事件实现换肤为布局,在页面中: //声明成员变量,默认false,默认主题为黑色 private boolean isChange; //实现设置点击事件 public...; 如果要在弹窗中添加换肤功能,可以在弹窗布局添加换肤配置后,页面代码中调用SkinManager.getInstance()的injectSkin(View view)方法实现。

74831
领券