本申请提供了一种页面源码的生成方法及装置，其中，该方法包括：获取界面设计图中每个组件的位置信息和组件图；将各个组件图输入至训练好的分类模型中，得到每个组件的组件类型；依据组件源码数据库和每个组件的组件类型，确定该组件匹配的组件源码；基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码。本申请通过将界面设计图拆分成多个组件，并确定每个组件在界面设计图的位置信息，通过分类模型确定每个组件的组件类别，从而依据每个组件的组件类别确定该组件对应的组件源码，并依据每个组件的组件源码和位置信息生成页面源码，解决了现有技术中生成页面代码的效率较低的技术问题，达到了提高转换效率的技术效果。的技术效果。的技术效果。
【技术实现步骤摘要】
一种页面源码的生成方法及装置
[0001]本申请涉及页面设计
，尤其涉及一种页面源码的生成方法及装置。
技术介绍
[0002]现有技术中，需要程序员将设计师设计好的界面设计图人工转换为页面代码，对于出现在不同界面设计图的同一种组件，每次都需要进行转换，影响生成页面源代码的效率。
技术实现思路
[0003]有鉴于此，本申请的目的在于至少提供一种页面源码的生成方法及装置，通过将界面设计图拆分成多个组件，并确定每个组件在界面设计图的位置信息，通过分类模型确定每个组件的组件类别，从而依据每个组件的组件类别确定该组件对应的组件源码，并依据每个组件的组件源码和位置信息生成页面源码，解决了现有技术中生成页面代码的效率较低的技术问题，达到了提高转换效率的技术效果。
[0004]本申请主要包括以下几个方面：
[0005]第一方面，本申请实施例提供一种页面源码的生成方法，所述页面源码的生成方法包括：获取界面设计图中每个组件的位置信息和组件图；将各个组件图输入至训练好的分类模型中，得到每个组件的组件类型；依据组件源码数据库和每个组件的组件类型，确定该组件匹配的组件源码；基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码。
[0006]可选地，获取界面设计图中每个组件的位置信息和组件图，包括：确定界面设计图中每个组件的位置信息；依据每个组件的位置信息对所述界面设计图进行拆分，得到该组件的组件图。
[0007]可选地，基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码，包括：根据各个组件的边界信息，在页面的定义文档主体标签下生成该组件的容器节点；将各个组件的容器节点中均插入该组件的组件源码，以生成所述界面设计图对应的页面源码。
[0008]可选地，将各个组件的容器节点中均插入该组件的组件源码，以生成所述界面设计图对应的页面源码之后，所述方法还包括：将生成的所述页面源码发送至用户，以使用户对所述页面源码进行编辑，以配置所述组件源码的各项参数。
[0009]第二方面，本申请实施例还提供一种页面源码的生成装置，所述装置包括：获取模块，用于获取界面设计图中每个组件的位置信息和组件图；分类模块，用于将各个组件图输入至训练好的分类模型中，得到每个组件的组件类型；匹配模块，用于依据组件源码数据库和每个组件的组件类型，确定该组件匹配的组件源码；生成模块，用于基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码。
[0010]可选地，获取模块，还用于确定界面设计图中每个组件的位置信息；依据每个组件
的位置信息对所述界面设计图进行拆分，得到该组件的组件图。
[0011]可选地，生成模块，还用于根据各个组件的边界信息，在页面的定义文档主体标签下生成该组件的容器节点；将各个组件的容器节点中均插入该组件的组件源码，以生成所述界面设计图对应的页面源码。
[0012]可选地，装置还包括：发送模块，用于将生成的所述页面源码发送至用户，以使用户对所述页面源码进行编辑，以配置所述组件源码的各项参数。
[0013]第三方面，本申请实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过所述总线进行通信，所述机器可读指令被所述处理器运行时执行上述第一方面或第一方面中任一种可能的实施方式中所述的页面源码的生成方法的步骤。
[0014]第四方面，本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述第一方面或第一方面中任一种可能的实施方式中所述的页面源码的生成方法的步骤。
[0015]本申请实施例提供的一种页面源码的生成方法及装置，该方法包括：获取界面设计图中每个组件的位置信息和组件图；将各个组件图输入至训练好的分类模型中，得到每个组件的组件类型；依据组件源码数据库和每个组件的组件类型，确定该组件匹配的组件源码；基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码。通过将界面设计图拆分成多个组件，并确定每个组件在界面设计图的位置信息，通过分类模型确定每个组件的组件类别，从而依据每个组件的组件类别确定该组件对应的组件源码，并依据每个组件的组件源码和位置信息生成页面源码，解决了现有技术中生成页面代码的效率较低的技术问题，达到了提高转换效率的技术效果。
[0016]为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
[0017]为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0018]图1示出了本申请实施例所提供的一种页面源码的生成方法的流程图。
[0019]图2示出了本申请实施例所提供的基于各个组件的边界信息和组件源码生成所述界面设计图的页面源码的步骤的流程图。
[0020]图3示出了本申请实施例所提供的一种页面源码的生成装置的功能模块图。
[0021]图4示出了本申请实施例所提供的一种电子设备的结构示意图。
具体实施方式
[0022]为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解，本申请中的附图仅起到说明和描述的目的，并不用于限定本申请的保护范围。另外，应当理解，示意性的
附图并未按实物比例绘制。本申请中使用的流程图示出了根据本申请的一些实施例实现的操作。应当理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。
[0023]另外，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的全部其他实施例，都属于本申请保护的范围。
[0024]现有技术中，通过程序员手动将设计师设计的界面设计图编写为页面代码；或者，通过CodeFun将界面设计图转换为页面的源代码，由于CodeFun仅接收Sketch形式的设计稿，对于Sketch编辑器过于依赖，且CodeFun生成的页面源代码是以原生标签为单位的内容，从而导致对于拥有同一个组件的不同界面设计图，都需要CodeFun重复执行将该组件转换成代码的相同操作，影响生成源代码的效率。
[00本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面源码的生成方法，其特征在于，所述方法包括：获取界面设计图中每个组件的位置信息和组件图；将各个组件图输入至训练好的分类模型中，得到每个组件的组件类型；依据组件源码数据库和每个组件的组件类型，确定该组件匹配的组件源码；基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码。2.根据权利要求1所述的方法，其特征在于，所述获取界面设计图中每个组件的位置信息和组件图，包括：确定界面设计图中每个组件的位置信息；依据每个组件的位置信息对所述界面设计图进行拆分，得到该组件的组件图。3.根据权利要求1所述的方法，其特征在于，所述基于各个组件的边界信息和组件源码，生成所述界面设计图的页面源码，包括：根据各个组件的边界信息，在页面的定义文档主体标签下生成该组件的容器节点；将各个组件的容器节点中均插入该组件的组件源码，以生成所述界面设计图对应的页面源码。4.根据权利要求3所述的方法，其特征在于，所述将各个组件的容器节点中均插入该组件的组件源码，以生成所述界面设计图对应的页面源码之后，所述方法还包括：将生成的所述页面源码发送至用户，以使用户对所述页面源码进行编辑，以配置所述组件源码的各项参数。5.一种页面源码的生成装置，其特征在于，所述装置包括：获取模块，用于获取界面设计图中每个组件的位置信息和组件图；分类模块，用于将各个组件图输入至训练好的分类模型中，得到每个组...
【专利技术属性】
技术研发人员：邓世伟，吉孟扬，方向，雷宇超，杨帅，罗乐，常飞，胡洁，
申请(专利权)人：鉴微数字科技重庆有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。