CN113076150A - 界面主题切换方法、装置、设备、储存介质及程序产品 - Google Patents

界面主题切换方法、装置、设备、储存介质及程序产品 Download PDF

Info

Publication number
CN113076150A
CN113076150A CN202110395381.8A CN202110395381A CN113076150A CN 113076150 A CN113076150 A CN 113076150A CN 202110395381 A CN202110395381 A CN 202110395381A CN 113076150 A CN113076150 A CN 113076150A
Authority
CN
China
Prior art keywords
theme
target
switching
style file
sub
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110395381.8A
Other languages
English (en)
Inventor
刘小娟
段宝丹
张政
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Tongbang Zhuoyi Technology Co ltd
Original Assignee
Beijing Tongbang Zhuoyi Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Tongbang Zhuoyi Technology Co ltd filed Critical Beijing Tongbang Zhuoyi Technology Co ltd
Priority to CN202110395381.8A priority Critical patent/CN113076150A/zh
Publication of CN113076150A publication Critical patent/CN113076150A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44505Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451User profiles; Roaming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种界面主题切换方法、装置、设备、储存介质及程序产品,该方法包括:获取主题切换请求,其中,主题切换请求包括目标主题标识。之后从配置文件中获取与目标主题标识对应的目标样式文件,基于目标样式文件进行主题切换。其中,目标样式文件包括目标主题标识对应的可视化组件和组件颜色,目标样式文件处于预加载状态。该技术方案中,电子设备从配置文件中获取与主题切换请求中包含的目标主题标识对应的预加载的样式文件,并基于该样式文件进行主题切换,实现方案简单,易于实现,提高了切换主题的速度和流畅度。

Description

界面主题切换方法、装置、设备、储存介质及程序产品
技术领域
本申请涉及数据处理技术领域,尤其涉及一种界面主题切换方法、装置、设备、储存介质及程序产品。
背景技术
为了满足不同用户的需求,需要在浏览器或者软件中设置不同的界面主题。用户可以根据自身的需求对界面主题进行切换,对界面主题进行切换可以使得浏览器或者软件呈现的元素更加丰富,从而提高用户的体验感。因此,如何对界面主题进行切换是关键。
目前,对界面主题进行切换主要是电子设备将主题切换的请求通过prop方法传递给多个子组件,多个子组件执行该请求后获取样式文件,之后电子设备根据该样式文件对浏览器或者软件的图形用户界面进行重新渲染和加载,从而完成主题的切换。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:切换界面主题的速度较慢,容易出现卡顿等现象。
发明内容
本申请提供一种界面主题切换方法、装置、设备、储存介质及程序产品,以解决切换主题的速度较慢,容易出现卡顿等现象的问题。
第一方面,本申请实施例提供一种界面主题切换方法,包括:
获取主题切换请求,所述主题切换请求包括目标主题标识;
从配置文件中获取与所述目标主题标识对应的目标样式文件,所述目标样式文件包括所述目标主题标识对应的可视化组件和组件颜色,所述目标样式文件处于预加载状态;
基于所述目标样式文件进行主题切换。
在第一方面的一种可能设计中,所述从配置文件中获取与所述目标主题标识对应的目标样式文件,包括:
根据所述配置文件中的样式文件与主题标识之间的映射关系,获取所述目标主题标识对应的所述目标样式文件。
在第一方面的另一种可能设计中,所述获取主题切换请求之前,包括:
获取多个最小主题块,最小主题块中包括多个主题标识对应的同一子可视化组件,所述子可视化组件为标题、背景、选择框、输入框、下拉框、阴影以及分割线中的一种;
根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,所述根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,包括:
根据主题标识以及各子可视化组件与子组件颜色的映射关系,获取多个最小主题块中所述主题标志对应的子可视化组件和子组件颜色,并设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,所述方法还包括:
建立所述样式文件与主题标识之间的映射关系。
可选的,所述可视化组件包括标题、背景、选择框、输入框、下拉框、阴影以及分割线。
第二方面,本申请实施例提供一种界面主题切换装置,包括:
获取模块,用于获取主题切换请求,所述主题切换请求包括目标主题标识;
所述获取模块,还用于从配置文件中获取与所述目标主题标识对应的目标样式文件,所述目标样式文件包括所述目标主题标识对应的可视化组件和组件颜色;
处理模块,用于基于所述目标样式文件进行主题切换。
在第二方面的一种可能设计中,所述获取模块具体用于:
根据所述配置文件中的样式文件与主题标识之间的映射关系,获取所述目标主题标识对应的所述目标样式文件。
在第二方面的另一种可能设计中,所述处理模块还用于:
获取多个最小主题块,最小主题块中包括多个主题标识对应的同一子可视化组件,所述子可视化组件为标题、背景、选择框、输入框、下拉框、阴影以及分割线中的一种;
根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,所述处理模块具体用于:
根据主题标识以及各子可视化组件与子组件颜色的映射关系,获取多个最小主题块中所述主题标志对应的子可视化组件和子组件颜色,并设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,所述处理模块还用于:
建立所述样式文件与主题标识之间的映射关系,并将每个样式文件进行存储并预加载。
可选的,所述可视化组件包括标题、背景、选择框、输入框、下拉框、阴影以及分割线。
第三方面,本申请实施例提供一种电子设备,包括:处理器、显示器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令,所述处理器执行所述计算机程序指令时用于实现第一方面以及各可能设计提供的方法。
第四方面,本申请实施例可提供一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机执行指令,所述计算机执行指令被处理器执行时用于实现第一方面以及各可能设计提供的方法。
第五方面,本申请实施例提供一种计算机程序产品,包括计算机程序,所述计算机程序被处理器执行时用于实现第一方面以及各可能设计提供的方法。
本申请实施例提供的界面主题切换方法、装置、设备、储存介质及程序产品,该方法包括:通过获取主题切换请求,其中,主题切换请求包括目标主题标识。之后从配置文件中获取与目标主题标识对应的目标样式文件,基于目标样式文件进行主题切换。其中,目标样式文件包括目标主题标识对应的可视化组件和组件颜色,目标样式文件处于预加载状态。该技术方案中,电子设备从配置文件中获取与主题切换请求中包含的目标主题标识对应的预加载的样式文件,并基于该样式文件进行主题切换,实现方案简单,易于实现,不需要对用户界面进行重新加载,提高了切换主题的速度和流畅度。
附图说明
图1为本申请实施例提供的界面主题切换方法的一种应用场景示意图;
图2为本申请实施例提供的界面主题切换方法实施例一的流程示意图;
图3A为本申请实施例一提供的一种切换界面主题控件的示意图;
图3B为本申请实施例一提供的另一种切换界面主题控件的示意图;
图4A为本申请实施例一提供的一种白天主题下的图形用户界面示意图;
图4B为本申请实施例一提供的一种黑夜主题下的图形用户界面示意图;
图5A为本申请实施例一提供的另一种白天主题下的图形用户界面示意图;
图5B为本申请实施例一提供的另一种黑夜主题下的图形用户界面示意图;
图6为本申请实施例提供的界面主题切换方法实施例二的流程示意图;
图7为本申请实施例提供的界面主题切换装置的结构示意图;
图8为本申请实施例提供的电子设备的结构示意图。
通过上述附图,已示出本公开明确的实施例,后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围,而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
在介绍本申请的实施例之前,首先对本申请的背景技术进行解释说明。
随着电子设备发展的愈发成熟,用户对于电子设备的需求也越来越多。举例来说,对于智能手机而言,由于白天的光线较为强烈,为了使得用户能够准确获取屏幕上显示的信息,屏幕中显示内容的背景一般为白色或者其他浅色。当用户需要在夜晚使用智能手机时,如用户在睡前使用智能手机浏览网页,由于夜晚的光线较暗,此时即使调低屏幕亮度,由于屏幕中的显示内容的背景颜色较浅,仍然会对用户的眼睛产生刺激,甚至造成伤害。因此,为了满足用户在夜间使用手机的需求,需要在手机中设置不同的界面主题,如白天主题、黑夜主题、护眼主题等。用户可以根据自身的需求对界面主题进行切换,对界面主题进行切换可以更改浏览器或者软件的图形用户界面的颜色,使其呈现的元素更加丰富,从而提高用户的体验感,提高用户使用的舒适度。因此,如何对界面主题进行切换是关键。
目前,主要有以下几种方式可以实现对主题进行切换:
第一,电子设备可以将主题切换的请求通过prop方法传递给多个子组件,多个子组件执行该请求后获取样式文件,之后电子设备根据该样式文件对浏览器或者软件的图形用户界面进行重新渲染和加载,从而完成主题的切换。其中,prop方法指的是一种父组件向子组件单向传递数据的方法,这个过程是单向的。
第二,电子设备可以根据通过异步JavaScript和XML(Asynchronous JavascriptAnd XML,Ajax)获取样式文件,然后将该样式文件通过样式(英文:style)标签的形式插入在头文件(英文:head)中,实现样式文件的覆盖。
第三,电子设备通过Less接收前端传入的主题切换请求,根据该请求动态修改当前主题,完成主题的切换。其中,Less是一门层叠样式表(Cascading Style Sheets,CSS)预处理语言,它扩充了CSS语言,增加了诸如变量、混合(英文:mixin)、函数等功能。
第四,电子设备可以将所有的样式参数加一个命名空间,并将该命名空间绑定在浏览器页面根元素上,根据主题切换请求切换该命名空间完成主题的切换。
然而,上述方式在进行主题切换时,切换主题的速度较慢,容易出现卡顿等现象。
针对上述问题,本申请的发明构思如下:在目前的方案中,由于在对界面主题进行切换时需要重新加载浏览器或者软件的图形用户界面,存在一定的加载时间,导致切换主题的速度较慢。基于此,发明人发现,如果将需要切换的界面主题的配置文件进行预加载,之后在对界面主题进行切换时,直接使用该样式文件就可以完成对主题的切换,不需要重新加载浏览器或者软件的图形用户界面,则可以解决由于存在加载时间导致的切换主题的速度较慢的问题,从而还可以提高切换主题的流畅度。
示例性的,本申请实施例提供的界面主题切换方法可以应用于图1所示的一种应用场景示意图中。图1为本申请实施例提供的界面主题切换方法的一种应用场景示意图,用以解决上述技术问题。如图1所示,执行本申请提供的界面主题切换方法的主体为电子设备,该电子设备可以是图1中用户的手机、电脑,其他智能终端等等任一具备数据处理和人机交互能力的设备,也可以是智能手表、智能手环等可穿戴设备,本发明对此不进行具体限定。因而,本实施例以终端设备和可穿戴设备统称为电子设备进行解释说明,关于该电子设备具体为终端设备,还是可穿戴设备,可以实际情况确定。
在本申请的界面主题切换方法的实现过程中,电子设备通过运行软件或者浏览器等方式在屏幕上显示图形用户界面,电子设备还可以在屏幕上显示系统设置界面,便于用户通过操作图形用户界面或系统设置界面与电子设备进行交互。用户可以根据自身实际需求,对图形用户界面或系统设置界面上的切换界面主题控件进行点击操作,电子设备通过响应用户操作,生成主题切换请求,之后根据该主题切换请求进行主题切换。
下面,通过具体实施例对本申请的技术方案进行详细说明。
需要说明的是,下面这几个具体的实施例可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。
图2为本申请实施例提供的界面主题切换方法实施例一的流程示意图。
如图2所示,该界面主题切换方法可以包括如下步骤:
S101:获取主题切换请求。
在本步骤中,电子设备需要通过运行软件或者浏览器等方式在屏幕上显示图形用户界面,或者在屏幕上显示系统设置界面,电子设备通过响应用户对图形用户界面或系统设置界面上的切换界面主题控件的操作,获取主题切换请求,以便于后续根据该主题切换请求进行主题切换。
可选的,主题切换请求包括目标主题标识,示例性的,目标主题标识可以为白天主题,也可以为黑夜主题,护眼主题,本申请实施例对此不进行具体限制。
图3A为本申请实施例一提供的一种切换界面主题控件的示意图,图3B为本申请实施例一提供的另一种切换界面主题控件的示意图。如图3A、3B所示,该电子设备以可以通过图形用户界面或系统设置界面设置的主题为白天主题和黑夜主题为例进行举例说明。
如图3A所示,由于共存在白天主题和黑夜主题两种主题,而电子设备此时的主题为白天主题,因此可以通过响应用户对于切换界面主题控件的点击操作,直接生成主题切换请求,便于后续根据该主题切换请求进行主题切换。切换界面主题控件上显示的文字为“点击切换为黑夜主题”,用于提示用户通过点击该控件将主题切换为黑夜主题,切换界面主题控件右边的太阳图标用于提示用户此时的主题为白天主题。
示例性的,切换界面主题控件上显示文字也可以为“切换主题”,或者为“主题”“点击切换主题”等,还可以根据实际需要进行设置,本申请实施例对此不进行具体设置。
同时,电子设备还可以在切换界面主题控件周围设置其他的图案,或者,还可以设置文字用以提醒用户此时的主题为白天主题,如“白天主题”,再或者,还可以不设置文字或图案。可以在切换界面主题控件上方设置图案或文字,也可以在右方、下方、左方设置图案或文字,可以根据实际需求进行设置,图3A仅以切换界面主题控件右方设置太阳图标作为一种可能的实现方式进行举例说明,本申请实施例对此不进行具体设置。
示例性的,由于此时的主题为白天主题,当用户需要切换至黑夜主题时,可以点击切换界面主题控件,电子设备通过响应用户对于切换界面主题控件的点击操作,获取主题切换请求。除此以外,若存在多个主题,如,还存在护眼主题,电子设备在响应用户对于切换界面主题控件的点击操作后,还可以通过弹窗或者悬浮窗的形式为用户提供可选主题界面,该可选主题界面用于显示可供点击的主题控件。用户根据自己的需求,点击主题控件,电子设备通过响应用户对于主题控件的点击操作,获取主题切换请求。用户通过点击切换界面主题控件获取主题切换请求的方式可以根据实际需求进行设置,本申请实施例不进行具体限定。
如图3B所示,电子设备的当前主题为黑夜主题,切换界面主题控件上显示的文字为“点击切换为白天主题”,切换界面主题控件上显示文字也可以为“切换主题”,或者为“主题”“点击切换主题”等,用于提醒用户通过点击该切换界面主题控件将主题切换至白天模式,可以根据实际需要进行设置,本申请实施例对此不进行具体设置。
同时,切换界面主题控件周围设置有月亮图标,用于提示用户此时的主题为黑夜主题。或者,还可以设置文字用以提醒用户此时的主题为黑夜主题,如“黑夜主题”,再或者,还可以不设置文字或图案,图标或者文字可以在切换界面主题控件上方设置图案或文字,也可以在右方、下方、左方设置图案或文字,可以根据实际需求进行设置,图3B仅以切换界面主题控件右方设置月亮图标作为一种可实现的方式进行举例说明,本申请实施例对此不进行具体设置。
示例性的,由于此时的主题为黑夜主题,当用户需要切换至白天主题时,可以点击切换界面主题控件,电子设备通过响应用户对于切换界面主题控件的点击操作,获取主题切换请求。具体获取主题切换请求的方式与图3B的方式一致,在此不进行赘述。
示例性的,下面为电子设备获取主题切换请求的部分代码示例。
toggleTheme(){
const currentTheme=this.COMMON.themeName==='huaxia_dark'?'huaxia_light':'huaxia_dark'
this.$store.dispatch('UpdateTheme',currentTheme)
}
可以理解的是,上述示例仅示出了部分获取主题切换请求的代码。在实际应用中,还可以根据其他代码获取主题切换请求,可以根据实际需求确定,此处不再赘述。
S102:从配置文件中获取与目标主题标识对应的目标样式文件。
在本步骤中,由于配置文件中存在多个样式文件,电子设备需要获取目标样式文件,以便于后续基于该目标样式文件进行主题切换。电子设备获取主题切换请求后,由于主题切换请求包括目标主题标识,因此,可以根据目标主题标识获取目标样式文件。
其中,配置文件是一种计算机文件,可以为一些计算机程序配置参数和初始设置。目标样式文件包括目标主题标识对应的可视化组件和组件颜色,目标样式文件处于预加载状态。
可选的,可视化组件包括标题、背景、选择框、输入框、下拉框、阴影以及分割线,还可以包括折线图、饼图、柱状图、图标展示组件等,还可以包括其他组件,可以根据实际需求进行限定,本方案对此不进行设定。
可选的,组件颜色可以为黑色、也可以为红色、白色、紫色、绿色等,可以根据实际需求进行限定,本方案对此不进行具体限定。
在一种具体的实现方式中,电子设备根据配置文件中的预先建立的样式文件与主题标识之间的映射关系,获取目标主题标识对应的目标样式文件。由于配置文件中存在多个样式文件,当电子设备在获取主题切换请求后,电子设备的vue框架通过全局匹配(英文:global)文件中的this.COMMON.themeName指令获取目标主题标识,并通过this.COMMON.themeConfig指令根据预先建立的样式文件与主题标识之间的映射关系以及获取的目标主题标识,获取该目标主题标识对应的处于预加载状态的目标样式文件,便于后续基于该目标样式文件进行切换。
可选的,global文件预先设置在配置文件中。
S103:基于目标样式文件进行主题切换。
在本步骤中,由于预加载的目标样式文件包括目标主题标识对应的可视化组件和组件颜色,因此在获取目标样式文件后,可以根据该目标样式文件对电子设备进行主题切换。
在一种具体的实施方式中,在获取到目标样式文件后,global文件可以根据目标样式文件对电子设备中的软件、浏览器或系统,通过更改可视化组件的组件颜色进行主题切换。
示例性的,下面为电子设备通过global文件对浏览器进行主题切换的部分代码示例。
Figure BDA0003018342130000101
Figure BDA0003018342130000111
可以理解的是,上述示例仅示出了部分进行主题切换的代码。在实际应用中,还可以通过其他代码获取主题切换请求,可以根据实际需求确定,此处不再赘述。
图4A为本申请实施例一提供的一种白天主题下的图形用户界面示意图,图4B为本申请实施例一提供的一种黑夜主题下的图形用户界面示意图。如图4A、图4B所示,图4A为白天主题下的图形用户界面,用于向用户展示相应的信息。当电子设备根据目标样式文件将主题由白天主题切换至黑夜主题后,此时图形用户界面如图4B所示。
图5A为本申请实施例一提供的另一种白天主题下的图形用户界面示意图,图5B为本申请实施例一提供的另一种黑夜主题下的图形用户界面示意图。如图5A、图5B所示,图5A为白天主题下的图形用户界面,电子设备根据目标样式文件将主题由白天主题切换至黑夜主题,此时图形用户界面如图5B所示。
本申请实施例提供的界面主题切换方法,通过获取主题切换请求,其中,主题切换请求包括目标主题标识。之后从配置文件中获取与目标主题标识对应的目标样式文件,基于目标样式文件进行主题切换。其中,目标样式文件包括目标主题标识对应的可视化组件和组件颜色,目标样式文件处于预加载状态。电子设备从配置文件中获取与主题切换请求中包含的目标主题标识对应的预加载的样式文件,并基于该预加载的样式文件进行主题切换,实现方案简单,易于实现,不需要对用户界面进行重新加载,提高了切换主题的速度和流畅度,从而进一步提高用户的使用感和体验感。
在上述实施例的基础上,由于电子设备需要基于目标样式文件进行主题切换,因此需要预先获取样式文件,以便于电子设备能够根据获取与目标主题标识对应的目标样式文件。
图6为本申请实施例提供的界面主题切换方法实施例二的流程示意图。
如图所示6,该界面主题切换方法在S101之前,还可以包括如下步骤:
S201:获取多个最小主题块。
在本步骤中,为了获取主题标识对应的可视化组件的组件颜色,首先需要建立不同主题标识对应的各子可视化组件与子组件颜色的映射关系。
其中,子可视化组件为标题、背景、选择框、输入框、下拉框、阴影以及分割线中的一种。
示例性的,下面为建立不同主题标志对应的各子可视化组件与子组件颜色映射关系的部分代码示例。
$hx_dark_checkbox_hover_color:#6f94b0;//hover时border color
$hx_dark_checkbox_disable_bg_color:#2c3b46;//dsable color
$hx_dark_checkbox_border_color:rgba(179,194,209,0.5);//默认边框颜色//select
$hx_dark_select_bg:#000000;//默认背景色
$hx_dark_select_hover_bg:#303030;//hover背景色
$hx_dark_select_focus_box_shadow:0 0 6px 0rgba(0,0,0,.4):
//input
$hx_dark_input_bg:#000000;
$hx_dark_input_border_color:rgba(223,231,242,.16);
$hx_dark_input_border_hover_color:#519EED;
$hx_dark_input_focus_boxshadow:#519EED;//focus
//day picker
$hx_dark_date_picker_bg:#1d1d1d;
$hx_dark_date_picker_shadow:0 10px 16px 0rgba(0,0,0,0.5);//阴影
$hx_dark_date_picker_range_bg:#3c424c;//range背景色
//下拉框
$hx_dark_dropdown_bg_color:#1d1d1d;//背景色
$hx_dark_dropdown_hover_bg_color:#303030;//背景色
$hx_dark_dropdown_boxshadow:0 10px 16px 0rgba(0,0,0,0.5);//阴影//块的box-shadow
$hx_dark_box_shadow:0px 0px 16px 0px rgba(0,0,0,0.3);
$hx_dark_dialog_box_shadow:0px 10px 16px 0px rgba(0,0,0,0.5);
示例性的,在上述示例中,可以为不同主题标识对应的各子可视化组件设定变量名,可以为hx_dark_dropdown_bg_color,也可以为hx_dark_input_bg,hx_dark_dialog_box_shadow,hx_dark_date_picker_bg等,可以根据实际需求进行设定,本申请实施例对此不进行具体限制。
可选的,不同主题标识对应的子可视化组件及子组件颜色的映射关系可以存储在sass文件中。
可以理解的是,上述示例仅示出了部分建立不同主题标识对应的子可视化组件及子组件颜色的映射关系的代码。在实际应用中,还可以通过其他的代码建立映射关系,可以根据实际需求确定,此处不再赘述。
进一步的,由于主题标识,子可视化组件以及子组件颜色的数量可能较多,导致不同主题标识对应的子可视化组件及子组件颜色的映射关系可能较为复杂。为了能够更快速获取主题标志下对应的子可视化组件及子组件颜色,方便后续生成样式文件,可以获取多个最小主题块,针对每个最小主题块获取该主题标志下对应的子可视化组件及子组件颜色。
其中,最小主题块中包括多个主题标识对应的同一子可视化组件,如最小主题块可以为标题最小主题块,也可以为背景主题块,选择框主题块,输入框主题块,下拉框主题块,阴影主题块以及分割线主题块,可以根据实际情况进行设定,本申请实施例对此不进行具体设定。
在一种具体的实现方式中,电子设备可以通过mixin方法,将多个主题标志下的同一子可视化组件组成一个最小主题块。
示例性的,下面为获取多个最小主题块的部分代码示例。
Figure BDA0003018342130000131
Figure BDA0003018342130000141
可以理解的是,上述示例仅示出了部分获取最小主题块的代码。在实际应用中,还可以通过其他代码获取最小主题块,可以根据实际需求确定,此处不再赘述。
S202:根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在配置文件中,生成与主题标志对应的样式文件,并将样式文件进行预加载。
在本步骤中,获取多个最小主题块后,可以根据多个最小主题块以及各子可视化组件与子组件颜色的映射关系,生成不同主题标志对应的样式文件。
在一种具体的实施方式中,电子设备通过export方法从sass文件中将不同主题标识对应的子可视化组件及子组件颜色的映射关系导入到JavaScript中,同时将多个最小主题块导入到JavaScript中,生成在global文件中,并将global文件设置在配置文件中。
可选的,在该实施方式下,根据主题标识以及各子可视化组件与子组件颜色的映射关系,通过@include指令调用每个最小主题块,从而针对每个最小主题块获取每个主题标志下对应的各子可视化组件及子组件颜色,并将获取的子可视化组件及子组件颜色设置在配置文件中,生成样本文件。
示例性的,下面在该实施方式下电子设备生成不同主题标志对应的样式文件的部分代码示例。
Figure BDA0003018342130000151
Figure BDA0003018342130000161
可以理解的是,上述示例仅示出了部分生成不同主题标志对应的样式文件的代码。在实际应用中,还可以通过其他的代码生成样式文件,可以根据实际需求确定,此处不再赘述。
进一步的,为了方便电子设备能根据主题标识获取对应的样式文件,需要建立样式文件与主题标识之间的映射关系,方便后续根据目标主题标识进行的主题切换操作。
本申请实施例提供的界面主题切换方法,电子设备通过获取多个最小主题块,并根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在配置文件中,生成与主题标志对应的样式文件,并将样式文件进行预加载。基于获取的目标样式文件,可以对如折线图等较复杂的子可视化组件实现主题的切换,提高了主题的多样性,为后续基于该样式文件进行主题切换打下基础,通过将获取的样式文件进行预加载,有利于提高后续主题切换的速度。
下述为本申请装置实施例,可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节,请参照本申请方法实施例。
图7为本申请实施例提供的界面主题切换装置的结构示意图。如图7所示,该界面主题切换装置包括:
获取模块71,用于获取主题切换请求,主题切换请求包括目标主题标识;
获取模块71,还用于从配置文件中获取与目标主题标识对应的目标样式文件,目标样式文件包括目标主题标识对应的可视化组件和组件颜色,目标样式文件处于预加载状态;
处理模块72,用于基于目标样式文件进行主题切换。
在本申请实施例一种可能设计中,获取模块71具体用于:
根据配置文件中的样式文件与主题标识之间的映射关系,获取目标主题标识对应的目标样式文件。
在本申请实施例另一种可能设计中,处理模块72还用于:
获取多个最小主题块,最小主题块中包括多个主题标识对应的同一子可视化组件,所述子可视化组件为标题、背景、选择框、输入框、下拉框、阴影以及分割线中的一种;
根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,处理模块72具体用于:
根据主题标识以及各子可视化组件与子组件颜色的映射关系,获取多个最小主题块中所述主题标志对应的子可视化组件和子组件颜色,并设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
可选的,处理模块72还用于:
建立样式文件与主题标识之间的映射关系。
可选的,可视化组件包括标题、背景、选择框、输入框、下拉框、阴影以及分割线。
本申请实施例提供的界面主题切换装置,可用于执行上述任一方法实施例中的界面主题切换方法,其实现原理和技术效果类似,在此不再赘述。
需要说明的是,应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分,实际实现时可以全部或部分集成到一个物理实体上,也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现;也可以全部以硬件的形式实现;还可以部分模块通过处理元件调用软件的形式实现,部分模块通过硬件的形式实现。此外,这些模块全部或部分可以集成在一起,也可以独立实现。这里所述的处理元件可以是一种集成电路,具有信号的处理能力。在实现过程中,上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
图8为本申请实施例提供的电子设备的结构示意图。如图8所示,该电子设备可以包括:处理器81、显示器82、存储器83及存储在所述存储器上并可在处理器上运行的计算机程序指令,所述处理器执行所述计算机程序指令时实现前述任一实施例提供的界面主题切换方法。
可选的,电子设备还可以包括与其他设备进行交互的接口。
可选的,该电子设备的上述各个器件之间可以通过系统总线连接。
显示器82用于展示图形用户界面、系统设置界面以及与用户进行人机交互。在一些实施例中,显示器82可以为终端设备的前面板;在另一些实施例中,显示器82可以是柔性显示屏,设置在终端设备的弯曲表面上或折叠面上。甚至,显示器82还可以设置成非矩形的不规则图形的显示屏,也即异形屏。显示器82可以采用液晶显示屏(Liquid CrystalDisplay,LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等材质制备。
存储器83可以是单独的存储单元,也可以是集成在处理器中的存储单元。处理器的数量为一个或者多个。
应理解,处理器81可以是中央处理单元(英文:Central Processing Unit,简称:CPU),还可以是其他通用处理器、数字信号处理器(英文:Digital Signal Processor,简称:DSP)、专用集成电路(英文:Application Specific Integrated Circuit,简称:ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
系统总线可以是外设部件互连标准(peripheral component interconnect,PCI)总线或扩展工业标准结构(extended industry standard architecture,EISA)总线等。系统总线可以分为地址总线、数据总线、控制总线等。为便于表示,图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。存储器可能包含随机存取存储器(randomaccess memory,RAM),也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。
实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一可读取存储器中。该程序在执行时,执行包括上述各方法实施例的步骤;而前述的存储器(存储介质)包括:只读存储器(英文:read-only memory,简称:ROM)、RAM、快闪存储器、硬盘、固态硬盘、磁带(英文:magnetic tape)、软盘(英文:floppydisk)、光盘(英文:optical disc)及其任意组合。
本申请实施例提供的电子设备,可用于执行上述任一方法实施例提供的界面主题切换方法,其实现原理和技术效果类似,在此不再赘述。
本申请实施例提供一种计算机可读存储介质,该计算机可读存储介质中存储有计算机指令,当该计算机指令在计算机上运行时,使得计算机执行上述界面主题切换方法。
上述的计算机可读存储介质,上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。
可选的,将可读存储介质耦合至处理器,从而使处理器能够从该可读存储介质读取信息,且可向该可读存储介质写入信息。当然,可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific IntegratedCircuits,ASIC)中。当然,处理器和可读存储介质也可以作为分立组件存在于设备中。
本申请实施例还提供一种计算机程序产品,该计算机程序产品包括计算机程序,该计算机程序存储在计算机可读存储介质中,至少一个处理器可以从该计算机可读存储介质中读取该计算机程序,所述至少一个处理器执行所述计算机程序时可实现上述界面主题切换方法。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。

Claims (10)

1.一种界面主题切换方法,其特征在于,包括:
获取主题切换请求,所述主题切换请求包括目标主题标识;
从配置文件中获取与所述目标主题标识对应的目标样式文件,所述目标样式文件包括所述目标主题标识对应的可视化组件和组件颜色,所述目标样式文件处于预加载状态;
基于所述目标样式文件进行主题切换。
2.根据权利要求1所述的方法,其特征在于,所述从配置文件中获取与所述目标主题标识对应的目标样式文件,包括:
根据所述配置文件中的样式文件与主题标识之间的映射关系,获取所述目标主题标识对应的所述目标样式文件。
3.根据权利要求1或2所述的方法,其特征在于,所述获取主题切换请求之前,包括:
获取多个最小主题块,最小主题块中包括多个主题标识对应的同一子可视化组件,所述子可视化组件为标题、背景、选择框、输入框、下拉框、阴影以及分割线中的一种;
根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
4.根据权利要求3所述的方法,其特征在于,所述根据主题标识以及各子可视化组件与子组件颜色的映射关系,将多个最小主题块设置在所述配置文件中,生成与所述主题标志对应的样式文件,包括:
根据主题标识以及各子可视化组件与子组件颜色的映射关系,获取多个最小主题块中所述主题标志对应的子可视化组件和子组件颜色,并设置在所述配置文件中,生成与所述主题标志对应的样式文件,并将样式文件进行预加载。
5.根据权利要求3所述的方法,其特征在于,所述方法还包括:
建立所述样式文件与主题标识之间的映射关系。
6.根据权利要求1所述的方法,其特征在于,所述可视化组件包括标题、背景、选择框、输入框、下拉框、阴影以及分割线。
7.一种界面主题切换装置,其特征在于,包括:
获取模块,用于获取主题切换请求,所述主题切换请求包括目标主题标识;
所述获取模块,还用于从配置文件中获取与所述目标主题标识对应的目标样式文件,所述目标样式文件包括所述目标主题标识对应的可视化组件和组件颜色,所述目标样式文件处于预加载状态;
处理模块,用于基于所述目标样式文件进行主题切换。
8.一种电子设备,包括:处理器、显示器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令,其特征在于,所述处理器执行所述计算机程序指令时用于实现如权利要求1至6任一项所述的主题切换请求。
9.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机执行指令,所述计算机执行指令被处理器执行时用于实现如权利要求1至6任一项所述的主题切换请求。
10.一种计算机程序产品,包括计算机程序,其特征在于,所述计算机程序被处理器执行时用于实现如权利要求1至6任一项所述的主题切换请求。
CN202110395381.8A 2021-04-13 2021-04-13 界面主题切换方法、装置、设备、储存介质及程序产品 Pending CN113076150A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110395381.8A CN113076150A (zh) 2021-04-13 2021-04-13 界面主题切换方法、装置、设备、储存介质及程序产品

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110395381.8A CN113076150A (zh) 2021-04-13 2021-04-13 界面主题切换方法、装置、设备、储存介质及程序产品

Publications (1)

Publication Number Publication Date
CN113076150A true CN113076150A (zh) 2021-07-06

Family

ID=76617447

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110395381.8A Pending CN113076150A (zh) 2021-04-13 2021-04-13 界面主题切换方法、装置、设备、储存介质及程序产品

Country Status (1)

Country Link
CN (1) CN113076150A (zh)

Citations (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1987854A (zh) * 2005-12-20 2007-06-27 北京亿中邮信息技术有限公司 一种个性化替换网页主题的方法
CN103702197A (zh) * 2013-12-31 2014-04-02 乐视致新电子科技(天津)有限公司 一种图片资源重定向方法和装置
KR20150090617A (ko) * 2014-01-29 2015-08-06 에스케이텔레콤 주식회사 프리로딩을 이용한 화면 표시를 위한 장치 및 이를 위한 방법이 기록된 컴퓨터 판독 가능한 기록 매체
CN104850639A (zh) * 2015-05-26 2015-08-19 湖南蚁坊软件有限公司 一种网页主题的无刷新页面的切换方法
CN107317860A (zh) * 2017-06-26 2017-11-03 北京金山安全软件有限公司 主题详情页的预加载方法、装置及电子设备
CN107729103A (zh) * 2017-09-29 2018-02-23 努比亚技术有限公司 一种主题切换方法、移动终端以及计算机存储介质
CN109313661A (zh) * 2016-05-27 2019-02-05 微软技术许可有限责任公司 针对原生移动应用中托管的网络应用的网页加速
CN109739600A (zh) * 2018-12-26 2019-05-10 网易传媒科技(北京)有限公司 数据处理方法、介质、装置和计算设备
CN110737493A (zh) * 2019-09-02 2020-01-31 华为技术有限公司 一种主题切换方法及主题切换装置
CN111078221A (zh) * 2019-12-30 2020-04-28 江苏满运软件科技有限公司 页面颜色主题的切换方法、装置、存储介质及电子设备
US20200142715A1 (en) * 2018-11-07 2020-05-07 Citrix Systems, Inc. Preloading of Application on a User Device Based on Content Received by the User Device
CN111131352A (zh) * 2018-10-31 2020-05-08 北京国双科技有限公司 主题切换方法及装置
CN111240792A (zh) * 2020-02-10 2020-06-05 腾讯科技(深圳)有限公司 用户界面的主题切换方法、装置、终端及存储介质
CN111666123A (zh) * 2020-05-28 2020-09-15 平安医疗健康管理股份有限公司 页面主题控制方法、系统和计算机设备
CN112115399A (zh) * 2020-09-02 2020-12-22 北京一亩田新农网络科技有限公司 基于css的改变页面主题的方法、装置、电子设备和计算机可读介质
CN112114914A (zh) * 2020-08-03 2020-12-22 广州太平洋电脑信息咨询有限公司 生成报表的方法、装置、计算机设备和存储介质
CN112181569A (zh) * 2020-09-27 2021-01-05 平安信托有限责任公司 页面个性化显示方法、装置、计算机设备及存储介质
CN112181580A (zh) * 2020-10-19 2021-01-05 中国工商银行股份有限公司 应用主题切换方法、装置及系统
CN112394932A (zh) * 2020-11-19 2021-02-23 建信金融科技有限责任公司 浏览器网页自动换肤方法及装置
CN112632444A (zh) * 2020-12-29 2021-04-09 苏州思必驰信息科技有限公司 可视化网站主题配置方法和装置

Patent Citations (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1987854A (zh) * 2005-12-20 2007-06-27 北京亿中邮信息技术有限公司 一种个性化替换网页主题的方法
CN103702197A (zh) * 2013-12-31 2014-04-02 乐视致新电子科技(天津)有限公司 一种图片资源重定向方法和装置
KR20150090617A (ko) * 2014-01-29 2015-08-06 에스케이텔레콤 주식회사 프리로딩을 이용한 화면 표시를 위한 장치 및 이를 위한 방법이 기록된 컴퓨터 판독 가능한 기록 매체
CN104850639A (zh) * 2015-05-26 2015-08-19 湖南蚁坊软件有限公司 一种网页主题的无刷新页面的切换方法
CN109313661A (zh) * 2016-05-27 2019-02-05 微软技术许可有限责任公司 针对原生移动应用中托管的网络应用的网页加速
CN107317860A (zh) * 2017-06-26 2017-11-03 北京金山安全软件有限公司 主题详情页的预加载方法、装置及电子设备
CN107729103A (zh) * 2017-09-29 2018-02-23 努比亚技术有限公司 一种主题切换方法、移动终端以及计算机存储介质
CN111131352A (zh) * 2018-10-31 2020-05-08 北京国双科技有限公司 主题切换方法及装置
US20200142715A1 (en) * 2018-11-07 2020-05-07 Citrix Systems, Inc. Preloading of Application on a User Device Based on Content Received by the User Device
CN109739600A (zh) * 2018-12-26 2019-05-10 网易传媒科技(北京)有限公司 数据处理方法、介质、装置和计算设备
CN110737493A (zh) * 2019-09-02 2020-01-31 华为技术有限公司 一种主题切换方法及主题切换装置
CN111078221A (zh) * 2019-12-30 2020-04-28 江苏满运软件科技有限公司 页面颜色主题的切换方法、装置、存储介质及电子设备
CN111240792A (zh) * 2020-02-10 2020-06-05 腾讯科技(深圳)有限公司 用户界面的主题切换方法、装置、终端及存储介质
CN111666123A (zh) * 2020-05-28 2020-09-15 平安医疗健康管理股份有限公司 页面主题控制方法、系统和计算机设备
CN112114914A (zh) * 2020-08-03 2020-12-22 广州太平洋电脑信息咨询有限公司 生成报表的方法、装置、计算机设备和存储介质
CN112115399A (zh) * 2020-09-02 2020-12-22 北京一亩田新农网络科技有限公司 基于css的改变页面主题的方法、装置、电子设备和计算机可读介质
CN112181569A (zh) * 2020-09-27 2021-01-05 平安信托有限责任公司 页面个性化显示方法、装置、计算机设备及存储介质
CN112181580A (zh) * 2020-10-19 2021-01-05 中国工商银行股份有限公司 应用主题切换方法、装置及系统
CN112394932A (zh) * 2020-11-19 2021-02-23 建信金融科技有限责任公司 浏览器网页自动换肤方法及装置
CN112632444A (zh) * 2020-12-29 2021-04-09 苏州思必驰信息科技有限公司 可视化网站主题配置方法和装置

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
SIMI ZELIKOVITCH: "How to Design Your WordPress Site Using Elementor Theme Style", Retrieved from the Internet <URL:https://elementor.com/blog/design-wordpress-site-elementor-theme-style/> *
不CONG明的亚子: "vue+sass切换字体和主题", Retrieved from the Internet <URL:https://blog.csdn.net/qq_36579455/article/details/109380528> *
不曾: "实现Vue项目主题切换", Retrieved from the Internet <URL:https://juejin.cn/post/6844904016892133383> *
李方芳: "基于WPF的通用可配置式仿真控制台软件的开发", 中国优秀硕士学位论文全文数据库信息科技辑, 15 March 2015 (2015-03-15), pages 138 - 697 *

Similar Documents

Publication Publication Date Title
CN110286896B (zh) 可视化编辑方法、装置、设备及存储介质
CN105786924B (zh) 网页夜间模式处理方法、装置及移动终端
US10061491B2 (en) System and method for producing edited images using embedded plug-in
CN107656914B (zh) 可配置化的表格生成方法、装置、终端设备及存储介质
CN105677371B (zh) 一种软件界面快速生成方法和系统
CN109710909B (zh) 内容获取方法、装置、终端及存储介质
EP3220249A1 (en) Method, device and terminal for implementing regional screen capture
CN107895394B (zh) 动画特效实现方法、装置、终端设备及存储介质
WO2020048326A1 (zh) 一种界面显示方法、系统及终端设备
US20140310642A1 (en) Deferred placement prompt
EP3436932B1 (en) Generation of a modified ui element tree
US10140279B2 (en) Techniques for providing user interface enhancements for spreadsheets and tables
CN111104117A (zh) 页面主题风格切换方法、装置、电子设备及计算机存储介质
CN105979392A (zh) 网页显示方法和浏览器
CN104268152A (zh) 一种网页展现方法和装置
CN114416069A (zh) 应用开发平台、微程序生成方法、设备及存储介质
CN111222069B (zh) 报表组件调整方法、装置及相关设备
CN102915378A (zh) 网页中内容显示状态改变方法和装置
CN113076150A (zh) 界面主题切换方法、装置、设备、储存介质及程序产品
CN112965779A (zh) 页面模式切换方法、装置和设备
US10275528B2 (en) Information processing for distributed display of search result
CN110750748A (zh) 一种网页页面显示方法
CN112162805B (zh) 截图方法、装置和电子设备
CN109032601A (zh) 设计图在线协作切图装置及方法
CN115617225A (zh) 应用界面显示方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination