界面生成方法、装置、电子设备以及可读存储介质制造方法及图纸

技术编号:28372610 阅读:28 留言:0更新日期:2021-05-07 23:59
本发明专利技术提供一种界面生成方法、装置、电子设备以及可读存储介质,该方法包括获取界面的配置文件,所述配置文件中包含对搜索界面的配置信息;根据所述配置文件,查询组件库,确定目标搜索组件,所述组件库包括多个搜索组件,每个所述搜索组件至少包括以下任一项:检索按钮以及搜索表单项;调用所述目标搜索组件,生成所述界面。本发明专利技术解决了UI界面设计时代码效率低,可读性、维护性差的问题。

【技术实现步骤摘要】
界面生成方法、装置、电子设备以及可读存储介质
本专利技术涉及前端开发领域,尤其涉及一种界面生成方法、装置、电子设备以及可读存储介质。
技术介绍
随着物联网技术的发展,传统的基于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,本文档来自技高网...

【技术保护点】
1.一种界面生成方法,其特征在于,包括:/n获取界面的配置文件,所述配置文件中包含对搜索界面的配置信息;/n根据所述配置文件,查询组件库,确定目标搜索组件,所述组件库包括多个搜索组件,每个所述搜索组件至少包括以下任一项:检索按钮以及搜索表单项;/n调用所述目标搜索组件,生成所述界面。/n

【技术特征摘要】
1.一种界面生成方法,其特征在于,包括:
获取界面的配置文件,所述配置文件中包含对搜索界面的配置信息;
根据所述配置文件,查询组件库,确定目标搜索组件,所述组件库包括多个搜索组件,每个所述搜索组件至少包括以下任一项:检索按钮以及搜索表单项;
调用所述目标搜索组件,生成所述界面。


2.如权利要求1所述的界面生成方法,其特征在于,在获取界面的配置文件的步骤之前,还包括:
读取预设配置文件;
根据所述预设配置文件,创建所述检索按钮以及所述搜索表单项;
根据所述检索按钮以及所述搜索表单项,生成所述搜索组件;
储存所述搜索组件于所述组件库中。


3.如权利要求2所述的界面生成方法,其特征在于,在创建搜索按钮以及搜索表单项的步骤中,包括:
判断所述预设配置文件是否存在高级检索按钮;
若存在,读取所述预设配置文件的第一参数,根据所述第一参数渲染所述高级检索按钮以及创建所述高级检索按钮和重置按钮;
若不存在,创建普通检索按钮以及重置按钮。


4.如权利要求2所述的界面生成方法,其特征在于,在创建搜索按钮以及表单项的步骤中,包括:
读取所述预设配置文件的第二参数;
解析所述第二参数的数据,根据所述第二参数的数据类型,创建所述搜索表单项。


5.如权利要求4所述的界面生成方法,其特征在于,所搜索表单项包括以下至少一项:输入框、单选框、上传按钮、日期选择框、数字输入框、多选框、选择器以及开关按钮。


6.一种界面生成装置,其特征在于,包括:
获取模块,用于获取界面的配置文件,所述配置文件中包含对搜索界面的配置信息;
查询模块,用于根据所述配置文件...

【专利技术属性】
技术研发人员:刘喜乐邹永强杨晖
申请(专利权)人:云账户技术天津有限公司
类型:发明
国别省市:天津;12

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1