前端在线动态切换主题的显示方法和配置方法技术

本发明专利技术公开了一种前端在线动态切换主题的显示方法和配置方法。首先分别定义个主题的规范值文件及关联的触发动作，然后配置触发动作在样式规范抽离上的响应，封装minxin方法以备css样式赋值调用，在scss文件中，配置触发动作在css样式赋值上的响应，添加响应触发动作的方法，将触发动作配置于前端。在触发动作发生后，响应于触发动作，从样式规范中抽离样式规范值，scss文件调用minxin方法为css样式赋值，css样式在前端展示完成主题的切换。本发明专利技术对于开发者而言，只需一次开发，即可在后续过程中多次重复使用，无需每一次都对大量css文件进行修改(重新开发)，维护和扩展极其容易。对于用户而言，可通过简单操作自由切换主题样式，用户体验好。

【技术实现步骤摘要】
前端在线动态切换主题的显示方法和配置方法
本专利技术涉及UI设计领域，尤其是一种让用户在前端可在线动态切换主题的解决方法，以及一种让前端在线动态切换主题的配置方法。
技术介绍
目前市场上根据节假日更换web页面主题已经成为一种趋势，想要实现这种效果，在以往的模式中，每一次更换都需要修改大量的css文件，其从本质来说都是重新开发、重新测试，相当于一次UI层面的重构。该种方式需要耗费大量的人力物力来对样式进行反复的修改，对于开发者而言，无疑是一种重复工作量高、开发效率低的解决方案，且该种方案在后期扩展时，需要对所有文件进行修改，重复利用性和扩展性极差。对于用户而言，传统的主题切换方式是被动接受开发者配置的主题，无法自主选择，此外，即使想自己切换主题样式，也需要在复杂的前端中逐一寻找切换的操作口，操作较为复杂，用户体验较差。
技术实现思路
本专利技术的专利技术目的在于：针对上述存在的问题，提供一种在前端能够实现在线动态切换主题的显示方法，以在开发者一次开发后，能够供用户通过简单操作，实现多次重复、自主地切换自己想要的主题风格。并且，还提供一种前端在线动态切换主题的配置方法，以使开发者在一次开发后，即可多次使用，解决每次切换主题均需要配置大量css文件的大工作量和高重复性问题。本专利技术采用的技术方案如下：一种于前端在线动态切换主题的显示方法，包括以下流程：A.响应于触发动作，获取所关联的规范值文件，根据获取的规范值文件，从预定义的样式规范中抽离出对应的样式规范值；各触发动作均唯一关联有对应的主题的规范值文件；B.在scss文件中，根据抽离的样式规范值，调用预封装的minxin方法给相应的css样式赋值。上述的触发动作即为切换主题的操作，触发动作可以是指令、信号或行为。针对于每一个触发动作，均配置有对应的主题的规范值文件，该规范值文件所包含的配置信息决定了主题所展示的样式。在切换主题操作执行后，根据对应的规范值文件从样式规范中抽离出对应的样式规范，进一步根据配置的样式赋值方法(minxin方法)给具体的css样式赋值，从而完成主题样式的展示。该方法对于用户而言，可以通过简单的操作自由切换前端主题样式，对于开发者而言，在一次开发配置后，即可连续多次使用，无需对大量的css文件进行修改、测试，开发效率极高，而且，后期维护和扩展及其方便，进行对主题的规范值文件进行修改或新增即可，极大地提高了开发效率。进一步的，所述预定义的样式规范中，至少包括所有主题需要使用到的色值、字体大小和字体规范值。进一步的，所述色值至少包括：a.依据色系规范来区分的一组规范基础色；b.依据使用场景来区分的一组功能基础色；和c.依据设计来区分的一组使用场景色值。进一步的，所述预封装的minxin方法至少包括设置字体颜色的方法，设置字体大小的方法，设置字体的方法，设置背景颜色的方法以及设置边框颜色的方法。进一步的，所述触发动作为对嵌入于HTML元素上的data属性值的操作。该设计便于用户上手，也可提高用户切换主题的便捷性和可视性，用户体验好。进一步的，对所述data属性值的操作为对HTML全局嵌入的自定义data属性的点击操作。为解决上述全部或部分问题，本专利技术还提供了一种于前端在线动态切换主题的配置方法，包括以下流程：A.分别定义所需要的各主题的规范值文件和触发动作，将各触发动作与各规范值文件一一关联；B.配置对触发动作的响应，以根据各主题所定义的规范值文件，从预定义的样式规范中抽离样式规范；C.封装minxin方法以为具体的css样式赋值，以供全局使用；D.在scss文件里，配置对触发动作的响应，以调用minxin方法给相应的css样式赋值；E.添加响应触发动作的方法；F.将触发动作配置于前端。上述配置方法，对于开发者而言，在一次配置完成主题切换的架构后，后期即可多次重复使用，且维护和扩展均非常便捷，避免了每一次均需要修改大量css文件的情形，大幅减少了开发工作了和开发难度，极大地提高了开发效率进一步的，所述预定义的样式规范中，至少包括所有主题需要使用到的色值、字体大小和字体规范值。进一步的，所述色值至少包括：a.依据色系规范来区分的一组规范基础色；b.依据使用场景来区分的一组功能基础色；和c.依据设计来区分的一组使用场景色值。进一步的，所述将切换主题的操作配置于前端为：将自定义的data属性嵌入HTML元素上。综上所述，由于采用了上述技术方案，本专利技术的有益效果是：本专利技术的显示方法对于用户而言，可视化效果好，上手容易(无需在负责的前端寻找切换主题操作的触发之处)，通过简单的操作即可在线自由地切换主题样式风格。对于开发者而言，无需在每一次切换时修改大量的css文件，在一次开发搭建好架构后，即可多次重复使用，操作简单，维护和扩展极其便捷，极大地提高了开发效率。附图说明本专利技术将通过例子并参照附图的方式说明，其中：图1是于前端在线动态切换主题的显示方法运行流程图。图2是于前端在线动态切换主题的配置方法流程图。具体实施方式本说明书中公开的所有特征，或公开的所有方法或过程中的步骤，除了互相排斥的特征和/或步骤以外，均可以以任何方式组合。本说明书(包括任何附加权利要求、摘要)中公开的任一特征，除非特别叙述，均可被其他等效或具有类似目的的替代特征加以替换。即，除非特别叙述，每个特征只是一系列等效或类似特征中的一个例子而已。实施例一如图1所示，本实施例公开了一种于前端在线动态切换主题的显示方法，包括以下过程：响应于用户的触发动作，scss文件根据该触发动作所关联的样式规范值为css样式赋值。包括以下流程：A.响应于触发动作，获取所关联的规范值文件，根据各主题所定义的规范值文件，从预定义的样式规范中抽离对应的样式规范值。各触发动作均预定义有相关联的主题的规范值文件。样式规范预定义有若干主题的规范值，样式规范包括所有主题需要使用到的色值、字体大小和字体等规范值。其中色值至少包括：1.依据色系规范来区分的一组规范基础色。此组色系优选为经常使用到的色系。2.依据使用场景来区分的一组功能基础色。例如校验提示时的红色，警告提示的黄色，以及操作成功的绿色和其他特殊场景使用到的特殊色值。3.依据设计来区分的一组使用场景色值。例如固定的字体基础色，固定的背景基础色，固定的边框基础色，以及固定的导航栏颜色等色值。B.在scss文件里，根据抽离的样式规范值，调用预封装的minxin方法给相应的css样式赋值。minxin方法为css样式赋值，供全局使用。minxin方法中包括规范里涉及到的所有样式，例如：设置字体颜色的方法，设置字体大小的方法，设置字体的方法，设置背景颜色的方法以及设置边框颜色的方法等。css赋值后即在展示界面展示出对应的主题效果，本文档来自技高网...

【技术保护点】
1.一种于前端在线动态切换主题的显示方法，其特征在于，包括以下流程：/nA.响应于触发动作，获取所关联的规范值文件，根据获取的规范值文件，从预定义的样式规范中抽离出对应的样式规范值；各触发动作均唯一关联有对应的主题的规范值文件；/nB.在scss文件中，根据抽离的样式规范值，调用预封装的minxin方法给相应的css样式赋值。/n

【技术特征摘要】
1.一种于前端在线动态切换主题的显示方法，其特征在于，包括以下流程：
A.响应于触发动作，获取所关联的规范值文件，根据获取的规范值文件，从预定义的样式规范中抽离出对应的样式规范值；各触发动作均唯一关联有对应的主题的规范值文件；
B.在scss文件中，根据抽离的样式规范值，调用预封装的minxin方法给相应的css样式赋值。


2.如权利要求1所述的显示方法，其特征在于，所述预定义的样式规范中，至少包括所有主题需要使用到的色值、字体大小和字体规范值。


3.如权利要求2所述的显示方法，其特征在于，所述色值至少包括：
a.依据色系规范来区分的一组规范基础色；
b.依据使用场景来区分的一组功能基础色；和
c.依据设计来区分的一组使用场景色值。


4.如权利要求1所述的显示方法，其特征在于，所述预封装的minxin方法至少包括设置字体颜色的方法，设置字体大小的方法，设置字体的方法，设置背景颜色的方法以及设置边框颜色的方法。


5.如权利要求1所述的显示方法，其特征在于，所述触发动作为对嵌入于HTML元素上的data属性值的操作。


6.如权利要求1所...

【专利技术属性】
技术研发人员：江涛，韩俊瑶，
申请(专利权)人：成都路行通信息技术有限公司，
类型：发明
国别省市：四川;51