CN115185503A - 前端低代码开发方法、装置、电子设备、介质及程序产品 - Google Patents

Abstract

本发明提供一种前端低代码开发方法、装置、电子设备、介质及程序产品，该方法包括：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，嵌套树包含父级盒子和子级盒子之间的嵌套关系；通过行容器布局算法和列容器布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；根据原始设计文件、行容器及列容器生成js对象，解析js对象，并为js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。本发明提供的前端低代码开发方法、装置、电子设备、介质及程序产品，可以直接用原始设计文件生成标记语言文件和层叠样式表文件，实现了低代码化的前端开发，节省了人力，提升了效率。

Description

前端低代码开发方法、装置、电子设备、介质及程序产品

技术领域

本发明涉及计算机技术领域，尤其涉及一种前端低代码开发方法、装置、电子设备、介质及程序产品。

背景技术

前端开发者的一项工作就是开发html和css，对于React(用于构建用户界面的JavaScript库)来说是jsx和css。其中，html文件和jsx文件是标记语言文件，css文件是层叠样式表(Cascading Style Sheets)文件。html是超文本标记语言，jsx是一种JavaScript的语法扩展，运用于React架构中，React使用jsx来描述用户界面。css是层叠样式表，css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

目前在前端开发时，对于UX设计师等提出的前端设计需求，前端开发人员从头开发对应的标记语言文件和层叠样式表文件，工作量大，费时费力，开发成本高。而实际上，在很大程度上，UX设计师的设计稿，比如sketch，原型图等，存在着开发标记语言文件和层叠样式表文件所需的所有信息量。因此，若能够直接用sketch设计稿或者包含布局信息的其他源文件生成标记语言文件和层叠样式表文件，可以在极大程度上减少前端工程师的工作量，节省开发成本。

发明内容

为解决现有技术中的问题，本发明提供一种前端低代码开发方法、装置、电子设备、介质及程序产品。

本发明提供一种前端低代码开发方法，包括：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

根据本发明提供的一种前端低代码开发方法，所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树，包括：根据面积将盒子从小到大排序；从小到大遍历盒子；其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，所述最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历；所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成所述嵌套树。

根据本发明提供的一种前端低代码开发方法，所述行容器布局算法包括如下步骤：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按高度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按高度从大到小排序；以高度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在高度上有重合部分则分到一个行容器，若所述子级盒子在高度上没有重合部分则分到不同的行容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述列容器布局算法；若不存在还能再分的分组，则结束。

根据本发明提供的一种前端低代码开发方法，所述列容器布局算法包括如下步骤：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按宽度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按宽度从大到小排序；以宽度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在宽度上有重合部分则分到一个列容器，若所述子级盒子在宽度上没有重合部分则分到不同的列容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述行容器布局算法；若不存在还能再分的分组，则结束。

根据本发明提供的一种前端低代码开发方法，在所述进入所述列容器布局算法之前，所述方法还包括：判断分组结果是否与上次列容器布局算法分组结果一致；若是，则结束；在所述进入所述行容器布局算法之前，所述方法还包括：判断分组结果是否与上次行容器布局算法分组结果一致；若是，则结束。

根据本发明提供的一种前端低代码开发方法，在所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树之前，所述方法还包括：遍历所述原始设计文件对应的原始树的所有节点；若在某一层既包含蒙板盒子又包含图片盒子，则将所述图片盒子的子级盒子拼接到所述蒙板盒子的子级盒子后面；所述为所述js对象中的盒子添加样式，包括：将所述图片盒子的资源获取路径及位置信息存入所述蒙板盒子后，删除所述图片盒子及所述图片盒子的子级盒子。

本发明还提供一种前端低代码开发装置，包括：嵌套树生成模块，用于：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；行列容器布局模块，用于：通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；文件生成模块，用于：根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

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

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

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

本发明提供的前端低代码开发方法、装置、电子设备、介质及程序产品，通过根据原始设计文件生成嵌套树，通过行列布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器，根据原始设计文件、行容器及列容器生成js对象，解析js对象，并为js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件，可以直接用原始设计文件生成标记语言文件和层叠样式表文件，实现了低代码化的前端开发，节省了人力，提升了效率。

附图说明

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

图1是本发明提供的前端低代码开发方法的流程示意图；

图2是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之一；

图3是根据图2所示的文件结构经算法处理后得到的树形结构示意图；

图4是本发明提供的前端低代码开发方法中嵌套树的生成流程示意图；

图5是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之二；

图6是本发明提供的前端低代码开发方法中由图5得到的嵌套树的示意图；

图7是本发明提供的前端低代码开发方法中行容器布局算法的流程示意图之一；

图8是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之三；

图9是本发明提供的前端低代码开发方法中基于图8生成的行容器的示意图；

图10是本发明提供的前端低代码开发方法中列容器布局算法的流程示意图之一；

图11是本发明提供的前端低代码开发方法中行容器布局算法的流程示意图之二；

图12是本发明提供的前端低代码开发方法中列容器布局算法的流程示意图之二；

图13是本发明提供的前端低代码开发方法中未解决蒙板问题时的输出效果示意图；

图14是本发明提供的前端低代码开发方法中解决蒙板问题算法的流程示意图；

图15是本发明提供的前端低代码开发方法中经解决蒙板问题算好处理后的输出效果示意图；

图16是本发明提供的前端低代码开发装置的结构示意图；

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

具体实施方式

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

下面结合图1-图17描述本发明的前端低代码开发方法、装置、电子设备、介质及程序产品。

图1是本发明提供的前端低代码开发方法的流程示意图。如图1所示，所述方法包括：

步骤101、由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系。

css处理网页时，它认为每个元素都包含在一个不可见的盒子里。因为如果把所有的元素都想象成盒子，那么对网页的布局就相当于摆放盒子。因此，元素也称之为盒子，是用于进行前端页面布局的对象。

原始设计文件比如可以为UX设计师提供的sketch、原型图等，原始设计文件包含盒子的大小和位置信息，根据盒子的大小和位置信息可以获知盒子之间的嵌套关系，根据盒子之间的嵌套关系生成嵌套树。

步骤102、通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器。

前端低代码开发的核心作用是把原始设计文件转换成合理的标记语言文件，如html或jsx文件。原始设计文件虽然有盒子的大小和位置，可以获取盒子间的嵌套关系，即某盒子在另一盒子内部。但是，从标记语言文件的层面上讲，子级盒子并不一定是被它的直属父级盒子所直接包含，需要给某些盒子添加合理的容器以构成正确的布局。另外，要保证容器内部的盒子属于同一个父级盒子。因此，在得到嵌套树后，通过行容器布局算法和列容器布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器。其中，行容器布局算法用于布局行容器，列容器布局算法用于布局列容器。

步骤103、根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

经过嵌套树生成、行容器布局算法和列容器布局算法(后续简称算法)后会生成一个js对象，这个js对象可以理解为是一个树形结构，而标记语言文件本身也可以看成一棵树，算法生成的树和标记语言文件代表的树完全是一一对应的，因此，生成了js对象以后只需要简单的解析即可生成标记语言文件。css文件算法也会一并生成，比方说行容器一定会给其代表的盒子加上display:flex从而使其子盒子(指容器所包含的盒子)按行排列。如果没有行容器和列容器，子盒子是没办法按一定的规则放到标记语言文件的。

图2是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之一。盒子的布局体现出文件结构。图3是根据图2所示的文件结构经算法处理后得到的树形结构示意图。如图3所示，先给A、B加一个行容器把它们分为一组，然后设置display:flex，使A、B按行排列，然后再和C一并放入D中。有了盒子之间的嵌套关系，也就有了树形结构，即得到了根据原始设计文件、行容器及列容器生成的js对象，解析js对象，并为js对象中的盒子添加样式，可以生成前端所需的标记语言文件和层叠样式表文件。

本发明提供的前端低代码开发方法，通过根据原始设计文件生成嵌套树，通过行列布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器，根据原始设计文件、行容器及列容器生成js对象，解析js对象，并为js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件，可以直接用原始设计文件生成标记语言文件和层叠样式表文件，实现了低代码化的前端开发，节省了人力，提升了效率。

根据本发明提供的一种前端低代码开发方法，所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树，包括：根据面积将盒子从小到大排序；从小到大遍历盒子；其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，所述最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历；所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成所述嵌套树。

UX设计师为前端工程师提供的原始设计文件(如sketch文件)排放结构并不符合标记语言文件的嵌套关系，原始设计文件中盒子的排列形成原始树。经生成树算法后，把原始的、混乱的原始树的树形结构转化成嵌套树，嵌套树只包含正确的嵌套关系，却没有正确的布局。需要再进一步经过通过行容器布局算法和列容器布局算法形成正确布局。

原始树的树形结构对生成嵌套树并无意义，生成嵌套树并不需要原始树的嵌套关系，即不需要原始树的树形结构当中的信息。所以，可以把原始树转换成一个一维的数组L，把这个数组按面积从小到大进行排序。这个数组L包含生成嵌套树的所有信息。计算机虽不能从图片中直接理解嵌套关系，但是却可以得到完全等价的信息量：即，每个盒子的左上角坐标，宽和高。根据盒子的宽和高可以得到盒子的面积，根据盒子的面积及左上角坐标可以得到盒子间的嵌套关系。

图4是本发明提供的前端低代码开发方法中嵌套树的生成流程示意图。如图4所示，把盒子的面积从小到大排序，从小到大遍历盒子，找到每个盒子的最小父级盒子，最小父级盒子是包含当前遍历的盒子的最小面积的盒子，当前盒子是最小父级盒子的子级盒子。当找到当前遍历的盒子的最小父级盒子后，最小父级盒子的指针指向子级盒子，所有盒子遍历结束后，以最大面积的盒子作为嵌套树的根节点，根据父子盒子之间的指向关系生成嵌套树。

需要注意的是，一旦一个盒子找到了它的最小父级盒子，就立刻停止寻找，跳出本次循环，因为并不需要关注一个盒子的两级及以上的祖先。算法结束后，可以以最后一个盒子为根节点，通过递归的方法生成一棵树，即为嵌套树。

图5是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之二。图6是本发明提供的前端低代码开发方法中由图5得到的嵌套树的示意图。如图6所示，盒子之间的箭头表示父子盒子的指向关系。

本发明提供的前端低代码开发方法，通过根据面积将盒子从小到大排序，从小到大遍历盒子，其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历，所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成嵌套树，实现了盒子间的嵌套关系的快速准确获取。

根据本发明提供的一种前端低代码开发方法，所述行容器布局算法包括如下步骤：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按高度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按高度从大到小排序；以高度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在高度上有重合部分则分到一个行容器，若所述子级盒子在高度上没有重合部分则分到不同的行容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述列容器布局算法；若不存在还能再分的分组，则结束。

得到嵌套树之后，需要为各个盒子添加合适的行列容器，以形成标记语言文件所需的正确布局。

在通过行容器布局算法和列容器布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器时，行容器布局算法和列容器布局算法是交替执行的，可以先执行行容器布局算法，也可以先执行列容器布局算法。

需要为任意父级盒子的所有子级盒子添加行容器和列容器，若先执行行容器布局算法，则由于此时尚未进行任何分组，则针对任意父级盒子的所有子级盒子添加行容器。若行容器布局算法不是首次执行，则按照各种情况下普遍适用的方法，获取任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中还能再分的分组，可以认为每个分组内只有一个盒子时不能再分。对还能再分的分组判断是否添加行容器。

分到一个行容器的盒子在高度上需要具有重合部分。两个盒子在高度上具有重合部分，比如可以是两个盒子的纵坐标具有重合部分。比方说一个盒子的高上下两点的纵坐标分别是Dy和Dy′，另一个盒子的高上下两点的纵坐标分别是Dy+Δy和Dy′+Δy，且Δy<<Dy′-Dy，那么这两个盒子的重合部分即为Dy+Δy至Dy′。一个合理的行容器布局算法应该把这两个盒子放在同一个行容器之内。

在任意父级盒子的所有子级盒子尚未由行容器及列容器划分分组时，对所有子级盒子按高度从大到小排序；若任意父级盒子的所有子级盒子已由行容器和列容器划分了分组，则对任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中还能再分的分组内的子级盒子按高度从大到小排序。

以高度为基准从大到小遍历排序后的子级盒子，若当前遍历的子级盒子与其他子级盒子在高度上有重合部分，则将当前遍历的子级盒子和高度上有重合部分的其他子级盒子分到一个行容器；若当前遍历的子级盒子和其他子级盒子在高度上没有重合部分则将当前遍历的子级盒子单独分到一个行容器。

遍历完成后，判断任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入列容器布局算法。

图7是本发明提供的前端低代码开发方法中行容器布局算法的流程示意图之一。如图7所示，行容器布局算法的流程包括：

按盒子的高度作为基准从大到小排序；

以高度为基准从大到小遍历盒子，若盒子的高重合(指在高度上有重合部分)则放在一组，分到一个行容器；若盒子的高不重合，则分到不同的行容器；

遍历结束后，所有盒子被分成多组；

判断每个分组是否还能再分；若不存在还能再分的分组则结束；若存在还能再分的分组，则进入列容器布局算法。

图8是本发明提供的前端低代码开发方法中原始设计文件中盒子布局示意图之三。图9是本发明提供的前端低代码开发方法中基于图8生成的行容器的示意图。如图9所示，A、B、C分到一个行容器，D、E分到一个行容器。

本发明提供的前端低代码开发方法，通过对尚未划分分组的任意父级盒子的所有子级盒子或任意父级盒子的所有子级盒子在由行容器和列容器划分的还能再分的分组内的盒子按高度从大到小排序，以高度为基准从大到小遍历盒子，若在高度上有重合部分则分到一个行容器，若在高度上没有重合部分则分到不同的行容器，遍历完成后，判断任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中是否存在还能再分的分组，若存在还能再分的分组，则进入列容器布局算法，实现了行容器的快速准确添加。

根据本发明提供的一种前端低代码开发方法，所述列容器布局算法包括如下步骤：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按宽度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按宽度从大到小排序；以宽度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在宽度上有重合部分则分到一个列容器，若所述子级盒子在宽度上没有重合部分则分到不同的列容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述行容器布局算法；若不存在还能再分的分组，则结束。

在为任意父级盒子的所有子级盒子添加行容器和列容器时，若先执行行容器布局算法，则第一次执行列容器布局算法时，由于此时的分组均是基于第一次执行行容器布局算法得到的，因此，可以使用DFS等算法判断哪些盒子处于同一个行容器中，递归地去给每个行容器里的盒子继续赋予列容器。

若首先执行列容器布局算法，则针对于任意父级盒子的所有子级盒子首先添加列容器。

若列容器布局算法不是首次执行，则按照各种情况下普遍适用的方法，获取任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中还能再分的分组，可以认为每个分组内只有一个盒子时不能再分。对还能再分的分组判断是否添加列容器。

分到一个列容器的盒子在宽度上需要具有重合部分。两个盒子在宽度上具有重合部分，比如可以是两个盒子的横坐标具有重合部分。比方说一个盒子的宽左右两点的横坐标分别是Dx和Dx′，另一个盒子的宽左右两点的横坐标分别是Dx+Δx和Dx′+Δx，且Δx<<Dx′-Dx，那么这两个盒子的重合部分即为Dx+Δx至Dx′。一个合理的列容器布局算法应该把这两个盒子放在同一个列容器之内。

在任意父级盒子的所有子级盒子尚未由行容器及列容器划分分组时，对所有子级盒子按宽度从大到小排序；若任意父级盒子的所有子级盒子已由行容器和列容器划分了分组，则对任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中还能再分的分组内的子级盒子按宽度从大到小排序。

以宽度为基准从大到小遍历排序后的子级盒子，若当前遍历的子级盒子与其他子级盒子在宽度上有重合部分，则将当前遍历的子级盒子和宽度上有重合部分的其他子级盒子分到一个列容器；若当前遍历的子级盒子和其他子级盒子在宽度上没有重合部分则将当前遍历的子级盒子单独分到一个列容器。

遍历完成后，判断任意父级盒子的所有子级盒子在由列容器和列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入行容器布局算法。

图10是本发明提供的前端低代码开发方法中列容器布局算法的流程示意图之一。如图10所示，列容器布局算法的流程包括：

按盒子的宽度作为基准从大到小排序；

以宽度为基准从大到小遍历盒子，若盒子的宽重合(指在宽度上有重合部分)则放在一组，分到一个列容器；若盒子的宽不重合，则分到不同的列容器；

遍历结束后，所有盒子被分成多组；

判断每个分组是否还能再分；若不存在还能再分的分组则结束；若存在还能再分的分组，则进入行容器布局算法。

本发明提供的前端低代码开发方法，通过对尚未划分分组的任意父级盒子的所有子级盒子或任意父级盒子的所有子级盒子在由行容器和列容器划分的还能再分的分组内的盒子按宽度从大到小排序，以宽度为基准从大到小遍历盒子，若在宽度上有重合部分则分到一个列容器，若在宽度上没有重合部分则分到不同的列容器，遍历完成后，判断任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中是否存在还能再分的分组，若存在还能再分的分组，则进入行容器布局算法，实现了列容器的快速准确添加。

根据本发明提供的一种前端低代码开发方法，在所述进入所述列容器布局算法之前，所述方法还包括：判断分组结果是否与上次列容器布局算法分组结果一致；若是，则结束；在所述进入所述行容器布局算法之前，所述方法还包括：判断分组结果是否与上次行容器布局算法分组结果一致；若是，则结束。

需要注意的有两个问题。其一，需要给行容器布局算法和列容器布局算法找到结束点。直观地，假如在任何一个生成行容器或列容器的环节结束后，输出的所有容器都只有一个盒子，则没有必要再往下递归调用。第二，有时遇到几个盒子两两相交的情形，对于这种情况，算法会不断地递归调用下去，因为行容器布局算法和列容器布局算法的某个或某几个容器都总是包含几个盒子。所以，当发现有这种情况时，算法会把本次的输出队列和上一次的输出队列进行比较，假如这两个队列里面的盒子并没有变化，那么立刻跳出循环。

图11是本发明提供的前端低代码开发方法中行容器布局算法的流程示意图之二。如图11所示，行容器布局算法的流程包括：

按盒子的高度作为基准从大到小排序；

以高度为基准从大到小遍历盒子，若盒子的高重合(指在高度上有重合部分)则放在一组，分到一个行容器；

遍历结束后，所有盒子被分成多组；

判断每个分组是否还能再分；若不存在还能再分的分组则结束；若存在还能再分的分组，则判断分组结果是否与上次列容器布局算法分组结果一致；

若一致，则结束；若不一致，进入列容器布局算法。

图12是本发明提供的前端低代码开发方法中列容器布局算法的流程示意图之二。如图12所示，列容器布局算法的流程包括：

按盒子的宽度作为基准从大到小排序；

以宽度为基准从大到小遍历盒子，若盒子的宽重合(指在宽度上有重合部分)则放在一组，分到一个列容器；

遍历结束后，所有盒子被分成多组；

判断每个分组是否还能再分；若不存在还能再分的分组则结束；若存在还能再分的分组，判断分组结果是否与上次行容器布局算法分组结果一致；

若一致，则结束；若不一致，则进入行容器布局算法。

本发明提供的前端低代码开发方法，通过在进入列容器布局算法之前，若判断获知分组结果与上次列容器布局算法分组结果一致则结束，在进入行容器布局算法之前，若判断获知分组结果与上次行容器布局算法分组结果一致，则结束，避免了由于盒子两两相交造成的死循环。

根据本发明提供的一种前端低代码开发方法，在所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树之前，所述方法还包括：遍历所述原始设计文件对应的原始树的所有节点；若在某一层既包含蒙板盒子又包含图片盒子，则将所述图片盒子的子级盒子拼接到所述蒙板盒子的子级盒子后面；所述为所述js对象中的盒子添加样式，包括：将所述图片盒子的资源获取路径及位置信息存入所述蒙板盒子后，删除所述图片盒子及所述图片盒子的子级盒子。

蒙板是photoshop当中的一个概念，使用它可以在不破坏原始图像的基础上实现特殊的图层叠加效果。蒙板还具有保护，隔离的功能，它可以理解为一种遮罩，将图像中不需要编辑的图像区域进行保护。蒙板虽具有重要意义，但因为算法会把蒙板和bitmap(位图)看成是两个单独的盒子，从而造成错误。

图13是本发明提供的前端低代码开发方法中未解决蒙板问题时的输出效果示意图。

图14是本发明提供的前端低代码开发方法中解决蒙板问题算法的流程示意图。蒙板往往和被它遮盖的bitmap放在原始树的同一层，根据这个特点，在解决蒙板问题算法中，在由包含盒子的大小和位置信息的原始设计文件生成嵌套树之前，遍历原始设计文件对应的原始树的所有节点，若在某一层既包含蒙板盒子又包含图片盒子，将图片盒子的子级盒子拼接到蒙板盒子的子级盒子后面，这步称为位图信息转移。在为js对象中的盒子添加样式时，将图片盒子的资源获取路径及位置信息存入蒙板盒子，这步称为背景注入，然后，删除图片盒子及图片盒子的子级盒子。

在经解决蒙板问题算法处理之后，和蒙板处于同于层级的位图会作为css属性background嵌入到蒙板对应的盒子(div)里面。

图15是本发明提供的前端低代码开发方法中经解决蒙板问题算好处理后的输出效果示意图。

本发明提供的前端低代码开发方法，通过位图信息转移和背景信息注入解决了低代码开发中的蒙板问题，得到了正确的输出效果。

本发明提供的前端低代码开发方法，针对前端设计师的痛点：需要花大量时间编写标记语言文件和层叠样式表文件(如html和css)给出了一整套解决方案。解决方案分为三个步骤：由原始文件生成嵌套树，为嵌套树添加行列容器，为输出结果添加样式。本发明着重详细的给出了前两个步骤的核心算法，并对处理蒙板这一技术难题给出了解决算法。本发明提供的前端低代码开发方法是具备通用意义的，因为设计师的设计稿，无论是哪种文件格式，都基本上具备低代码开发所需的所有信息量，因此，在前端赋能与提效领域，有比较大的推广和借鉴意义。

下面对本发明提供的前端低代码开发装置进行描述，下文描述的前端低代码开发装置与上文描述的前端低代码开发方法可相互对应参照。

图16是本发明提供的前端低代码开发装置的结构示意图。如图16所示，所述装置包括嵌套树生成模块10、行列容器布局模块20及文件生成模块30，其中：嵌套树生成模块10用于：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；行列容器布局模块20用于：通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；文件生成模块30用于：根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

本发明提供的前端低代码开发装置，通过根据原始设计文件生成嵌套树，通过行列布局算法为嵌套树任意父级盒子的所有子级盒子添加行容器及列容器，根据原始设计文件、行容器及列容器生成js对象，解析js对象，并为js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件，可以直接用原始设计文件生成标记语言文件和层叠样式表文件，实现了低代码化的前端开发，节省了人力，提升了效率。

根据本发明提供的一种前端低代码开发装置，嵌套树生成模块10用于：根据面积将盒子从小到大排序；从小到大遍历盒子；其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，所述最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历；所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成所述嵌套树。

本发明提供的前端低代码开发装置，通过根据面积将盒子从小到大排序，从小到大遍历盒子，其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历，所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成嵌套树，实现了盒子间的嵌套关系的快速准确获取。

根据本发明提供的一种前端低代码开发装置，行列容器布局模块20在执行行容器布局算法时，用于：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按高度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按高度从大到小排序；以高度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在高度上有重合部分则分到一个行容器，若所述子级盒子在高度上没有重合部分则分到不同的行容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述列容器布局算法；若不存在还能再分的分组，则结束。

本发明提供的前端低代码开发装置，通过对尚未划分分组的任意父级盒子的所有子级盒子或任意父级盒子的所有子级盒子在由行容器和列容器划分的还能再分的分组内的盒子按高度从大到小排序，以高度为基准从大到小遍历盒子，若在高度上有重合部分则分到一个行容器，若在高度上没有重合部分则分到不同的行容器，遍历完成后，判断任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中是否存在还能再分的分组，若存在还能再分的分组，则进入列容器布局算法，实现了行容器的快速准确添加。

根据本发明提供的一种前端低代码开发装置，行列容器布局模块20在执行列容器布局算法时，用于：响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按宽度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按宽度从大到小排序；以宽度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在宽度上有重合部分则分到一个列容器，若所述子级盒子在宽度上没有重合部分则分到不同的列容器；遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述行容器布局算法；若不存在还能再分的分组，则结束。

本发明提供的前端低代码开发装置，通过对尚未划分分组的任意父级盒子的所有子级盒子或任意父级盒子的所有子级盒子在由行容器和列容器划分的还能再分的分组内的盒子按宽度从大到小排序，以宽度为基准从大到小遍历盒子，若在宽度上有重合部分则分到一个列容器，若在宽度上没有重合部分则分到不同的列容器，遍历完成后，判断任意父级盒子的所有子级盒子在由行容器和列容器划分的分组中是否存在还能再分的分组，若存在还能再分的分组，则进入行容器布局算法，实现了列容器的快速准确添加。

根据本发明提供的一种前端低代码开发装置，行列容器布局模块20在执行列容器布局算法时，还用于：在所述进入所述列容器布局算法之前，判断分组结果是否与上次列容器布局算法分组结果一致；若是，则结束；在所述进入所述行容器布局算法之前，判断分组结果是否与上次行容器布局算法分组结果一致；若是，则结束。

本发明提供的前端低代码开发装置，通过在进入列容器布局算法之前，若判断获知分组结果与上次列容器布局算法分组结果一致则结束，在进入行容器布局算法之前，若判断获知分组结果与上次行容器布局算法分组结果一致，则结束，避免了由于盒子两两相交造成的死循环。

根据本发明提供的一种前端低代码开发装置，所述装置还包括位图信息转移模块，所述位图信息转移模块在嵌套树生成模块10由包含盒子的大小和位置信息的原始设计文件生成嵌套树之前，用于：遍历所述原始设计文件对应的原始树的所有节点；若在某一层既包含蒙板盒子又包含图片盒子，则将所述图片盒子的子级盒子拼接到所述蒙板盒子的子级盒子后面；文件生成模块30为所述js对象中的盒子添加样式时，用于：将所述图片盒子的资源获取路径及位置信息存入所述蒙板盒子后，删除所述图片盒子及所述图片盒子的子级盒子。

本发明提供的前端低代码开发装置，通过位图信息转移和背景信息注入解决了低代码开发中的蒙板问题，得到了正确的输出效果。

图17示例了一种电子设备的实体结构示意图，如图17所示，该电子设备可以包括：处理器(processor)2110、通信接口(Communications Interface)2120、存储器(memory)2130和通信总线2140，其中，处理器2110，通信接口2120，存储器2130通过通信总线2140完成相互间的通信。处理器2110可以调用存储器2130中的逻辑指令，以执行前端低代码开发方法，该方法包括：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

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

另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行时，计算机能够执行上述各方法所提供的前端低代码开发方法，该方法包括：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的前端低代码开发方法，该方法包括：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

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

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

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

Claims (10)

1.一种前端低代码开发方法，其特征在于，包括：

由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；

通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；

根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

2.根据权利要求1所述的前端低代码开发方法，其特征在于，所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树，包括：

根据面积将盒子从小到大排序；

从小到大遍历盒子；其中，在找到能够完整包含当前遍历的盒子的最小父级盒子后，所述最小父级盒子的指针指向当前遍历的盒子，当前盒子遍历结束，开始对下一盒子进行遍历；

所有盒子遍历结束后，以最大面积的盒子作为根节点，根据父子盒子之间的指向关系生成所述嵌套树。

3.根据权利要求1所述的前端低代码开发方法，其特征在于，所述行容器布局算法包括如下步骤：

响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按高度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按高度从大到小排序；

以高度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在高度上有重合部分则分到一个行容器，若所述子级盒子在高度上没有重合部分则分到不同的行容器；

遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述列容器布局算法；若不存在还能再分的分组，则结束。

4.根据权利要求1所述的前端低代码开发方法，其特征在于，所述列容器布局算法包括如下步骤：

响应于任意父级盒子的所有子级盒子尚未由所述行容器及所述列容器划分分组，则对所述所有子级盒子按宽度从大到小排序；或，响应于任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中存在还能再分的分组，则对所述还能再分的分组内的所述子级盒子按宽度从大到小排序；

以宽度为基准从大到小遍历排序后的所述子级盒子，若所述子级盒子在宽度上有重合部分则分到一个列容器，若所述子级盒子在宽度上没有重合部分则分到不同的列容器；

遍历完成后，判断所述任意父级盒子的所有子级盒子在由所述行容器和所述列容器划分的分组中是否存在还能再分的分组；若存在还能再分的分组，则进入所述行容器布局算法；若不存在还能再分的分组，则结束。

5.根据权利要求4所述的前端低代码开发方法，其特征在于，在所述进入所述列容器布局算法之前，所述方法还包括：判断分组结果是否与上次列容器布局算法分组结果一致；若是，则结束；

在所述进入所述行容器布局算法之前，所述方法还包括：判断分组结果是否与上次行容器布局算法分组结果一致；若是，则结束。

6.根据权利要求1所述的前端低代码开发方法，其特征在于，在所述由包含盒子的大小和位置信息的原始设计文件生成嵌套树之前，所述方法还包括：遍历所述原始设计文件对应的原始树的所有节点；若在某一层既包含蒙板盒子又包含图片盒子，则将所述图片盒子的子级盒子拼接到所述蒙板盒子的子级盒子后面；

所述为所述js对象中的盒子添加样式，包括：将所述图片盒子的资源获取路径及位置信息存入所述蒙板盒子后，删除所述图片盒子及所述图片盒子的子级盒子。

7.一种前端低代码开发装置，其特征在于，包括：

嵌套树生成模块，用于：由包含盒子的大小和位置信息的原始设计文件生成嵌套树；其中，所述嵌套树包含父级盒子和子级盒子之间的嵌套关系；

行列容器布局模块，用于：通过行容器布局算法和列容器布局算法为所述嵌套树任意父级盒子的所有子级盒子添加行容器及列容器；

文件生成模块，用于：根据所述原始设计文件、所述行容器及所述列容器生成js对象，解析所述js对象，并为所述js对象中的盒子添加样式，进而生成标记语言文件和层叠样式表文件。

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

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

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

Images