CN114237600B - 前端页面的代码生成方法、装置、设备以及存储介质 - Google Patents

Abstract

本公开提供了一种前端页面的代码生成方法、装置、设备以及存储介质，其中，该方法包括：获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

Description

前端页面的代码生成方法、装置、设备以及存储介质

技术领域

本公开涉及前端开发的技术领域，具体而言，涉及一种前端页面的代码生成方法、装置、设备以及存储介质。

背景技术

在前端开发技术领域中，开发人员通常需要将设计人员设计的界面设计稿中的组件转换为相应的代码。现有的技术中，可以利用D2C(Designto Code，设计稿生成代码)方法将设计稿中的组件转换为相应的代码，以减少开发人员的工作量。然而，现有的D2C方法针对设计稿中的每个组件均生成对应的代码。当设计稿中的组件被重复利用，且以不同的渲染样式进行展示时，根据现有的D2C方法会为每个被重复利用的组件均生成对应的代码，从而导致代码的重复度较高、代码的可读性较差，进而影响后续代码的可维护性。

发明内容

本公开实施例至少提供一种前端页面的代码生成方法、装置、设备以及存储介质。

第一方面，本公开实施例提供了一种前端页面的代码生成方法，该方法包括：获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

一种可选的实施方式中，所述基于所述组件属性确定目标组件代码，包括：基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

一种可选的实施方式中，所述获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件，包括：基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；计算各个所述组件中对应相同图层子组件的组件属性的相似度；根据所述相似度确定所述界面设计稿中的多个复用组件。

一种可选的实施方式中，所述确定所述多个复用组件的组件属性，包括：基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

一种可选的实施方式中，所述对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性，包括：将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。

一种可选的实施方式中，所述目标状态参数包括多个子状态参数，每个所述子状态参数用于指示对应复用组件的特殊显示状态；所述方法还包括：在所述目标状态参数中确定目标子状态参数，将所述目标子状态参数作为所述目标状态变量的变量值输入至所述第二组件代码中，得到新第二组件代码；基于所述第一组件代码和所述新第二组件代码，在界面上渲染所述目标子状态参数所对应的复用组件。

一种可选的实施方式中，所述在所述目标状态参数中确定目标子状态参数，包括：响应于针对所述目标状态参数的选择操作，确定所述选择操作所指示选择的子状态参数确定为所述目标子状态参数；或者基于所述多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在所述多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。

第二方面，本公开实施例还提供一种前端页面的代码生成装置，包括：获取单元，用于获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；第一确定单元，用于确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；第二确定单元，用于基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

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

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

通过上述描述可知，在确定出待处理的界面设计稿中多个复用组件的组件属性之后，可以基于每个复用组件的组件属性确定该复用组件的目标组件代码。通过上述处理方式可以生成多个复用组件所对应的通用组件代码以及用于指示每个复用组件的特殊显示状态的目标状态参数，从而可以基于目标状态参数完成每个复用组件对应显示状态的渲染，进而降低了组件代码的重复性，提高了组件代码的可读性以及可维护性，同时提高了代码工作人员的工作效率，节约人力成本和时间成本。

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

附图说明

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

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

图2示出了本公开实施例所提供的一种界面设计稿中包含多个复用组件的效果示意图；

图3示出了本公开实施例所提供的界面设计稿中包含的组件及子组件的效果示意图；

图4示出了本公开实施例所提供的基于所述组件属性确定目标组件代码方法的流程图；

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

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

具体实施方式

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

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

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

经研究发现，在前端开发技术领域中，开发人员通常需要将设计人员设计的界面设计稿中的组件转换为相应的代码。现有的技术中，可以利用D2C(Designto Code，设计稿生成代码)方法将设计稿中的组件转换为相应的代码，以减少开发人员的工作量。然而，现有的D2C方法针对设计稿中的每个组件均生成对应的代码。当设计稿中的组件被重复利用，且以不同的渲染样式进行展示时，根据现有的D2C方法会为每个被重复利用的组件均生成对应的代码，从而导致代码的重复度较高、代码的可读性较差，进而影响后续代码的可维护性。

基于上述研究，本公开提供了一种前端页面的代码生成方法、装置、设备以及存储介质。在本公开实施例中，在确定出待处理的界面设计稿中多个复用组件的组件属性之后，可以基于每个复用组件的组件属性确定该复用组件的目标组件代码。通过上述处理方式可以生成多个复用组件所对应的通用组件代码以及用于指示每个复用组件的特殊显示状态的目标状态参数，从而可以基于目标状态参数完成每个复用组件对应显示状态的渲染，进而降低了组件代码的重复性，提高了组件代码的可读性以及可维护性，同时提高了代码工作人员的工作效率，节约人力成本和时间成本。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种前端页面的代码生成方法进行详细介绍，本公开实施例所提供的前端页面的代码生成方法的执行主体一般为具有一定计算能力的计算机设备。

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

S101：获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件。

这里，界面设计稿用于指示设计人员设计的交互界面，此时，界面设计稿中可以包含多个组件，每个组件可以包含具有堆叠逻辑关系的至少一个子组件。

在本公开实施例中，可以将界面设计稿中多个相似的组件确定为界面设计稿的多个复用组件。其中，相似的组件用于指示界面设计稿所包含的各个组件中满足相似要求的组件。

具体实施时，可以基于每个组件中所包含的各个子组件的组件属性计算界面设计稿中各个组件之间的相似度值。在计算得到的相似度值大于或者等于预设相似度阈值的情况下，可以理解为这两个组件满足相似要求，此时，可以将满足相似要求的多个组件确定为界面设计稿中的复用组件。

示例性地，如图2所示，假设，界面设计稿中包含3个组件，该3个组件分别为：“普通按钮”所对应组件、“禁用按钮”所对应组件、“强调按钮”所对应组件。假设，基于上述三个组件中所包含的各个子组件之间的组件属性计算出这3个组件之间的相似度值大于预设相似度阈值，此时，可以确定出这3个组件满足相似要求。此时，就可以将这3个组件确定为界面设计稿中的多个复用组件。

S103：确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态。

在本公开实施例中，每个复用组件的组件属性用于指示每个复用组件所包含的属性信息，该属性信息用于确定每个复用组件的显示状态。此时，可以基于各个复用组件所包含的属性信息进行对比，并将各个复用组件共有的属性信息确定通用属性，用于指示各个复用组件的相同显示状态。基于各个复用组件之间不相同的属性信息确定特殊属性，用于指示对应复用组件的特殊显示状态。

示例性地，假设，如图2所示，在一个界面设计稿中存在3个复用组件，分别为普通按钮所对应组件、禁用按钮所对应组件、强调按钮所对应组件。此时，假设，普通按钮所对应组件的属性信息为“圆角8px、宽度120px、高度60px、背景颜色：深蓝色、文本：普通按钮”；禁用按钮所对应组件的属性信息为“圆角8px、宽度120px、高度60px、背景颜色：浅蓝色、文本：禁用按钮”；强调按钮所对应组件的属性信息为“圆角8px、宽度120px、高度60px、背景颜色：红色、文本：强调按钮”。

此时，可以确定上述3个复用组件的组件属性为“圆角8px、宽度120px、高度60px、背景颜色：深蓝色、文本：普通按钮、背景颜色：浅蓝色、文本：禁用按钮、背景颜色：红色、文本：强调按钮”。其中，通用属性为“圆角8px、宽度120px、高度60px”，特殊属性为“背景颜色：深蓝色、文本：普通按钮、背景颜色：浅蓝色、文本：禁用按钮、背景颜色：红色、文本：强调按钮”。

S105：基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

这里，通用组件代码除了可以用于在前端页面渲染各个复用组件的相同显示状态之外，针对每个复用组件的特殊显示状态，也可以通过该通用组件代码在前端页面进行渲染显示。

在通过该通用组件代码在前端页面进行渲染显示时，可以将用于指示每个复用组件的特殊显示状态的目标状态参数输入至该通用组件代码中，从而实现在前端页面对各个复用组件的特殊显示状态进行渲染显示。

因此，通过上述描述可知，通用组件代码中可以包含两部分代码，分别是用于渲染相同显示状态的组件代码(即，下述实施例中的第一组件代码)，以及用于渲染每个复用组件的特殊显示状态的组件代码(即，下述实施例中的第二组件代码)。其中，在“用于渲染每个复用组件的特殊显示状态的组件代码”中，包含对应的状态变量(即，下述实施例中的目标状态变量)，该状态变量的变量值可以为上述目标状态参数。

针对各个复用组件的特殊属性可以确定出对应的特殊显示状态。这里，特殊属性可以理解为各个复用组件包含相同的状态参数，但是针对每个状态参数对应不同的参数内容。

例如，如图2所示，该状态参数可以为“背景颜色”和“文本”，针对“普通状态”所对应组件，该状态参数的参数内容为：“背景颜色”是深蓝色，“文本”是普通按钮。

通过上述描述可知，在确定出待处理的界面设计稿中多个复用组件的组件属性之后，可以基于每个复用组件的组件属性确定该复用组件的目标组件代码。通过上述处理方式可以生成多个复用组件所对应的通用组件代码以及用于指示每个复用组件的特殊显示状态的目标状态参数，从而可以基于目标状态参数完成每个复用组件对应显示状态的渲染，进而降低了组件代码的重复性，提高了组件代码的可读性以及可维护性，同时提高了代码工作人员的工作效率，节约人力成本和时间成本。

在一个可选的实施方式中，针对S101，获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件，具体包括如下步骤：

步骤S11：基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；

步骤S12：计算各个所述组件中对应相同图层子组件的组件属性的相似度；

步骤S13：根据所述相似度确定所述界面设计稿中的多个复用组件。

针对待处理的界面设计稿，可以对应包含一个界面结构树，在该界面结构树中包含该界面设计稿中各个组件(或者各个子组件)之间的堆叠逻辑关系。此时，就可以通过界面结构树确定界面设计稿中每个组件的图层结构信息。

在确定出上述图层结构信息之后，就可以基于该图层结构信息对界面设计稿中的对应组件进行遍历，从而遍历得到该组件中位于每个图层的子组件的组件属性。

通过上述描述可知，上述图层结构信息用于指示每个组件中的各个子组件所对应的图层结构以及各个子组件在对应图层结构中的组件属性。其中，组件属性包含至少以下信息：形状、高度、宽度、颜色、文本内容等信息，本公开对组件属性的具体属性内容不做具体限定，以能够实现为准。

在遍历出每个组件中位于各个图层的子组件的组件属性之后，就可以基于该组件属性在多个组件中确定复用组件，具体过程可以描述如下：

从每个组件中位于最外层的子组件开始，计算对应相同图层的子组件的组件属性的相似度，进而根据该相似度确定所述界面设计稿中的多个复用组件。

针对一个组件来说，可以包含多个子组件，多个子组件可能对应多个图层，此时，在按照上述所描述的方式进行相似度计算之后，可以得到多个相似度的计算结果。在此情况下，可以将全部相似度进行求平均计算，从而将该求平均计算结果确定为这两个组件之间的相似度。

具体实施时，假设，如图3所示，存在一个界面设计稿I，在该界面设计稿I中包含4个组件，分别为：组件A、组件B、组件C、组件D，其中，组件A、B、C中均包含以下子组件，分别为：子组件1、子组件2、子组件3、子组件4，组件D中包含以下子组件：子组件5和子组件6。

通过上述步骤可知，可以根据界面结构树确定界面设计稿I中所包含的4个组件的图层结构信息。例如，组件A中包含的各个子组件的图层结构信息可以为：子组件3包含在子组件2中，子组件2和子组件1对应于该组件A中的相同图层，子组件1和子组件2包含于子组件4中。

针对上述子组件1-子组件4，可以通过界面结构树确定位于每个图层的子组件的组件属性，从而得到子组件1的组件属性、子组件2的组件属性、子组件3的组件属性、子组件4的组件属性。

在一个可选的实施方式中，上述步骤：确定所述界面设计稿中的多个复用组件，还可以包含以下步骤：

在多个组件中确定包含子组件数量相同的目标组件。在目标组件的数量为多个的情况下，可以通过上述步骤所描述的方式计算任意两个目标组件之间的相似度，从而根据该相似度在多个目标组件中确定复用组件。

通过上述图2可以理解，复用组件中所包含的子组件的数量，以及子组件的结构是相同的，不同的是各个复用组件中子组件所对应的其他属性，例如，显示颜色，显示文本等属性。因此，通过将包含子组件数量相同的目标组件进行相似度计算，以根据相似度的计算结果确定复用组件的方式，可以减少计算量，进而提高计算效率。

上述实施方式中，在基于界面设计稿中各个组件的图层结构信息确定界面设计稿中每个组件所包含的子组件的图层结构以及子组件的组件属性之后，再计算各个组件中对应相同图层子组件的组件属性的相似度，并将满足相似度要求的组件确定为界面设计稿中的多个复用组件的方式，可以更加准确地确定界面设计稿中所包含的复用组件，进而可以提高基于复用组件所确定的组件代码的准确度。

在一个可选的实施方式中，针对S103，确定所述多个复用组件的组件属性，具体包括如下步骤：

步骤S21：基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；

步骤S22：对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

在本公开实施例中，在读取界面设计稿中各个复用组件的图层结构信息之后，可以遍历各个复用组件中每个子组件的组件属性，并将每个复用组件所包含的各个子组件的组件属性进行汇总，之后，就可以得到每个复用组件的初始组件属性。

在得到各个复用组件的初始组件属性之后，可以将各个复用组件所对应的初始组件属性进行属性分类。此时，可以将各个复用组件所对应的初始组件属性进行比较，将各个复用组件的初始组件属性中均共有的组件属性作为各个复用组件的通用属性。将每个复用组件的初始组件属性中子组件所特有的组件属性作为该复用组件的特殊属性。将上述通用属性和特殊属性进行汇总，即可得到多个复用组件的组件属性。

具体实施时，可以将各个复用组件中对应相同图层的子组件的组件属性进行比较，从而根据比较结果确定该图层中相同的组件属性。之后，就可以根据每个图层中相同的组件属性确定各个复用组件的通用属性。，并基于每个图层中不同的组件属性确定每个复用组件的特殊属性。

通过上述描述可知，可以基于界面设计稿中各个复用组件的图层结构信息，遍历各个复用组件中每个子组件的组件属性，进而得到更加准确、全面的各个复用组件的初始组件属性。之后，再对各个复用组件的初始组件属性进行属性分类，并基于得到的属性分类结果确定多个复用组件的组件属性，进而可以合并各个复用组件的初始组件属性中重复的子组件属性，进而降低生成的组件代码的重复性，提高组件代码的可读性。同时，还可以确定各个复用组件之间不相同的子组件属性，进而可以更清晰地展示各个复用组件之间的差异，进而提高生成的组件代码的可维护性。

在一个可选的实施方式中，针对S22，所述对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性，具体包括如下步骤：

步骤S31：将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；

步骤S32：将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；

步骤S33：将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。

在本公开实施例中，在得到各个复用组件的初始组件属性之后，可以对各个复用组件的初始组件属性进行属性比较，并基于属性比较结果确定多个复用组件的组件属性。这里，组件属性包含第一组件属性和第二组件属性。

具体实施时，可以各个复用组件的初始组件属性中对应相同图层的组件属性进行比较，并在比较出相同的情况下，将该组件属性确定为第一组件属性，并在比较出不相同的情况下，将该组件属性确定为第二组件属性。

通过上述处理方式，可以将每个复用组件所对应的初始组件属性划分为两部分，分别为第一组件属性和第二组件属性。其中，第一组件属性为每个复用组件所对应的初始组件属性中相同的组件属性；第二组件属性为每个复用组件所对应的初始组件属性中出第一组件属性之外剩余的组件属性，第二组件属性用于指示每个复用组件的初始组件属性中不相同的组件属性。

之后，可以将各个复用组件的第一组件属性确定为多个复用组件的组件属性中的通用属性，并对各个复用组件的第二组件属性进行汇总，得到组件属性中的特殊属性。在本公开实施例中，针对每个复用组件，均可以对应一个特殊属性。

例如，假设，如上述图2所示的界面设计稿中的3个复用组件。此时，可以确定该3个复用组件中，第一组件属性为“圆角8px、宽度120px、高度60px”，第二组件属性分别为“背景颜色：深蓝色、文本：普通按钮”、“背景颜色：浅蓝色、文本：禁用按钮”、“背景颜色：红色、文本：强调按钮”。

此时，多个复用组件的组件属性中的通用属性即为上述每个复用组件的第一组件属性：“圆角8px、宽度120px、高度60px”，多个复用组件的组件属性中的特殊属性即为将上述3个复用组件的第二组件属性进行汇总之后得到的汇总结果：“背景颜色：深蓝色、文本：普通按钮”、“背景颜色：浅蓝色、文本：禁用按钮”、“背景颜色：红色、文本：强调按钮”。

上述实施方式中，可以通过对各个复用组件的初始组件属性进行比较，确定每个复用组件的第一组件属性以及第二组件属性，并将每个复用组件的第一组件属性确定为多个复用组件的组件属性中的通用属性，将每个复用组件的第二组件属性进行汇总，将得到的汇总结果确定为多个复用组件的组件属性中的特殊属性的方法，进而实现对每个复用组件所对应初始组件属性的分类，进而可以更清晰地确定各个复用组件之间的相同组件属性以及不同组件属性，进而可以使依据组件属性所确定的组件代码更加清晰易懂，提高代码的可读性以及后续的可维护性。

在一个可选的实施方式中，如图4所示，针对S105，所述基于所述组件属性确定目标组件代码，具体包括如下步骤：

步骤S41：基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；

步骤S42：基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；

步骤S43：基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

在本公开实施中，可以基于各个复用组件的通用属性生成用于渲染各个复用组件相同显示状态的第一组件代码，并基于每个复用组件的特殊属性生成用于渲染每个复用组件特殊显示状态的携带目标状态变量的第二组件代码。

之后，就可以基于第一组件代码和携带目标状态变量的第二组件代码确定用于渲染界面设计稿中每个复用组件的通用组件代码。

通过上述描述可知，通过将多个复用组件的组件属性中所包含的通用属性和特殊属性分别生成各个复用组件所对应的第一组件代码和携带目标状态变量的第二组件代码的方式，可以使每个复用组件中的通用属性不再重复生成相同的组件代码，降低了组件代码的重复性和复杂性。同时，还可以通过目标状态参数确定各个复用组件的特殊显示状态，使每个复用组件之间的差异信息更清晰，提高了组件代码的可读性。

在一个可选的实施方式中，在所述目标状态参数包括多个子状态参数，每个所述子状态参数用于指示对应复用组件的特殊显示状态的情况下，本公开方法还包括：

步骤S51：在所述目标状态参数中确定目标子状态参数，将所述目标子状态参数作为所述目标状态变量的变量值输入至所述第二组件代码中，得到新第二组件代码；

步骤S52：基于所述第一组件代码和所述新第二组件代码，在界面上渲染所述目标子状态参数所对应的复用组件。

在本公开实施例中，目标子状态参数可以用于指示上述生成的第二组件代码所携带的目标状态变量，目标子状态参数用于指示渲染每个复用组件的特殊显示状态。

在本公开实施例中，可以从目标状态参数所包含的多个子状态参数中确定目标子状态参数，并将该目标子状态参数作为目标状态变量的变量值输入至第二组件代码中，确定新第二组件代码。

之后，可以根据新第二组件代码和第一组件代码确定复用组件的组件代码，进而在界面中渲染该复用组件。

通过上述描述可知，可以通过确定目标子状态参数，确定复用组件的特殊显示状态，进而根据目标子状态参数所对应的新第二组件代码和第一组件代码在界面中对复用组件进行渲染，进而可以使工作人员根据输入的目标子状态参数，来准确选择每个复用组件的具体显示状态，进而提高了界面设计稿中复用组件渲染的准确度，进而提高了界面设计稿中复用组件转组件代码的准确度，进而提高了工作效率。

在一个可选的实施方式中，针对S51，所述在所述目标状态参数中确定目标子状态参数，具体包括如下步骤：

步骤S61：响应于针对所述目标状态参数的选择操作，将所述选择操作所指示选择的子状态参数确定为所述目标子状态参数；或者

步骤S62：基于所述多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在所述多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。

通过上述描述可知，在本公开实施例中，可以通过在目标状态参数中确定复用组件所对应的目标子状态参数，进而根据确定的目标子状态参数确定用于渲染复用组件的组件代码。

其中，在目标状态参数中确定复用组件所对应的目标子状态参数的方法可以为以下两种方式。

方式一：通过响应于目标状态参数的选择操作，将该选择操作所指示选择的自状态参数确定为目标子状态参数。

示例性地，假设，目标状态参数为“普通状态、禁用状态、强调状态”，此时，可以通过选择目标状态参数中的任意一个子状态参数(例如，普通状态)，并将选择的子状态参数确定为上述目标子状态参数。

方式二：基于多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。

示例性地，假设，存在3个复用组件，该3个复用组件所对应的目标状态参数为“普通状态、禁用状态、强调状态”，此时，假设，这3个复用组件按目标状态参数中子状态参数从左到右的顺序对复用组件进行渲染，此时，目标子状态参数可以按顺序分别确定为：“普通状态、“禁用状态”、“强调状态”。

上述实施方式中，可以通过对目标子状态参数中子状态参数的选择确定目标子状态参数，也可以通过多个复用组件的渲染顺序确定当前时刻渲染的复用组件所对应的子状态参数，并将该子状态参数确定目标子状态参数，进而可以基于确定出的目标子状态参数在界面中渲染复用组件，进而不仅可以按顺序对各个复用组件进行渲染，还可以不按顺序对复用组件进行渲染，进而提高组件代码的灵活性。

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

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

参照图5所示，为本公开实施例提供的一种前端页面的代码生成装置的示意图，所述装置包括：获取单元51、第一确定单元52、第二确定单元53；其中，

获取单元51，用于获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；

第一确定单元52，用于确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；

第二确定单元53，用于基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

通过上述描述可知，在确定出待处理的界面设计稿中多个复用组件的组件属性之后，可以基于每个复用组件的组件属性确定该复用组件的目标组件代码。通过上述处理方式可以生成多个复用组件所对应的通用组件代码以及用于指示每个复用组件的特殊显示状态的目标状态参数，从而可以基于目标状态参数完成每个复用组件对应显示状态的渲染，进而降低了组件代码的重复性，提高了组件代码的可读性以及可维护性，同时提高了代码工作人员的工作效率，节约人力成本和时间成本。

一种可能的实施方式中，第二确定单元，还用于：基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

一种可能的实施方式中，获取单元，还用于：基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；计算各个所述组件中对应相同图层子组件的组件属性的相似度；根据所述相似度确定所述界面设计稿中的多个复用组件。

一种可能的实施方式中，第一确定单元，还用于：基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

一种可能的实施方式中，第一确定单元，还用于：将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。。

一种可能的实施方式中，第二确定单元，还用于：在所述目标状态参数中确定目标子状态参数，将所述目标子状态参数作为所述目标状态变量的变量值输入至所述第二组件代码中，得到新第二组件代码；基于所述第一组件代码和所述新第二组件代码，在界面上渲染所述目标子状态参数所对应的复用组件。

一种可能的实施方式中，第二确定单元，还用于：响应于针对所述目标状态参数的选择操作，确定所述选择操作所指示选择的子状态参数确定为所述目标子状态参数；或者基于所述多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在所述多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。

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

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

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

获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；

确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；

基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

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

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

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

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

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

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

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

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

Claims (10)

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

获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；

确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；

基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态；所述通用组件代码用于渲染界面中复用组件的相同显示状态以及渲染每个复用组件的特殊显示状态；

其中，所述通用组件代码在用于渲染复用组件的特殊显示状态时携带目标状态变量，所述目标状态参数指示的所述目标状态变量的变量值用于被输入到所述通用组件代码，以在界面渲染对应的复用组件。

2.根据权利要求1所述的方法，其特征在于，所述基于所述组件属性确定目标组件代码，包括：

基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；

基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；

基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

3.根据权利要求1所述的方法，其特征在于，所述获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件，包括：

基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；

计算各个所述组件中对应相同图层子组件的组件属性的相似度；

根据所述相似度确定所述界面设计稿中的多个复用组件。

4.根据权利要求1所述的方法，其特征在于，所述确定所述多个复用组件的组件属性，包括：

基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；

对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

5.根据权利要求4所述的方法，其特征在于，所述对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性，包括：

将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；

将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；

将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。

6.根据权利要求2所述的方法，其特征在于，所述目标状态参数包括多个子状态参数，每个所述子状态参数用于指示对应复用组件的特殊显示状态；所述方法还包括：

在所述目标状态参数中确定目标子状态参数，将所述目标子状态参数作为所述目标状态变量的变量值输入至所述第二组件代码中，得到新第二组件代码；

基于所述第一组件代码和所述新第二组件代码，在界面上渲染所述目标子状态参数所对应的复用组件。

7.根据权利要求6所述的方法，其特征在于，所述在所述目标状态参数中确定目标子状态参数，包括：

响应于针对所述目标状态参数的选择操作，将所述选择操作所指示选择的子状态参数确定为所述目标子状态参数；或者

基于所述多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在所述多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。

8.一种前端页面的代码生成装置，其特征在于，包括：

获取单元，用于获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；

第一确定单元，用于确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；

第二确定单元，用于基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

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

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