CN109542434A - 一种基于编程语言的主题动态切换方法及电子设备 - Google Patents

Abstract

本发明公开一种基于编程语言的主题动态切换方法及电子设备，其中，方法包括步骤：预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；将当前主题的变量注入到根组件中，显示当前主题的配色方案；当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。本发明对不同的颜色要素定义不同的变量，然后将这套主题变量导入根组件，所有的子级组件都将成功应用这套主题方案。当用户切换主题时，实际上时将另外一套主题变量注入到根组件中，从而实现了主题的动态切换。

Description

一种基于编程语言的主题动态切换方法及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于编程语言的主题动态切换方法及电子设备。

背景技术

网站的各个元素的颜色往往是固定的，不能改变。网站只能存在一套配色方案，用户长时间使用难免会单调。对于想尝试不同配色的用户，现有技术还没有比较好的动态切换方法。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于编程语言的主题动态切换方法及电子设备，旨在解决现有技术还无法为网站提供较好的配色切换功能的问题。

本发明的技术方案如下：

一种基于编程语言的主题动态切换方法，其中，包括步骤：

预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

将当前主题的变量注入到根组件中，显示当前主题的配色方案；

当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

所述的基于编程语言的主题动态切换方法，其中，预先收集每组主题的颜色要素，并放入同一集合，形成相应主题的颜色要素集。

所述的基于编程语言的主题动态切换方法，其中，每隔一段时间按顺序切换一次主题。

所述的基于编程语言的主题动态切换方法，其中，每隔一段时间随机切换一次主题。

所述的基于编程语言的主题动态切换方法，其中，接收用户对颜色要素的修改，并更新相应的变量，同时将修改后的变量注入到根组件中。

所述的基于编程语言的主题动态切换方法，其中，所述颜色要素包括窗口、文本框、图标和标题。

所述的基于编程语言的主题动态切换方法，其中，当接收到用户通过指定快捷键的方式输入切换主题的指令时，对当前主题进行实时切换。

一种电子设备，其中，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

将当前主题的变量注入到根组件中，显示当前主题的配色方案；

当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

一种非易失性计算机可读存储介质，其中，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的基于编程语言的主题动态切换方法。

一种计算机程序产品，其中，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的基于编程语言的主题动态切换方法。

有益效果：本发明对不同的颜色要素定义不同的变量，然后将这套主题变量导入根组件，所有的子级组件都将成功应用这套主题方案。当用户切换主题时，实际上时将另外一套主题变量注入到根组件中，从而实现了主题的动态切换。

附图说明

图1为本发明一种基于编程语言的主题动态切换方法较佳实施例的流程图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供一种基于编程语言的主题动态切换方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种基于编程语言的主题动态切换方法较佳实施例的流程图，其包括步骤：

S1、预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

S2、将当前主题的变量注入到根组件中，显示当前主题的配色方案；

S3、当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

本发明对不同的颜色要素定义不同的变量，然后将这套主题变量导入根组件，所有的子级组件都将成功应用这套主题方案。当用户切换主题时，实际上时将另外一套主题变量注入到根组件中，从而实现了主题的动态切换。

具体地，在所述步骤S1中，预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量。

本发明中，先预习设置多组主题的配色方案。

每一组配色方案中，各颜色要素所显示的颜色并不相同。具体可对每组主题中不同的颜色要素定义不同的变量。这样为相应的变量赋值即可使相应的颜色要素显示相应的颜色。

进一步，所述颜色要素包括窗口、文本框、图标和标题。

当然，网站上的元素多种多样，所以颜色要素还可以是其他要素。

在所述步骤S2中，将当前主题的变量注入到根组件中，显示当前主题的配色方案。

即先对不同的颜色要素定义不同的变量，然后将这套主题变量导入根组件，所有的子级组件都将成功应用这套主题方案。

在所述步骤S3中，当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

在需要切换主题时，可将所需切换的主题的变量注入到根组件中，从而达到显示新主题的配色方案。

本发明中，可预先收集每组主题的颜色要素，并放入同一集合，形成相应主题的颜色要素集。这样可以提高配色效率，直接对所述颜色要素集进行操作即可。

进一步，接收用户对颜色要素的修改，并更新相应的变量，同时将修改后的变量注入到根组件中。

用户在编辑网站时，可以对其中的颜色要素进行修改，这样更新相应的变量，并将更新的变量注入到根组件中，实现对颜色要素更新。

本发明中，主题的切换可自动实现，例如每隔一段时间按顺序切换一次主题，又或者，每隔一段时间随机切换一次主题，当然自动切换的条件还可以是其他因素。

当然，本发明中，主题的切换可以由用户手动实现，手动切换主题的方式可以是点击网站的“主题切换”选项，这样即可实现主题的切换。但本发明优选的是通过快捷键的方式来切换主题。

即，当接收到用户通过指定快捷键的方式输入切换主题的指令时，对当前主题进行实时切换。

也就是说，当用户输入指定快捷键时，则可以对当前主题进行实时切换。

所述指定快捷键可以是单个按键，也可以组合键。但本发明优选的是采用组合键的方式来实现主题切换，这样可以避免由于操作失误导致的主题切换的问题。

主题切换方式有以下两种：1、在body(文档主体)中加样式，对所有css(层叠样式表)进行命名空间(css前缀)处理；类似Element自身的主题切换方式，通过编写scss(css的辅助工具，在css语法的基础上增加了变量、嵌套、混合、导入等高级功能)改变主题。

第一种方式中，是先将element(元素)本身提供的变量文件修改后生成新的css，然后将该css用gulp(自动化构建工具)进行二次编辑增加命名空间，然后引入。也就是说只是修改了UI框架的主题，并没有修改样式主题。

第二种方式则是利用element生成一个sass变量文件，执行命令行后生成新主题，然后让开发者自己导入。

所以本发明中，设计的主题加载和切换方式大致流程如下：

1.页面中仅引入基本样式

2.页面初始化完成，动态加载主题文件

3.用户切换主题：判断主题文件是否已经存在，存在则不操作；不存在则清空所有的主题文件，然后动态加载对应的主题文件。

在上述流程中，需要动态引入文件，而动态引入具体可采用js读取文件路径并加载的形式，即该文件必须存在实际的物理地址，所以需要先对项目进行打包，生成对应的静态的css文件，而不是scss文件。为了达成这个目的，还需要对webpack进行设置。

配置webpack具体是在webpack.prod.conf.js中对入口变量做出修改，以配置供js使用的主题文件路径。

配置好新的入口后，对项目进行打包，等待编译完成。当打包结束后即可在dist\static\css下生成新增的theme文件，这个文件即为主题文件。后续则是为主题切换做基础，需要把生成的主题文件路径提供给js。该文件在开发时是没有的，只有在打包完成后才有，所以需要另一个操作：改写打包文件。

在打包文件生成后，需要利用node循环读取dist\static\css下的所有文件，并把所有的theme文件路径输出到html中，当然也可以输出到公共js中，比如app.js。

后续只需要执行即可实现主题切换。当然，若将主题文件路径直接和npm runbuild绑定到一起，执行后，在head部分能看到一个全局的变量themeURL，里面就是需要的所有的主题文件路径。

在上个步骤中已经有了全局变量themeURL，那么只需要对主题文件进行匹配即可。当更换主题时，先查找已经加载的主题，如果没有则直接插入主题文件，如果有则清空所有主题文件，然后再插入。至于动态插入文件的方法，项目中已对该方法进行封装，可在src\util\changeTheme.js中查看。

这种切换方式能够最大程度上避免CSS污染，页面也更加干净，不会产生多余的文件。若需要简化步骤，则将所有样式都放到主题中，那么后期维护也非常简单，修改变量值即可。同样也可以抽出所有样式中的主题部分(如背景色、文字、颜色、图片等)，也能极大减少主题文件的大小。

本发明还提供一种电子设备10，如图2所示，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器110加载并执行：

预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

将当前主题的变量注入到根组件中，显示当前主题的配色方案；

当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的基于编程语言的主题动态切换方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行基于编程语言的主题动态切换方法的各种功能应用以及数据处理，即实现上述方法实施例。

关于上述电子设备10的具体技术细节在前面的方法中已有详述，故不再赘述。

本发明还提供一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的基于编程语言的主题动态切换方法。

本发明还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的基于编程语言的主题动态切换方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (10)

1.一种基于编程语言的主题动态切换方法，其特征在于，包括步骤：

预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

将当前主题的变量注入到根组件中，显示当前主题的配色方案；

当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

2.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，预先收集每组主题的颜色要素，并放入同一集合，形成相应主题的颜色要素集。

3.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，每隔一段时间按顺序切换一次主题。

4.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，每隔一段时间随机切换一次主题。

5.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，接收用户对颜色要素的修改，并更新相应的变量，同时将修改后的变量注入到根组件中。

6.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，所述颜色要素包括窗口、文本框、图标和标题。

7.根据权利要求1所述的基于编程语言的主题动态切换方法，其特征在于，当接收到用户通过指定快捷键的方式输入切换主题的指令时，对当前主题进行实时切换。

8.一种电子设备，其特征在于，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先设置多组主题的配色方案，并对每组主题中不同的颜色要素定义不同的变量；

将当前主题的变量注入到根组件中，显示当前主题的配色方案；

当接收到切换主题的指令时，将所需切换的主题的变量注入到根组件中，显示新主题的配色方案。

9.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的基于编程语言的主题动态切换方法。

10.一种计算机程序产品，其特征在于，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行权利要求1-7任一项所述的基于编程语言的主题动态切换方法。