CN114185531B - 界面代码生成方法、装置、计算机设备以及存储介质 - Google Patents

Abstract

本公开提供了一种界面代码生成方法、装置、计算机设备以及存储介质，其中，该方法包括：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

Description

界面代码生成方法、装置、计算机设备以及存储介质

技术领域

本公开涉及计算机技术领域，具体而言，涉及一种界面代码生成方法、装置、计算机设备以及存储介质。

背景技术

在现有的界面转代码技术中，在生成设计稿中对应组件的代码时，通常基于该组件在该设计稿中的状态生成对应的代码。如果该组件在设计稿中对应多种变化的状态，此时，针对多种变化的状态，现有的界面转代码技术将无法为每种变化的状态生成对应的代码。此时，需要设计师手动对基于设计稿生成的代码进行修改，以满足上述多种变化的状态。然而，该处理方式将浪费较多的时间，从而降低了应用程序的开发效率，延长了应用程序的开发流程。

发明内容

本公开实施例至少提供一种界面代码生成方法、装置、计算机设备以及存储介质。

第一方面，本公开实施例提供了一种界面代码生成方法，包括：

获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

一种可选的实施方式中，所述目标界面组件中包含多个具有层级关系的子组件；所述第一源组件中包含多个具有层级关系的子源组件；所述确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息，包括：

确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件；检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化；在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。

一种可选的实施方式中，所述基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，包括：

确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；基于所述第一视觉差异确定所述第一差异信息。

一种可选的实施方式中，所述方法还包括：

在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；基于所述第二视觉差异和所述组件变化信息确定第二差异信息。

一种可选的实施方式中，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：

在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

一种可选的实施方式中，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：

在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

一种可选的实施方式中，所述变体差异信息对应一个信息维度；所述确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，包括：

在所述多个变体组件中确定基础变体组件；在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化；基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。

一种可选的实施方式中，所述在所述多个变体组件中确定至少一个变体组合，包括：

确定所述多个变体组件中每个变体组件与所述基础变体组件之间变化信息的信息数量；基于所述信息数量对所述多个变体组件进行分组，得到多个组件集合；并按照所述信息数量从小到大的顺序对所述多个组件集合进行排序，得到排序结果；基于所述排序结果在所述多个变体组件中确定至少一个变体组合。

一种可选的实施方式中，所述基于所述排序结果在所述多个变体组件中确定至少一个变体组合，包括：

针对所述排序结果中任意相邻的两个组件集合，将第一组件集合中每个第一组件的组件属性与第二组件集合中各个第二组件的组件属性进行比较，得到属性比较结果；所述第一组件集合和所述第二组件集合为所述两个组件集合中的集合，且所述第一组件集合位于所述第二组件集合之前；基于所述属性比较结果在所述各个第二组件中确定目标组件，并基于所述目标组件确定对应的变体组合，得到所述至少一个变体组合；其中，所述目标组件与所述第一组件在对应信息维度下的信息相对于所述基础变体组件在该信息维度下的信息均发生了变化。

第二方面，本公开实施例还提供一种界面代码生成装置，包括：

获取单元，用于获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；第一确定单元，用于在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；第二确定单元，用于确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开实施例提供的一种界面代码生成方法、装置及***，在获取到界面设计稿之后，可以识别界面设计稿中对应多个变体组件的目标界面组件，还可以在组件设计库中确定与该目标界面组件相匹配的第一源组件。之后，就可以确定目标界面组件和第一源组件之间的第一差异信息，同时还可以确定目标界面组件的多个变体组件之间的第二差异信息。在基于第一差异信息生成该目标界面组件的代码时，就可以基于第一差异信息对源组件所对应的代码进行调整之后，得到界面设计稿中所显示的目标界面组件的代码。在基于第二差异信息生成该目标界面组件的代码时，就可以得到该目标界面组件所对应的多个变体组件的代码。相对于现有的技术方案，通过上述处理方式，可以缩短程序的开发流程，提高开发效率，节省开发时间。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种界面代码生成方法的流程图；

图2示出了本公开实施例所提供的目标界面组件所对应的多个变体组件的示意图；

图3示出了本公开实施例所提供的一种得到第一差异信息的方法的流程图；

图4示出了本公开实施例所提供的一种得到第二差异信息的方法的流程图；

图5示出了本公开实施例所提供的第二组件子集合的确定方法的流程图；

图6示出了本公开实施例所提供的另一种得到第一差异信息的方法的流程图；

图7示出了本公开实施例所提供的一种界面代码生成装置的示意图；

图8示出了本公开实施例所提供的一种计算机设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。

经研究发现，在现有的界面转代码技术中，在生成设计稿中对应组件的代码时，通常基于该组件在该设计稿中的状态生成对应的代码。如果该组件在设计稿中对应多种变化的状态，此时，针对多种变化的状态，现有的界面转代码技术将无法为每种变化的状态生成对应的代码。此时，需要设计师手动对基于设计稿生成的代码进行修改，以满足上述多种变化的状态。然而，该处理方式将浪费较多的时间，从而降低了应用程序的开发效率，延长了应用程序的开发流程。

基于上述研究，本公开提供了一种界面代码生成方法、装置、计算机设备以及存储介质。在本公开实施例中，在获取到界面设计稿之后，可以识别界面设计稿中对应多个变体组件的目标界面组件，还可以在组件设计库中确定与该目标界面组件相匹配的第一源组件。之后，就可以确定目标界面组件和第一源组件之间的第一差异信息，同时还可以确定目标界面组件的多个变体组件之间的第二差异信息。在基于第一差异信息生成该目标界面组件的代码时，就可以基于第一差异信息对源组件所对应的代码进行调整之后，得到界面设计稿中所显示的目标界面组件的代码。在基于第二差异信息生成该目标界面组件的代码时，就可以得到该目标界面组件所对应的多个变体组件的代码。相对于现有的技术方案，通过上述处理方式，可以缩短程序的开发流程，提高开发效率，节省开发时间。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种界面代码生成方法进行详细介绍，本公开实施例所提供的界面代码生成方法的执行主体一般为具有一定计算能力的计算机设备，该计算机设备例如包括：终端设备或服务器或其它处理设备。在一些可能的实现方式中，该界面代码生成方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

参见图1所示，为本公开实施例提供的界面代码生成方法的流程图，所述方法包括步骤S101～S105，其中：

S101：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态。

在本公开实施例中，可以通过获取界面设计稿，并对该界面设计稿中所包含的界面组件进行识别的方式来获取对应多个变体组件的目标界面组件。

这里，由于界面设计稿往往只针对特定应用场景来确定目标界面组件的组件显示状态，例如，目标界面组件为“按钮”，此时，目标界面组件在界面设计稿中的组件显示状态为应用场景Y1中的组件显示状态。

然而，由于上述“按钮”组件在实际使用过程中还对应着多个应用场景，其中，上述多个应用场景包括：应用场景Y2-应用场景Y10，并且该按钮组件在每个使用场景中的组件显示状态都是不同的。那么，该目标界面组件在组件设计库中就可以对应着9个变体组件，具体的，该目标界面组件所对应的9个变体组件如图2所示，其中，变体组件X1-变体组件X9分别对应着应用场景Y2-应用场景Y10。

此处最好给一个例子，比如针对某个页面中的“点击购买”按钮，当不同场景时，可能对应不同显示状态，然而，针对界面设计稿中的目标界面组件为物品处于可售卖状态下的组件显示状态等类似的表述。

S103：在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息。

在本公开实施例中，设计人员在设计上述目标界面组件时，可以直接从组件设计库中获取模板界面组件，并对该模板界面组件进行设计，从而得到上述目标界面组件，其中，上述组件设计库中的模板界面组件即为与该目标界面组件相匹配的第一源组件。

这里，在确定上述目标界面组件和第一源组件之间的组件属性的属性差异信息时，首先需要分别确定该目标界面组件以及第一源组件的子组件的组件属性，并将该目标界面组件以及第一源组件的子组件进行对比，从而确定该目标界面组件的和第一源组件之间的第一差异信息。

具体的，上述属性差异信息包括以下至少之一：子组件的替换，子组件的修改。其中，子组件的替换用于指示上述目标界面组件对第一源组件中的子组件进行了替换，例如，将该子组件替换为其他子组件；子组件的修改用于指示上述目标界面组件对第一源组件中的子组件进行了修改，例如，修改了子组件的大小，形状，颜色等组件属性。

S105：确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

在本公开实施例中，在确定出该目标界面组件在组件库中所对应的多个变体组件之后，就可以对这多个变体组件进行对比，从而得到用于表征这多个变体组件之间差异的第二差异信息。

具体的，在对上述多个变体组件进行对比时，可以采用两两对比的方式，将任意两个变体组件进行对比，从而得到用于表征多个变体组件之间差异的第二差异信息。

这里，该第二差异信息可以用于指示上述多个变体组价之间组件属性的属性差异信息。例如，以上述多个变体组件中的任意两个变体组件：变体组件X1和变体组件X2为例。如图2所示，该变体组件X1与变体组件X2的底色不同，那么，变体组件X1和变体组件X2之间的第二差异信息就可以用于指示变体组件X1与变体组件X2的底色不同。

在确定出上述第一差异信息与第二差异信息后，就可以通过D2C(design tocode，设计稿转代码)的方式，基于该第一差异信息以及第二差异信息生成该目标界面组件的组件代码。

具体的，上述组件代码可以基于上述第一差异信息，确定出用于指示上述目标界面组件和第一源组件之间的属性差异信息的第一子代码，还可以基于上述第二差异信息，确定出用于指示上述目标界面组件的多个变体组件之间的变体差异信息的第二子代码，并根据该第一子代码以及第二子代码确定出该目标界面组件的组件代码。

通过上述描述可知，在本公开实施例中，在获取到界面设计稿之后，可以识别界面设计稿中对应多个变体组件的目标界面组件，还可以在组件设计库中确定与该目标界面组件相匹配的第一源组件。之后，就可以确定目标界面组件和第一源组件之间的第一差异信息，同时还可以确定目标界面组件的多个变体组件之间的第二差异信息。在基于第一差异信息生成该目标界面组件的代码时，就可以基于第一差异信息对源组件所对应的代码进行调整之后，得到界面设计稿中所显示的目标界面组件的代码。在基于第二差异信息生成该目标界面组件的代码时，就可以得到该目标界面组件所对应的多个变体组件的代码。相对于现有的技术方案，通过上述处理方式，可以缩短程序的开发流程，提高开发效率，节省开发时间。

应理解的是，在本公开实施例中，上述目标界面组件以及第一源组件应为具有层级结构的界面组件，其中，上述目标界面组件中包含多个具有层级关系的子组件；上述第一源组件中包含多个具有层级关系的子源组件。

那么，在本公开实施例中，参见图3所示，为本公开实施例提供的一种确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息的方法，具体包括如下过程：

S1031：确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件。

在本公开实施例中，在确定上述目标界面组件和第一源组件之间的属性差异信息时，可以根据目标界面组件以及第一源组件的层级结构，按照层级顺序进行对比。

具体的，在进行对比时，首先可以确定目标界面组件中需要对比的目标层级，例如第2层，并获取位于该目标层级的目标子组件。然后，就可以在第一源组件中获取同样位于目标层级的第一子源组件，其中，该目标子组件与第一子原组件应位于同样位置。然后，就可以对该目标子组件和第一子源组件进行对比，得到用于表征该目标层级中的组件属性差异的对比结果。

S1032：检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化。

在本公开实施例中，首先检测上述目标子组件相对于上述第一子源组件来说，是否发生了子组件的替换，即目标子组件中的至少部分子组件在组件设计库中所对应的第二源组件和第一子源组件不一致。具体的，该子组件替换可以为将目标子组件中的子组件A替换为子组件B。

S1033：在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。

在本公开实施例中，上述第一差异信息用于指示目标子组件中子组件的修改，其中，该子组件的修改可以基于视觉属性差异来确定。

例如，该目标子组件中的子组件A1的颜色为红色，而第一子源组件中的子源组件A的颜色为蓝色，那么，就可以确定上述目标子组件中发生了子组件的修改。此时，该第一差异信息可以用于指示上述子源组件A的颜色由蓝色修改为了红色。

通过上述描述可知，在本公开实施例中，可以根据目标界面组件以及第一源组件的的层级关系来对位于相同位置的目标子组件以及第一子源组件进行对比，从而降低了由于层级嵌套导致至少部分子组件被覆盖而不能被识别的情况，并且便于确定目标子组件以及第一子源组件之间的视觉属性差异。

在本公开实施例中，S1033，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，具体包括如下过程：

(1)、确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；

(2)、确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；

(3)、基于所述第一视觉差异确定所述第一差异信息。

在本公开实施例中，首先确定上述目标子组件的视觉属性，得到第一视觉属性，其中，该视觉属性用于指示该目标子组件的视觉效果，该视觉属性的类别包括以下至少之一：目标子组件的尺寸，目标子组件的颜色，目标子组件的形状等。

另外，上述第一视觉属性用于表征上述目标子组件的具体视觉属性，例如，该目标子组件的第一视觉属性可以为：尺寸为小，颜色为蓝色，形状为矩形。

这里，上述第一子源组件的视觉属性的类别同样包括以下至少之一：目标子组件的尺寸，目标子组件的颜色，目标子组件的形状等。

在确定出上述第一子源组件的第二视觉属性为：尺寸为大，颜色为蓝色，形状为矩形后，就可以基于上述第一视觉属性以及第二视觉属性进行对比，从而确定述第一视觉属性和所述第二视觉属性之间的第一视觉差异。例如，该第一视觉差异为尺寸差异。

需要说明的是，在确定上述第一视觉差异时，还需要分别确定上述目标子组件的组件标识以及上述第一子源组件的组件标识，从而确定上述第一视觉属性和第二视觉属性之间的第一差异信息。

这里，上述第一差异信息的形态可以为三元组形态，其中，该三元组可以包含上述目标子组件的组件标识，上述第一子源组件的组件标识，第一差异描述信息。

例如，假设该目标子组件的组件标识为A1，第一子源组件的组件标识为A，第一差异描述信息为size＝'small'->size＝'large'(尺寸由小替换为大)，此时，该第一差异信息的三元组形态可以表示为[A1，A，size＝'small'->size＝'large']。

通过上述描述可知，在本公开实施例中，可以基于目标子组件的组件标识，第一子源组件的组件标识和第一差异描述信息这三种元素信息确定第一差异信息，提高了该第一差异信息的可信度。

另外的，在本公开实施例中，在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，所述方法还包括如下过程：

(1)、确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；

(2)、确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；

(3)、确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；

(4)、基于所述第二视觉差异和所述组件变化信息确定第二差异信息。

在本公开实施例中，在确定上述目标子组件所对应的第二源组件不同于第一子源组件，那么，就可以确定上述第二源组件相对于第一子源组件发生了变化。

然后，就可以确定上述目标子组件以及上述第二源组件的视觉属性，分别得到第三视觉属性以及第四视觉属性，其中，该目标子组件以及第二源组件的视觉属性的类别如上所述，此处不再赘述。

另外的，再根据上述方法确定出第二视觉差异后，就可以基于该第二视觉差异中的目标子组件的组件信息以及第二源组件的组件信息确定上述组件变化信息。以目标子组件为例，该组件信息包含该目标组件的组件标识以及组件类别。

例如，上述目标子组件的组件信息可以为currentId，上述第二源组件的组件信息可以为rawId。那么，上述组件变化信息就可以表示为：currentId->rawId。

这里，上述第二视觉差异的确定过程如上所述，此处不再赘述。在确定出上述第二视觉差异后，就可以基于上述第二视觉差异以及组件变化信息确定第二差异信息。

需要说明的是，上述第二差异信息的形态可以为四元组形态，其中，该四元组可以包含上述目标子组件的组件标识，上述第二源组件的组件标识，组件变化信息以及第二差异描述信息。

例如，若上述目标子组件的组件标识为A1，第二源组件的组件标识为B，组件变化信息为currentId->rawId，第二差异描述信息为type＝'primary'->type＝'default'(数据格式由primary替换为default)。那么，上述第二差异信息的四元组形态可以表示为[A1，B，currentId->rawId，type＝'primary'->type＝'default']。

通过上述描述可知，在本公开实施例中，在检测出第二源组件相对于第一子源组件发生了变化的情况下，可以基于第二视觉差异和组件变化信息确定包含四种元素信息第二差异信息，提高了该第二差异信息的可信度。

另外的，在本公开实施例中，S1032，检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，具体包括如下过程：

在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

在本公开实施例中，上述目标子组件可以对应着多个变体组件，因此，在检测该目标子组件的在组件设计库中的第二源组件相对于第一子源组件是否发生了变化时，还可以判断当前目标子组件是否为目标子组件的变体组件，即目标子组件是否发生了替换。

例如，若上述目标子组件为A1，该目标子组件对应着的变体组件为A2、A3、A4。那么，在当前目标子组件为A2的情况下，则确定目标子组件发生了替换，即目标子组件在组件设计库中的第二源组件相对于第一子源组件发生了变化；反之，若当前目标子组件不为变体组件A2-A4中的任一组件，则确定目标子组件未发生替换，则确定目标子组件在组件设计库中的第二源组件相对于第一子源组件未发生变化。

通过上述描述可知，在本公开实施例中，可以通过判断目标子组件不是目标界面组件中变体组件的方式，确定目标子组件在组件设计库中的第二源组件与第一子源组件是否发生变化，从而提高了判断第二源组件与第一子源组件是否发生变化的准确性。

另外的，在本公开实施例中，检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，具体包括如下过程：

(1)、在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；

(2)、在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

在本公开实施例中，上述目标子组件对应着多个变体组件，其中，多个变体组件的源组件可能与第一子源组件相同，也可能不同。因此，在确定出上述目标子组件是目标界面组件中变体组件的情况下，就可以确定该目标子组件的第二源组件，并判断该第二源组件与上述第一子源组件是否相同。

例如，若上述目标子组件A1对应着的变体组件为A2、A3、A4，其中，目标子组件A1以及变体组件A2、A3、A4对应的第二源组件均为组件A。那么，在当前目标子组件为变体组件A2的情况下，则确定该变体组件A2对应的第二源组件与第一子源组件相同。此时，就可以确定目标子组件在组件设计库中的第二源组件相对于第一子源组件未发生变化。

通过上述描述可知，在本公开实施例中，在确定出目标子组件是目标界面组件中变体组件的情况下，还可以判断所述第二源组件与所述第一子源组件是否相同，从而进一步提高了判断第二源组件与第一子源组件是否发生变化的准确性。

另外的，在本公开实施例中，参见图4所示，为本公开实施例提供的一种确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息的方法，其中，上述变体差异信息对应一个信息维度，因此，S105具体包括如下过程：

S1051：在所述多个变体组件中确定基础变体组件。

在本公开实施例中，在确定目标界面组件的多个变体组件之间的变体差异信息时，首先需要确定基础变体组件，以使多个变体组件中的剩余变体组件和该基础变体组件进行对比，从而确定剩余变体组件和该基础变体组件之间的差异信息，即上述多个变体组件之间的变体差异信息。

具体的，在确定上述基础变体组件时，可以分别确定上述每个变体组件中所包含的子组件的数量，并按照该子组件数量对上述多个变体组件进行升序排列，从而将该多个变体组件中子组件数量最少的变体组件，或者子组件数量最多的变体组件确定为上述基础变体组件。

S1052：在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化。

在本公开实施例中，首先需要根据每个变体组件的信息维度对上述多个变体组件进行分类，将信息维度相同的变体组件划分为一个变体组件，从而得到上述多个变体组件所对应的至少一个变体组合。

这里，上述信息维度可以根据变体组件中所包含的子组件的信息变化来进行区分，其中，该子组件的的信息变化可以为子组件的组件属性的变化，例如子组件的尺寸由小变成了大。

具体的，在确定上述信息维度时，可以根据上述变体组件中发生了信息变化的子组件的数量进行确定，将组件属性发生变化的子组件的数量相同的变体组件确定为一个变体组合。

例如，若上述变体组件中包含尺寸和样式两种属性，那么，就可以将尺寸(也可记为size)或者样式(也可记为type)其中一种组件属性发生变化的变体组件确定为一个变体组组合，并将该变体组合中变体组件的变量分数记为1；然后，将尺寸和样式均发生变化的变体组件确定为一个变体组合，并将该变体组合中变体组件的变量分数记为2。

S1053：基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。

在本公开实施例中，在确定多个变体组件之间的变体差异信息时，可以按照每个变体组合中所包含的变体组件的目标组件信息进行确定，其中，可以根据该目标组件信息确定第二差异信息。

具体的，该第二差异信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于基础变体组件在该信息维度下的信息的变化信息。其中，该第二差异信息可以通过上述三元组的形态进行展示。

在一种可选的实施方式中，在确定上述变体组合中每个变体组件在信息维度下的信息相对于基础变体组件在该信息维度下的信息的变化信息时，可以通过对比指令将该变体组合中每个变体组件和基础变体组件进行对比，从而确定每个变体组件和该基础变体组件的变化信息，其中，该对比指令可以为diff指令，即查找当前变体组件和基础变体组件的差异。

具体的，若上述基础变体组件C1的组件信息为size＝'large'&type＝'primary'(尺寸属性为large，样式属性为primary)，变量分数为1的变体组合中的变体组件C2的组件信息为size＝'small'&type＝'primary'。此时，通过diff指令对变体组件C2和基础变体组件C1进行对比，得到的该变体组件C2在变量分数为1的信息维度下相对于基础变体组件C1在该信息维度下的信息的变化信息为size＝'large'&type＝'primary'->size＝'small'&type＝'primary'。

这里，上述变体组件C2相对于基础变体组件在该信息维度下的信息的变化信息为[C1，C2，size＝'large'&type＝'primary'->size＝'small'&type＝'primary']。

在另一种可选的实施方式中，在确定上述变体组合中每个变体组件在信息维度下的信息相对于基础变体组件在该信息维度下的信息的变化信息时，还可以首先确定该变体组合中的待检测变体组件，并确定该待检测变体组件的中间变体组件，其中，该中间变体组件为变量分数小于该待检测变体组件的变体组合中，和该待检测变体组件的变量分数差最小的变体组件。

在确定出该中间变体组件之后，就可以确定上述待检测变体组件相对于该中间变体组件的第一变化信息，并获取该中间变体组件相对于上述基础变体组件的第二变化信息，然后，就可以基于上述第一变化信息以及第二变化信息确定出该待检测变体组件相对于基础变体组件在该信息维度下的信息的变化信息。

例如，若上述基础变体组件C1的组件信息为size＝'large'&type＝'primary'(尺寸属性为large，样式属性为primary)，变量分数为2的变体组合中的待检测变体组件C3的组件信息为size＝'small'&type＝'default'，中间变体组件C2的组件信息为size＝'small'&type＝'primary'。

首先，通过diff指令对待检测变体组件C3和中间变体组件C2进行对比，得到的该待检测变体组件C3在变量分数为2的信息维度下相对于中间变体组件C2在该信息维度下的信息的第一变化信息为size＝'small'&type＝'primary'->size＝'small'&type＝'default'。

然后，通过通过diff指令对中间变体组件C2和基础变体组件C1进行对比，得到的该中间变体组件C2在变量分数为1的信息维度下相对于基础变体组件C1在该信息维度下的信息的第二变化信息为size＝'large'&type＝'primary'->size＝'small'&type＝'primary'。

此时，就可以将上述第一变化信息和第二变化信息进行去重合并，得到该待检测变体组件相对于基础变体组件在变量分数为2的信息维度下的信息的变化信息为size＝'large'&type＝'primary'->size＝'small'&type＝'default'。

通过上述描述可知，在本公开实施例中，可以在多个变体组件中确定基础变体组件，并以两两组合的方式判断每个变体组合中的变体组件和该基础变体组件之间的第二差异信息，从而便于更好的确定第二差异信息。

另外的，在本公开实施例中，S1052，在所述多个变体组件中确定至少一个变体组合，具体包括如下过程：

(1)、确定所述多个变体组件中每个变体组件与所述基础变体组件之间变化信息的信息数量；

(2)、基于所述信息数量对所述多个变体组件进行分组，得到多个组件集合；并按照所述信息数量从小到大的顺序对所述多个组件集合进行排序，得到排序结果；

(3)、基于所述排序结果在所述多个变体组件中确定至少一个变体组合。

在本公开实施例中，首先需要确定多个变体组件中每个变体组件相对于基础变体组件的变化信息的信息数量，并根据该信息数量对多个变体组件进行分组。其中，该变化信息的数量可以根据上述变体组件中发生了信息变化的子组件的数量进行确定。

这里，在对上述多个变体组件进行分组时，可以将与基础变体组件之间变化信息的信息数量一致的变体组件划分为一个组件集合，并根据每个组件集合中的变体组件与基础变体组件之间变化信息的信息数量，确定该组件集合的变量分数。例如，当某个组件集合的信息数量为1时，则该组件集合的变量分数为1。

在得到上述多个组件集合后，就可以基于每个组件集合的变量分数对多个组件集合进行排序，例如，可以按照变量分数从小到大的顺序对多个组件集合进行排序，从而得到排序结果。

另外的，在本公开实施例中，基于所述排序结果在所述多个变体组件中确定至少一个变体组合时，具体包括如下过程：

(1)、针对所述排序结果中任意相邻的两个组件集合，将第一组件集合中每个第一组件的组件属性与第二组件集合中各个第二组件的组件属性进行比较，得到属性比较结果；所述第一组件集合和所述第二组件集合为所述两个组件集合中的集合，且所述第一组件集合位于所述第二组件集合之前；

(2)、基于所述属性比较结果在所述各个第二组件中确定目标组件，并基于所述目标组件确定对应的变体组合，得到所述至少一个变体组合；其中，所述目标组件与所述第一组件在对应信息维度下的信息相对于所述基础变体组件在该信息维度下的信息均发生了变化。

在本公开实施例中，首先基于上述排序结果确定任意相邻的两个组件集合，其中，该任意相邻的两个组件集合为变量分数差为1的两个组件集合。

例如，若上述任意相邻的两个组件集合为变量分数为1的第一组件集合L1以及变量分数为2的第二组件集合L2。那么，在将L1中每个第一组件的组件属性与L2中各个第二组件的组件属性进行比较时，可以通过以下两种方式进行比较，从而得到属性比较结果：

方式一：

将L1中的每个第一组件分别和L2中的各个第二组件进行比较，得到属性比较结果，其中，该属性比较结果应当包含进行比较的比较组中的第一组件的组件标识，比较组中的第二组件的组件标识，比较组中的第一组件以及第二组件之间的第三差异描述信息。

方式二：

首先基于L1中的各个第一组件，对L2中的第二组件进行分组，将L1中的第一组件确定为中间组件，并为每个中间组件在L2中确定和该中间组件的变量分数差为1的第二组件，从而得到每个中间组件所对应的第二组件子集合。

具体的，第二组件子集合的确定方法如图5所示，以L2中的第二组件C6和第二组件C7为例(L2中包含的其余第二组件未在图5中展示)，其中，C6的组件信息为size＝'defaul'&type＝'danger'，C7的组件信息为size＝'defaul'&type＝'defaul'，因此，第二组件C6和第二组件C7所对应的中间组件为第一组件C3，第二组件C6和第二组件C7为一个第二组件子结合(相对于第一组件C3来说，第二组件C6和第二组件C7的type属性发生了变化，即第二组件C6和第二组件C7与第一组件C3的变量分数差为1)。此时，就可以确定第一组件C3与第二组件C6和第二组件C7之间的第三差异描述信息。

这里，就可以按照上述确定第一组件C3和对应的第二组件子集合中第二组件的第三差异描述信息的方式，确定L1中每个第一组件和对应的第二组件子集合中第二组件的第三差异描述信息。

在确定出上述属性比较结果后，就可以基于该属性比较结果在第二组件中确定目标组件，并确定该目标组件所对应的变体组合，具体的，该变体组合可以按照上述组件信息进行划分。

具体的，确定上述第一组件的组件信息相对于基础变体组件的发生变化的目标组件信息，并在第二组件中确定该目标组件信息相对于第一组件发生了变化的目标组件，从而得到该目标组件以及第一组件所对应的变体组合。

在得到上述变体组合之后，就可以基于该第一组件以及目标组件，确定该目标组件信息的所对应的组件属性的影响范围。

例如，若上述目标组件信息为size属性，基础变体组件的目标组件信息为size＝'large'，在上述变体组合中的变体组件的目标组件信息分别为：size＝'small'，size＝'small'，那么，就可以确定上述目标组件信息所对应的size属性的影响范围为large，small以及small。

通过上述描述可知，在本公开实施例中，可以通过确定变体组合的方式，确定变体组件中组件信息的影响范围，从而给设计人员提供更直观的组件信息影响范围的展示，以增加设计人员针对界面组件进行设计时对变量的掌控力。

另外的，在本公开实施例中，如图6所示还提供了另一种确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息的方法，具体包括如下过程：

S11：采用层序遍历的方式，同步遍历目标界面组件和第一源组件中位于相同位置的子组件；

S12：对比位于相同目标界面组件和第一源组件中位于相同位置的目标子组件IA以及第一子源组件CA，并判断所述目标子组件IA以及第一子源组件CA是否具为具有多个层级的子组件，若是，则执行S15，若否，则执行S13；

S13：对比目标子组件IA以及第一子源组件CA之间的组件属性，并判断目标子组件IA以及第一子源组件CA之间的组件属性是否有差异，若是，则执行S14，若否，则执行S11；

S14：基于上述目标子组件IA以及第一子源组件CA之间的视觉属性差异，确定第一差异信息，并将该第一差异信息记录为三元组[D,I,diff]，其中D为目标子组件IA的组件标识，I为第一子源组件CA的组件标识，diff用于表征目标子组件IA以及第一子源组件CA之间的视觉属性差异；

S15：判断上述目标子组件IA以及第一子源组件CA在组件设计库中的源组件是否为同一个源组件，若是，则执行S14，若否，则执行S16；

S16：分别获取目标子组件IA以及第一子源组件CA的组件信息以及组件标识，并确定用于表征子组件替换的三元组；

在本公开实施例中，若上述目标子组件IA的组件信息为currentId，第一子源组件CA的组件信息为rawId，那么，上述用于表征子组件替换的三元组为「D,I,currentId->rawId」；

S17：确定目标子组件IA的第二源组件CB，并判断目标界面组件中是否还有进行对比的目标子组件，若是，则执行S11，若否，则结束进程。

综上，在本公开实施例中，在获取到界面设计稿之后，可以识别界面设计稿中对应多个变体组件的目标界面组件，还可以在组件设计库中确定与该目标界面组件相匹配的第一源组件。之后，就可以确定目标界面组件和第一源组件之间的第一差异信息，同时还可以确定目标界面组件的多个变体组件之间的第二差异信息。在基于第一差异信息生成该目标界面组件的代码时，就可以基于第一差异信息对源组件所对应的代码进行调整之后，得到界面设计稿中所显示的目标界面组件的代码。在基于第二差异信息生成该目标界面组件的代码时，就可以得到该目标界面组件所对应的多个变体组件的代码。相对于现有的技术方案，通过上述处理方式，可以缩短程序的开发流程，提高开发效率，节省开发时间。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与界面代码生成方法对应的界面代码生成装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述界面代码生成方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图7所示，为本公开实施例提供的一种界面代码生成装置的示意图，所述装置包括：获取单元71、第一确定单元72、第二确定单元73；其中，

获取单元71，用于获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；

第一确定单元72，用于在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；

第二确定单元73，用于确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

本公开实施例通过识别界面设计稿中对应多个变体组件的目标界面组件，还可以在组件设计库中确定与该目标界面组件相匹配的第一源组件。之后，就可以确定目标界面组件和第一源组件之间的第一差异信息，同时还可以确定目标界面组件的多个变体组件之间的第二差异信息。在基于第一差异信息生成该目标界面组件的代码时，就可以基于第一差异信息对源组件所对应的代码进行调整之后，得到界面设计稿中所显示的目标界面组件的代码。在基于第二差异信息生成该目标界面组件的代码时，就可以得到该目标界面组件所对应的多个变体组件的代码。相对于现有的技术方案，通过上述处理方式，可以缩短程序的开发流程，提高开发效率，节省开发时间。

一种可能的实施方式中，第一确定单元72，还用于：

确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件；检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化；在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。

一种可能的实施方式中，第一确定单元72，还用于：

确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；基于所述第一视觉差异确定所述第一差异信息。

一种可能的实施方式中，第一确定单元72，还用于：

在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；基于所述第二视觉差异和所述组件变化信息确定第二差异信息。

一种可能的实施方式中，第一确定单元72，还用于：

在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

一种可能的实施方式中，第一确定单元72，还用于：

在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

一种可能的实施方式中，所述变体差异信息对应一个信息维度，第一确定单元72，还用于：

在所述多个变体组件中确定基础变体组件；在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化；基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。

一种可能的实施方式中，第一确定单元72，还用于：

确定所述多个变体组件中每个变体组件与所述基础变体组件之间变化信息的信息数量；基于所述信息数量对所述多个变体组件进行分组，得到多个组件集合；并按照所述信息数量从小到大的顺序对所述多个组件集合进行排序，得到排序结果；基于所述排序结果在所述多个变体组件中确定至少一个变体组合。

一种可能的实施方式中，第一确定单元72，还用于：

针对所述排序结果中任意相邻的两个组件集合，将第一组件集合中每个第一组件的组件属性与第二组件集合中各个第二组件的组件属性进行比较，得到属性比较结果；所述第一组件集合和所述第二组件集合为所述两个组件集合中的集合，且所述第一组件集合位于所述第二组件集合之前；基于所述属性比较结果在所述各个第二组件中确定目标组件，并基于所述目标组件确定对应的变体组合，得到所述至少一个变体组合；其中，所述目标组件与所述第一组件在对应信息维度下的信息相对于所述基础变体组件在该信息维度下的信息均发生了变化。

关于装置中的各单元的处理流程、以及各单元之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

对应于图1中的界面代码生成方法，本公开实施例还提供了一种计算机设备800，如图8所示，为本公开实施例提供的计算机设备800结构示意图，包括：

处理器81、存储器82、和总线83；存储器82用于存储执行指令，包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当所述计算机设备800运行时，所述处理器81与所述存储器82之间通过总线83通信，使得所述处理器81执行以下指令：

获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；

在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；

确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的界面代码生成方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的界面代码生成方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (11)

1.一种界面代码生成方法，其特征在于，包括：

获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；

在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；

确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码，

其中，所述变体差异信息对应一个信息维度，所述确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，包括：

在所述多个变体组件中确定基础变体组件；

在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化；

基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。

2.根据权利要求1所述的方法，其特征在于，所述目标界面组件中包含多个具有层级关系的子组件；所述第一源组件中包含多个具有层级关系的子源组件；

所述确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息，包括：

确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件，所述目标子组件在所述组件设计库中对应于第二源组件；

检测所述第二源组件相对于所述第一子源组件是否发生了变化；

在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。

3.根据权利要求2所述的方法，其特征在于，所述基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，包括：

确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；

确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；

基于所述第一视觉差异确定所述第一差异信息。

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

在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；

确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；

确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；

基于所述第二视觉差异和所述组件变化信息确定第二差异信息。

5.根据权利要求2所述的方法，其特征在于，所述检测所述第二源组件相对于所述第一子源组件是否发生了变化，包括：

在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

6.根据权利要求5所述的方法，其特征在于，所述检测所述第二源组件相对于所述第一子源组件是否发生了变化，包括：

在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；

在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。

7.根据权利要求1所述的方法，其特征在于，所述在所述多个变体组件中确定至少一个变体组合，包括：

确定所述多个变体组件中每个变体组件与所述基础变体组件之间变化信息的信息数量；

基于所述信息数量对所述多个变体组件进行分组，得到多个组件集合；并按照所述信息数量从小到大的顺序对所述多个组件集合进行排序，得到排序结果；

基于所述排序结果在所述多个变体组件中确定至少一个变体组合。

8.根据权利要求7所述的方法，其特征在于，所述基于所述排序结果在所述多个变体组件中确定至少一个变体组合，包括：

针对所述排序结果中任意相邻的两个组件集合，将第一组件集合中每个第一组件的组件属性与第二组件集合中各个第二组件的组件属性进行比较，得到属性比较结果；所述第一组件集合和所述第二组件集合为所述两个组件集合中的集合，且所述第一组件集合位于所述第二组件集合之前；

基于所述属性比较结果在所述各个第二组件中确定目标组件，并基于所述目标组件确定对应的变体组合，得到所述至少一个变体组合；其中，所述目标组件与所述第一组件在对应信息维度下的信息相对于所述基础变体组件在该信息维度下的信息均发生了变化。

9.一种界面代码生成装置，其特征在于，包括：

获取单元，用于获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；

第一确定单元，用于在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；

第二确定单元，用于确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码，

其中，所述变体差异信息对应一个信息维度，所述确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，包括：

在所述多个变体组件中确定基础变体组件；

在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化；

基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。

10.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至8任意一项所述的界面代码生成方法的步骤。

11.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至8任意一项所述的界面代码生成方法的步骤。