CN116820559A - 组件代码的生成方法、装置、电子设备和存储介质 - Google Patents

Abstract

本公开关于一种组件代码的生成方法、装置、电子设备和存储介质，首先获取目标图层的目标组件元素；判断目标组件元素是否包含对应的第一组件信息；在确定目标组件元素包含对应的第一组件信息的情况下，从第一组件信息中读取第一组件类别信息，并根据第一组件类别信息确定第一组件信息是否为文本类型；在确定第一组件信息为文本类别的情况下，从第一组件信息中读取目标组件元素对应的第一组件属性信息；根据第一组件类别信息及第一组件属性信息，生成与目标组件元素对应的组件代码。与相关技术相比，本申请实施例通过遍历目标图层中的目标组件元素，识别目标组件元素中的第一组件信息，实现前端代码的自动生成，提升处理效率。

Description

组件代码的生成方法、装置、电子设备和存储介质

技术领域

本公开涉及数据处理技术领域，尤其涉及一种组件代码的生成方法、装置、电子设备和存储介质。

背景技术

相关技术中，常通过一些设计工具协作式用户界面(User Interface，UI)，在设计工具程序化自动识别并生成前端代码时，首先在不同的视觉组件元素上通过人工重新命名的方式，加上对应的组件标记，然后通过程序自动化还原前端代码。该种人工标记的方式出错率较高。

发明内容

本公开提供一种组件代码的生成方法、装置、电子设备和存储介质，以至少解决相关技术中在不同的视觉组件元素上通过人工重新命名的方式，加上对应的组件标记，再通过程序自动化完成前端代码的还原的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种组件代码的生成方法，包括：

获取所述目标图层的目标组件元素；

判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；

在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；

在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

在本公开的一些实施例中，所述方法还包括：

在确定所述目标组件元素不包含对应的第一组件信息的情况下，遍历所述目标图层的组件子元素，所述组件子元素为所述目标组件元素的下级层级；

判断所述组件子元素是否包含对应的第二组件信息；所述第二组件信息包括第二组件类别信息及第二组件属性信息；

在确定所述组件子元素包含对应的第二组件信息的情况下，从所述第二组件信息中读取所述第二组件类别信息，并根据所述第二组件类别信息确定所述第二组件信息是否为文本类型；

在确定所述第二组件信息为文本类别的情况下，从所述第二组件信息中读取所述目标组件元素对应的第二组件属性信息；

根据所述第二组件类别信息及所述第二组件属性信息，生成与所述目标组件元素对应的组件代码。

在本公开的一些实施例中，所述根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码包括：

将所述第一组件类别信息及所述第一组件属性信息，按照遍历的层级结构组合关系，生成所述组件代码，其中，所述层级结构组合关系包含组件元素与组件子元素之间的层级结构组合关系。

在本公开的一些实施例中，在根据所述第二组件类别信息确定所述第二组件信息是否为文本类型之后，所述方法还包括：

在确定所述第二组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件子元素。

在本公开的一些实施例中，在判断所述目标组件元素是否包含对应的第一组件信息之前，所述方法还包括：

调用预设接口，分别对所述目标图层中的每个状态下的目标组件元素设置对应的第一组件信息。

在本公开的一些实施例中，在根据所述第一组件类别信息确定所述第一组件信息是否为文本类型之后，所述方法还包括：

在确定所述第一组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件元素。

在本公开的一些实施例中，所述获取所述目标图层的目标组件元素包括：

判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素；

在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素；

在生成所述目标组件元素对应的组件代码后，继续从所述至少两个组件元素中获取其他组件元素，作为所述目标组件元素，直到所述至少两个组件元素均已完成对应组件代码的生成。

在本公开的一些实施例中，在根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码之后，所述方法还包括：

获取所述至少两个组件元素中的其他组件元素，并分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息生成与所述目标组件元素对应的组件代码。

第二方面，本申请实施例还提供一种组件代码的生成装置，包括：

获取单元，被配置为获取所述目标图层的目标组件元素；

判断单元，被配置为判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；

读取单元，被配置为在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；

所述读取单元，还被配置为在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

生成单元，被配置为根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

在本公开的一些实施例中，所述装置还包括：

遍历单元，被配置为在确定所述目标组件元素不包含对应的第一组件信息的情况下，遍历所述目标图层的组件子元素，所述组件子元素为所述目标组件元素的下级层级；

所述判断单元，还被配置为判断所述组件子元素是否包含对应的第二组件信息；所述第二组件信息包括第二组件类别信息及第二组件属性信息；

所述读取单元，还被配置为在确定所述组件子元素包含对应的第二组件信息的情况下，从所述第二组件信息中读取所述第二组件类别信息，并根据所述第二组件类别信息确定所述第二组件信息是否为文本类型；

所述读取单元，还被配置为在确定所述第二组件信息为文本类别的情况下，从所述第二组件信息中读取所述目标组件元素对应的第二组件属性信息；

所述生成单元，还被配置为根据所述第二组件类别信息及所述第二组件属性信息，生成与所述目标组件元素对应的组件代码。

在本公开的一些实施例中，所述生成单元，还被配置为：

将所述第一组件类别信息及所述第一组件属性信息，按照遍历的层级结构组合关系，生成所述组件代码，其中，所述层级结构组合关系包含组件元素与组件子元素之间的层级结构组合关系。

在本公开的一些实施例中，所述装置还包括：

所述遍历单元，还被配置为在根据所述第二组件类别信息确定所述第二组件信息是否为文本类型之后，在确定所述第二组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件子元素。

在本公开的一些实施例中，所述装置还包括：

设置单元，被配置为在所述判断单元判断所述目标组件元素是否包含对应的第一组件信息之前，调用预设接口，分别对所述目标图层中的每个状态下的目标组件元素设置对应的第一组件信息。

在本公开的一些实施例中，所述装置还包括：

所述遍历单元，还被配置为在根据所述第一组件类别信息确定所述第一组件信息是否为文本类型之后，在确定所述第一组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件元素。

在本公开的一些实施例中，所述获取单元，还被配置为：

判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素；

在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素；

在生成所述目标组件元素对应的组件代码后，继续从所述至少两个组件元素中获取其他组件元素，作为所述目标组件元素，直到所述至少两个组件元素均已完成对应组件代码的生成。

在本公开的一些实施例中，在根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码之后，所述装置还包括：

所述获取单元，还被配置为获取所述至少两个组件元素中的其他组件元素；

所述生成单元，还被配置为分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息，生成与所述目标组件元素对应的组件代码。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如第一方面所述的组件代码的生成方法。

根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面所述的组件代码的生成方法。

根据本公开的第五方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现如前述第一方面所述的组件代码的生成方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开提供的组件代码的生成方法、装置、电子设备和存储介质，首先获取所述目标图层的目标组件元素；判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。与相关技术中通过人工命名组件元素的方式相比，本申请实施例通过遍历目标图层中的目标组件元素，识别目标组件元素中的第一组件信息，实现前端代码的自动生成，提升处理效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种组件代码的生成方法的流程图；

图2为本公开实施例所提供的另一种组件代码的生成方法的流程示意图；

图3为本公开实施例所提供的另一种组件代码的生成方法的流程示意图；

图4为本公开实施例所提供的另一种组件代码的生成方法的流程示意图；

图5为本公开实施例所提供的另一种组件代码的生成方法的流程示意图；

图6是根据一示例性实施例示出的一种组件代码的生成装置的框图；

图7是根据一示例性实施例示出的另一种组件代码的生成装置的框图；

图8为本公开实施例提供的示出的一种电子设备的示意性框图；

图9为本公开实施例提供的示出的另一种电子设备的示意性框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种组件代码的生成方法的流程图，如图1所示，包括以下步骤。

步骤S101，获取所述目标图层的目标组件元素。

实际应用中，常见的设计工具中包含多个图层，其中，将当前正在处理的图层作为目标图层，每个图层对应的结构化信息可能存在差异，该结构化信息包含但不限于图层的背景色、文字、形态等信息。

目标图层中包含至少一个目标组件元素，该目标组件元素包含但不限于按钮、弹窗、表格等组件元素，每个组件元素内包含该组件在不同形式下的视觉展示，例如正常与禁用状态的按钮展示。本申请实施例对图层、及组件元素的具体类型不做限定。

步骤S102，判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息。

在执行本步骤之前，预先通过预设接口分别给每个图层中每个状态下的组件元素定义一个第一组件信息，该第一组件信息包括第一组件类别信息及第一组件属性信息。示例性的，第一组件类别信息包含但不限于按钮Button、标签Tag、开关Switch、输入框Input、选择框Select，第一组件属性信息包含但不限于文案内容、颜色、类型、状态，如Button的按钮文字、按钮类型和按钮状态；Tag的内容、Tag的颜色、状态；Input的类型、默认文案，本申请实施例对第一组件类别信息及第一组件属性信息不做限定。

需要说明的是，第一组件信息用于描述目标组件元素，本申请实施例通过第一组件信息的定义，替换了相关技术中图层信息，定义第一组件信息的方式更简单高效，既不会对使用增加负担，也不会增加还原视觉稿过程中的工作量。

步骤S103，在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型。

判断第一组件类别信息是否为文本类型的目的在于文本作为目标组件元素的最小单层级，例如，当目标组件元素为按钮时，该按钮类别可能为“提交按钮”，也可能为“搜索按钮”，当确定第一组件类别信息确定为文本类型后，如前述示例提及的“提交或搜索”文本，说明已经遍历到了目标组件元素的最小层级。

步骤S104，在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息。

在确定遍历到了目标组件元素的最小层级，即确定第一组件类别信息为文本类型后，读取所述目标组件元素对应的第一组件属性信息。

步骤S105，根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

在程序化自动还原视觉稿的过程中，直接读取视图实例(目标组件元素)上对应的第一组件信息去生成代码。

本公开提供的组件代码的生成方法，获取所述目标图层的目标组件元素；判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。与相关技术中通过人工命名组件元素的方式相比，本申请实施例通过遍历目标图层中的目标组件元素，识别目标组件元素中的第一组件信息，实现前端代码的自动生成，提升处理效率。

在本公开的一些实施例中，图2为本公开实施例所提供的另一种组件代码的生成方法的流程示意图。如图2所示，该方法包含以下步骤：

步骤S101，获取所述目标图层的目标组件元素；

步骤S102，判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息。

若确定所述目标组件元素包含对应的第一组件信息，则执行步骤S103，若确定所述目标组件元素不包含对应的第一组件信息，则执行步骤S104。

步骤S103，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型。

若确定为文本类别，则执行步骤S104，若确定不为文本类别，则执行步骤S111。

步骤S106，遍历所述目标图层的组件子元素，判断所述组件子元素是否包含对应的第二组件信息；所述组件子元素为所述目标组件元素的下级层级，所述第二组件信息包括第二组件类别信息及第二组件属性信息；

若确定所述组件子元素包含对应的第二组件信息，则执行步骤S105，若确定所述组件子元素不包含对应的第二组件信息，则执行步骤S108。

在遍历目标图层的组件子元素时，需要根据目标图层的ID遍历目标图层的第二组件子元素，示例性的，当目标图层的ID为A-1时，组件子元素1的ID为A-1-001，组件子元素2的ID为A-1-002等，该ID用于标识图层的结构。以上关于目标图层的ID的示例仅为便于理解给出的说明，并非是具体限定。

在遍历到目标图层的组件子元素后，确定所述组件子元素是否包含对应的组件信息；有关组件子元素对应的组件信息的说明，可参阅图1中有关第一组件信息的详细说明，本申请实施例在此不再进行一一赘述。

步骤S107，从所述第二组件信息中读取所述第二组件类别信息，并根据所述第二组件类别信息确定所述第二组件信息是否为文本类型；

若确定第二组件信息为文本类别，则执行步骤S108，若确定第二组件信息不为文本类别，则执行步骤S110。

步骤S108，从所述第二组件信息中读取所述目标组件元素对应的第二组件属性信息。

需要说明的是，本申请实施例所述的第一组件属性信息、第二组件属性信息，其实质均为组件属性信息，本申请中使用第一、第二的撰写方式用以区分不同图层层级下的组件属性信息，而非是代表优先级、或数量的限定；同样的，第一组件类别信息及第二组件类别信息，其实质均为组件类别信息，本申请中使用第一、第二的撰写方式用以区分不同图层层级下不同的组件类别信息，而非是代表优先级、或数量的限定。

步骤S109，根据所述第二组件类别信息及所述第二组件属性信息，生成与所述目标组件元素对应的组件代码。

步骤S110，继续遍历所述目标图层的其他组件子元素。

步骤S104，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

步骤S105，根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

步骤S111，继续遍历所述目标图层的其他组件元素。

在本公开的一些实施例中，图3为本公开实施例所提供的另一种组件代码的生成方法的流程示意图。如图3所示，该方法包含以下步骤：

步骤S106，调用预设接口，分别对所述目标图层中的每个状态下的目标组件元素设置对应的第一组件信息。

通过调用预设应用程序编程接口(Application Programming Interface，API)分别给每个状态下的视图组件图层定义一个组件描述(第一组件信息及第二组件信息)，在程序化自动还原视觉稿的过程中，直接读取视图实例上对应的组件描述去生成代码。

步骤S101，获取所述目标图层的目标组件元素。

步骤S102，判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息。

步骤S103，在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型。

步骤S104，在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息。

步骤S105，根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

有关步骤S101至S105的说明可参见上述实施例的详细说明，本申请实施例在此不再进行赘述。

在本公开的一些实施例中，图4为本公开实施例所提供的另一种组件代码的生成方法的流程示意图。如图4所示，该方法包含以下步骤：

步骤S112，判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素。

在实际应用中，可能会存在一个目标图层中包含至少两个组件元素的场景存在，该种场景下目标组件元素为容器类型的组件元素，该种场景下，从容器类型的至少两个组件元素中选择一个作为目标组件元素。

在通过图4所示的方法生成一个目标组件元素对应的组件代码后，继续执行容器类型中其他组件元素的组件代码生成，直到遍历完容器类型中所有的组件元素。

步骤S113，在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素。

步骤S102，判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息。

步骤S103，在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型。

步骤S104，在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息。

步骤S105，根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

有关步骤S102至S105的说明可参见上述实施例的详细说明，本申请实施例在此不再进行赘述。

步骤S114，在生成所述目标组件元素对应的组件代码后，继续从所述至少两个组件元素中获取其他组件元素，作为所述目标组件元素，直到所述至少两个组件元素均已完成对应组件代码的生成。

需要说明的是其他组件元素执行对应的组件代码的生成时，其生成方法一致，具体可参见上述实施例，故在此不再进行赘述。

在本公开的一些实施例中，图5为本公开实施例所提供的另一种组件代码的生成方法的流程示意图。如图5所示，该方法包含以下步骤：

步骤S115，判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素。

在实际应用中，可能会存在一个目标图层中包含至少两个组件元素的场景存在，该种场景下目标组件元素为容器类型的组件元素，该种场景下，从容器类型的至少两个组件元素中选择一个作为目标组件元素。

步骤S113，在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素。

步骤S102，判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息。

步骤S103，在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型。

步骤S104，在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息。

步骤S105，根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

步骤S116，获取所述至少两个组件元素中的其他组件元素，并分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息生成与所述目标组件元素对应的组件代码。

在通过步骤S102至步骤S105所示的方法生成一个目标组件元素对应的组件代码后，继续执行容器类型中其他组件元素的组件代码生成，直到遍历完容器类型中所有的组件元素。即继续获取容器类型中其他组件元素，分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息生成对应的组件代码。

作为一种可实现方式，上述实施例所述的设计工具包含但不限于Figma，Figma是一个基于浏览器的协作式UI的设计工具，上述任意实施例均可应用于Figma中。

与上述的组件代码的生成方法相对应，本发明还提出一种组件代码的生成装置。由于本发明的装置实施例与上述的方法实施例相对应，对于装置实施例中未披露的细节可参照上述的方法实施例，本发明中不再进行赘述。

图6是根据一示例性实施例示出的一种组件代码的生成装置框图。参照图6，该装置包括：

获取单元61，被配置为获取所述目标图层的目标组件元素；

判断单元62，被配置为判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；

读取单元63，被配置为在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；

所述读取单元63，还被配置为在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

生成单元64，被配置为根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

首先获取所述目标图层的目标组件元素；判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。与相关技术中通过人工命名组件元素的方式相比，本申请实施例通过遍历目标图层中的目标组件元素，识别目标组件元素中的第一组件信息，实现前端代码的自动生成，提升处理效率。

在本公开的一些实施例中，如图7所示，所述装置还包括：

遍历单元65，被配置为在确定所述目标组件元素不包含对应的第一组件信息的情况下，遍历所述目标图层的组件子元素，所述组件子元素为所述目标组件元素的下级层级；

所述判断单元62，还被配置为判断所述组件子元素是否包含对应的第二组件信息；所述第二组件信息包括第二组件类别信息及第二组件属性信息；

所述读取单元63，还被配置为在确定所述组件子元素包含对应的第二组件信息的情况下，从所述第二组件信息中读取所述第二组件类别信息，并根据所述第二组件类别信息确定所述第二组件信息是否为文本类型；

所述读取单元63，还被配置为在确定所述第二组件信息为文本类别的情况下，从所述第二组件信息中读取所述目标组件元素对应的第二组件属性信息；

所述生成单元64，还被配置为根据所述第二组件类别信息及所述第二组件属性信息，生成与所述目标组件元素对应的组件代码。

在本公开的一些实施例中，如图7所示，所述生成单元64，还被配置为：

将所述第一组件类别信息及所述第一组件属性信息，按照遍历的层级结构组合关系，生成所述组件代码，其中，所述层级结构组合关系包含组件元素与组件子元素之间的层级结构组合关系。

在本公开的一些实施例中，如图7所示，所述装置还包括：

所述遍历单元65，还被配置为在根据所述第二组件类别信息确定所述第二组件信息是否为文本类型之后，在确定所述第二组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件子元素。

在本公开的一些实施例中，如图7所示，所述装置还包括：

设置单元66，被配置为在所述判断单元判断所述目标组件元素是否包含对应的第一组件信息之前，调用预设接口，分别对所述目标图层中的每个状态下的目标组件元素设置对应的第一组件信息。

在本公开的一些实施例中，如图7所示，所述装置还包括：

所述遍历单元65，还被配置为在根据所述第一组件类别信息确定所述第一组件信息是否为文本类型之后，在确定所述第一组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件元素。

在本公开的一些实施例中，如图7所示，所述获取单元61，还被配置为：

判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素；

在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素；

在生成所述目标组件元素对应的组件代码后，继续从所述至少两个组件元素中获取其他组件元素，作为所述目标组件元素，直到所述至少两个组件元素均已完成对应组件代码的生成。

在本公开的一些实施例中，如图7所示，所述装置还包括：

所述获取单元61，还被配置在根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码之后，为获取所述至少两个组件元素中的其他组件元素；

所述生成单元64，还被配置为分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息，生成与所述目标组件元素对应的组件代码。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图8是本公开示出的一种电子设备800的框图。例如，电子设备800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图8，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电力组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成任一实施例所述的信息平台选择方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行任一实施例所述的信息平台选择方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由电子设备800的处理器820执行以完成任一实施例所述的信息平台选择方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品，该计算机程序产品包括可读性程序代码，该可读性程序代码可由装置800的处理器820执行以完成任一实施例所述的信息平台选择方法。可选地，该程序代码可以存储在装置800的存储介质中，该存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图9是本公开示出的一种电子设备900的框图。例如，电子设备900可以被提供为一服务器。

参照图9，电子设备900包括处理组件922，其进一步包括一个或多个处理器，以及由存储器932所代表的存储器资源，用于存储可由处理组件922的执行的指令，例如应用程序。存储器932中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件922被配置为执行指令，以执行任一实施例所述的信息平台选择方法。

电子设备900还可以包括一个电源组件926被配置为执行电子设备900的电源管理，一个有线或无线网络接口950被配置为将电子设备900连接到网络，和一个输入输出(I/O)接口958。电子设备900可以操作基于存储在存储器932的操作系统，例如WindowsServerTM，MacOSXTM，UnixTM,LinuxTM，FreeBSDTM或类似。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (11)

1.一种组件代码的生成方法，其特征在于，包括：

获取所述目标图层的目标组件元素；

判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；

在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；

在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在确定所述目标组件元素不包含对应的第一组件信息的情况下，遍历所述目标图层的组件子元素，所述组件子元素为所述目标组件元素的下级层级；

判断所述组件子元素是否包含对应的第二组件信息；所述第二组件信息包括第二组件类别信息及第二组件属性信息；

在确定所述组件子元素包含对应的第二组件信息的情况下，从所述第二组件信息中读取所述第二组件类别信息，并根据所述第二组件类别信息确定所述第二组件信息是否为文本类型；

在确定所述第二组件信息为文本类别的情况下，从所述第二组件信息中读取所述目标组件元素对应的第二组件属性信息；

根据所述第二组件类别信息及所述第二组件属性信息，生成与所述目标组件元素对应的组件代码。

3.根据权利要求2所述的方法，其特征在于，所述根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码包括：

将所述第一组件类别信息及所述第一组件属性信息，按照遍历的层级结构组合关系，生成所述组件代码，其中，所述层级结构组合关系包含组件元素与组件子元素之间的层级结构组合关系。

4.根据权利要求2所述的方法，其特征在于，在根据所述第二组件类别信息确定所述第二组件信息是否为文本类型之后，所述方法还包括：

在确定所述第二组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件子元素。

5.根据权利要求1-4中任一项所述的方法，其特征在于，在判断所述目标组件元素是否包含对应的第一组件信息之前，所述方法还包括：

调用预设接口，分别对所述目标图层中的每个状态下的目标组件元素设置对应的第一组件信息。

6.根据权利要求5所述的方法，其特征在于，在根据所述第一组件类别信息确定所述第一组件信息是否为文本类型之后，所述方法还包括：

在确定所述第一组件信息不为所述文本类别的情况下，继续遍历所述目标图层的其他组件元素。

7.根据权利要求1所述的方法，其特征在于，所述获取所述目标图层的目标组件元素包括：

判断所述目标图层的目标组件元素是否为容器类型的组件元素，所述容器类型的组件元素包含至少两个组件元素；

在确定所述目标组件元素为容器类型的组件元素的情况下，从所述至少两个组件元素中获取一个组件元素，作为所述目标组件元素；

在生成所述目标组件元素对应的组件代码后，继续从所述至少两个组件元素中获取其他组件元素，作为所述目标组件元素，直到所述至少两个组件元素均已完成对应组件代码的生成。

8.根据权利要求7所述的方法，其特征在于，在根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码之后，所述方法还包括：

获取所述至少两个组件元素中的其他组件元素，并分别根据所述其他组件元素对应的第三组件类别信息及所述第三组件属性信息，生成与所述目标组件元素对应的组件代码。

9.一种组件代码的生成装置，其特征在于，包括：

获取单元，被配置为获取所述目标图层的目标组件元素；

判断单元，被配置为判断所述目标组件元素是否包含对应的第一组件信息；所述第一组件信息包括第一组件类别信息及第一组件属性信息；

读取单元，被配置为在确定所述目标组件元素包含对应的第一组件信息的情况下，从所述第一组件信息中读取所述第一组件类别信息，并根据所述第一组件类别信息确定所述第一组件信息是否为文本类型；

所述读取单元，还被配置为在确定所述第一组件信息为文本类别的情况下，从所述第一组件信息中读取所述目标组件元素对应的第一组件属性信息；

生成单元，被配置为根据所述第一组件类别信息及所述第一组件属性信息，生成与所述目标组件元素对应的组件代码。

10.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至8中任一项所述的组件代码的生成方法。

11.一种存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至8中任一项所述的组件代码的生成方法。