CN108228183B

CN108228183B - 前端界面代码生成方法、装置、电子设备及存储介质

Info

Publication number: CN108228183B
Application number: CN201810031656.8A
Authority: CN
Inventors: 彭笑风; 郝田田; 顾健; 张玲; 火智英; 梁士兴; 何佳; 张�杰; 胡朝旭
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2018-01-12
Filing date: 2018-01-12
Publication date: 2022-07-12
Anticipated expiration: 2038-01-12
Also published as: CN108228183A

Abstract

本申请提供了一种前端界面代码生成方法，属于计算机技术领域，解决现有技术中前端界面代码生成方法存在的准确率低的问题。所述方法包括：从前端界面的设计稿中导出前端界面设计数据，对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息，并结合输入的配置信息和所述控件信息，生成前端界面代码。本申请公开的方法通过基于设计稿导出前端界面中的控件信息，并根据导出的控件信息结合配置信息自动生成前端界面代码，充分保留了设计稿中的界面设计信息，弥补了从截屏图片直接生成界面代码时获取界面信息不足导致的生成的界面代码不准确的缺陷，有效提高了自动生成的前端界面代码的准确性。

Description

前端界面代码生成方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种前端界面代码生成方法、装置、电子设备及存储介质。

背景技术

随着计算机技术的发展，客户端类型越来越多，为了保持产品界面的一致性，设计师设计的U I(用户界面)通常需要在不同类型的客户端显示，如网页端、PC端、移动终端等。在传统的图形用户界面开发过程中，设计师设计出的用户界面，通常需要交付给编码工程师，由编码工程师通过编写代码将图形用户界面中的界面元素布局到前端，但是，传统的界面布局方法需要编码工程师手动编写代码并布局界面元素，开发效率低。随着计算机技术的发展，现有技术中出现了一种前端界面代码生成方法，通过深度学习的方式，根据图形用户界面的设计稿的截屏图片生成前端界面代码。基于深度学习生成前端界面代码的方法相比传统技术在生成前端界面代码速度上有了很大的提升，但是截屏图片相对完整设计稿丢失了许多编程必要信息，导致生成的代码准确率很低，无法达到工程级别的使用要求。

可见，现有技术中的前端界面代码生成方法至少存在生成代码准确率低的缺陷。

发明内容

本申请提供一种前端界面代码生成方法，解决现有技术中的前端界面代码生成方法存在的准确率低的问题。

为了解决上述问题，第一方面，本申请公开了一种前端界面代码生成方法，包括：

从前端界面的设计稿中导出前端界面设计数据；

对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息；

结合输入的配置信息和所述控件信息，生成前端界面代码。

第二方面，本申请公开了一种前端界面代码生成装置，包括：

数据导出模块，用于从前端界面的设计稿中导出前端界面设计数据；

控件信息获取模块，用于对所述数据导出模块导出的前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息；

代码生成模块，用于结合输入的配置信息和所述控件信息，生成前端界面代码。

第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本申请实施例所述的前端界面代码生成方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请实施例所述的前端界面代码生成方法的步骤。

本申请实施例公开的前端界面代码生成方法，通过从前端界面的设计稿中导出前端界面设计数据，之后，对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息，并结合输入的配置信息和所述控件信息，生成前端界面代码，解决了现有技术中前端界面代码生成方法存在的准确率低的问题。本申请公开的方法通过基于设计稿导出前端界面中的控件信息，并根据导出的控件信息结合配置信息自动生成前端界面代码，充分保留了设计稿中的界面设计信息，弥补了从截屏图片直接生成界面代码时获取界面信息不足导致的生成的界面代码不准确的缺陷，有效提高了自动生成的前端界面代码的准确性，同时提高了前端界面代码生成效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例一的前端界面代码生成方法流程图；

图2是本申请实施例二的前端界面代码生成方法流程图；

图3是本申请实施例二的输入配置信息界面的示意图之一；

图4是本申请实施例二的输入配置信息界面的示意图之二；

图5是本申请实施例三的前端界面代码生成装置结构图之一；

图6是本申请实施例三的前端界面代码生成装置结构图之二。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

实施例一

本申请公开的一种前端界面代码生成方法，如图1所示，该方法包括：步骤100至步骤120。

步骤100，从前端界面的设计稿中导出前端界面设计数据。

现有技术中在进行前端界面开发时，通常是设计师先通过设计软件进行前端界面设计，然后，将设计师设计的前端界面中的图片或控件或切图等导出成图片格式的文件、HTML格式的数据文件或JSON格式的数据文件。之后，软件工程师编写界面显示代码，以便程序运行时显示前端界面。设计师常用的设计软件如：Sketch、Photoshop，Illustrator和Fireworks等。通常，设计软件支持源数据导出，也支持部分图层或界面元素导出。以Sketch为例，支持以Layer(图层)为基础进行数据导出，每个图层对应一个控件；支持整个画布导出；支持切图导出；支持分组导出等。具体实施时，可以通过设计软件的开放接口导出设计稿中的界面源数据。例如：在Sketch软件上选择“图层导出”功能，然后在图层列表中选择需要导出的图层，既可以将每个图层以单独文件的形式导出；或者，通过鼠标选择设计稿中的某个设计元素(如对话框、文本块等)，然后选择切图导出，则可以将摸个设计元素单独导出到一个文件。Sketch软件还可以将设计稿中的静态原型转化成真实的HTML代码。

仍以通过Sketch设计前端界面为例，设计稿以Layer为基础组成用户所看到的设计图。为了生成最终的代码逻辑，首先需要收集Layer的各种属性信息。每个Layer的属性信息包括：Layer唯一标志符、名称、类型、填充文本、文本总行数、文本对齐方式、字体大小、字体颜色、Layer边角半径、透明度、边框宽度、边框颜色、填充色、水平坐标、垂直坐标、宽度、高度等。Sketch中的每个Layer对应前端界面的一个控件，因此，Layer的属性信息对应控件的显示属性。将Layer的上述信息通过Sketch开放API收集并以JSON数据格式的形式进行保存，得到的JSON数据格式的数据即是前端界面的源数据。具体实施时，设计师可以通过设计软件提供的开放接口开发插件，来搜集设计稿中的设计元素的信息并以JSON数据格式的形式进行保存。设计插件的过程就是对设计软件导出的文件格式进行解析，并按照JSON数据格式进行组织、保存。

步骤110，对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息。

由于前端界面设计数据是通过设计软件的开放接口从设计稿中导出的数据，因此，导出的前端界面设计数据中包含的是设计软件的开放接口定义的字段，需要对前端界面设计数据进行数据处理，从中获取设计前端界面显示程序时需要的信息。例如，Sketch的开放接口导出的前端界面设计数据中图层类型以TextLayer、SliceLayer、BitmapLayer等字段标识，而设计前端界面显示程序时需要的信息是控件类型，如：text、imageView、rect等类型。因此，首先需要在导出的所述前端界面设计数据进行信息收集，将每种类型的图层数据转化为相应控件类型控件的控件数据，如进行视图归类和映射，确定前端界面中包括的控件类型、控件标识和显示位置、显示风格等控件信息。

步骤120，结合输入的配置信息和所述控件信息，生成前端界面代码。

具体实施时，可以通过显示配置界面，并获取用户通过配置界面输入的配置信息的方式获取前端界面的配置信息。如提供图形用户界面供用户输入所述控件信息中包括的控件的控件名称、输入根据前端界面设计数据生成的前端界面布局方案的文件名称、输入待生成的前端界面代码的运行平台类型等。具体实施时，在导出所述前端界面设计数据时，可以同时将设计稿导出为HTML文件，然后，通过浏览器打开所述HTML文件，以展示设计的前端界面。具体实施时，导出为HTML文件中包括各图层对应的控件的标识，用户可以通过所述控件标识对各控件的控件信息进行配置，如修改控件类型、设置控件分组、设置控件的切图等控件信息。

具体实施时，所述配置信息至少包括：控件名称、生成的前端界面代码文件名。获取用户输入的配置信息之后，基于控件标识将用户输入的配置信息和对所述前端界面设计数据进行信息收集和转化处理后得到的控件信息进行整合，得到生成前端界面代码的全量数据。其中，所述全量数据包括来自于配置信息的保存前端界面布局方案的文件名称、设计的前端界面中各控件的控件名称、控件位置信息、显示风格等信息。然后，基于控件位置信息对各控件进行布局，确定各控件的显示顺序和显示关系，根据确定的各控件的显示顺序和显示关系生成前端界面的布局文件，并以配置信息中指定的文件名命名存储；所述布局文件按照预先定义的格式对各控件的布局依赖关系、位置、顺序等进行描述，最后，根据所述布局文件生成显示代码。

实施例二

本申请公开的一种前端界面代码生成方法，如图2所示，该方法包括：步骤200至步骤250。

步骤200，从前端界面的设计稿中导出前端界面设计数据。

从前端界面的设计稿中导出前端界面设计数据的具体技术方案参见实施例一，此处不再赘述。

获取到前端界面设计数据之后，由于前端界面设计数据是通过设计软件的开放接口从设计稿中导出的数据，因此，导出的前端界面设计数据中包含的是设计软件的开放接口定义的字段，需要对前端界面设计数据进行数据处理，从中获取设计前端界面显示程序时需要的信息。具体实施时，首先需要对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息，包括：将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息；其中，所述控件信息包括：控件及各控件的显示属性；所述预设控件类型为待生成的前端界面代码中定义的控件类型，即程序可读的数据格式。

步骤210，将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息。

设计软件有很多种，本申请实施例中以设计软件为Sketch举例，详细说明将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息的具体技术方案。

Sketch的开放接口以图层为基础导出前端界面设计数据，其中，图层数据包括：图层标识、名称、类型、填充文本、文本总行数、文本对齐方式、字体大小、字体颜色、Layer边角半径、透明度、边框宽度、边框颜色、填充色、水平坐标、垂直坐标、宽度、高度等图层属性数据。导出的前端界面设计数据中，以不同字段标识不同的图层类型，例如:以TextLayer标识文本图层、以SliceLayer标识蒙版图层、BitmapLayer标识位图图层等。而对于不同的系统，其支持的控件类型的定义与设计软件是不同的，即其前端界面代码中定义的控件类型与设计软件不同，因此，需要首先将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件及各控件的显示属性。映射的具体过程即是根据某一类型图层的数据生成对应类型控件数据的过程。以前端界面代码中定义的控件类型包括：文本(以Text表示)、图像(以ImageView表示)、符号(以Symbol表示)、框(以Rect表示)以及其他(以Shape表示)，共五种为例，映射的具体方案为：根据TextLayer类型图层的属性数据生成Text类型控件的属性数据；根据SymbolInstance类型图层的属性数据生成symbol类型控件的属性数据；根据SliceLayer、BitmapLayer类型图层的属性数据生成imageView类型控件的属性数据；根据RectangleShape类型图层的属性数据生成Rect类型控件的属性数据；其他类型图层的属性数据生成Shape类型控件的属性数据。具体实施时，对于映射为“shape”类型控件的图层，如果映射得到的控件的属性数据满足条件：height(高度)>3，width(宽度)>3，且控件被图片填充，则将该“shape”类型控件进一步映射为“imageview”类型控件。即对于可以映射为“shape”类型控件的图层，如果其图层属性数据中指示height(高度)>3，width(宽度)>3，且该图层被图片填充，则将该图层映射为“imageview”类型控件。每个图层对应前端界面中的一个控件，通过前述方法，可以确定前端界面中包括的所有控件，得到控件列表，以及每个控件的显示属性。

优选的，将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息之后，还需要对所述前端界面中包括的控件信息进行简化处理。

步骤220，对所述前端界面中包括的控件信息进行简化处理。

具体实施时，根据映射后得到的程序可读的控件类型的属性数据，将得到的源数据进行简化处理，去除无效、冗余数据。所述对所述前端界面中包括的控件信息进行简化处理的步骤包括以下至少一项：删除被覆盖的控件；删除画板外的控件；删除各控件的显示属性中与该类别控件布局无关的数据。

首先，删除画板外的控件。

Sketch设计软件在导出设计稿时会将整个画布的图层全部导出，通常会包括不在本次设计画板之内的图层，超出画板范围的设计元素认为不是本次设计稿的一部分，因此，需要将画板范围之外的图层数据删除。具体实施时，根据Sketch设计稿中指定的本次设计画板的位置信息，包括：水平坐标、垂直坐标、宽度、高度等确定本次设计的画板范围。进一步的，根据图层的位置信息，删除画板范围外的图层对应的控件。当导出范围已经设置为画板范围时则不需要执行删除画板外的控件的步骤。

然后，删除被覆盖的控件。

在界面展示时如果两个或多个图层的相互覆盖率较高，在视觉上只能区分位于最顶部的图层，即只有最顶部图层的信息是有效的。因此，当位于下层的图层，被位于其上层的图层覆盖，并且覆盖面积超过位于下面的图层面积的预设比例，如80％时，则删除位于下面的图层对应的控件。具体实施时，设计稿中的每个图层都有图层的距离标识，例如定义为z-index，用于表示该图层距离观察者的距离，z-index越大表示该图层距离观察者越近。假设LayerA的z-index为0，LayerB的z-index为1,如果LayerB的面积大于LayerA，并且LayerA被覆盖的部分超过了LayerA的80％，观察者只能看到LayerA的一部分内容，因此，将面积小的Layer的数据删除，只保留面积大的LayerB的数据。

对于保留的控件，删除与该类别控件布局无关的数据。例如，“imageview”、“rect”、“shape”类型控件的属性数据中不包括填充文本、文本总行数、文本对齐方式、字体大小、字体颜色信息，这些信息对这三种类型控件来说是冗余数据，会占用生成的前端界面代码的空间，并可能降低前端界面代码运行效率。具体实施时，通过遍历每个控件的显示属性数据，并根据相应的类型定义，将冗余数据删除。例如，遍历imageview类型控件，将显示属性数据中的填充文本、文本总行数、文本对齐方式、字体大小、字体颜色信息等数据删除。

对控件信息进行简化处理，删除冗余数据之后，进一步结合输入的配置信息和删除冗余数据后的所述控件信息，生成前端界面代码。具体实施时，结合输入的配置信息和所述控件信息，生成前端界面代码，包括：将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据；根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案；基于确定的所述布局方案，生成所述前端界面的前端界面代码。

步骤230，将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据。

其中，所述全量数据至少包括：控件名称、控件位置信息，其中，所述控件名称取自于所述配置信息，所述控件位置信息取自于控件的所述显示属性。

具体实施时，所述配置信息包括以下任意一项或多项：保存前端界面布局方案的文件名、生成前端界面代码类型、控件类型、控件名称、生成的前端界面代码运行的平台类型、切图名称、控件分组信息、控件自适应信息。

所述将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据，包括：根据输入的配置信息修改和完善所述控件信息中每个控件的显示属性。例如：根据输入的配置信息修改控件类型、根据输入的配置信息设置控件名称、根据输入的配置信息设置控件分组、根据输入的配置信息设置控件自适应属性、根据输入的配置信息设置切图名称等。

所述将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据，包括：根据输入的配置信息设置保存前端界面代码的文件名、根据输入的配置信息设置生成的前端界面代码运行的平台类型等。

根据输入的配置信息修改和完善所述控件信息中每个控件的显示属性时包括：通过控件标识将输入的配置信息中的控件名称作为所述前端界面中相应控件在待生成的前端界面代码中的控件名称；通过控件标识将输入的配置信息中的切图名称作为所述前端界面中相应控件的图片文件名；通过控件标识根据输入的配置信息中的自适应信息，设置相应控件的显示属性信息中的自适应属性等等。

具体实施时，可以通过显示配置界面，获取用户输入的配置信息。如显示图3所示图形用户界面，供用户对照导出的控件信息输入根据前端界面设计数据中相应控件对应的前端界面布局方案的文件名、前端界面中每个控件对应的前端界面代码中的控件名称等等。配置信息还可以包括控件的分组信息、切图信息、前端界面代码运行的平台类型、控件是否自适应显示等。

具体实施时，将所述前端界面设计数据中的每个图层与预设控件类型进行映射时，由于不同的设计稿中对图层类型的定义各不相同，为了提高数据处理的效率和准确性，通常将设计稿中的图层类型初步映射到通用的预设控件类别，然后，有用户通过配置界面进行控件类型修改，以根据配置信息完善控件信息。例如，在进行图层到控件类型映射时，可能将RectangleShape和BitmapLayer都归为rect，而实际RectangleShape对应的控件类型为view，BitmapLayer对应的控件类型为imageView，因此，用户可以通过配置界面修改控件类型。

优选的，可以在导出所述前端界面设计数据时，同时导出HTML格式的前端界面设计数据，然后，基于HTML格式的前端界面设计数据在配置界面中展示前端界面中的各控件，例如通过浏览器打开导出的HTML文件，便于用户通过浏览器展示的界面选择控件，并输入该控件的配置信息，如对应的前端界面代码中的控件名称。

具体实施时，用户可以通过鼠标滑动选择待配置的控件。以图4中浏览器显示的设计稿410为例，用户可以通过鼠标滑动选择设计稿中与图层对应的控件411、412和413。用户选择浏览器展示的某个控件之后，配置软件可以获取该控件在HTML文件中的唯一控件标识，如控件411的标识LABEL_ID1；然后，用户通过在配置界面420的配置信息输入区域421输入控件411的控件名称，如“introduce”,用于在生成前端界面代码时为控件411的控件名称赋值或者在输入区域422中修改控件411的控件类型。具体实施时，可以通过在选择浏览器显示的设计稿中的控件后，通过查看网页源代码的形式获取选中的控件的标识。也可以由配置软件调用浏览器提供的接口获取鼠标选择的设计稿中控件的控件标识。配置软件还可以调用浏览器提供的接口获取鼠标选择的设计稿中控件的缩略图，并在配置界面进行显示，使用户进行可视化配置，提供给用户友好的配置界面。

具体实施时，导出的所述前端界面设计数据中还包括分割线，在设计师进行前端界面设计时，分割线用于对设计区域进行分割。可选的，在配置界面，当显示设计稿的预览图或缩略图时，通过显示分割线来辅助用户确定配置的界面区域。具体实施时，所述分割线包括设计师设计的、通过开放接口导出的分割线，还包括根据所述导出的分割线生成的辅助分割线。辅助分割线包括水平辅助分割线和竖直辅助分割线，下面以水平辅助分割线的生成方法举例，说明辅助分割线的具体生成方法。对于水平辅助分割线，根据满足宽度大于等于3、高度与画板高度的差值小于等于10且类型为“rect”“shape”的图层数据信息生成两条辅助分割线。辅助分割线的垂直位置、高分别等于图层的垂直位置、高度，辅助分割线的宽度为1，第一条辅助分割线的水平位置等于图层的水平位置，如图4中的414；第二条辅助分割线的位置等于图层的水平位置与图层宽度之和，如图4中的415。

具体实施时，由设计稿导出设计数据时，每个图层对应的控件都有一个唯一标识，该唯一标识与由设计稿导出的HTML文件中的唯一控件标识一致。因此，在将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据时，将配置信息中控件标识为TEXT_I D1的控件的控件名称text_i ntroduce作为显示信息中控件标识TEXT_ID1对应的控件的名称。具体实施时，通过控件的唯一标识，还可以通过配置界面为前端界面中的控件设置其他生成代码所需要的信息，如为文本类型控件配置是否自适应等。通过基于控件标识将输入的配置信息和所述前端界面中每个控件的显示属性进行整合，可以获得所述前端界面中每个控件的全量数据。例如，通过将输入的配置信息和所述前端界面中每个控件的显示属性进行整合，可以获得所有文本类型控件的位置信息、字体、字体颜色、是否自适应等显示属性。再例如，通过将输入的配置信息和所述前端界面中每个控件的显示属性进行整合，可以获得所有矩形类型控件的位置信息、长、宽、等显示属性。通过将输入的配置信息和所述前端界面中每个控件的显示属性进行整合，还可以确定待生成的前端界面代码运行的平台类型，以便采用相应的控件布局策略。

步骤240，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案。

当所述配置信息包括生成的前端界面代码运行的平台类型时，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案，进一步包括：通过与所述平台类型匹配的布局策略，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案。无论哪种平台类型，具体进行控件布局时，都是基于位置信息进行布局的。

具体实施时，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案，包括：基于所述全量数据中控件的位置信息对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案。例如，所述控件位置信息可以为控件的绝对位置信息，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案，包括：基于控件的绝对位置信息对所述控件进行布局，以确定所述前端界面中所有控件的布局方案；或者，基于控件的绝对位置信息，并结合所述控件的相对位置关系对所述控件进行布局，以确定所述前端界面中所有控件的布局方案。

在基于控件的绝对位置信息对所述控件进行布局，以确定所述前端界面中所有控件的布局方案时，可以根据控件的绝对位置坐标，按照从上到下、从左到右的顺序对各控件进行布局，最后确定所有控件的布局方案。但是，这种布局方法下，当某一控件的内容动态变化时，会造成显示内容别被其他控件覆盖，导致显示的内容不完整。

优选的，基于控件的绝对位置信息，并结合所述控件的相对位置关系对所述控件进行布局，以确定所述前端界面中所有控件的布局方案。以布局控件Label₁和Label₂为例详细说明基于控件的绝对位置信息，并结合所述控件的相对位置关系对所述控件进行布局的具体方案。首先，根据待布局的控件的绝对位置信息确定相对位置关系。假设Label₁的绝对位置信息为：水平位置坐标x＝10，垂直位置坐标y＝80，宽度width＝100，高度height＝32)；Label₂的绝对位置信息为：水平位置坐标x＝10，垂直位置坐标y＝122，宽度width＝100，高度height＝32，可以确定Label₂相对Label₁底部的垂直距离为10。然后，基于控件的绝对位置信息对所述控件进行初步布局。例如，基于水平位置坐标对控件Label₁和Label₂进行水平方向布局。最后，基于相对位置关系对所述控件进行最终布局。例如。以Label₁的底部为基准位置，在距离Label₁的底部垂直距离为10的位置，对Label₂进行布局。

具体实施时，针对不同的前端界面代码运行平台，可以采用不同的控件布局方法。通过与所述平台类型匹配的布局策略，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案，包括：基于所述控件的位置信息，通过模拟布局的方式确定所述控件的布局方案；或，基于所述控件的位置信息，通过容器内控件迭代的方式确定所述控件的布局方案。

以iOS平台为例，可以基于位置信息进行布局，以已经布局的控件作为参考，规划多条布局方案；然后，按照预设规则对每条布局方案进行评分；最后，选择评分最优的布局方案作为最终的空间布局方案。其中，每条布局方案用于表述控件的布局依赖关系，和控件之间的位置关系。基于所述控件的位置信息，通过模拟布局的方式确定所述控件的布局方案，包括：基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案；确定所述备选布局方案的候选评分；选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案。

在基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案时，首先，基于所述控件的位置信息确定每个未布局控件相关的已布局控件。具体实施时，在布局第一个未布局控件时，由于没有已布局控件作参考，可以将包含所有未布局控件的最小矩形，作为一个容器控件，然后，将该容器控件拆分为与容器控件大小相等，紧邻该容器控件上、下、左、右四个方向排布的虚拟控件，并将这四个虚拟控件作为已布局控件，供其他未布局控件在布局时参考。具体实施时，通过控件中心的水平距离和/或垂直距离的大小确定某个控件的相关控件。

然后，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分。其中，单项要素布局评分包括：所述单项要素布局评分包括：水平布局评分、垂直布局评分和连续性评分、包含关系评分、与右下方距离评分中的任意一项或多项。具体实施时，对于左对齐、右对齐、水平居中对齐、固定水平边距和未布局控件宽度、顶对齐、底对齐、垂直居中对齐、固定垂直边距和未布局控件高度等位置关系预设设置有不同分值，然后根据每个控件的位置信息确定两个控件的上述一项或多项得分，最后，根据位置关系得分确定所述两个控件的单项要素布局评分。本申请具体实施时，优先对左对齐和右对齐的控件进行布局，然后，判断水平居中对齐关系，最后判断边距离。如果未布局控件相对与其相关的已布局控件左对齐或右对齐，那么，该未布局控件相对与其相关的已布局控件的水平布局评分将设置为第一分值，如0分。如果未布局控件相对与其相关的已布局控件水平居中对齐，那么，该未布局控件相对与其相关的已布局控件的水平布局要素布局评分将设置为第二分值，如10分。分值越低代表布局的难度越小。

按照上述方法，可以分别确定两个相关控件的水平布局评分、垂直布局评分。

具体实施时，根据未布局控件和最后标记为已布局的控件在水平方向、垂直方向的距离，确定所述未布局控件的连续性评分；其中，所述连续性评分匹配的布局难度与所述水平方向和垂直方向的距离成正比。例如，假设控件M₄为最后标记为已布局的控件，若未布局控件A与已布局控件M₄或已布局控件中包含M₄的控件的水平距离很近，如小于50，则未布局控件A的连续性评分可以设置为-50；若未布局控件A与已布局控件M₄或已布局控件中包含M₄的控件的垂直距离很近，如小于50，则未布局控件A的连续性评分可以设置为-10。

包含关系评分根据两个控件是否存在包含关系确定。存在包含关系的控件最容易布局，因此，包含布局要素布局评分优先级最高。具体实施时，若未布局控件与已布局控件中任意一个控件存在包含关系，则将该未布局控件的包含关系评分设置为-200。

具体实施时，根据未布局控件与右下方的距离，确定所述未布局控件的与右下方距离布局评分；其中，所述与右下方距离布局评分匹配的布局难度与未布局控件与右下方的距离成反比。具体实施时，因为未布局控件首先按从左上到右下的顺序进行了排列，因此，通常先布局的控件为位置靠左上方的控件。在模拟布局过程中，如果依据其他布局要素的单一维度布局评分之和无法确定未布局控件的布局难易程度，则位置越靠近右下方的控件相对越容易布局。因此，根据未布局控件与右下方的距离，确定所述未布局控件的与右下方距离布局评分，作为补正评分。具体实施时，未布局控件与向右下方的距离越小，对应的与右下方距离布局评分越大，该右下方距离布局评分匹配未布局控件布局难度越大。

之后，根据所述单项要素布局评分，确定当前最易布局的未布局控件。

具体实施时，可以取连续性评分最小的未布局控件作为当前最易布局的未布局控件。如果存在多个连续性评分最小的未布局控件，则比较连续性评分最小的多个未布局控件的各单项要素布局评分之和。具体实施时，每个未布局控件的相关控件可能有多个，每个未布局控件对应的单项要素布局评分也可能存在多个，可以将未布局控件对应的所有单项要素布局评分的和作为该未布局控件的总布局评分，然后，进一步比较连续性评分最小的各未布局控件的总布局评分，并将总布局评分最小的未布局控件确定为当前最易布局的未布局控件。若总布局评分最小的未布局控件也存在多个，则进一步比较总布局评分最小的各未布局控件的与右下方距离布局评分，将与右下方距离布局评分确定为当前最易布局的未布局控件。

并将所述当前最易布局的未布局控件标记为已布局控件。

依此方法，每次在待布局的控件中确定一个最易布局的控件，标记为已布局控件，直至所有控件都标记为已布局控件。控件被标记为已布局控件的顺序，就是各控件的布局顺序。按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案。

具体实施时，还可以进一步对每一条控件布局方案进行评估，选择一条最优的控件布局方案。

对于安卓平台，可以基于所述控件的位置信息，通过容器内控件迭代的方式确定所述控件的布局方案。容器的包容关系以及容器的类型确定了各容器的布局方案。例如，将所有未布局控件加入未指定容器类型的根容器；然后，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器；最后，基于各容器以及其包含的子容器的容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案。

具体实施时，采用与容器类型匹配的控件布局策略，按照由子容器到根容器的顺序，依次确定各容器内控件的布局方案。首先布局最底层的子容器中的控件，然后再布局该子容器的父容器中的控件，直至布局完根容器中的所有控件。例如，当容器类型为相对容器时，确定优先布局控件；按照与父容器的距离由小到大的顺序，依次对所述优先布局控件及依赖所述优先布局控件的控件进行布局。具体实施时，确定的所述优先布局控件为：在容器内的最左边、最右边、最上边、最下边或中间的控件。

所述布局方案按照预先定义的格式和文件名进行存储，具体实施时，布局方案可以存储为JSON文件，在布局方案中，对各控件的布局依赖关系、位置、顺序等通过数据结构或函数或等式关系进行描述。

步骤250，基于确定的所述布局方案，生成所述前端界面的前端界面代码。

当所述配置信息包括生成的前端界面代码运行的平台类型时，所述基于确定的所述布局方案，生成所述前端界面的前端界面代码，进一步包括：基于确定的所述布局方案，生成所述前端界面的与所述平台类型匹配的前端界面代码。若平台类型为iOS，则生成iOS平台运行的代码，若平台类型为安卓，则生成安卓平台运行的代码。

具体实施时，生成的布局方案为采用JSON或XML或者其他脚本语言等非常接近实际代码的描述，只需要很少且机械化的工作就能直接转化前端界面代码。例如，对于布局方案：控件B依赖控件A布局，且控件B和控件A左对齐，则可以生成如下前端代码：b.left＝a.left。

本申请实施例公开的前端界面代码生成方法，通过从前端界面的设计稿中获取前端界面设计数据，将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息，然后，对所述前端界面中包括的控件信息进行简化处理，最后根据输入的配置信息和所述控件信息，生成前端界面代码，解决了现有技术中前端界面代码生成方法存在的准确率低的问题。本申请公开的方法通过基于设计稿导出前端界面中的控件信息，并根据导出的控件信息结合配置信息自动生成前端界面代码，充分保留了设计稿中的界面设计信息，弥补了从截屏图片直接生成界面代码时获取界面信息不足导致的生成的界面代码不准确的缺陷，有效提高了自动生成的前端界面代码的准确性，同时提高了前端界面代码生成效率。通过对由设计稿导出的控件数据进行简化处理，删除了被覆盖的控件的数据和非本次设计的数据，以及与控件布局无关的数据，使生成的前端界面代码更精练。通过删除冗余数据，可以减小生成的前端界面代码的空间，并能提高前端界面代码运行效率。

进一步的，通过设置平台类型，可以由一份设计稿自动生成运行在不同平台上的前端界面代码，进一步提升了前端代码生成效率。

实施例三

本申请公开的一种前端界面代码生成装置，如图5所示，所述装置包括：

数据导出模块510，用于从前端界面的设计稿中导出前端界面设计数据；

控件信息获取模块520，用于对所述数据导出模块510导出的前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息；

代码生成模块530，用于结合输入的配置信息和所述控件信息，生成前端界面代码。

可选的，如图6所示，所述控件信息获取模块520进一步包括：

控件信息转化单元5201，用于将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息；其中，所述控件信息包括：控件及各控件的显示属性；所述预设控件类型为待生成的前端界面代码中定义的控件类型。

可选的，如图6所示，所述控件信息获取模块520还包括：

控件信息简化单元5202，用于对所述前端界面中包括的控件信息进行简化处理。

可选的，所述对所述前端界面中包括的控件信息进行简化处理的包括以下至少一项：删除被覆盖的控件；删除画板外的控件；删除各控件的显示属性中与该类别控件布局无关的数据。

如图6所示，所述代码生成模块530包括：

数据整合单元5301，用于将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据；

控件布局单元5302，用于根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案；

界面代码生成单元5303，用于基于确定的所述布局方案，生成所述前端界面的前端界面代码。

可选的，所述配置信息包括生成的前端界面代码运行的平台类型，所述控件布局单元5302进一步用于：

通过与所述平台类型匹配的布局策略，根据所述全量数据对所述每个控件进行布局，确定所述前端界面中所有控件的布局方案；

所述界面代码生成单元5303进一步用于：

基于确定的所述布局方案，生成所述前端界面的与所述平台类型匹配的前端界面代码。

可选的，所述全量数据至少包括：控件名称、控件位置信息，其中，所述控件名称取自于所述配置信息，所述控件位置信息取自于控件的所述显示属性。

可选的，所述控件位置信息为控件的绝对位置信息，所述控件布局单元进一步包括：

第一控件布局子单元(图中未示出)，用于基于控件的绝对位置信息对所述控件进行布局，以确定所述前端界面中所有控件的布局方案；或者，

第二控件布局子单元(图中未示出)，用于基于控件的绝对位置信息，并结合所述控件的相对位置关系对所述控件进行布局，以确定所述前端界面中所有控件的布局方案。

可选的，第二控件布局子单元进一步用于：基于所述控件的位置信息，通过模拟布局的方式确定所述控件的布局方案；或，基于所述控件的位置信息，通过容器内控件迭代的方式确定所述控件的布局方案。

可选的，所述配置信息包括以下任意一项或多项：保存前端界面布局方案的文件名、生成前端界面代码类型、控件类型、控件名称、生成的前端界面代码运行的平台类型、切图名称、控件分组信息、控件自适应信息。

本申请实施例公开的前端界面代码生成装置，通过从前端界面的设计稿中导出前端界面设计数据，之后，对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息，并结合输入的配置信息和所述控件信息，生成前端界面代码，解决了现有技术中前端界面代码生成方法存在的准确率低的问题。本申请公开的方法通过基于设计稿导出前端界面中的控件信息，并根据导出的控件信息结合配置信息自动生成前端界面代码，充分保留了设计稿中的界面设计信息，弥补了从截屏图片直接生成界面代码时获取界面信息不足导致的生成的界面代码不准确的缺陷，有效提高了自动生成的前端界面代码的准确性，同时提高了前端界面代码生成效率。通过对控件信息进行进一步处理，通过删除冗余数据，可以减小生成的前端界面代码的空间，并能提高前端界面代码运行效率。

相应的，本申请还公开了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例一和实施例二所述的前端界面代码生成方法。所述电子设备可以为移动终端、智能电话、导航仪、个人数字助理、平板电脑等。

本申请还公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例一和实施例二所述的前端界面代码生成方法的步骤。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本申请提供的一种前端界面代码生成方法及装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

Claims

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

从前端界面的设计稿中导出前端界面设计数据；

结合输入的配置信息和所述控件信息，生成前端界面代码;

所述对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息的步骤，包括：

将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息；其中，所述预设控件类型为待生成的前端界面代码中定义的控件类型；

所述结合输入的配置信息和所述控件信息，生成前端界面代码的步骤，包括：

将输入的配置信息和所述控件信息进行整合，获得布局所述前端界面需要的全量数据；所述配置信息包括以下任意一项或多项：保存前端界面布局方案的文件名、生成前端界面代码类型、控件类型、控件名称、生成的前端界面代码运行的平台类型、切图名称、控件分组信息、控件自适应信息；

根据所述全量数据对每个控件进行布局，确定所述前端界面中所有控件的布局方案；

基于确定的所述布局方案，生成所述前端界面的前端界面代码。

2.根据权利要求1所述的方法，其特征在于，所述将所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息步骤之后，还包括：

对所述前端界面中包括的控件信息进行简化处理。

3.根据权利要求2所述的方法，其特征在于，所述控件信息包括：控件及各控件的显示属性，所述对所述前端界面中包括的控件进行简化处理的步骤包括以下至少一项：

删除被覆盖的控件；

删除画板外的控件；

删除各控件的显示属性中与该控件类型无关的数据。

4.根据权利要求1所述的方法，其特征在于，所述配置信息包括生成的前端界面代码运行的平台类型，所述根据所述全量数据对每个控件进行布局，确定所述前端界面中所有控件的布局方案的步骤，包括：

通过与所述平台类型匹配的布局策略，根据所述全量数据对每个控件进行布局，确定所述前端界面中所有控件的布局方案；

所述基于确定的所述布局方案，生成所述前端界面的前端界面代码的步骤，包括：

5.根据权利要求4所述的方法，其特征在于，所述全量数据包括控件的绝对位置信息，所述根据所述全量数据对每个控件进行布局，确定所述前端界面中所有控件的布局方案的步骤，包括：

基于控件的绝对位置信息对所述控件进行布局，以确定所述前端界面中所有控件的布局方案；或者，

基于控件的绝对位置信息，并结合所述控件的相对位置关系对所述控件进行布局，以确定所述前端界面中所有控件的布局方案。

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

代码生成模块，用于结合输入的配置信息和所述控件信息，生成前端界面代码;

所述控件信息获取模块还用于：

所述前端界面设计数据中的每个图层与预设控件类型进行映射，以初步确定所述前端界面中包括的控件信息；其中，所述预设控件类型为待生成的前端界面代码中定义的控件类型；

所述代码生成模块还用于：

7.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至5任意一项所述的前端界面代码生成方法。

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