一种前端代码生成方法、装置、设备及存储介质与流程

本技术涉及计算机，尤其涉及一种前端代码生成方法、装置、设备及存储介质。

背景技术：

1、目前，前端开发人员通常可基于sketch进行相应的ui(user interface，用户界面)设计工作。其中，sketch是一种适用于ui设计师的矢量绘图应用，基于该应用生成的文件并不是html(hyper text markup language，超文本标记语言)格式的，不适合直接进行页面展示。为了进行页面展示，需要将sketch生成的文件转换成html格式。因此，为了解决从ui设计文件到html格式的转换的需求，亟待提出一种解决方案。

技术实现思路

1、本技术的多个方面提供一种前端代码生成方法、装置、设备及存储介质，用以较为高效地将ui设计文件转换为html代码，以提高前端开发人员的开发效率。

2、本技术实施例提供一种前端代码生成方法，包括：获取基于矢量绘图应用生成的目标页面的ui设计文件，所述ui设计文件包括目标页面的结构化数据；对所述结构化数据进行解析，以得到第一图层树，所述第一图层树上包括：多个原始图层元素以及多个原始图层元素之间的原始层级关系；根据所述ui设计文件中记录的所述多个原始图层元素的第一属性信息，对所述多个原始图层元素进行图层重构，以得到第二图层树，所述第二图层树包括多个目标图层以及多个目标图层之间的层级关系；根据所述ui设计文件中记录的所述多个目标图层的第二属性信息，生成所述多个目标图层的样式信息；根据目标页面布局策略，调整所述多个目标图层之间的布局，以得到所述多个目标图层之间的布局信息；利用预设的代码生成规则，根据所述多个目标图层的样式信息以及所述多个目标图层之间的布局信息和层级关系信息，生成所述目标页面对应的html前端代码。

3、进一步可选地，对所述结构化数据进行解析，以得到第一图层树，包括：对所述结构化数据进行解析，以得到采用轻量级语言描述的多个页面级数据和多个模块化数据；所述页面级数据中包含模块化数据的数据标识和非模块化数据；根据所述多个模块化数据之间的依赖关系，将所述多个模块化数据融合到所述页面级数据中对应的数据标识处；对融合到所述多个页面级数据中的模块化数据进行参数传递和缩放处理，以得到第一图层树，所述多个模块化数据和所述非模块化数据共同形成所述多个原始图层元素，所述多个模块化数据之间的依赖关系形成所述多个原始图层元素之间的层级关系。

4、进一步可选地，所述第一属性信息包括：原始分组属性和元素类型；根据所述ui设计文件中记录的所述多个原始图层元素的第一属性信息，对所述多个原始图层元素进行图层重构，以得到第二图层树，包括：在所述多个原始图层元素具有原始分组属性的情况下，去除所述多个原始图层元素带有的原始分组属性；将所述多个原始图层元素中属于同一元素类型的划分在同一个图层中以得到多个候选图层；所述多个候选图层各自对应有图层从属信息；根据预设的图层排列规则以及所述多个候选图层各自对应的图层从属信息，对所述多个候选图层进行结构重组，以得到多个目标图层；利用所述多个目标图层的共性图层结构，对所述多个目标图层中的原始图层元素进行特征分组，并对特征分组后的原始图层元素进行优化，以得到目标图层元素。

5、进一步可选地，根据预设的图层排列规则以及所述多个候选图层各自对应的图层从属信息，对所述多个候选图层进行结构重组，以得到多个目标图层，包括：利用所述预设的图层排列规则，对所述多个候选图层进行排列；根据所述多个候选图层各自对应的图层从属信息，确定所述多个候选图层之间的从属关系；根据所述多个候选图层之间的从属关系，对所述排列后的多个候选图层进行图层组合，得到所述多个目标图层。

6、进一步可选地，利用所述多个目标图层的共性图层结构，对所述多个目标图层中的原始图层元素进行特征分组，包括：对所述多个目标图层各自的结构特征进行特征融合，得到所述多个目标图层的共性图层结构；所述共性图层结构用于表征所述多个目标图层的共有结构特征；利用所述共性图层结构，对任一个目标图层中的原始图层元素进行分组，得到所述目标图层中的多个元素组合；任一个元素组合中的原始图层元素符合所述共有结构特征。

7、进一步可选地，对特征分组后的原始图层元素进行优化，以得到目标图层元素，包括：遍历所述多个目标图层包含的原始图层元素，在遍历到的原始图层元素的元素类型为图片的情况下，若所述原始图层元素所属的元素分组无边框或无背景时，删除所述原始图层元素所属的元素分组；和/或；在所述原始图层元素所属的元素分组的尺寸以及所处的位置，与所述原始图层元素的尺寸以及所处的位置相同时，删除所述原始图层元素所属的元素分组；和/或，在所述原始图层元素无所属的元素分组时，删除所述原始图层元素。

8、进一步可选地，根据目标页面布局策略，调整所述多个目标图层之间的布局，以得到所述多个目标图层之间的布局信息，包括：根据所述ui设计文件中记录的所述多个目标图层的第二属性信息，从所述预设的多种页面布局策略中选取适用于所述多个目标图层的目标页面布局策略；任一种页面布局策略用于：对图层排列方向、图层间距、图层宽度以及图层的对齐方式进行设置；利用所述目标页面布局策略，调整所述多个目标图层之间的布局，以得到所述多个目标图层之间的布局信息。

9、本技术实施例还提供一种前端代码生成装置，包括：获取模块，用于：获取基于矢量绘图应用生成的目标页面的ui设计文件，所述ui设计文件包括目标页面的结构化数据；解析模块，用于：对所述结构化数据进行解析，以得到第一图层树，所述第一图层树上包括：多个原始图层元素以及多个原始图层元素之间的原始层级关系；重构模块，用于：根据所述ui设计文件中记录的所述多个原始图层元素的第一属性信息，对所述多个原始图层元素进行图层重构，以得到第二图层树，所述第二图层树包括多个目标图层以及多个目标图层之间的层级关系；样式模块，用于：根据所述ui设计文件中记录的所述多个目标图层的第二属性信息，生成所述多个目标图层的样式信息；布局模块，用于：根据目标页面布局策略，调整所述多个目标图层之间的布局，以得到所述多个目标图层之间的布局信息；代码生成模块，用于：利用预设的代码生成规则，根据所述多个目标图层的样式信息以及所述多个目标图层之间的布局信息和层级关系信息，生成所述目标页面对应的html前端代码。

10、本技术实施例还提供一种电子设备，包括：存储器和处理器；其中，所述存储器用于：存储一个或多个计算机指令；所述处理器用于执行所述一个或多个计算机指令，以用于：执行所述前端代码生成方法中的步骤。

11、本技术实施例还提供一种计算机可读存储介质，当所述计算机程序被处理器执行时，致使所述处理器能够实现所述前端代码生成方法中的步骤。

12、在本实施例中，可获取ui设计文件，解析其中的结构化数据得到第一图层树，第一图层树包括：多个原始图层元素以及多个原始图层元素之间的原始层级关系；根据多个原始图层元素的第一属性信息，对多个原始图层元素进行图层重构得到第二图层树，第二图层树包括多个目标图层以及多个目标图层之间的层级关系；根据多个目标图层的第二属性信息生成样式信息，并调整多个目标图层之间的布局；根据多个目标图层的样式信息以及多个目标图层之间的布局信息和层级关系信息，生成目标页面对应的html前端代码。通过这种方式，可将ui设计文件转换为更符合前端开发人员需求的前端代码，以便前端开发人员进行查看。