CN112559109A - 基于组件库的显示界面的生成方法及系统、设备及介质 - Google Patents

Abstract

本发明公开了一种基于组件库的显示界面的生成方法及系统、设备及介质，显示界面包括客户端显示界面，组件库包括主题配置组件和本地样式组件，所述生成方法包括步骤：根据配置文件以获取配置参数；将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；根据所述主题样式与所述本地样式组件中对应的本地样式以生成所述客户端显示界面。本发明通过一种基于组件库的显示界面的生成方法，对可预见的同类业务场景提供了统一的设计规范标准，简化了开发流程，降低跨部门项目的维护成本，提升组件的通用性和复用率，保持用户界面的一致性。

Description

基于组件库的显示界面的生成方法及系统、设备及介质

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种基于组件库的显示界面的生成方法及系统、设备及介质。

背景技术

随着OTA领域日益增加的业务需求，项目的复杂度持续增长。为了满足业务需求的快速落地，项目周期往往非常有限，造成不同很难严格按照设计规范开发。由于各部门往往各自拥有不同的设计规范，同样业务逻辑容易出现重复开发，产生不同风格的页面，无法实现积累沉淀。业务进行过程一直存在开发维护成本高，用户体验不一致的痛点。

发明内容

本发明要解决的技术问题是为了克服现有技术中针对显示界面容易产生重复开发，且由于页面风格缺乏统一性而影响用户体验的缺陷，提供一种基于组件库的显示界面的生成方法及系统、设备及介质。

本发明是通过下述技术方案来解决上述技术问题：

本发明提供了一种基于组件库的显示界面的生成方法，所述显示界面包括客户端显示界面，所述组件库包括主题配置组件和本地样式组件，所述生成方法包括：

根据配置文件以获取配置参数；

将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；

根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

较佳地，所述显示界面还包括应用程序显示界面，所述组件库还包括框架配置组件和业务组件，所述生成方法还包括：

根据所述框架配置组件和所述主题配置组件以初始化所述应用程序显示界面的主题配置信息；

调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。

较佳地，所述业务组件至少包括主题容器组件、字体样式组件、动态颜色组件、动态样式组件中的至少一种；

调用业务组件读取所述主题配置信息，以生成所述应用程序显示界面的步骤包括：

根据所述主题容器组件以重新渲染消费组件；

根据所述字体样式组件以动态获取字体样式；

根据所述动态颜色组件以动态获取颜色值；

根据所述动态样式组件以自动刷新全局样式。

较佳地，所述组件库还包括主题模式组件，所述生成方法还包括：

根据所述主题模式组件获取当前的主题模式，所述主题模式用于在组件之间共享参数信息。

较佳地，所述生成方法还包括：调用所述主题配置组件注册自定义主题配置信息。

较佳地，所述生成方法还包括：调用调试组件以在所述主题样式之间切换。

本发明还提供了一种基于组件库的显示界面的生成系统，其特征在于，所述显示界面包括客户端显示界面，所述组件库包括主题配置组件和本地样式组件，所述生成系统包括：

配置参数获取模块，用于根据配置文件以获取配置参数；

主题样式获取模块，用于将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；

第一界面生成模块，用于根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

较佳地，所述显示界面还包括应用程序显示界面，所述组件库还包括框架配置组件和业务组件，所述生成系统还包括：

界面初始化模块，用于根据所述框架配置组件和所述主题配置组件以初始化所述应用程序显示界面的主题配置信息；

第二界面生成模块，用于调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。

较佳地，所述业务组件至少包括主题容器组件、字体样式组件、动态颜色组件、动态样式组件中的至少一种；

所述第二界面生成模块包括：

主题容器单元，用于根据所述主题容器组件以重新渲染消费组件；

字体获取单元，用于根据所述字体样式组件以动态获取字体样式；

颜色获取单元，用于根据所述动态颜色组件以动态获取颜色值；

样式获取单元，用于根据所述动态样式组件以自动刷新全局样式。

较佳地，所述组件库还包括主题模式组件、调试组件，所述生成系统还包括：参数共享模块，用于根据所述主题模式组件获取当前的主题模式，所述主题模式用于在组件之间共享参数信息；

和/或，

注册配置模块，用于调用所述主题配置组件注册自定义主题配置信息；

和/或，

调试模块，用于调用调试组件以在所述主题样式之间切换。

本发明还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于组件库的显示界面的生成方法。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现上述基于组件库的显示界面的生成方法的步骤。

本发明的积极进步效果在于：通过一种基于组件库的显示界面的生成方法及系统、设备及介质，对可预见的同类业务场景提供了统一的设计规范标准，简化了开发流程，降低跨部门项目的维护成本，提升组件的通用性和复用率，保持用户界面的一致性。

附图说明

图1为本发明实施例1的基于组件库的显示界面的生成方法的流程图。

图2为本发明实施例1的基于组件库的显示界面的生成方法的组件库示意图。

图3为本发明实施例2的基于组件库的显示界面的生成系统的模块示意图。

图4为本发明实施例3的电子设备的结构框图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

参见图1所示，本实施例提供了一种基于组件库的显示界面的生成方法，显示界面包括客户端显示界面，组件库包括主题配置组件和本地样式组件，生成方法包括：

S1.根据配置文件以获取配置参数。

S2.将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式。

S3.根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

如图2所示，本实施例提供的方法通过Hotpot组件库可将界面开发全流程涉及的核心配置解耦，增加开发流程中多端代码复用的能力。

具体地，步骤S1中，通过调用MobileConfig()方法可获取配置平台中存储的主题配置文件。步骤S2根据读取的配置参数，通过hotpot-theme组件初始化样式信息，即确定了显示界面的主题样式。最后在步骤S3中，将初始化的主题样式与hotpot-design组件中对应的预设样式进行合并形成最终客户端的主题样式，从而确定了客户端显示界面。

显示界面还包括应用程序显示界面即业务方APP(应用程序)端，如图2所示，根据组件库的框架配置组件HConfig和主题配置组件HTheme对上述业务方应用程序APP初始化所述应用程序显示界面的主题配置信息。

本实施例中的显示界面生成方法调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。为了兼容不同业务接入主题系统，调用HConfig组件初始化配置，如需自定义配置，可调用IConfigOptions接口实现配置，通过下述方式实现：HConfig.init((options:IConfigOptions＝IBU_CONFIG_OPTIONS))；其中IBU_CONFIG_OPTIONS是默认配置的一种。

在初始化APP框架配置信息后，通过HConfig组件和HTheme组件初始化主题配置信息，在此基础上调用业务组件即可动态获取最新的主题信息形成最终的个性化的页面。主题样式包括内外边距、宽度等重要属性，作为主题样式初始化、注册和配置等信息的基础。最终呈现的显示界面在此基础上进行颜色定义即可。具体地，通过HTheme.init()实现读取主题配置信息、注册主题、设置主题。

作为一种较佳的实施方式，如果缺少上述内外边距、宽度等参数的预定义，也可以进行自注册并设置自定义参数集，但需要按照IDesigns组件提供的基础定义实现，具体地，实现对所有样式的定义如下：

自定义的过程中，如果没有遵循基础定义，则将使用默认的参数集。

作为一种较佳的实施方式，通过HConfig组件和HTheme组件初始化主题配置信息，调用业务组件形成显示界面，业务组件包括主题容器组件HThemeProvider、字体样式组件HTextType、动态颜色组件HColor、动态样式组件HDynamicStyleSheet。

具体地，根据所述主题容器组件HThemeProvider重新渲染消费组件，即该组件允许消费组件订阅上下文的变化。当主题容器组件属性值变化时，内部所有消费组件都会重新渲染。

根据所述字体样式组件HTextType用以动态获取字体样式，

根据动态颜色组件HColor动态获取颜色值；为了更好的语义化颜色，将预定义的颜色色值用特定命名表示，如需根据主题动态获取色值，需调用HColor或是HGradientColor静态类的方法获取动态颜色，比如：tertiaryBlack，具体实现：HColor.tertiaryBlack()；HGradientColor.tertiaryBlack()。

也可以搭配组件使用：

import{HColor,HText}from'@ctrip/hotpot-ui'；

<HText style＝{{color:HColor.tertiaryBlack()}}>文本</HText>；

<HText color＝"tertiaryBlack">文本</HText>。

根据所述动态样式组件HDynamicStyleSheet以自动刷新全局样式。

由于以往的方法在程序初始化时确定后再有样式的变化也不能改变原先定义的值，本实施例的组件库提供了动态样式组件HDynamicStyleSheet，具体地：

即可用于每次页面渲染都能获取到最新的样式。

作为一种较佳的实施方式，显示界面的生成方法通过组件库中的主题模式组件HThemeContext获取当前的主题模式，及在组件之间共享参数信息。组件库在应用中针对以往数据属性只能自上而下进行父子传递进行改进，通过HThemeContext组件提供了一种在组件之间共享值的方式，而不必显式地通过树形方式逐层传递属性值。具体实现为：HThemeContext.theme；HThemeContext.theme获取当前主题模式。

作为一种较佳的实施方式，针对特定模式尤其是调试模式下需要多次切换主题样式的应用场景，组件库的显示界面的生成方法还包括：调用调试组件HThemeWidget在主题样式间进行切换，尤其在开发验收阶段可以更快地进行切换主题以便加速显示界面的开发流程。

本实施例通过一种基于组件库的显示界面的生成方法，实现主题模式的配置支持及动态修改样式，可以实时切换显示界面为个性化场景提供可能，此外支持对样式参数的自定义，减少了业务代码的迁移成本。通过对可预见的同类业务场景提供了统一的设计规范标准，简化了开发流程，降低跨部门项目的维护成本，提升组件的通用性和复用率，保持用户界面的一致性。

实施例2

参见图3所示，本实施例的基于组件库的显示界面的生成系统包括：

配置参数获取模块1，用于根据配置文件以获取配置参数；

主题样式获取模块2，用于将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；

第一界面生成模块3，用于根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

本实施例的Hotpot组件库将界面开发全流程涉及的核心配置解耦，增加开发流程中多端代码复用的能力。具体地，配置参数获取模块1通过调用MobileConfig()方法获取配置平台中存储的主题配置文件。主题样式获取模块2根据读取的配置参数，通过HTheme组件初始化样式信息，即确定了显示界面的主题样式。第一界面生成模块3将初始化的主题样式与hotpot-design库中对应的预设样式进行合并形成最终客户端的主题样式，从而确定了客户端显示界面。

显示界面还包括应用程序显示界面即业务方APP(应用程序)端，根据组件库的框架配置组件HConfig和主题配置组件HTheme对上述业务方应用程序APP初始化所述应用程序显示界面的主题配置信息。

本实施例中的显示界面生成系统可以调用所述业务组件读取所述主题配置信息以生成所述应用程序显示界面。为了兼容不同业务接入主题系统，调用HConfig组件初始化配置。自定义配置可调用IConfigOptions接口实现配置：HConfig.init((options:IConfigOptions＝IBU_CONFIG_OPTIONS))；其中IBU_CONFIG_OPTIONS是默认配置的一种。

作为一种较佳的实施方式，显示界面包括应用程序显示界面，组件库还包括框架配置组件和业务组件，生成系统还包括：界面初始化模块4，用于根据所述框架配置组件和所述主题配置组件以初始化所述应用程序显示界面的主题配置信息；第二界面生成模块5，用于调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。

具体地，界面初始化模块4在初始化APP框架配置信息后，通过HConfig组件和HTheme组件初始化主题配置信息，第二界面生成模块5在此基础上调用业务组件即可动态获取最新的主题信息形成最终的个性化的页面。主题样式包括内外边距、宽度等重要属性，作为主题样式初始化、注册和配置等信息的基础。最终呈现的显示界面在此基础上进行颜色定义即可。通过HTheme.init()实现读取主题配置信息、注册主题、设置主题。

实施例3

图4为本发明实施例3提供的一种电子设备的结构示意图。电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现实施例1中的基于组件库的显示界面的生成方法。图4显示的电子设备30仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，电子设备30可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备30的组件可以包括但不限于：上述至少一个处理器31、上述至少一个存储器32、连接不同系统组件(包括存储器32和处理器31)的总线33。

总线33包括数据总线、地址总线和控制总线。

存储器32可以包括易失性存储器，例如随机存取存储器(RAM)321和/或高速缓存存储器322，还可以进一步包括只读存储器(ROM)323。

存储器32还可以包括具有一组(至少一个)程序模块324的程序/实用工具325，这样的程序模块324包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器31通过运行存储在存储器32中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1中的基于组件库的显示界面的生成方法。

电子设备30也可以与一个或多个外部设备34(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口35进行。并且，模型生成的设备30还可以通过网络适配器36与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图4所示，网络适配器36通过总线33与模型生成的设备30的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备30使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例4

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现实施例1中基于组件库的显示界面的生成方法中的步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行实现实施例1中基于组件库的显示界面的生成方法中的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (10)

1.一种基于组件库的显示界面的生成方法，其特征在于，所述显示界面包括客户端显示界面，所述组件库包括主题配置组件和本地样式组件，所述生成方法包括：

根据配置文件以获取配置参数；

将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；

根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

2.如权利要求1所述的基于组件库的显示界面的生成方法，其特征在于，所述显示界面还包括应用程序显示界面，所述组件库还包括框架配置组件和业务组件，所述生成方法还包括：

根据所述框架配置组件和所述主题配置组件以初始化所述应用程序显示界面的主题配置信息；

调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。

3.如权利要求2所述的基于组件库的显示界面的生成方法，其特征在于，所述业务组件至少包括主题容器组件、字体样式组件、动态颜色组件、动态样式组件中的至少一种；

调用业务组件读取所述主题配置信息，以生成所述应用程序显示界面的步骤包括：

根据所述主题容器组件以重新渲染消费组件；

根据所述字体样式组件以动态获取字体样式；

根据所述动态颜色组件以动态获取颜色值；

根据所述动态样式组件以自动刷新全局样式。

4.如权利要求1所述的基于组件库的显示界面的生成方法，其特征在于，所述组件库还包括主题模式组件，所述生成方法还包括：

根据所述主题模式组件获取当前的主题模式，所述主题模式用于在组件之间共享参数信息。

5.如权利要求1所述的基于组件库的显示界面的生成方法，其特征在于，所述生成方法还包括：调用所述主题配置组件注册自定义主题配置信息。

6.如权利要求1所述的基于组件库的显示界面的生成方法，其特征在于，所述生成方法还包括：调用调试组件以在所述主题样式之间切换。

7.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-6中任一项所述的基于组件库的显示界面的生成方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-6中任一项所述的基于组件库的显示界面的生成方法的步骤。

9.一种基于组件库的显示界面的生成系统，其特征在于，所述显示界面包括客户端显示界面，所述组件库包括主题配置组件和本地样式组件，所述生成系统包括：

配置参数获取模块，用于根据配置文件以获取配置参数；

主题样式获取模块，用于将所述配置参数加载至所述主题配置组件以获得所述客户端显示界面的主题样式；

第一界面生成模块，用于根据所述主题样式与所述本地样式组件中对应的本地样式，以生成所述客户端显示界面。

10.如权利要求9所述的基于组件库的显示界面的生成系统，其特征在于，所述显示界面还包括应用程序显示界面，所述组件库还包括框架配置组件和业务组件，所述生成系统还包括：

界面初始化模块，用于根据所述框架配置组件和所述主题配置组件以初始化所述应用程序显示界面的主题配置信息；

第二界面生成模块，用于调用所述业务组件读取所述主题配置信息，以生成所述应用程序显示界面。

Images