一种代码文件生成方法和装置制造方法及图纸

本发明专利技术提供了一种代码文件生成方法和装置，属于计算机技术领域。其中，终端可以获取目标UI图，然后识别目标UI图中的每个元素的属性信息及位置信息，接着基于每个元素的属性信息及位置信息，生成目标树模型，最后，基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明专利技术实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

【技术实现步骤摘要】
一种代码文件生成方法和装置
本专利技术涉及计算机
，尤其涉及一种代码文件生成方法和装置。
技术介绍
为了丰富页面的展示效果，在页面开发的过程中，往往会采用卡片类的设计，即，会在页面中设置大量的用户界面(UserInterface，UI)图。现有技术中，页面中所设置的每张UI图，都需要开发人员先根据每张UI图的内容，手动编写对应的代码文件，这样，终端通过运行这些代码文件，就能在页面中渲染出相应的UI图。但是，这种手动编写代码文件的方式操作较为复杂，便捷性较低，且实现成本较高。
技术实现思路
本专利技术提供了一种代码文件生成方法和装置，以解决通过手动编写的方式生成代码文件时，操作较为复杂，便捷性较低，且实现成本较高的问题。第一方面，本专利技术实施例提供了一种代码文件生成方法，该方法包括：获取目标UI图；所述目标UI图中包括至少一个元素；识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；基于每个元素的属性信息及位置信息，生成目标树模型；基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。优选的，所述基于每个元素的属性信息及位置信息，生成目标树模型的步骤，包括：将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；按照预设规则，为每个元素节点设置对应的父节点值；基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每个布局节点的属性，构建目标树模型。优选的，所述基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型的步骤，包括：任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；或者，对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。优选的，所述代码文件包括布局文件以及样式文件；所述基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件的步骤，包括：获取所述目标树模型中每个布局节点的属性；获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。优选的，所述识别所述目标UI图中的每个元素的属性信息及位置信息的步骤，包括：将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。优选的，在所述基于预设的模板代码，遍历所述目标树模型，得到所述目标UI图对应的代码文件的步骤之后，所述方法还包括：利用所述目标UI图对应的代码文件进行渲染，得到显示界面；将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；基于所述正确率，对所述预设图像识别模型进行调整。第二方面，本专利技术实施例提供了一种代码文件生成装置，该装置包括：获取模块，用于获取目标UI图；所述目标UI图中包括至少一个元素；识别模块，用于识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；第一生成模块，用于基于每个元素的属性信息及位置信息，生成目标树模型；第二生成模块，用于基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。优选的，第一生成模块，包括：绑定子模块，用于将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；设置子模块，用于按照预设规则，为每个元素节点设置对应的父节点值；确定子模块，用于基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；构建子模块，用于基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。优选的，所述构建子模块，用于：任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；或者，对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。优选的，所述代码文件包括布局文件以及样式文件；所述第二生成模块，用于：获取所述目标树模型中每个布局节点的属性；获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。优选的，所述识别模块，用于：将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。优选的，所述装置还包括：渲染模块，用于利用所述目标UI图对应的代码文件进行渲染，得到显示界面；对比模块，用于将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；调整模块，用于基于所述正确率，对所述预设图像识别模型进行调整。第三方面，本专利技术实施例提供了一种移动终端，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面所述的代码文件生成方法的步本文档来自技高网...

【技术保护点】
1.一种代码文件生成方法，其特征在于，所述方法包括：获取目标UI图；所述目标UI图中包括至少一个元素；识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；基于每个元素的属性信息及位置信息，生成目标树模型；基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

【技术特征摘要】
1.一种代码文件生成方法，其特征在于，所述方法包括：获取目标UI图；所述目标UI图中包括至少一个元素；识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；基于每个元素的属性信息及位置信息，生成目标树模型；基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。2.根据权利要1所述的方法，其特征在于，所述基于每个元素的属性信息及位置信息，生成目标树模型的步骤，包括：将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；按照预设规则，为每个元素节点设置对应的父节点值；基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。3.根据权利要2所述的方法，其特征在于，所述基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每个布局节点的属性，构建目标树模型的步骤，包括：任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；或者，对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。4.根据权利要2所述的方法，其特征在于，所述代码文件包括布局文件以及样式文件；所述基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件的步骤，包括：获取所述目标树模型中每个布局节点的属性；获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。5.根据权利要求1所述的方法，其特征在于，所述识别所述目标UI图中的每个元素的属性信息及位置信息的步骤，包括：将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。6.根据权利要求2所述的方法，其特征在于，在所述基于预设的模板代码，遍历所述目标树模型，得到所述目标UI图对应的代码文件的步骤之后，所述方法还包括：利用所述目标UI图对应的代码文件进行渲染，得到显示界面；将所述显示界面与所述目标UI图进行对比...

【专利技术属性】
技术研发人员：李茜，
申请(专利权)人：北京奇艺世纪科技有限公司，
类型：发明
国别省市：北京,11