CN115061690A - 一种自动化代码生成方法以及装置 - Google Patents

Abstract

本发明提供一种自动化代码生成方法及装置，该方法包括：基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于目标参数生成框架代码；通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及页面元素的属性值将页面元素进行预处理；基于预处理后的页面元素以及对应的属性值、预设的布局规则将页面元素排布在目标页面的布局中，基于目标页面的布局生成页面布局代码；输出框架代码以及所述页面布局代码。本发明基于网络接口文档生成框架代码，提升了框架代码的生成效率。基于布局规则将标注文件中的页面元素排布在目标页面布局，生成贴合人工布局习惯的UI布局代码。

Description

一种自动化代码生成方法以及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种自动化代码生成方法及装置。

背景技术

在客户端开发过程中，开发者需要花费较长时间开发UI布局代码及重复度较高的框架代码，较大地制约了客户端的开发效率。现有的UI布局代码开发技术，基于预制的模板代码实现，需要大量模板代码的支撑，维护成本较高且不符合人工布局的风格习惯，不利于后期修改和维护。

发明内容

本发明提供一种自动化代码生成方法及装置，用以解决现有技术中依赖模板代码生成UI布局代码以及框架代码生成效率低的缺陷，实现生成符合人工布局习惯的UI布局代码，以及提升框架代码的生成效率。

本发明提供一种自动化代码生成方法，包括：

基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码；

通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；

基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；

输出所述框架代码以及所述页面布局代码。

根据本发明提供的一种自动化代码生成方法，所述预设条件包括第一预设条件以及第二预设条件；

所述解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理，包括：

解析所述标注文件得到页面元素以及对应的属性值；

基于所述第一预设条件以及所述页面元素的属性值确定多余的页面元素并删除；

确定删除后的页面元素之间的层级关系；其中，位于上层的页面元素为父节点，位于下层的页面元素为对应的子节点；

将具有单一子节点且符合所述第二预设条件的父节点删除，并将删除的所述父节点的子节点提升到所述父节点所在层级。

根据本发明提供的一种自动化代码生成方法，所述页面元素的属性值包括页面元素的第一位置坐标、类型、宽度和高度；

所述基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码，包括：

根据所述预处理后的页面元素之间的层级关系确定对应同一父节点的子节点，基于所述子节点的页面元素的第一位置坐标确定每个所述子节点的页面元素的左侧元素和上方元素；

基于所述子节点的页面元素的类型、所述子节点的页面元素的左侧元素和上方元素的类型以及所述布局规则，确定对应的元素间隔规则；

基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中；

基于所述目标页面的布局生成页面布局代码。

根据本发明提供的一种自动化代码生成方法，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中之后，还包括：

基于所述子节点的页面元素在目标页面布局中的第二位置坐标，确定位于所述父节点对应的目标页面的布局中最右侧的目标元素；

计算所述目标元素与所述布局的右边界的第一距离，以及与所述目标元素的左侧元素的第二距离；

将所述第一距离、第二距离分别与第一阈值、第二阈值进行比较；

若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于所述元素间隔规则、所述页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

根据本发明提供的一种自动化代码生成方法，所述基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度将所述子节点的页面元素排布在所述父节点的目标页面的布局中，包括：

基于所述元素间隔规则、所述左侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点的页面元素的第一位置坐标，确定所述子节点的页面元素与左侧元素的第一间距以及与上方元素的第二间距；

基于左侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第一间距、第二间距以及所述子节点的页面元素的宽度和高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中。

根据本发明提供的一种自动化代码生成方法，所述若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于元素间隔规则、页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中，包括：

基于所述元素间隔规则、所述右侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点对应的页面元素的第一位置坐标，确定所述子节点的页面元素与右侧元素的第三间距以及与上方元素的第四间距；

基于右侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第三间距、第四间距以及所述子节点的页面元素的宽度和高度，将所述页面元素排布在所述父节点的目标页面的布局中。

本发明还提供一种自动化代码生成装置，包括：

第一处理单元，用于基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成模式的框架代码；

第二处理单元，用于通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；

第三处理单元，用于基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；

第四处理单元，用于输出所述框架代码以及所述页面布局代码。

根据本发明提供的一种自动化代码生成装置，所述预设条件包括第一预设条件以及第二预设条件；

所述第二处理单元还用于：

解析所述标注文件得到页面元素以及对应的属性值；

基于所述第一预设条件以及所述页面元素的属性值确定多余的页面元素并删除；

确定删除后的页面元素之间的层级关系；其中，位于上层的页面元素为父节点，位于下层的页面元素为对应的子节点；

将具有单一子节点且符合所述第二预设条件的父节点删除，并将删除的所述父节点的子节点提升到所述父节点所在层级。

根据本发明提供的一种自动化代码生成装置，所述页面元素的属性值包括页面元素的第一位置坐标、类型、宽度和高度；

所述第三处理单元还用于：

根据所述预处理后的页面元素之间的层级关系确定对应同一父节点的子节点，基于所述子节点的页面元素的第一位置坐标确定每个所述子节点的页面元素的左侧元素和上方元素；

基于所述子节点的页面元素的类型、所述子节点的页面元素的左侧元素和上方元素的类型以及所述布局规则，确定对应的元素间隔规则；

基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中；

基于所述目标页面的布局生成页面布局代码。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元还用于：

基于所述子节点的页面元素在目标页面布局中的第二位置坐标，确定位于所述父节点对应的目标页面的布局中最右侧的目标元素；

计算所述目标元素与所述布局的右边界的第一距离，以及与所述目标元素的左侧元素的第二距离；

将所述第一距离、第二距离分别与第一阈值、第二阈值进行比较；

若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于所述元素间隔规则、所述页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元还用于：

基于所述元素间隔规则、所述左侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点的页面元素的第一位置坐标，确定所述子节点的页面元素与左侧元素的第一间距以及与上方元素的第二间距；

基于左侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第一间距、第二间距以及所述子节点的页面元素的宽度和高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元还用于：

基于所述元素间隔规则、所述右侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点对应的页面元素的第一位置坐标，确定所述子节点的页面元素与右侧元素的第三间距以及与上方元素的第四间距；

基于右侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第三间距、第四间距以及所述子节点的页面元素的宽度和高度，将所述页面元素排布在所述父节点的目标页面的布局中。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述自动化代码生成方法的步骤。

本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述自动化代码生成方法的步骤。

本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述自动化代码生成方法的步骤。

本发明提供的自动化代码生成方法及装置，通过基于预设的解析规则对从服务端获取的网络接口文档进行解析得到目标参数，然后基于目标参数生成框架代码，实现基于网络接口文档生成框架代码，极大地提升了框架代码的生成效率。通过解析标注文件得到页面元素以及对应的属性值，基于预设条件以及页面元素的属性值将所述页面元素进行预处理，然后基于预处理后的页面元素以及对应的属性值、预设的布局规则将页面元素排布在目标页面的布局中，最后基于目标页面的布局生成页面布局代码，从而实现不依赖模板代码，生成贴合人工布局习惯的UI布局代码。

附图说明

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

图1是本发明提供的自动化代码生成方法的流程示意图之一；

图2是本发明提供的自动化代码生成工具的架构图；

图3是本发明提供的自动化代码生成方法的流程示意图之二；

图4是本发明提供的自动化代码生成方法的流程示意图之三；

图5是本发明提供的自动化代码生成方法的流程示意图之四；

图6是本发明提供的自动化代码生成方法的流程示意图之五；

图7是本发明提供的自动化代码生成方法的流程示意图之六；

图8是本发明提供的自动化代码生成装置的结构示意图；

图9是本发明提供的电子设备的结构示意图。

具体实施方式

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

下面结合图1-图9描述本发明各实施例的技术方案。

图1为本发明提供的自动化代码生成方法的流程示意图，如图1所示，包括：

步骤110、基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码。

具体来说，本发明基于客户端与服务端的网络接口文档，帮助开发者生成标准的MVP结构的框架代码，使开发者不必关注项目的代码结构，专注于业务逻辑的开发。其中，网络接口文档是客户端和服务端进行数据交互的协议约束文档，该文档定义了交互的域名地址，请求参数、响应参数以及网络请求方式等。基于预设的解析规则对网络接口文档进行解析得到目标参数，基于目标参数生成MVP框架代码。其中，MVP框架包括Model层、View层以及Presenter层。Model层是数据服务层，负责数据的增删改查；View层是视图界面层，负责UI的渲染、子视图的组织、UI事件、用户交互等；Presenter层在View层和Model层之间起到桥梁的作用，封装了业务复杂度，将UI与业务逻辑拆分，使UI和业务逻辑可以独立进行变化。在Android环境下，支持Activity、presenter、bean以及网络接口调用方法的自动化生成，实现页面数据与UI元素的数据绑定，并将网络接口响应的结构化数据(json格式)转化成java bean实体类等。

步骤120、通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理。

具体来说，基于sketch measure插件导出sketch标注文件并进行数据解析，得到sketch标注文件中的页面元素以及页面元素的属性值(json格式)，比如页面元素的类型(文本、图片、列表、shape图形)、宽度、高度等。基于预设条件以及页面元素的属性值对页面元素进行预处理，比如，识别类型为非文本且宽高小于12的页面元素，以及类型是shape图形且没有圆角、高度大于80、宽度小于300的页面元素并删除。

步骤130、基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码。

具体来说，预处理后的页面元素提供生成Android/ios原生页面代码的能力，根据预设的布局规则进行模式匹配生成XML格式的布局代码。为实现页面元素在客户端与标注文件中相似的显示效果，需要基于标注文件设置的页面元素间的相对位置关系，进行拉伸或固定间距的布局处理，所以预先定义一系列布局模式，比如图片与其对应的文本采用固定间隔的方式。基于页面元素的属性值进行布局模式的匹配，从而将预处理后的页面元素排布在目标页面中，然后基于目标页面的布局生成XML格式的布局代码。

需要说明的是，现有的布局代码生成技术仅支持小程序、Vue、React Native等前端代码，但是暂不支持Android/ios native界面的生成，无法很好的适配Android/ios客户端的布局方式和风格，而本发明基于Android的布局规则将页面元素进行布局并生成相应的页面布局代码，解决现有技术不支持生成Android/ios native界面的缺陷。

步骤140、输出所述框架代码以及所述页面布局代码。

此外，本发明还支持项目初始化搭建，包括必要的基础依赖以及第三方SDK等。

需要说明的是，基于本发明提供的自动化代码生成方法，能够构建相应的自动化代码生成工具，其架构图如图2所示，包括基础环境层、基础数据加工引擎、自动化代码输出引擎以及用户层。其中，基础环境层提供基础能力，比如网络请求框架、机构化json数据解析处理模块、第三方SDK依赖库等。基础数据加工引擎提供网络接口文档的解析和构造数据的能力(API接口识别、数据结构的生成、MVP框架代码的生成)，以及基于sketch measure插件导出标注文件的json数据解析、UI元素源数据的预处理能力。自动化代码输出引擎基于基础数据加工引擎的输出数据提供生成Android/ios的Native原生页面代码能力，根据预置布局规则生成符合预期的页面布局代码；基于用户设置的代码包名结构，在项目代码文件目录下生成相关的源码文件；基于项目需求生成gradle编译打包脚本、日志监控、数据埋点、网络框架、图片加载框架等第三方sdk及启动初始化方法等。用户层为使用者提供参数输入的UI界面，包括sketch measure插件导出的标注文件的录入及定义布局代码名称的录入对话框，录入网络API接口文档数据及生成文件名称的录入对话框，以及用户录入相关配置参数的对话框。

本发明提供的自动化代码生成方法，通过基于预设的解析规则对从服务端获取的网络接口文档进行解析得到目标参数，然后基于目标参数生成框架代码，实现基于网络接口文档生成框架代码，极大地提升了框架代码的生成效率。通过解析标注文件得到页面元素以及对应的属性值，基于预设条件以及页面元素的属性值将所述页面元素进行预处理，然后基于预处理后的页面元素以及对应的属性值、预设的布局规则将页面元素排布在目标页面的布局中，最后基于目标页面的布局生成页面布局代码，从而实现不依赖模板代码，生成贴合人工布局习惯的UI布局代码。

在本发明一实施例中，如图3所示，步骤120具体包括如下步骤：

步骤310、解析所述标注文件得到页面元素以及对应的属性值。

具体来说，基于sketch measure插件导出sketch标注文件并进行数据解析，得到sketch标注文件中的页面元素以及页面元素的属性值，比如页面元素的类型(文本、图片、列表、shape图形)、宽度、高度等。

步骤320、基于所述第一预设条件以及所述页面元素的属性值确定多余的页面元素并删除。

具体来说，通过解析标注文件得到的页面元素中存在不需要在目标页面布局的多余元素，所以预先设置条件使得满足该条件的页面元素被删除。在本发明中，第一预设条件包括类型是shape图形、没有圆角、高度大于80以及宽度小于300；类型为非文本且宽高小于12；高度处于0-44，被识别为状态栏。

步骤330、确定删除后的页面元素之间的层级关系；其中，位于上层的页面元素为父节点，位于下层的页面元素为对应的子节点。

具体来说，如果页面元素A可以被放到页面元素B中，则页面元素A的子节点包括页面元素B，页面元素B的父节点为页面元素A。

步骤340、将具有单一子节点且符合所述第二预设条件的父节点删除，并将删除的所述父节点的子节点提升到所述父节点所在层级。

具体来说，只有一个子节点且满足特定条件的父节点，通常对于生成布局是无用的，并且会干扰页面元素在目标页面的排布，降低布局效率，所以在预处理阶段需要将此类父节点删除并调整页面元素间的层级关系，进而形成Json树，其中每个页面元素以及对应的属性值以json格式表示。

在本发明一实施例中，创建目标页面的根节点以约束整体布局，然后对已构建的json树从根节点开始采用深度优先或广度优先的方式遍历每一父节点及其子节点，对于每一子节点的页面元素执行如图4所示的步骤，具体包括：

步骤410、根据所述预处理后的页面元素之间的层级关系确定对应同一父节点的子节点，基于所述子节点的页面元素的第一位置坐标确定每个所述子节点的页面元素的左侧元素和上方元素。

具体来说，页面元素的属性值包括页面元素的第一位置坐标、类型、宽度和高度，其中，页面元素的第一位置坐标通常为页面元素的左上顶点的位置坐标，计算页面元素的左上顶点的直线距离，以确定页面元素之间的位置关系，包括每个页面元素的左侧元素与上方元素，将左侧元素与上房元素作为每个页面元素的进行排布所依赖的基准点。

步骤420、基于所述子节点的页面元素的类型、所述子节点的页面元素的左侧元素以及上方元素的类型以及所述布局规则，确定对应的元素间隔规则。

具体来说，为实现页面元素在客户端与标注文件中相似的显示效果，需要基于标注文件设置的页面元素间的相对位置关系，进行拉伸或固定间距的布局处理，所以预先定义一系列元素间隔规则，比如某一元素间隔规则是图片与位于其下方的文本采用固定间隔的方式。将子节点的页面元素的类型、子节点的页面元素的左侧元素和上方元素的类型与布局规则进行匹配，确定对应的元素间隔规则，比如若当前页面元素的类型为文本、其上方元素为对应的图片，则能够与上述元素间隔规则匹配。

步骤430、基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

如图5所示，步骤430具体包括：

步骤510、基于所述元素间隔规则、所述左侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点的页面元素的第一位置坐标，确定所述子节点的页面元素与左侧元素的第一间距以及与上方元素的第二间距。

具体来说，假设当前页面元素的类型为文本，其上方元素为对应的图片，其左侧元素的类型为列表，基于图片以及文本的第一位置坐标确定二者的间隔距离(第二间距)，文本与列表的间隔距离(第一间距)也采用前述方法确定。

步骤520、基于左侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第一间距、第二间距以及所述子节点的页面元素的宽度和高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中。

具体来说，基于上一步骤得到的文本与列表的第一间距、文本与图片的第二间距，列表在目标页面布局中的第二位置坐标、图片在目标页面布局中的第二位置坐标以及文本所在区域的宽度和高度，能够确定文本在目标页面中的第二位置坐标。

步骤440、基于所述目标页面的布局生成页面布局代码。

在本发明一实施例中，通常情况下采用左依赖布局方式，对于每个页面元素，基于其左侧元素以及上方元素确定其在目标页面布局中的位置，但是在特殊情况下，采用左依赖布局会导致子节点的页面元素距离父节点的右边界距离过短，所以需要选择右依赖布局方式，如图6所示，具体包括如下步骤：

步骤610、基于所述子节点的页面元素在目标页面布局中的第二位置坐标，确定位于所述父节点对应的目标页面的布局中最右侧的目标元素。

步骤620、计算所述目标元素与所述布局的右边界的第一距离，以及与所述目标元素的左侧元素的第二距离。

步骤630、将所述第一距离、第二距离分别与第一阈值、第二阈值进行比较。

具体来说，设置第一阈值是10dp，第二阈值是30dp，将第一距离、第二距离分别与10dp以及30dp进行比较。

步骤640、若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于所述元素间隔规则、所述页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

如图7所示，步骤640具体包括：

步骤710、基于所述元素间隔规则、所述右侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点对应的页面元素的第一位置坐标，确定所述子节点的页面元素与右侧元素的第三间距以及与上方元素的第四间距。

具体来说，假设当前页面元素的类型为文本，其上方元素为对应的图片，其右侧元素的类型为列表，基于图片以及文本的第一位置坐标确定二者的间隔距离(第四间距)，文本与列表的间隔距离(第三间距)也采用前述方法确定。

步骤720、基于右侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第三间距、第四间距以及所述子节点的页面元素的宽度和高度，将所述页面元素排布在所述父节点的目标页面的布局中。

具体来说，基于上一步骤得到的文本与列表的第三间距、文本与图片的第四间距，列表在目标页面布局中的第二位置坐标、图片在目标页面布局中的第二位置坐标以及文本所在区域的宽度和高度，能够确定文本在目标页面中的第二位置坐标。

下面对本发明提供的自动化代码生成装置进行描述，下文描述的自动化代码生成装置与上文描述的自动化代码生成方法可相互对应参照。

图8为本发明提供的自动化代码生成装置的结构示意图，如图8所示，包括：

第一处理单元810，用于基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成模式的框架代码；

第二处理单元820，用于通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；

第三处理单元830，用于基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；

第四处理单元840，用于输出所述框架代码以及所述页面布局代码。

本发明提供的自动化代码生成装置，通过基于预设的解析规则对从服务端获取的网络接口文档进行解析得到目标参数，然后基于目标参数生成框架代码，实现基于网络接口文档生成框架代码，极大地提升了框架代码的生成效率。通过解析标注文件得到页面元素以及对应的属性值，基于预设条件以及页面元素的属性值将所述页面元素进行预处理，然后基于预处理后的页面元素以及对应的属性值、预设的布局规则将页面元素排布在目标页面的布局中，最后基于目标页面的布局生成页面布局代码，从而实现不依赖模板代码，生成贴合人工布局习惯的UI布局代码。

根据本发明提供的一种自动化代码生成装置，所述预设条件包括第一预设条件以及第二预设条件；

所述第二处理单元820还用于：

解析所述标注文件得到页面元素以及对应的属性值；

基于所述第一预设条件以及所述页面元素的属性值确定多余的页面元素并删除；

确定删除后的页面元素之间的层级关系；其中，位于上层的页面元素为父节点，位于下层的页面元素为对应的子节点；

将具有单一子节点且符合所述第二预设条件的父节点删除，并将删除的所述父节点的子节点提升到所述父节点所在层级。

根据本发明提供的一种自动化代码生成装置，所述页面元素的属性值包括页面元素的第一位置坐标、属性、宽度和高度；

所述第三处理单元830还用于：

根据所述预处理后的页面元素之间的层级关系确定对应同一父节点的子节点，基于所述子节点的页面元素的第一位置坐标确定每个所述子节点的页面元素的左侧元素和上方元素；

基于所述子节点的页面元素的类型、所述子节点的页面元素的左侧元素和上方元素的类型以及所述布局规则，确定对应的元素间隔规则；

基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中；

基于所述目标页面的布局生成页面布局代码。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元830还用于：

基于所述子节点的页面元素在目标页面布局中的第二位置坐标，确定位于所述父节点对应的目标页面的布局中最右侧的目标元素；

计算所述目标元素与所述布局的右边界的第一距离，以及与所述目标元素的左侧元素的第二距离；

将所述第一距离、第二距离分别与第一阈值、第二阈值进行比较；

若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于所述元素间隔规则、所述页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元830还用于：

基于所述元素间隔规则、所述左侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点的页面元素的第一位置坐标，确定所述子节点的页面元素与左侧元素的第一间距以及与上方元素的第二间距；

基于左侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第一间距、第二间距以及所述子节点的页面元素的宽度和高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中。

根据本发明提供的一种自动化代码生成装置，所述第三处理单元830还用于：

基于所述元素间隔规则、所述右侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点对应的页面元素的第一位置坐标，确定所述子节点的页面元素与右侧元素的第三间距以及与上方元素的第四间距；

基于右侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第三间距、第四间距以及所述子节点的页面元素的宽度和高度，将所述页面元素排布在所述父节点的目标页面的布局中。

图9示例了一种电子设备的实体结构示意图，如图9所示，该电子设备可以包括：处理器(processor)910、通信接口(Communications Interface)920、存储器(memory)930和通信总线940，其中，处理器910，通信接口920，存储器830通过通信总线940完成相互间的通信。处理器910可以调用存储器930中的逻辑指令，以执行自动化代码生成方法，该方法包括：基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码；通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；输出所述框架代码以及所述页面布局代码。

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

另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法所提供的自动化代码生成方法，该方法包括：基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码；通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；输出所述框架代码以及所述页面布局代码。

又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各提供的自动化代码生成方法，该方法包括：基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码；通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；输出所述框架代码以及所述页面布局代码。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

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

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种自动化代码生成方法，其特征在于，包括：

基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成框架代码；

通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；

基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；

输出所述框架代码以及所述页面布局代码。

2.根据权利要求1所述的自动化代码生成方法，其特征在于，所述预设条件包括第一预设条件以及第二预设条件；

所述解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理，包括：

解析所述标注文件得到页面元素以及对应的属性值；

基于所述第一预设条件以及所述页面元素的属性值确定多余的页面元素并删除；

确定删除后的页面元素之间的层级关系；其中，位于上层的页面元素为父节点，位于下层的页面元素为对应的子节点；

将具有单一子节点且符合所述第二预设条件的父节点删除，并将删除的所述父节点的子节点提升到所述父节点所在层级。

3.根据权利要求2所述的自动化代码生成方法，其特征在于，所述页面元素的属性值包括页面元素的第一位置坐标、类型、宽度和高度；

所述基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码，包括：

根据所述预处理后的页面元素之间的层级关系确定对应同一父节点的子节点，基于所述子节点的页面元素的第一位置坐标确定每个所述子节点的页面元素的左侧元素和上方元素；

基于所述子节点的页面元素的类型、所述子节点的页面元素的左侧元素和上方元素的类型以及所述布局规则，确定对应的元素间隔规则；

基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中；

基于所述目标页面的布局生成页面布局代码。

4.根据权利要求3所述的自动化代码生成方法，其特征在于，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中之后，还包括：

基于所述子节点的页面元素在目标页面布局中的第二位置坐标，确定位于所述父节点对应的目标页面的布局中最右侧的目标元素；

计算所述目标元素与所述布局的右边界的第一距离，以及与所述目标元素的左侧元素的第二距离；

将所述第一距离、第二距离分别与第一阈值、第二阈值进行比较；

若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于所述元素间隔规则、所述页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点对应的目标页面的布局中。

5.根据权利要求3所述的自动化代码生成方法，其特征在于，所述基于所述元素间隔规则、左侧元素的第一位置坐标以及左侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度将所述子节点的页面元素排布在所述父节点的目标页面的布局中，包括：

基于所述元素间隔规则、所述左侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点的页面元素的第一位置坐标，确定所述子节点的页面元素与左侧元素的第一间距以及与上方元素的第二间距；

基于左侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第一间距、第二间距以及所述子节点的页面元素的宽度和高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中。

6.根据权利要求4所述的自动化代码生成方法，其特征在于，所述若所述第一距离小于所述第一阈值且所述第二距离大于所述第二阈值，基于元素间隔规则、页面元素的右侧元素的第一位置坐标以及右侧元素在目标页面布局中的第二位置坐标、上方元素的第一位置坐标以及上方元素在目标页面布局中的第二位置坐标、所述子节点的页面元素的第一位置坐标、宽度以及高度，将所述子节点的页面元素排布在所述父节点的目标页面的布局中，包括：

基于所述元素间隔规则、所述右侧元素的第一位置坐标、所述上方元素的第一位置坐标以及所述子节点对应的页面元素的第一位置坐标，确定所述子节点的页面元素与右侧元素的第三间距以及与上方元素的第四间距；

基于右侧元素在目标页面布局中的第二位置坐标、上方元素在目标页面布局中的第二位置坐标、第三间距、第四间距以及所述子节点的页面元素的宽度和高度，将所述页面元素排布在所述父节点的目标页面的布局中。

7.一种自动化代码生成装置，其特征在于，包括：

第一处理单元，用于基于预设的解析规则对从服务端获取的网络接口文档进行解析，得到目标参数，基于所述目标参数生成模式的框架代码；

第二处理单元，用于通过插件获取描述页面元素的标注文件，解析所述标注文件得到页面元素以及对应的属性值，基于预设条件以及所述页面元素的属性值将所述页面元素进行预处理；

第三处理单元，用于基于预处理后的页面元素以及对应的属性值、预设的布局规则将所述页面元素排布在目标页面的布局中，基于所述目标页面的布局生成页面布局代码；

第四处理单元，用于输出所述框架代码以及所述页面布局代码。

8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述自动化代码生成方法的步骤。

9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述自动化代码生成方法的步骤。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述自动化代码生成方法的步骤。

Images