界面生成方法、装置、电子设备以及可读存储介质与流程

本发明涉及前端开发领域，尤其涉及一种界面生成方法、装置、电子设备以及可读存储介质。

背景技术：

随着物联网技术的发展，传统的基于javascript语言的万维网(worldwideweb，web)前端开发越来越不能满足开发需求。虽然javascript以其灵活性能实现各种网页的需求，但是代码量也大幅上升，而且在web前端开发的过程时，开发人员需要花费大半时间来实现界面设计(userinterface，ui)。在没有统一标准的前提下，每个程序员针对同一ui的实现方式千差万别，造成代码效率低，可读性、维护性差的现象。

技术实现要素：

本发明提供一种界面生成方法、装置、电子设备以及可读存储介质，以解决ui界面设计时代码效率低，可读性、维护性差的问题。

根据本发明的第一方面，本发明提供一种界面生成方法，包括：获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息；根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项；调用所述目标搜索组件，生成所述界面。

在一些实施例中，在获取界面的配置文件的步骤之前，还包括：读取预设配置文件；根据所述预设配置文件，创建所述检索按钮以及所述搜索表单项；根据所述检索按钮以及所述搜索表单项，生成所述搜索组件；储存所述搜索组件于所述组件库中。

在一些实施例中，创建搜索按钮以及搜索表单项的步骤中，包括：判断所述预设配置文件是否存在高级检索按钮；若存在，读取所述预设配置文件的第一参数，根据所述第一参数渲染所述高级检索按钮以及创建所述高级检索按钮和重置按钮；若不存在，创建普通检索按钮以及重置按钮。

在一些实施例中，在创建搜索按钮以及表单项的步骤中，包括：读取所述预设配置文件的第二参数；解析所述第二参数的数据，根据所述第二参数的数据类型，创建所述搜索表单项。

在一些实施例中，所述搜索表单项包括以下至少一项：输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。

根据本发明的第二方面，本发明提供一种界面生成装置，包括：获取模块，用于获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息；查询模块，用于根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项；生成模块，用于调用所述目标搜索组件，生成所述界面。

在一些实施例中，所述装置还包括读取模块，用于读取预设配置文件；创建模块，用于根据所述预设配置文件，创建所述检索按钮以及所述搜索表单项；生成模块，用于根据所述检索按钮以及所述搜索表单项，生成所述搜索组件；储存模块，用于储存所述搜索组件于所述组件库中。

在一些实施例中，所述创建模块包括：判断单元，用于判断所述预设配置文件是否存在高级检索按钮；第一创建单元，用于存在高级检索按钮时，读取所述预设配置文件的第一参数，根据所述第一参数渲染所述高级检索按钮以及创建所述高级检索按钮和重置按钮；第二创建单元，用于不存在高级检索按钮时，创建普通检索按钮以及重置按钮。

在一些实施例中，所述创建模块还包括：读取单元，用于读取所述预设配置文件的第二参数；创建单元，用于解析所述第二参数的数据，根据所述第二参数的数据类型，创建所述搜索表单项。

根据本发明的第三方面，本发明提供一种电子设备，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如上述的界面生成方法的步骤。

根据本发明的第四方面，本发明提供一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如上述的界面生成方法。

相较现有技术，本发明的有益效果为：根据结合典型业务场景，通过提炼、抽象得到一系列稳定且具备高复用性的通用业务类组件，可规范用户交互体验视觉风格、保持系统一致性，降低系统文件体积，提升系统代码构建编译速度；极大地提升了开发工程师的工作效率。

附图说明

图1为本发明实施例提供的一种界面生成方法的步骤流程示意图。

图2为本发明实施例提供的另一种界面生成方法的步骤流程示意图。

图3为图2所示的步骤22的一种具体步骤流程示意图。

图4为图2所示的步骤22的另一种具体步骤流程示意图。

图5为本发明实施例提供的一种界面生成装置的结构示意图。

图6为本发明实施例提供的另一种界面生成装置的结构示意图。

图7为图6所示的创建模块的一种结构示意图。

图8为图6所示的创建模块的另一种结构示意图。

图9为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供一种界面生成方法，该方法包括步骤s11至步骤s13。

步骤s11，获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息。

在本发明实施例中，配置文件存储的是以固定格式编写的界面信息，配置文件可以有两种形式：文本文件、二进制文件。配置信息用于指示界面显示方式。

步骤s12，根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项。

在本发明实施例中，组件库封装了针对不同业务所开发的具有搜索功能的搜索组件。这些搜索组件具有高可复用性，可以重复调用。为了使其具有比较好的灵活性，可通过配置满足不同场景，应为搜索组件提供丰富功能与接口函数。检索按钮包括高级检索按钮以及普通检索按钮。前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不再需要面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

在本发明实施例中，每一搜索组件具有属性信息，该属性信息包括组件在界面中的布局、颜色、动画等。在解析配置信息后，根据需求就可以确定出能够生成界面的目标搜索组件。

在本发明实施例中，搜索表单项包括以下至少一项：输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。

步骤s13，调用所述目标搜索组件，生成所述界面。

如图2所示，本发明实施例提供另一种界面生成方法，该方法包括步骤步骤s21至步骤s27。

步骤s21，读取预设配置文件。

步骤s22，根据所述预设配置文件，创建所述检索按钮以及所述搜索表单项。

如图3所示，步骤s22包括步骤s31至步骤s33。

步骤s31，判断所述预设配置文件是否存在高级检索按钮。

步骤s32，若存在，读取所述预设配置文件的第一参数，根据所述第一参数渲染所述高级检索按钮以及创建所述高级检索按钮和重置按钮。

步骤s33，若不存在，创建普通检索按钮以及重置按钮。

在本发明实施例中，第一参数为预设配置文件中的advancedsources参数，高级检索按钮对应的搜索表单项具有多种输入框，用于按不同的检索条件进行检索，普通检索按钮对应的搜索表单项具有单一输入框，用于进行简单检索。重置按钮可以一键清除输入框中的检索关键词。

如图4所示，步骤s22还包括步骤s41至步骤s42。

步骤s41，读取所述预设配置文件的第二参数。

步骤s42，解析所述第二参数的数据，根据所述第二参数的数据类型，创建所述搜索表单项。

在本发明实施例中，第二参数为advancedsources参数以及defaultsoures参数。搜索表单项对应设置有表单域，该表单域用于数据信息的展现。

继续参阅图2。

步骤s23，根据所述检索按钮以及所述搜索表单项，生成所述搜索组件。

步骤s24，储存所述搜索组件于所述组件库中。

步骤s25，获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息。

在本发明实施例中，配置文件存储的是以固定格式编写的界面信息，配置文件可以有两种形式：文本文件、二进制文件。配置信息用于指示界面显示方式。

步骤s26，根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项。

在本发明实施例中，组件库封装了针对不同业务所开发的具有搜索功能的搜索组件。这些搜索组件具有高可复用性，可以重复调用。为了使其具有比较好的灵活性，可通过配置满足不同场景，应为搜索组件提供丰富功能与接口函数。检索按钮包括高级检索按钮以及普通检索按钮。前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不再需要面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

在本发明实施例中，每一搜索组件具有属性信息，该属性信息包括组件在界面中的布局、颜色、动画等。在解析配置信息后，根据需求就可以确定出能够生成界面的目标搜索组件。

在本发明实施例中，搜索表单项包括以下至少一项：输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。

步骤s27，调用所述目标搜索组件，生成所述界面。

如图5所示，本发明实施例提供一种界面生成装置，该装置包括获取模块51、查询模块52以及界面生成模块53。

获取模块51用于获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息。

在本发明实施例中，配置文件存储的是以固定格式编写的界面信息，配置文件可以有两种形式：文本文件、二进制文件。配置信息用于指示界面显示方式。

查询模块52用于根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项。

在本发明实施例中，组件库封装了针对不同业务所开发的具有搜索功能的搜索组件。这些搜索组件具有高可复用性，可以重复调用。为了使其具有比较好的灵活性，可通过配置满足不同场景，应为搜索组件提供丰富功能与接口函数。检索按钮包括高级检索按钮以及普通检索按钮。前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不再需要面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

在本发明实施例中，每一搜索组件具有属性信息，该属性信息包括组件在界面中的布局、颜色、动画等。在解析配置信息后，根据需求就可以确定出能够生成界面的目标搜索组件。

在本发明实施例中，搜索表单项包括以下至少一项：输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。

界面生成模块53用于调用所述目标搜索组件，生成所述界面。

如图6所示，本发明实施例提供另一种界面生成装置，该装置包括读取模块61、创建模块62、组件生成模块63、储存模块64、获取模块65、查询模块66以及界面生成模块67。

读取模块61用于读取预设配置文件。

创建模块62用于根据所述预设配置文件，创建所述检索按钮以及所述搜索表单项。

如图7所示，创建模块62包括判断单元71、第一创建单元72以及第二创建单元73。

判断单元71用于判断所述预设配置文件是否存在高级检索按钮。

第一创建单元72用于存在高级检索按钮时，读取所述预设配置文件的第一参数，根据所述第一参数渲染所述高级检索按钮以及创建所述高级检索按钮和重置按钮。

第二创建单元73用于不存在高级检索按钮时，创建普通检索按钮以及重置按钮。

在本发明实施例中，第一参数为预设配置文件中的advancedsources参数，高级检索按钮对应的搜索表单项具有多种输入框，用于按不同的检索条件进行检索，普通检索按钮对应的搜索表单项具有单一输入框，用于进行简单检索。重置按钮可以一键清除输入框中的检索关键词。

如图8所示，创建模块62还包括读取单元81以及创建单元82。

读取单元81用于读取所述预设配置文件的第二参数。

创建单元82用于解析所述第二参数的数据，根据所述第二参数的数据类型，创建所述搜索表单项。

在本发明实施例中，第二参数为advancedsources参数以及defaultsoures参数。搜索表单项对应设置有表单域，该表单域用于数据信息的展现。

继续参阅图2

组件生成模块63用于根据所述检索按钮以及所述搜索表单项，生成所述搜索组件。

储存模块64用于储存所述搜索组件于所述组件库中。

获取模块65用于获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息。

在本发明实施例中，配置文件存储的是以固定格式编写的界面信息，配置文件可以有两种形式：文本文件、二进制文件。配置信息用于指示界面显示方式。

查询模块66用于根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项。

在本发明实施例中，组件库封装了针对不同业务所开发的具有搜索功能的搜索组件。这些搜索组件具有高可复用性，可以重复调用。为了使其具有比较好的灵活性，可通过配置满足不同场景，应为搜索组件提供丰富功能与接口函数。检索按钮包括高级检索按钮以及普通检索按钮。前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不再需要面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

在本发明实施例中，每一搜索组件具有属性信息，该属性信息包括组件在界面中的布局、颜色、动画等。在解析配置信息后，根据需求就可以确定出能够生成界面的目标搜索组件。

在本发明实施例中，搜索表单项包括以下至少一项：输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。

界面生成模块67用于调用所述目标搜索组件，生成所述界面。

参阅图9，本发明实施例还提供一种电子设备900，该电子设备900可以是手机、平板以及电脑等设备。如图9所示，电子设备900包括处理器901、存储器902。其中，处理器901与存储器902电性连接。

处理器901是电子设备900的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或加载存储在存储器902内的应用程序，以及调用存储在存储器902内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。

在本实施例中，该电子设备900设有多个存储分区，该多个存储分区包括系统分区和目标分区，电子设备900中的处理器901会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器902中，并由处理器901来运行存储在存储器902中的应用程序，从而实现各种功能：

获取界面的配置文件，所述配置文件中包含对搜索界面的配置信息；

根据所述配置文件，查询组件库，确定目标搜索组件，所述组件库包括多个搜索组件，每个所述搜索组件至少包括以下任一项：检索按钮以及搜索表单项；

调用所述目标搜索组件，生成所述界面。

领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读的可读存储介质中，并由处理器进行加载和执行。为此，本发明实施例提供一种可读存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本发明实施例所提供的任一种位置检测方法中的步骤。

其中，该可读存储介质可以包括：只读存储器(rom，readonlymemory)、随机存取记忆体(ram，randomaccessmemory)、磁盘或光盘等。

由于该可读存储介质中所存储的指令，可以执行本发明实施例所提供的任一种位置检测方法中的步骤，因此，可以实现本发明实施例所提供的任一种位置检测方法所能实现的有益效果，详见前面的实施例，在此不再赘述。以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

本发明的有益效果在于：根据结合典型业务场景，通过提炼、抽象得到一系列稳定且具备高复用性的通用业务类组件，可规范用户交互体验视觉风格、保持系统一致性，降低系统文件体积，提升系统代码构建编译速度；极大地提升了开发工程师的工作效率。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

以上对本发明实施例所提供的一种界面生成方法、装置、可读存储介质及电子设备进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的技术方案及其核心思想；本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例的技术方案的范围。