antd在线换肤定制功能

最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. 先看预览效果吧 css换肤入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过这篇 ,当时很惊叹,原理其实很简单,就是我们最能想到的方式,多个css,然后用JS替换从而达到换肤效果.但是这个有局限性,比如我们用的是antdUI库,我们不可能每个颜色都去搞个css吧.当时现在我们有less,sass,而且原生的css也有变量var了,所以新时代我们有新技术达到这个…

微信小程序之换肤的功能

pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所以实现的方式有点不一样,大致如下: 1.需要换肤的wxss,正常的wxss. 2.换肤按钮点击的时候,把当前皮肤的类型存入storage里面. 3.每个页面都引入换肤的wxss(因为换肤每个页面都需要改变). 4.在app.js的globalData里设置默认的皮肤类型. 5.每个页面onload的…

vue 切换主题（换肤）功能

一:先写好两个css样式放在static文件夹中二:在index.html中添加css link链接 <link rel="stylesheet" id="style" href="static/css/one.css"> 三:在App.vue中的 created中添加默认执行方法 created() { var style = localStorage.getItem("style"); if(style){…

Android主题换肤实现

本系列文章主要是对一个Material Design的APP的深度解析,主要包括以下内容基于Material Design Support Library作为项目整体框架.对应博文:Android Material Design 兼容库的使用详解 RecyclerView的万能适配器.对应博文:打造一个RecyclerView的万能适配器-减少你的代码冗余高仿QQ的自定义View.对应博文:Android自定义View之高仿QQ健康主题换肤功能.对应博文:Android主题换肤无缝切换…

Android主题换肤无缝切换

2016年7月6日更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1.2.1:完善之前版本View的创建v1.2.0:增加对换肤属性自定义扩展v1.1.0:可以直接加载网络上的皮肤文件今天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重启直接实现无缝切换,可高仿网易云音乐的主题换肤. 这个链接是本次的Demo打包出来的…

Android实现换肤功能（二）

前两天写的上章关于换肤的功能获得了很好的反响,今天为大家介绍另一种方式.今天实现的策略也是网友建议的,然后我自己去写了个demo,大家自己评估下相比第一种方式的优势和劣势在哪里. 简单介绍下关于第一种关于换肤实现的方法一些不友好的地方,比如点击了换肤的功能键,需要先下载一个资源apk,然后再去引用其中的资源ID,于用户使用起来确实有有很多不便之处.今天为大家介绍的方法是克服了这一弊端的,可以实现直接在应用内切换,把资源文件存储在本地apk的,读取和操作也是更加便捷的,下面介绍下大致的一个实现逻辑…

Android中插件开发篇之----应用换肤原理解析

一.前言今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转战: http://blog.csdn.net/jiangwei0910410003/article/details/41384667 二.原理介绍现在市场上有很多应用都有换肤的功能,就是能够提供给用户一些皮肤包,然后下载,替换.而且有些皮肤是要收费的.对于这个功能的话,其实没有什么技术难度的,但…

Android应用换肤总结

换肤,我们都很熟悉,像XP的主题,塞班的主题.看过国外的一些技术博客,就会发现国内和国外对软件的,或者说移动开发的软件的需求的不同.国外用户注重社交.邮件等功能,国内用户则重视音乐.小说.皮肤等功能,国内有很多的软件都支持换肤,像腾讯微博.墨迹天气等. Android系统通过XML 形式描述各种资源,包括布局.字符串.样式.交互风格等,通常存放在res目录中,使应用逻辑和界面设计分离开来,让开发者可以专注于代码逻辑. 换肤就是换掉皮肤包括的部分或所有资源.皮肤一般含有多个文件,例如图片.配置等文…

Android 打造自己的个性化应用(一)：应用程序换肤主流方式的分析与概述

Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤.系统不提供直接支持,只能自行研究. 换肤,可以认为是动态替换资源(文字.颜色.字体大小.图片.布局文件……).这个使用编程语言来动态设置是可以做到的,例如使用View的setBackgroundResource.setTextSize.setTextColor等函数.但我们不可能在每个activity里对页面里的所有控件都通过调用这些函数来换肤,这样的程序代码难以维护.扩展,也违背了UI和代…

hybird之web动态换肤实现

前言最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法. 预想目前实现换肤的功能无非就两种做法. 1.写几个皮肤文件,然后切换使用这几个文件达到换肤的目的. 不得不说这是最常见的方式,效果也比较明显,但是它有几个缺点. 缺点: 1.如果更改一个皮肤的内容,那其他的皮肤文件也要做相应修改(这挺麻烦,不过可以用less管理css解决,所以也不是什么大问题). 2.它是固定的,在使用的时候皮肤文件已经是写好的了,而当我需要动态设置一…

Android APK方式换肤实现原理

现在很多APP都有换肤的功能,例如微博,QQ等应用.这些应用的换肤原理是什么? 在用微博的时候,不难发现,当你要换肤时,先下载并安装一个皮肤apk,然后选择这个皮肤,就可以了. 这种方式就是把皮肤打包成一个APK,然后在主程序中访问这个皮肤APK中的资源.这种方式需要涉及到两个应用之间的数据访问了. 那如何做到应用间的数据访问呢? 这就得用到Android shareUserId这个属性了.通过Shared User id,拥有同一个User id的多个APK可以配置成运行在同一个进程中.所以默…

Android插件换肤一.实现原理

学习缺的不是时间,而是耐心目的 1.搞懂系统获取资源文件到在加载布局的整个流程是自己实现换肤功能的理论基础 2.提高分析源码.追踪源码的能力要点 1.XmlResourceParser (通过这个类可以将xml中的每一个控件取出来) 2.Factory2(创建兼容的view,为null的话,通过反射的方式创建非兼容的view) 源码阅读版本:android-29 跟踪setContentView探索view的实例化 public class MainActivity extends App…

提升组件库通用能力 - NutUI 在线主题定制功能探索

开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 APP 视觉虽可以一键进行换肤操作,但是对于更个性化的定制需求(组件级样式.规范.尺寸等)近千行的主题样式变量对开发者来说工作量是非常大的.为提升开发体验,提高开发者效率,加强换肤功能以及实现「组件级式定制」功能迫在眉睫. 设计目标允许用户在开发阶段切换不同主题风格的皮肤,也允许开发者对指定的组件直接…

JS实现网页换肤功能效果

网页换肤的基本原理使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 基本流程如下: 上面是使用流程图来描述下,自从工作以来很小画这样的流程图如果流程图画错了或者画的不够好请大家原谅! 先来看看效果图吧! 我只是做个demo 来实现这样一个效果!假如页面上一进来的时候有这么四个按钮分别代表不同…

canvas菜鸟基于小程序实现图案在线定制功能

前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用,所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏览器 url 回显多页签.而且页签内要维护一个历史记录,可以后退组件要求异步加载,减少首屏加载时间. 很明显,这就是一个类 ERP 的应用. 做过 JSP 等后台的同学,对多页签应该都很熟悉吧. 那接下来我们就来谈谈实现. 通用性高…

一种简单的实现：Android一键换肤功能

现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. 假设默认是黄色皮肤: 换肤成红色: 换肤成绿色: 使用方式:1,首先要自定义一个Application,在AppTest中就是MyApplication.完成初始化. package zhangphil.apptest; import com.zhy.changeskin.SkinManager;…

.NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能

IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. IrisSkin2.dll目前只能在.NET Faremwork 4.0以及之前的版本使用,所以大家在VS2010中可以将自己的项目框架设置为.NET .NET Faremwork 4.0,具体做法见下图: 右键点击你创建的项目—>属性: 将你的目标框架改为.NET Faremwork 4.0或者之前的版…

利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

一.背景在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带default gray black bootstrap metro五款皮肤,但是它并不像bootsrap提供了很完整的css框架,不能提供项目需要的所有的css,所以还需要自己编写控件之外的一些css.给系统换肤时,easyui控件都没问题,问题就在于自己编写的这部分css怎么实现换肤,当然,最简单的办法就…

【转】Javascript+css 实现网页换肤功能

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添…

Android 换肤功能的实现（Apk插件方式）

一.概述由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资源文件内置于应用程序Apk的资源目录下,这种方案最简单,但是导致apk安装包比会比比较大,而且不好管理 (2)将皮肤资源文件打包成zip的资源文件方式提供,该方法也比较多被采用. (3)将皮肤图片资源以独立的Apk安装包的方式提供,做成插件化的方式.便于管理. 本文主要讨论第三种实现. 二.效果演示…

Android 打造自己的个性化应用(二)：应用程序内置资源实现换肤功能

通过应用程序内置资源实现换肤,典型的应用为QQ空间中换肤的实现. 应用场景为: 应用一般不大,且页面较少,风格相对简单,一般只用实现部分资源或者只用实现背景的更换. 此种换肤方式实现的思路: 1. 把几套皮肤放在res/drawable目录里,然后用SharedPreferences来记录当前皮肤的资源id.然后在程序启动时加载Activity背景. 2. 主要的实现在皮肤管理器SkinManager类中. 将皮肤资源的ID加入集合中. 由该类同一调度皮肤更换,如初始化皮肤,获取当前皮肤符号以及…

cookie记忆换肤功能实战Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery换肤+cookie记忆功能</title> <link rel="stylesheet" href="../css/style.css" media="screen"…

用js来实现页面的换肤功能(带cookie记忆)

用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的DIV元素有一个基本的框架结构. 2.再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色,边框颜色等等. 3.用JS函数来决定调用哪个样式,并把调进来的样式写进cookie,这样就可以达功能. 例如:我们的页面结构如下: <div id="header&…

WPF 实现换肤功能

将所有控件的基本样式汇集到一个资源字典中,构成界面的基本样式文件,然后进行不同颜色皮肤的定制. 即在新的皮肤资源字典文件中引入基本样式文件,然后使用资源继承,并且只设置控件的颜色属性等,形成一个皮肤文件. 注意:在设置不同皮肤文件时,不同控件的样式名字必须固定,只改变其颜色就能形成新的皮肤,因为在界面xaml中所有控件只引用一个样式名字. 换肤时需要设置本地json文件,对皮肤信息进行记录,以便下次启动程序加载上一次设置完毕的皮肤格式. 换肤--进行资源文件的替换: Application.Cu…

cookie换肤功能

<div class="selectSkin"> <input id="red" class="themeBtn" type="button" value="红色"> <input id="yellow" class="themeBtn" type="button" value="黄色"> &…

换肤功能的实现以及监听storage实现多个标签页一起换肤

1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[id="sidebar"]') if (existSkinLink) { existSkinLink.setAttribute('href', `//static.zhaopin.com/newcrm/static/skin/${val}02.css`) } else { const ski…

微信小程序一键生成源码在线制作定制功能强大的微信小程序

微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道微信小程序除了腾讯,还有千千万万的码农为此而努力,小程序将来发展必然让很多小程序可以实现一键生成源码,或者你需要更加个性化的功能,也可以通过在线制作定制出功能更加强大的小程序,其实在线定制就是一个建模的过程,需要在线制作定制相关的人员,要懂一些技术,没有技术功底,即使有优秀的在线制作定制工具也完成不…