前端代码生成方法和装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113778403A(43)申请公布日2021.12.10(21)申请号202110056755.3(22)申请日2021.01.15(71)申请人北京沃东天骏信息技术有限公司地址100176北京市大兴区经济技术开发区科创十一街18号院2号楼4层A402室(72)发明人霍颖惠杨艳春魏珊珊董英姿王浩胡景贺颜伟鹏(74)专利代理机构北京英赛嘉华知识产权代理有限责任公司11204代理人王达佐马晓亚(51)Int.Cl.G06F8/34(2018.01)G06F8/38(2018.01)G06F8/73(2018.01)权利要求书2页说明书11页附图6页(54)发明名称前端代码生成方法和装置(57)摘要本申请公开了前端代码生成方法和装置，涉及计算机软件技术领域。该方法的一具体实施方式包括：获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成目标UI视图界面对应的完整的前端代码。该实施方式使得生成的前端代码更加符合开发习惯，可读性更高。CN113778403ACN113778403A权利要求书1/2页1.一种前端代码生成方法，所述方法包括：获取目标UI视图界面中各视图元素的属性信息；基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，所述子视图元素之间不存在局部叠加关系；交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定所述父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码。2.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息、高度和宽度，以及所述基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，包括：按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素。3.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息中的纵坐标和高度，以及所述行相关性信息通过以下方式得到：按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。4.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息中的横坐标和宽度，所述列相关性信息通过以下方式得到：按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息中的横坐标、宽度进行比对，得到各子视图元素之间的列相关性信息。5.根据权利要求1‑4任一所述的方法，其中，所述基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码，包括：采用Flex布局对所述DOM树进行样式推导，得到推导后DOM树；基于所述推导后DOM树生成目标UI视图界面对应的完整的前端代码。6.根据权利要求1‑4任一所述的方法，其中，所述基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码包括：基于所述DOM树和与所述DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码。7.一种前端代码生成装置，所述装置包括：获取模块，被配置成获取目标UI视图界面中各视图元素的属性信息；确定模块，被配置成基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，所述子视图元素之间不存在局部叠加关系；构建模块，被配置成交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定所述父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；生成模块，被配置成基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码。8.根据权利要求7所述的装置，其中，所述确定模块进一步被配置成：按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度2CN113778403A权利要求书2/2页进行比对，确定出对应于同一父视图元素的子视图元素点。9.根据权利要求7所述的装置，其中，所述属性信息包括：视图元素的绝对定位信息中的纵坐标和高度，以及所述行相关性信息通过以下方式得到：按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。10.根据权利要求7所述的装置，其中，所述属性信息包括：视图元素的绝对定位信息中的横坐标和宽度