[发明专利]前端在线动态切换主题的显示方法和配置方法

说明书

本发明公开了一种前端在线动态切换主题的显示方法和配置方法。首先分别定义个主题的规范值文件及关联的触发动作，然后配置触发动作在样式规范抽离上的响应，封装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方法至少包括设置字体颜色的方法，设置字体大小的方法，设置字体的方法，设置背景颜色的方法以及设置边框颜色的方法。