多UI组件库数据处理方法及装置制造方法及图纸

本申请实施例提供一种多UI组件库数据处理方法及装置，也可用于金融领域，方法包括：接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件；根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码；本申请能够通过一次对UI组件库的开发，转译得到多种不同的UI组件库代码，在多组件库的项目中开发同类页面时节约大量人力。

【技术实现步骤摘要】
多UI组件库数据处理方法及装置
本申请涉及网页前端领域，也可用于金融领域，具体涉及一种多UI组件库数据处理方法及装置。
技术介绍
在大型应用中，往往由于历史原因，存在不同子系统使用不同UI组件库的情况，而不同的UI组件库在默认情况下视觉风格是不一致的。为保证UI效果一致，现有技术中需要由开发人员在不同子系统内使用不同的UI组件还原设计稿，由此会导致为还原同一种设计效果，需要开发多次的重复开发的情况。
技术实现思路
针对现有技术中的问题，本申请提供一种多UI组件库数据处理方法及装置，能够通过一次对UI组件库的开发，转译得到多种不同的UI组件库代码，在多组件库的项目中开发同类页面时节约大量人力。为了解决上述问题中的至少一个，本申请提供以下技术方案：第一方面，本申请提供一种多UI组件库数据处理方法，包括：接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件；根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码。进一步地，所述根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码，包括：根据目标UI组件库的标签字典确定所述页面配置文件与所述目标UI组件库的组件关联关系；根据所述组件关联关系和所述目标UI组件库的组件属性转换规则确定所述目标UI组件库中各组件的描述属性；根据所述组件关联关系和所述各组件的描述属性生成各组件的HTML文本，并根据所述各组件的HTML文本集成得到所述目标UI组件库的UI组件库代码。进一步地，在所述根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码之前，还包括：根据深度优先规则遍历所述页面配置文件，确定所述页面配置文件中的各布局组件以及所述各布局组件的子组件。进一步地，在所述得到与目标UI组件库对应的UI组件库代码之后，包括：根据所述目标UI组件库对应的UI组件库代码进行页面渲染，得到对应的预览页面并向所述用户展示；接收用户针对所述预览页面的预览确认指令并导出所述目标UI组件库对应的UI组件库代码进行存储。第二方面，本申请提供一种多UI组件库数据处理装置，包括：页面配置模块，用于接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件；代码转译模块，用于根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码。进一步地，所述代码转译模块包括：标签识别单元，用于根据目标UI组件库的标签字典确定所述页面配置文件与所述目标UI组件库的组件关联关系；属性生成单元，用于根据所述组件关联关系和所述目标UI组件库的组件属性转换规则确定所述目标UI组件库中各组件的描述属性；代码集成单元，用于根据所述组件关联关系和所述各组件的描述属性生成各组件的HTML文本，并根据所述各组件的HTML文本集成得到所述目标UI组件库的UI组件库代码。进一步地，还包括：节点遍历单元，用于根据深度优先规则遍历所述页面配置文件，确定所述页面配置文件中的各布局组件以及所述各布局组件的子组件。进一步地，还包括：页面预览单元，用于根据所述目标UI组件库对应的UI组件库代码进行页面渲染，得到对应的预览页面并向所述用户展示；代码导出单元，用于接收用户针对所述预览页面的预览确认指令并导出所述目标UI组件库对应的UI组件库代码进行存储。第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的多UI组件库数据处理方法的步骤。第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的多UI组件库数据处理方法的步骤。由上述技术方案可知，本申请提供一种多UI组件库数据处理方法及装置，通过页面配置文件和设定UI组件库转译模型，能够通过一次对初始UI组件库的开发，转译得到多种不同的目标UI组件库代码，在多组件库的项目中开发同类页面时节约大量人力。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本申请实施例中的多UI组件库数据处理方法的流程示意图之一；图2为本申请实施例中的多UI组件库数据处理方法的流程示意图之二；图3为本申请实施例中的多UI组件库数据处理方法的流程示意图之三；图4为本申请实施例中的多UI组件库数据处理装置的结构图之一；图5为本申请实施例中的多UI组件库数据处理装置的结构图之二；图6为本申请实施例中的电子设备的结构示意图。具体实施方式为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。考虑到现有技术中需要由开发人员在不同子系统内使用不同的UI组件还原设计稿，由此会导致为还原同一种设计效果，需要开发多次的重复开发的问题，本申请提供一种多UI组件库数据处理方法及装置，通过页面配置文件和设定UI组件库转译模型，能够通过一次对初始UI组件库的开发，转译得到多种不同的目标UI组件库代码，在多组件库的项目中开发同类页面时节约大量人力。为了能够通过一次对UI组件库的开发，转译得到多种不同的UI组件库代码，在多组件库的项目中开发同类页面时节约大量人力，本申请提供一种多UI组件库数据处理方法的实施例，参见图1，所述多UI组件库数据处理方法具体包含有如下内容：步骤S101：接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件。步骤S102：根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码。可选的，本申请通过页面配置文件的形式描述页面布局，实现多种不同目标UI组件库与参数化描述的转译，并使用其中一种UI组件库作为初始UI组件库实现针对用户的编辑和预览，在完成页面编辑后通过设定UI组件库转译模型将页面配置文件转译为多种不同的目标UI组件库对应的原生代码。可选的，接收用户基于初始UI组件库的页面编辑指令后，将用户针对一初始UI组件库的对页面的编辑操作转变为对一页面配置文件的编辑，即将页面布局体现为页面配置文件的形式。例如，用户需要转译的UI组件库为ABC三个，本申请可以选择其中一个UI组件库(例如A组件库)作为实现编辑预览的初始U本文档来自技高网...

【技术保护点】
1.一种多UI组件库数据处理方法，其特征在于，所述方法包括：/n接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件；/n根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码。/n

【技术特征摘要】
1.一种多UI组件库数据处理方法，其特征在于，所述方法包括：
接收用户基于初始UI组件库的页面编辑指令，并生成相应的页面配置文件；
根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码。


2.根据权利要求1所述的多UI组件库数据处理方法，其特征在于，所述根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码，包括：
根据目标UI组件库的标签字典确定所述页面配置文件与所述目标UI组件库的组件关联关系；
根据所述组件关联关系和所述目标UI组件库的组件属性转换规则确定所述目标UI组件库中各组件的描述属性；
根据所述组件关联关系和所述各组件的描述属性生成各组件的HTML文本，并根据所述各组件的HTML文本集成得到所述目标UI组件库的UI组件库代码。


3.根据权利要求1所述的多UI组件库数据处理方法，其特征在于，在所述根据所述页面配置文件和设定UI组件库转译模型，得到与目标UI组件库对应的UI组件库代码之前，还包括：
根据深度优先规则遍历所述页面配置文件，确定所述页面配置文件中的各布局组件以及所述各布局组件的子组件。


4.根据权利要求1所述的多UI组件库数据处理方法，其特征在于，在所述得到与目标UI组件库对应的UI组件库代码之后，包括：
根据所述目标UI组件库对应的UI组件库代码进行页面渲染，得到对应的预览页面并向所述用户展示；
接收用户针对所述预览页面的预览确认指令并导出所述目标UI组件库对应的UI组件库代码进行存储。


5.一种多UI组件库数据处理装置，其特征在于，包括：
页面配置模块，用于接收用户基于初始UI组件库的页面编辑指令，并生成相应的页...

【专利技术属性】
技术研发人员：刘泱，杨再同，詹娇淑，沈聪，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：北京;11