界面代码的生成方法及设备技术

本申请实施例提供一种界面代码的生成方法及设备。其中，方法包括如下的步骤：确定待处理图像文件的界面元素信息；基于所述界面元素信息，确定界面的布局信息；根据所述布局信息，生成界面代码。本申请实施例提供的技术方案中，通过对待处理图像文件的处理进行界面代码的自动生成，不仅提高开发效率以及开发周期，还能为编程人员减负。

【技术实现步骤摘要】
界面代码的生成方法及设备
本申请涉及电子
，尤其涉及一种界面代码的生成方法及设备。
技术介绍
目前，互联网下业务发展迅速，各类产品迭代迅速。如何提高用户界面的开发效率，快速对接高速发展的互联网业务是一项重要使命。然而，现有的用户界面开发过程中，需要设计师先依靠设计工具设计出用户界面的设计稿，编程人员根据设计师设计出的设计稿，通过人工编写代码的方式得到用户界面的界面代码。这种开发方式的开发效率低且开发周期较长。
技术实现思路
鉴于上述问题，提出了本申请以提供一种解决上述问题或至少部分地解决上述问题的界面代码的生成方法及设备。于是，在本申请的一个实施例中，提供了一种界面代码的生成方法。该方法包括：确定待处理图像文件的界面元素信息；基于所述界面元素信息，确定界面的布局信息；根据所述布局信息，生成界面代码。在本申请的另一个实施例中，提供了一种界面代码的生成方法。该方法包括：显示操作界面，以供用户输入待处理图像数据；响应于所述用户通过所述操作界面触发的界面代码生成指本文档来自技高网...

【技术保护点】
1.一种界面代码的生成方法，其特征在于，包括：/n确定待处理图像文件的界面元素信息；/n基于所述界面元素信息，确定界面的布局信息；/n根据所述布局信息，生成界面代码。/n

【技术特征摘要】
1.一种界面代码的生成方法，其特征在于，包括：
确定待处理图像文件的界面元素信息；
基于所述界面元素信息，确定界面的布局信息；
根据所述布局信息，生成界面代码。


2.根据权利要求1所述的方法，其特征在于，基于所述界面元素信息，确定界面的布局信息，包括：
基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系以及各父节点的至少一个子节点的分布信息；
根据所述父子节点关系及各父节点的至少一个子节点的分布信息，确定所述布局信息。


3.根据权利要求2所述的方法，其特征在于，基于所述界面元素信息中各界面元素的属性信息，确定各界面元素之间的父子节点关系，包括：
基于各界面元素的位置信息及绘制顺序信息，确定所述各界面元素之间的初始父子节点关系；
在所述初始父子节点关系中，若存在指定类界面元素作为父节点的情况，则在所述初始父节点关系中新增一第一容器节点来容纳所述指定类界面元素及所述指定类界面元素的子节点，以得到所述父子节点关系。


4.根据权利要求2所述的方法，其特征在于，所述各父节点中包括第一类父节点；
以及，确定所述第一类父节点的至少一个第一子节点的分布信息，包括：
根据所述至少一个第一子节点的位置信息，确定所述至少一个第一子节点的行列信息以及所述至少一个第一子节点中各第一子节点的四周间距信息。


5.根据权利要求4所述的方法，其特征在于，还包括：
根据所述至少一个第一子节点中各第一子节点的四周间距信息，确定各行的伸缩布局属性和各列的伸缩布局属性；
根据所述各行的伸缩布局属性和所述各列的伸缩布局属性，确定对所述布局信息的修正方案。


6.根据权利要求5所述的方法，其特征在于，根据所述各行的伸缩布局属性和所述各列的伸缩布局属性，确定对所述布局信息的修正方案，包括：
所述各行的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一行的伸缩布局属性；
所述各列的伸缩布局属性一致时，在所述布局信息中，为所述第一类父节点添加任一列的伸缩布局属性；
所述各行的伸缩布局属性不一致时且所述各列的伸缩布局属性也不一致时，在所述布局信息中，为各行新增一第二容器节点以容纳各行上的第一子节点，并为各行新增的所述第二容器节点添加各行对应的伸缩布局属性，其中，各行的所述第二容器节点为所述第一类父节点的子节点。


7.根据权利要求2所述的方法，其特征在于，所述各父节点中包括第二类父节点；
以及，确定所述第二类父节点的至少一个第二子节点的分布信息，包括：
根据所述第二类父节点以及所述至少一个第二子节点的位置信息，对所述至少一个第二子节点进行绝对定位布局，以得到所述至少一个第二子节点的分布信息。


8.根据权利要求1至7中任一项所述的方法，其特征在于，根据所述布局信息，生成界面代码，包括：
根据所述布局信息，从代码库中匹配出相应的代码布局信息；
根据所述布局信息中各界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中各节点在代码层面的属性信息；
将所述各节点在代码层面的属性信息添加至所述代码布局信息中，以得到所述界面代码。


9.根据权利要求8所述的方法，其特征在于，所述各界面元素包括：第一界面元素；
以及，根据所述第一界面元素的属性信息，从所述代码库中匹配出所述代码布局信息中与所述第一界面元素对应的第一节点在代码层面的属性信息，包括：
根据所述第一界面元素的类型属性，在所述代码库中匹配出所述第一节点在代码层面的类型属性；
根据所述第一界面元素的显示属性，在所述代码库中匹配出所述第一节点在代码层面的显示属性。


10.根据权利要求8所述的方法，其特征在于，根据所述布局信息，生成界面代码，还包括：
在根据所述布...

【专利技术属性】
技术研发人员：涂挺鹏，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY