发明内容
本公开实施例至少提供一种代码生成方法、装置、计算机设备和存储介质。
第一方面,本公开实施例提供了一种代码生成方法,包括:
获取待转换的页面设计稿,所述页面设计稿对应的设计稿树中包括具有不同功能的各个页面组件分别对应的至少一个节点;
从所述设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个所述目标节点,确定以该目标节点为根节点的目标子树;所述目标子树中除所述目标节点外的其它节点未标记出对应的原始属性信息;
针对每个所述目标子树,基于所述目标子树的所述根节点对应的原始属性信息,以及从所述页面设计稿中识别出来的所述根节点对应的当前属性信息,确定所述目标子树对应的属性差异信息;
基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,从所述设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个所述目标节点,确定以该目标节点为根节点的目标子树,包括:
遍历所述设计稿树中的各个节点,确定遍历到的当前节点是否有标记出的原始属性信息;
若确定遍历到的当前节点为标记出对应的原始属性信息的目标节点,遍历以所述目标节点为父节点的各个子节点,确定遍历到的当前子节点是否有标记出的原始属性信息;
若遍历到的当前子节点没有标记出的原始属性信息,以该当前子节点作为新的所述父节点,返回遍历所述父节点的各个子节点的步骤,直到确定遍历到的当前子节点具有标记出的原始属性信息;
基于所述目标节点以及遍历到的不具有标记出的原始属性信息的各个所述子节点之间的依赖关系,构建以所述目标节点为根节点的一个所述目标子树。
在一种可能的实施方式中,所述针对每个所述目标子树,基于所述目标子树的所述根节点对应的原始属性信息,以及从所述页面设计稿中识别出来的所述根节点对应的当前属性信息,确定所述目标子树对应的属性差异信息,包括:
基于所述当前属性信息和所述原始属性信息,确定所述目标子树对应的第一差异信息;
在根据所述第一差异信息,确定所述根节点发生节点类型变更的情况下,基于当前属性信息中的当前类型信息对应的默认属性信息,以及所述当前属性信息,确定所述目标子树对应的第二差异信息;
将所述第一差异信息和第二差异信息作为所述目标子树对应的所述属性差异信息。
在一种可能的实施方式中,所述基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码之前,还包括:
在基于所述根节点的当前属性信息,确定所述根节点的节点类型为文本类型的情况下,获取所述根节点对应的当前文本信息;
基于所述当前文本信息以及所述根节点对应的标记出的原始文本信息,确定所述根节点对应的文本差异信息;
所述基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码,包括:
基于所述属性差异信息以及文本差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,标记出的所述原始属性信息包括以下至少一项:节点对应的页面组件的名称、页面组件所在的组件库的名称、组件库的版本信息、页面组件的类型信息、页面组件的传入参数;
所述传入参数包括以下至少一项:页面组件的尺寸信息、页面组件的填充信息、页面组件的边框信息、页面组件的阴影信息。
在一种可能的实施方式中,所述从所述设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,包括:
从所述设计稿树中的每个节点的节点信息中,分别查找利用预设标识符标记的节点信息段;
若查找到所述节点信息段,则将该节点作为所述目标节点,并将查找到所述节点信息段内的信息作为所述目标节点的所述原始属性信息。
在一种可能的实施方式中,所述基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码,包括:
基于待转换的页面设计稿,生成各个页面组件的初始页面代码;
从所述各个页面组件的初始页面代码中,选择与所述属性差异信息匹配的目标页面组件的初始页面代码;
基于与所述目标页面组件匹配的所述属性差异信息,对所述目标页面组件的初始页面代码进行更新。
第二方面,本公开实施例还提供一种代码生成装置,包括:
获取模块,用于获取待转换的页面设计稿,所述页面设计稿对应的设计稿树中包括具有不同功能的各个页面组件分别对应的至少一个节点;
第一确定模块,用于从所述设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个所述目标节点,确定以该目标节点为根节点的目标子树;所述目标子树中除所述目标节点外的其它节点未标记出对应的原始属性信息;
第二确定模块,用于针对每个所述目标子树,基于所述目标子树的所述根节点对应的原始属性信息,以及从所述页面设计稿中识别出来的所述根节点对应的当前属性信息,确定所述目标子树对应的属性差异信息;
更新模块,用于基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,所述第一确定模块,用于遍历所述设计稿树中的各个节点,确定遍历到的当前节点是否有标记出的原始属性信息;
若确定遍历到的当前节点为标记出对应的原始属性信息的目标节点,遍历以所述目标节点为父节点的各个子节点,确定遍历到的当前子节点是否有标记出的原始属性信息;
若遍历到的当前子节点没有标记出的原始属性信息,以该当前子节点作为新的所述父节点,返回遍历所述父节点的各个子节点的步骤,直到确定遍历到的当前子节点具有标记出的原始属性信息;
基于所述目标节点以及遍历到的不具有标记出的原始属性信息的各个所述子节点之间的依赖关系,构建以所述目标节点为根节点的一个所述目标子树。
在一种可能的实施方式中,所述第二确定模块,用于基于所述当前属性信息和所述原始属性信息,确定所述目标子树对应的第一差异信息;
在根据所述第一差异信息,确定所述根节点发生节点类型变更的情况下,基于当前属性信息中的当前类型信息对应的默认属性信息,以及所述当前属性信息,确定所述目标子树对应的第二差异信息;
将所述第一差异信息和第二差异信息作为所述目标子树对应的所述属性差异信息。
在一种可能的实施方式中,所述第二确定模块,还用于所述基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码之前,在基于所述根节点的当前属性信息,确定所述根节点的节点类型为文本类型的情况下,获取所述根节点对应的当前文本信息;
基于所述当前文本信息以及所述根节点对应的标记出的原始文本信息,确定所述根节点对应的文本差异信息;
所述更新模块,用于基于所述属性差异信息以及文本差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,标记出的所述原始属性信息包括以下至少一项:节点对应的页面组件的名称、页面组件所在的组件库的名称、组件库的版本信息、页面组件的类型信息、页面组件的传入参数;
所述传入参数包括以下至少一项:页面组件的尺寸信息、页面组件的填充信息、页面组件的边框信息、页面组件的阴影信息。
在一种可能的实施方式中,第一确定模块,用于从所述设计稿树中的每个节点的节点信息中,分别查找利用预设标识符标记的节点信息段;
若查找到所述节点信息段,则将该节点作为所述目标节点,并将查找到所述节点信息段内的信息作为所述目标节点的所述原始属性信息。
在一种可能的实施方式中,所述更新模块,用于基于待转换的页面设计稿,生成各个页面组件的初始页面代码;
从所述各个页面组件的初始页面代码中,选择与所述属性差异信息匹配的目标页面组件的初始页面代码;
基于与所述目标页面组件匹配的所述属性差异信息,对所述目标页面组件的初始页面代码进行更新。
第三方面,本公开可选实现方式还提供一种计算机设备,处理器、存储器,所述存储器存储有所述处理器可执行的机器可读指令,所述处理器用于执行所述存储器中存储的机器可读指令,所述机器可读指令被所述处理器执行时,所述机器可读指令被所述处理器执行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
第四方面,本公开可选实现方式还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被运行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。
关于上述代码生成装置、计算机设备、及计算机可读存储介质的效果描述参见上述代码生成方法的说明,这里不再赘述。
本公开实施例提供的代码生成方法、装置、计算机设备和存储介质,原始属性信息用于记录页面组件对应的各种组件属性,通过将目标节点对应的原始属性信息进行预先标记,可以保证基于该标记,能够准确地获取各个目标节点对应的原始属性信息。通过确定以带有标记出对应的原始属性信息的目标节点为根节点的目标子树,可以实现对设计稿中包括的各个节点进行合理的逻辑划分,基于目标子树进行节点的处理,可以有效避免一个节点被重复处理的问题。通过将目标节点对应的原始属性信息和当前属性信息进行比较,能够确定出识别出的当前属性信息中遗漏的部分属性信息,以及识别出错的部分属性信息,得到属性差异信息,再利用属性差异信息,更新目标子树对应的页面组件的页面代码,能够提高更新后得到的页面代码的准确性。
为使本公开的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中附图,对本公开实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此,以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围,而是仅仅表示本公开的选定实施例。基于本公开的实施例,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本公开保护的范围。
另外,本公开实施例中的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。
在本文中提及的“多个或者若干个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
经研究发现,在利用现有的D2C方式生成设计稿对应的页面代码时,大多是利用div+span这种没有语义的标签来还原视觉稿,只能做到对设计稿进行视觉效果的还原,但对于设计稿中的一些页面组件的组件属性,例如,组件的功能、类型、内部逻辑等,无法做到准确识别,从而也无法实现生成准确地页面代码。
基于上述研究,本公开提供了一种代码生成方法、装置、计算机设备和存储介质,原始属性信息用于记录页面组件对应的各种组件属性,通过将目标节点对应的原始属性信息进行预先标记,可以保证基于该标记,能够准确地获取各个目标节点对应的原始属性信息。通过确定以带有标记出对应的原始属性信息的目标节点为根节点的目标子树,可以实现对设计稿中包括的各个节点进行合理的逻辑划分,基于目标子树进行节点的处理,可以有效避免一个节点被重复处理的问题。通过将目标节点对应的原始属性信息和当前属性信息进行比较,能够确定出识别出的当前属性信息中遗漏的部分属性信息,以及识别出错的部分属性信息,得到属性差异信息,再利用属性差异信息,更新目标子树对应的页面组件的页面代码,能够提高更新后得到的页面代码的准确性。
针对以上方案所存在的缺陷,均是发明人在经过实践并仔细研究后得出的结果,因此,上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案,都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
需要说明的是,本公开实施例中所提到的特定名词包括:
div:是层叠样式表中的定位技术,全称division,即为划分。有时可以称其为图层。div元素是用来为HTML文档内大块的内容提供结构和背景的元素;
span:是超文本标记语言HTML的行内标签,被用来组合文档中的行内元素;
ArcoDesign:是由字节跳动团队和架构前端团队联合推出的企业级设计系统,其拥有系统的设计规范和资源,依据此规范提供了覆盖React、Vue、Mobile的原子组件;
props信息:指页面组件使用时需要指定的相关信息,如类型信息,props信息的种类和具体的取值是需要组件开发人员事先指定的。
为便于对本实施例进行理解,首先对本公开实施例所公开的一种代码生成方法进行详细介绍,本公开实施例所提供的代码生成方法的执行主体一般为具有一定计算能力的计算机设备,在一些可能的实现方式中,该代码生成方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
下面以执行主体为计算机设备为例对本公开实施例提供的代码生成方法加以说明。
如图1所示,为本公开实施例提供的一种代码生成方法的流程图,可以包括以下步骤:
S101:获取待转换的页面设计稿,页面设计稿对应的设计稿树中包括具有不同功能的各个页面组件分别对应的至少一个节点。
这里,待转换的页面设计稿可以为用户界面(User Interface,UI)设计师画出的、UI页面对应的设计稿。页面设计稿中可以包括至少一个页面组件,页面组件即为页面中具有不同的组件逻辑功能、用于表征不同信息的组件,其中,页面组件例如可以为按钮组件、文本框组件等等,组件逻辑功能例如可以为下拉选择框功能、双击隐藏组件功能等等。各个页面组件中还可以包括与该页面组件相关的子页面组件。不同的页面组件可以来自不同的页面组件库,例如,arcoDesign组件库。
如图2所示,为本公开实施例所提供的一种页面设计稿的示意图。在图2的左侧包括多个页面组件,例如,姓名框组件、信息框组件等等,页面中间还包括一个搜索框组件,该搜索框组件中的组件A和组件B分别为该搜索框组件对应的两个子页面组件。
页面设计稿可以对应存在一个包括具有不同功能的各个页面组件分别对应的节点的设计稿树,设计稿树为基于页面设计稿中的各个页面组件之间的关联关系生成的,一个页面组件可以对应于至少一个节点。例如,图2所示的姓名框组件可以对应于一个节点,搜索框组件可以对应于三个节点。
待转换的页面设计稿中的部分页面组件可以为利用代码转设计稿(Code toDesign,C2D)算法生成并上线的,UI设计师可以利用上线的页面组件进行页面设计稿的设计。并且,UI设计师也可以对上线的页面组件进行调整,并利用调整后的页面组件设计出页面设计稿,其中,对上线的页面组件进行调整的操作例如可以为更改组件尺寸、更改组件填充信息等。这样,在具体实施时,页面设计稿中可以包括利用C2D算法生成的、且未被UI设计师修改的部分页面组件,和/或利用C2D算法生成的、且一被UI设计师修改后的部分页面组件。
或者,待转换的页面设计稿也可以为直接利用C2D算法转化得到的。
示例性的,可以直接在预设的页面设计工具中获取待转换的页面设计稿。
S102:从设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个目标节点,确定以该目标节点为根节点的目标子树;目标子树中除目标节点外的其它节点未标记出对应的原始属性信息。
这里,原始属性信息用于表征节点对应的页面组件在生成时组件本身所具有的各种组件属性,例如,组件类型、组件样式、组件所在的组件库的信息。具体的,原始属性信息可以为节点对应的页面组件的Props信息。
目标节点为设计稿树中的一个被标记出对应的原始属性信息的节点,目标节点对应的原始属性信息被标记的方式可以包括利用C2D方式标记、利用人工标注的方式标记等。原始属性信息为预先利用上述任一方式标记的。不同的目标节点对应于不同的目标子树。
如图3所示,本公开实施例提供的一种D2C和C2D之间的转换示意图,具体的,可以利用C2D的方式,生成待转换的页面设计稿中的页面组件,并对页面组件的页面代码进行标记,标记出页面代码对应的原始属性信息,进而,可以利用生成的各个页面组件生成待转换的页面设计稿。然后在利用D2C方式对待转换的页面设计稿进行转换时,可以利用标记的原始属性信息,生成该页面设计稿中的各个页面组件对应的准确的页面代码。
目标子树是由从设计稿树中截取的节点组成的一棵节点树,最少可以仅包括一个目标节点,一个目标子树通常可以对应于一个页面组件,各个目标子树对应的节点互不重复。一个目标子树对应的根节点为确定的标记出对应的原始属性信息的一个目标节点,目标子树包括的各个节点中,除目标节点外的其它节点均为未标记出对应的原始属性信息的节点。
本步骤在具体实施时,针对设计稿树中的各个节点,确定该节点是否存在对应的标记出的原始属性信息,如果是,则可以将该子节点作为目标节点,如果否,则可以确定该节点的下一节点是否存在对应的标记出的原始属性信息,直至从设计稿树中的各个节点中,确定存在标记出的原始属性信息的各个目标节点。
然后,针对每个目标节点,可以按照设计稿树的结构,确定处于该目标节点之后,且处于该根节点对应的下一目标节点之前的、各个不存在标记出的原始属性信息的各个节点,然后可以将该目标节点作为对应的目标子树的根节点,在保留确定出各个节点在设计稿树中的节点位置关系的基础上,将确定出的各个节点作为该目标子树的其他的各个节点,从而得到该目标节点对应的完整的目标子树。
示例性的,如图4所示,为本公开实施例所提供的一种设计稿树的示意图,其中包括13个节点—节点1至节点13,其中,节点2、节点3、节点8和节点13为确定出目标节点,则以节点2为根节点的目标子树包括的节点为区域A中的各个节点,以节点3为根节点的目标子树包括的节点为区域B中的各个节点,以节点8为根节点的目标子树包括的节点为区域C中的各个节点,以节点13为根节点的目标子树包括节点13,如果节点13之后还包括其他的图3未示出的节点,则以节点13为根节点的目标子树可能还包括未示出的部分节点。
S103:针对每个目标子树,基于目标子树的根节点对应的原始属性信息,以及从页面设计稿中识别出来的根节点对应的当前属性信息,确定目标子树对应的属性差异信息。
这里,属性差异信息用于表征根节点对应的目标子树所指示的页面组件的原始属性信息和从页面设计稿中识别出的当前属性信息之间的差异。具体的,当前属性信息可以为当前视觉属性,属性差异信息可以包括当前识别出错的部分属性信息以及未识别出的部分属性信息,未识别出的部分属性信息例如可以包括未识别出的组件逻辑、组件类型、组件所在的组件库的版本、组件名称等信息。
具体实施时,针对每个目标子树,可以基于确定出的该目标子树的根节点对应的原始属性信息,以及识别出的该根节点对应的当前属性信息,确定两者之间的差异信息,将确定的该差异信息作为该目标子树对应的属性差异信息。
并且,在确定出该目标子树对应的属性差异信息之后,可以将该属性差异信息存储在该目标子树的根节点对应的位置处,以便于后续基于存储在该位置处的属性差异信息,实现对根节点对应的页面代码的准确更新。
这里,在一种可能的实施方式中,某个目标子树对应的属性差异信息可以为空,也即,该目标子树的根节点对应的当前属性信息和标记出的原始属性信息之间不存在差异。
此外,关于确定各个目标子树对应的属性差异信息的步骤,可以在得到各个目标子树之后执行,也可以分别在确定出页面设计稿对应的每个目标子树之后即执行,这里不进行具体限定。
S104:基于属性差异信息,更新目标子树对应的页面组件的页面代码。
这里,不同的页面组件对应的页面代码不同,由待转换的页面设计稿中包括的各个页面组件分别对应的页面代码,可以组成页面设计稿对应的整体页面代码。
具体实施时,针对目标子树对应的属性差异信息以及该目标子树对应的页面组件,可以利用该属性差异信息,对该页面组件对应的更新前的页面代码进行更新。具体的,可以基于属性差异信息,对更新前的页面代码中与该属性差异信息对应的属性相关的部分代码进行修改;在更新前的页面代码中不存在与该属性差异信息对应的属性相关的代码时,可以基于属性差异信息,生成新的代码。继而,可以得到该页面组件对应的更新后的页面代码。其中,更新前的页面代码可以为利用现有的D2C技术生成的。
进一步的,基于每个目标子树对应的属性差异信息,均可以按照上述步骤,更新每个目标子树分别对应的页面组件的页面代码,最终得到更新后的各个页面代码。再基于各个更新后的页面代码,可以得到的页面设计稿对应的更新后的整体页面代码。
关于对各个目标子树对应的页面组件的页面代码进行更新的步骤,可以在确定出所有的目标子树对应的属性差异信息之后执行的;或者,也可以为在确定出一个目标子树对应的属性差异信息的情况下,即对该目标子树对应的页面组件的页面代码进行更新。
关于设计稿树中除各个目标子树中的节点以外的各个节点对应的页面组件的组件代码,可以直接利用现有对D2C技术生成,且具有较高的准确性,因此,可以不需要再利用属性差异信息进行更新。
这样,原始属性信息用于记录页面组件对应的各种组件属性,通过将目标节点对应的原始属性信息进行预先标记,可以保证基于该标记,能够准确地获取各个目标节点对应的原始属性信息。通过确定以带有标记出对应的原始属性信息的目标节点为根节点的目标子树,可以实现对设计稿中包括的各个节点进行合理的逻辑划分,基于目标子树进行节点的处理,可以有效避免一个节点被重复处理的问题。通过将目标节点对应的原始属性信息和当前属性信息进行比较,能够确定出识别出的当前属性信息中遗漏的部分属性信息,以及识别出错的部分属性信息,得到属性差异信息,再利用属性差异信息,更新目标子树对应的页面组件的页面代码,能够提高更新后得到的页面代码的准确性。
在一种实施例中,针对S102,可以按照以下步骤实施:
S102-1:遍历设计稿树中的各个节点,确定遍历到的当前节点是否有标记出的原始属性信息。
具体实施时,可以直接对设计稿树中的各个节点进行遍历,针对遍历到的当前节点,判断该当前节点是否存在标记出的原始属性信息。
S102-2:若确定遍历到的当前节点为标记出对应的原始属性信息的目标节点,遍历以目标节点为父节点的各个子节点,确定遍历到的当前子节点是否有标记出的原始属性信息。
本步骤中,在确定遍历到的当前节点存在标记出的对应的原始属性信息的情况下,将该当前节点作为一个目标节点,并以该目标节点为父节点,对该父节点对应的各个子节点进行依次遍历,针对遍历到的当前子节点,确定该当前子节点是否存在标记出的原始属性信息。
另外,在确定遍历到的当前节点不存在对应的标记出的原始属性信息的情况下,可以继续对设计稿树中的、遍历顺序在该当前节点之后的节点进行遍历,并将其作为新的当前节点,返回确定遍历到的当前节点是否有标记出的原始属性信息的步骤,直至确定遍历到的当前节点为标记出对应的原始属性信息的目标节点,执行S102-2。
S102-3:若遍历到的当前子节点没有标记出的原始属性信息,以该当前子节点作为新的父节点,返回遍历父节点的各个子节点的步骤,直到确定遍历到的当前子节点具有标记出的原始属性信息。
具体实施时,在确定S102-2中遍历到的当前子节点没有标记出的原始属性信息,则可以将该当前子节点作为新的父节点,并返回S102-2中的遍历父节点的各个子节点的步骤,直到确定遍历到的当前子节点具有标记出的原始属性信息,或者,直至遍历到的当前子节点不存在新的子节点。
S102-4:基于目标节点以及遍历到的不具有标记出的原始属性信息的各个子节点之间的依赖关系,构建以目标节点为根节点的一个目标子树。
这里,依赖关系即为上述遍历到的不具有标记出的原始属性信息的各个子节点之间的父子关系和兄弟关系。
在基于上述S102-3确定出遍历到的当前子节点具有标记出的原始属性信息的情况下,可以将目标节点以及遍历到的不具有标记出的原始属性信息的各个子节点,从上述设计稿树中截取出来。然后,可以基于截取出的目标节点以及截取出的遍历到的不具有标记出的原始属性信息的各个子节点之间的父子关系和兄弟关系,构建以目标节点为根节点的一个目标子树。
进一步的,可以将遍历到的具有标记出的原始属性信息的当前子节点作为新的目标节点,并返回S102-2中遍历以目标节点为父节点的各个子节点的步骤,直至对上述设计稿树中的各个节点均完成一遍遍历,得到上述设计稿树对应的各个目标节点和各个目标子树。
这样,通过确定以带有标记出对应的原始属性信息的目标节点为根节点的目标子树,可以实现对设计稿中包括的各个节点进行合理的逻辑划分,基于目标子树进行节点遍历,可以有效避免一个节点被重复遍历的问题。
在一种实施例中,标记出的原始属性信息可以包括以下至少一项:节点对应的页面组件的名称、页面组件所在的组件库的名称、组件库的版本信息,如1.0版本、2.0版本等、页面组件的类型信息,如按钮类型、文本框类型、搜索框类型等等、页面组件的传入参数。
其中,页面组件的传入参数可以包括以下至少一项:页面组件的尺寸信息xywh、页面组件的填充信息fills、页面组件的边框信息strokes、页面组件的阴影信息effects等。
在一种实施例中,针对S103,可以按照以下步骤实施:
S103-1:基于当前属性信息和原始属性信息,确定目标子树对应的第一差异信息。
具体实施时,针对每个目标子树,可以直接将该目标子树的根节点应的当前属性信息和对应的原始属性信息进行信息比较,确定当前属性信息相较于原始属性信息所遗漏的部分属性信息,以及确定当前属性信息相较于原始属性信息识别出错的部分属性信息,并生成用于表征识别出错的部分属性信息的相关信息。
例如,在当前属性信息包括对应于页面组件的名称的信息1、对应于页面组件所在的组件库的名称的信息2和对应于页面组件的类型信息的信息3,原始属性信息包括对应于页面组件的名称的信息1,对应于页面组件所在的组件库的名称的信息2,对应于页面组件的类型信息的信息4,对应于页面组件的尺寸信息的信息5和对应于页面组件的填充信息的信息6的情况下,可以确定当前属性信息相较于原始属性信息所遗漏的部分属性信息为:信息5和信息6,当前属性信息相较于原始属性信息识别出错的部分属性信息为将页面组件的类型信息对应的信息4识别为了信息3,并可以生成相关信息:页面组件的类型信息应该从信息3变为信息4。
然后,可以直接将确定的上述遗漏的部分属性信息和上述用于表征识别出错的部分属性信息的相关信息,作为目标子树对应的第一差异信息。
S103-2:在根据第一差异信息,确定根节点发生节点类型变更的情况下,基于当前属性信息中的当前类型信息对应的默认属性信息,以及当前属性信息,确定目标子树对应的第二差异信息。
这里,默认属性信息即为各种类型页面组件对应的原始属性信息。
具体实施时,基于第一差异信息,可以判断第一差异信息中是否存在关于根节点对应的节点类型发生变更的信息,其中,节点类型发生变更例如可以为从节点类型从文本类型变更为标签tag类型。
在确定第一差异信息指示出该第一差异信息对应的根节点发生节点类型变更的情况下,还需要根据该根节点对应的当前属性信息中所包括的该根节点的当前类型信息,获取预先存储的该当前类型信息对应的默认属性信息。然后,将该默认属性信息和该根节点对应的当前属性信息进行比较,确定出关于类型信息的差异信息,将该差异信息作为目标子树对应的第二差异信息。
S103-3:将第一差异信息和第二差异信息作为目标子树对应的属性差异信息。
这样,基于上述S103-1至S103-3,可以准确地确定出目标子树对应的属性差异信息。
在一种实施例中,在执行上述S104之前,还可以获取文本差异信息,具体的,在基于根节点的当前属性信息中所包括的页面组件的类型信息,确定识别出的根节点的节点类型为文本类型的情况下,还需要获取根节点对应的当前文本信息。并且,还可以获取根节点对应的标记出的原始文本信息,这里,原始文本信息可以不包括在原始属性信息,可以为另外标注的信息。
在一种实施例方式中,原始文本信息也可为标记出的原始属性信息中的一个属性信息,如此,在确定识别出的当前属性信息中包括的根节点的节点类型为文本类型的情况下,如果当前属性信息中不包括根节点对应的当前文本信息,可以对根节点进行进一步的识别,确定出根节点是否存在当前文本信息,如果是,将识别出的当前文本信息添加到当前属性信息中;如果否,确定当前属性信息中不存在当前文本信息。进一步的,在基于当前属性信息和原始属性信息确定根节点对应的目标子树的属性差异信息时,如果存在文本差异信息,则可以直接包含在确定的属性差异信息中。
进一步的,可以基于根节点对应的当前文本信息以及根节点对应的原始文本信息,确定根节点对应的文本差异信息。
之后,针对S104,可以直接基于属性差异信息以及文本差异信息,更新目标子树对应的页面组件的页面代码。
这里,关于基于属性差异信息,对目标子树对应的页面组件进行代码更新的步骤可以参照上述S103中的步骤,此处不再赘述。关于基于文本差异信息,对目标子树对应的页面组件进行代码更新的步骤,具体的,可以对更新前的页面代码中与文本信息相关的部分代码进行修改,得到页面组件对应的更新后的页面代码;或者,在更新前的页面代码中不存在与文本信息相关的代码的情况下,可以直接生成与文本差异信息相关的页面代码,并将其添加到页面组件对应的页面代码中,得到页面组件对应的更新后的页面代码。
在一种实施例中,针对S102中确定目标节点的步骤,可以按照以下步骤实施:
步骤一、从设计稿树中的每个节点的节点信息中,分别查找利用预设标识符标记的节点信息段。
这里,预设标识符为能够标识原始属性信息对应的信息段的标识符,节点信息中包括一个节点对应的所有节点相关信息,例如,节点属性信息、节点生成时间、节点创建人等等。
具体实施时,针对确定设计稿树中的每个节点是否为目标节点的过程,可以先获取该节点对应的节点信息,然后,确定该查找该节点信息中是否存在利用预设标识符标记的节点信息段。
步骤二、若查找到节点信息段,则将该节点作为目标节点,并将查找到节点信息段内的信息作为目标节点的原始属性信息。
具体实施时,如果查找到该节点信息中存在利用预设标识符标记的节点信息段,则可以将该节点作为目标节点,将查找到节点信息段内的信息作为该目标节点对应的标记的原始属性信息。
进而,通过查找每个节点对应的节点信息中是否存在预设标识符的范式,可以准确从设计稿树中所包括的节点中确定出各个目标节点,以及确定出各个目标节点对应的标记的原始属性信息。
在一种实施例中,针对S104,可以按照以下步骤实施:
S104-1:基于待转换的页面设计稿,生成各个页面组件的初始页面代码。
上述初始页面代码可以为div、span格式的页面代码。
具体实施时,可以利用D2C的方式,对待转换的页面设计稿进行识别,确定出待转换的页面设计稿中包括的各个页面组件,以及各个页面组件对应的当前属性信息,然后,基于各个页面组件对应的当前属性信息,生成各个页面组件的初始页面代码。
S104-2:从各个页面组件的初始页面代码中,选择与属性差异信息匹配的目标页面组件的初始页面代码。
本步骤中,在确定出各个目标子树对应的属性差异信息之后,也即可以确定出每个属性差异信息对应的目标页面组件,然后,针对每个目标页面组件,可以从各个页面组件的初始页面代码中,筛选出该目标页面组件对应的初始页面代码。
S104-3:基于与目标页面组件匹配的属性差异信息,对目标页面组件的初始页面代码进行更新。
这里,针对每个目标页面组件,在利用上述S104-2确定出该目标页面组件对应的初始页面代码之后,可以该目标页面组件对应的属性差异信息,对该目标页面组件对应的初始页面代码进行更新,从而,得到的该目标页面组件对应的更新后的页面代码。
这样,基于每个目标页面组件对应的属性差异信息,可以准确地实现对每个目标页面组件对应的初始页面代码的更新,得到的每个目标页面组件对应的准确的页面代码。
在另一种实施方式中,也可以在确定出待转换的页面设计稿中包括的页面组件对应的当前属性信息之后,直接基于当前属性信息,确定页面设计稿对应的各个目标节点的属性差异信息,也即,确定出目标页面组件对应的属性差异信息;然后,再利用D2C方式,直接基于各个页面组件对应的当前属性信息,和确定的目标页面组件对应的属性差异信息,生成页面设计稿中的各个页面组件对应的页面代码。这里,对于一些不存在属性差异信息的页面组件,可以直接利用D2C方式,基于该页面组件对应的当前属性信息,生成该页面组件对应的页面代码;针对存在属性差异信息的目标页面组件,可以直接利用D2C方式,基于该目标页面组件对应的当前属性信息和属性差异信息,生成该目标页面组件对应的页面代码。
本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思,本公开实施例中还提供了与代码生成方法对应的代码生成装置,由于本公开实施例中的装置解决问题的原理与本公开实施例上述代码生成方法相似,因此装置的实施可以参见方法的实施,重复之处不再赘述。
如图5所示,为本公开实施例提供的一种代码生成装置的示意图,包括:
获取模块501,用于获取待转换的页面设计稿,所述页面设计稿对应的设计稿树中包括具有不同功能的各个页面组件分别对应的至少一个节点;
第一确定模块502,用于从所述设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个所述目标节点,确定以该目标节点为根节点的目标子树;所述目标子树中除所述目标节点外的其它节点未标记出对应的原始属性信息;
第二确定模块503,用于针对每个所述目标子树,基于所述目标子树的所述根节点对应的原始属性信息,以及从所述页面设计稿中识别出来的所述根节点对应的当前属性信息,确定所述目标子树对应的属性差异信息;
更新模块504,用于基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,所述第一确定模块502,用于遍历所述设计稿树中的各个节点,确定遍历到的当前节点是否有标记出的原始属性信息;
若确定遍历到的当前节点为标记出对应的原始属性信息的目标节点,遍历以所述目标节点为父节点的各个子节点,确定遍历到的当前子节点是否有标记出的原始属性信息;
若遍历到的当前子节点没有标记出的原始属性信息,以该当前子节点作为新的所述父节点,返回遍历所述父节点的各个子节点的步骤,直到确定遍历到的当前子节点具有标记出的原始属性信息;
基于所述目标节点以及遍历到的不具有标记出的原始属性信息的各个所述子节点之间的依赖关系,构建以所述目标节点为根节点的一个所述目标子树。
在一种可能的实施方式中,所述第二确定模块503,用于基于所述当前属性信息和所述原始属性信息,确定所述目标子树对应的第一差异信息;
在根据所述第一差异信息,确定所述根节点发生节点类型变更的情况下,基于当前属性信息中的当前类型信息对应的默认属性信息,以及所述当前属性信息,确定所述目标子树对应的第二差异信息;
将所述第一差异信息和第二差异信息作为所述目标子树对应的所述属性差异信息。
在一种可能的实施方式中,所述第二确定模块503,还用于所述基于所述属性差异信息,更新所述目标子树对应的页面组件的页面代码之前,在基于所述根节点的当前属性信息,确定所述根节点的节点类型为文本类型的情况下,获取所述根节点对应的当前文本信息;
基于所述当前文本信息以及所述根节点对应的标记出的原始文本信息,确定所述根节点对应的文本差异信息;
所述更新模块504,用于基于所述属性差异信息以及文本差异信息,更新所述目标子树对应的页面组件的页面代码。
在一种可能的实施方式中,标记出的所述原始属性信息包括以下至少一项:节点对应的页面组件的名称、页面组件所在的组件库的名称、组件库的版本信息、页面组件的类型信息、页面组件的传入参数;
所述传入参数包括以下至少一项:页面组件的尺寸信息、页面组件的填充信息、页面组件的边框信息、页面组件的阴影信息。
在一种可能的实施方式中,第一确定模块502,用于从所述设计稿树中的每个节点的节点信息中,分别查找利用预设标识符标记的节点信息段;
若查找到所述节点信息段,则将该节点作为所述目标节点,并将查找到所述节点信息段内的信息作为所述目标节点的所述原始属性信息。
在一种可能的实施方式中,所述更新模块504,用于基于待转换的页面设计稿,生成各个页面组件的初始页面代码;
从所述各个页面组件的初始页面代码中,选择与所述属性差异信息匹配的目标页面组件的初始页面代码;
基于与所述目标页面组件匹配的所述属性差异信息,对所述目标页面组件的初始页面代码进行更新。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明,这里不再详述。
本公开实施例还提供了一种计算机设备,如图6所示,为本公开实施例提供的一种计算机设备结构示意图,包括:
处理器61和存储器62;所述存储器62存储有处理器61可执行的机器可读指令,处理器61用于执行存储器62中存储的机器可读指令,所述机器可读指令被处理器61执行时,处理器61执行下述步骤:S101:获取待转换的页面设计稿,页面设计稿对应的设计稿树中包括具有不同功能的各个页面组件分别对应的至少一个节点;S102:从设计稿树中的各个节点中,确定标记出对应的原始属性信息的目标节点,并针对每个目标节点,确定以该目标节点为根节点的目标子树;目标子树中除目标节点外的其它节点未标记出对应的原始属性信息;S103:针对每个目标子树,基于目标子树的根节点对应的原始属性信息,以及从页面设计稿中识别出来的根节点对应的当前属性信息,确定目标子树对应的属性差异信息以及S104:基于属性差异信息,更新目标子树对应的页面组件的页面代码。
上述存储器62包括内存621和外部存储器622;这里的内存621也称内存储器,用于暂时存放处理器61中的运算数据,以及与硬盘等外部存储器622交换的数据,处理器61通过内存621与外部存储器622进行数据交换。
上述指令的具体执行过程可以参考本公开实施例中所述的代码生成方法的步骤,此处不再赘述。
本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述方法实施例中所述的代码生成方法的步骤。其中,该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例所提供的代码生成方法的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行上述方法实施例中所述的代码生成方法的步骤,具体可参见上述方法实施例,在此不再赘述。
该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software Development Kit,SDK)等等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统和装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。在本公开所提供的几个实施例中,应该理解到,所揭露的系统、装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本公开各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解,本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-OnlyMemory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述实施例,仅为本公开的具体实施方式,用以说明本公开的技术方案,而非对其限制,本公开的保护范围并不局限于此,尽管参照前述实施例对本公开进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本公开揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围,都应涵盖在本公开的保护范围之内。因此,本公开的保护范围应所述以权利要求的保护范围为准。