CN111475156B - 页面代码生成方法和装置、电子设备和存储介质 - Google Patents

Abstract

本公开的实施例公开了一种页面代码生成方法和装置、电子设备和存储介质，其中，方法包括：获取页面设计图，确定页面设计图中各元素的信息；基于页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词；基于页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。由此，本公开实施例可以快速准确定生成页面设计图的代码，省去了页面设计图中的标注信息，避免了设计人员和开发人员的理解偏差。

Description

页面代码生成方法和装置、电子设备和存储介质

技术领域

本公开涉及计算机技术，尤其是一种页面代码生成方法和装置、电子设备和存储介质。

背景技术

在前端开发中页面设计尤为重要,通常需要设计人员先绘制出设计图,然后开发人员通过设计图来编写代码。

在实现本公开的过程中，发明人发现：在开发人员编写代码时，经常会出现与设计人员沟通和理解的偏差导致的后期返工问题。

发明内容

为了解决上述技术问题，提出了本公开。本公开的实施例提供了一种页面代码生成方法和装置、电子设备和存储介质。

根据本公开实施例的一个方面，提供了一种页面代码生成方法，包括：

获取页面设计图，确定所述页面设计图中各元素的信息；其中，所述页面设计图中各元素的信息包括：类型信息、层级信息、特征信息、以及位置信息；

基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词；

基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码。

可选地，在本公开上述各方法实施例中，所述页面设计图中各元素对应的关键词，包括：元素类型关键词和元素层级关键词。

可选地，在本公开上述各方法实施例中，所述基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词，包括：

基于所述页面设计图中各元素的类型信息，确定所述页面设计图中各元素对应的元素类型关键词；

基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素对应的元素层级关键词。

可选地，在本公开上述各方法实施例中，所述元素层级关键词包括：文件夹管理关键词和图片调整关键词。

可选地，在本公开上述各方法实施例中，所述基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素的元素层级关键词，包括：

基于所述页面设计图中各元素所在文件夹的层级，确定所述页面设计图中各元素对应的文件夹管理关键词；

基于所述页面设计图中各元素的图片层级关系，确定所述页面设计图中各元素对应的图片调整关键词。

可选地，在本公开上述各方法实施例中，所述基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词与所述基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码之间，还包括：基于所述页面设计图中各元素的文件夹管理关键词，对位于同一层级的所述页面设计图中各元素所在的文件夹进行合并。

可选地，在本公开上述各方法实施例中，所述基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码，包括：

基于所述页面设计图中各元素的特征信息和位置信息，确定所述页面设计图中各元素对应的类和所述类的属性信息；

基于所述页面设计图中各元素对应的类、所述类的属性信息、以及所述页面设计图中各元素对应的关键词，生成所述页面设计图的代码。

根据本公开实施例的另一个方面，提供了一种页面代码生成装置，包括：

第一确定模块，用于获取页面设计图，确定所述页面设计图中各元素的信息；其中，所述页面设计图中各元素的信息包括：类型信息、层级信息、特征信息、以及位置信息；

第二确定模块，用于基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词；

生成模块，用于基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码。

可选地，在本公开上述各装置实施例中，所述页面设计图中各元素对应的关键词，包括：元素类型关键词和元素层级关键词。

可选地，在本公开上述各装置实施例中，所述第二确定模块，包括：

第一确定单元，用于基于所述页面设计图中各元素的类型信息，确定所述页面设计图中各元素对应的元素类型关键词；

第二确定单元，用于基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素对应的元素层级关键词。

可选地，在本公开上述各装置实施例中，所述元素层级关键词包括：文件夹管理关键词和图片调整关键词。

可选地，在本公开上述各装置实施例中，所述第二确定单元，用于：

基于所述页面设计图中各元素所在文件夹的层级，确定所述页面设计图中各元素对应的文件夹管理关键词；

基于所述页面设计图中各元素的图片层级关系，确定所述页面设计图中各元素对应的图片调整关键词。

可选地，在本公开上述各装置实施例中，所述第二确定模块和生成模块之间，还包括：合并模块，用于基于所述页面设计图中各元素的文件夹管理关键词，对位于同一层级的所述页面设计图中各元素所在的文件夹进行合并。

可选地，在本公开上述各装置实施例中，所述生成模块，包括：

第三确定单元，用于基于所述页面设计图中各元素的特征信息和位置信息，确定所述页面设计图中各元素对应的类和所述类的属性信息；

生成单元，用于基于所述页面设计图中各元素对应的类、所述类的属性信息、以及所述页面设计图中各元素对应的关键词，生成所述页面设计图的代码。

根据本公开实施例的又一个方面，提供了一种计算机可读存储介质，该存储介质存储有计算机程序，所述计算机程序用于执行本公开上述任一实施例所述的页面代码生成方法。

根据本公开实施例的又一个方面，提供了一种电子设备，该电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述任一实施例所述的页面代码生成方法。

基于本公开上述实施例提供的页面代码生成方法和装置、电子设备和存储介质，获取页面设计图，确定页面设计图中各元素的信息；基于页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词；基于页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。由此，本公开实施例可以快速准确定生成页面设计图的代码，省去了页面设计图中的标注信息，避免了设计人员和开发人员的理解偏差。

下面通过附图和实施例，对本公开的技术方案做进一步的详细描述。

附图说明

通过结合附图对本公开实施例进行更详细的描述，本公开的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开实施例一起用于解释本公开，并不构成对本公开的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是本公开一示例性实施例提供的页面代码生成方法的流程示意图。

图2是本公开一示例性实施例提供的页面设计图。

图3是本公开另一示例性实施例提供的页面代码生成方法的流程示意图。

图4是本公开又一示例性实施例提供的页面代码生成方法的流程示意图。

图5是本公开再一示例性实施例提供的页面代码生成方法的流程示意图。

图6是本公开一示例性实施例提供的页面代码生成装置的结构示意图。

图7是本公开一示例性实施例提供的电子设备的结构图。

具体实施方式

下面，将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开实施例可以应用于终端设备、计算机***、服务器等电子设备，其可与众多其它通用或专用计算***环境或配置一起操作。适于与终端设备、计算机***、服务器等电子设备一起使用的众所周知的终端设备、计算***、环境和/或配置的例子包括但不限于：个人计算机***、服务器计算机***、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的***、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机***﹑大型计算机***和包括上述任何***的分布式云计算技术环境，等等。

终端设备、计算机***、服务器等电子设备可以在由计算机***执行的计算机***可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机***/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算***存储介质上。

图1是本公开一示例性实施例提供的页面代码生成方法流程图。本实施例可应用在电子设备上，如图1所示，该页面代码生成方法包括如下步骤：

S102，获取页面设计图，确定页面设计图中各元素的信息。

本公开实施例中的页面设计图中各元素的信息可以包括：类型信息、层级信息、特征信息、以及位置信息。

其中，页面设计图中的各元素可以包括：文字、图片、和/或按钮。各元素的类型信息可以包括：文字类型、图片类型、和/或用户可点击的按钮类型。所在层级信息用于表示元素所在的视图层级。特征信息用于表示元素的特征，例如：文字的字号、字体、以及颜色、图片的颜色等。位置信息可以包括：元素的横向坐标信息和纵向坐标信息、以及元素的宽度信息和高度信息。

S104，基于页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词。

本公开实施例中的页面设计图中各元素对应的关键词可以包括：元素类型关键词和元素层级关键词。

其中，元素类型关键词用于表示标记元素类型，其可以包括：文字关键词、图片关键词、以及按钮关键词。元素层级关键词用于表示标记各元素之间层级关系，其可以包括：文件夹管理关键词和图片调整关键词。文件夹管理关键词用于表示标记同一层级中可以合并的文件夹，图片调整关键词用于标记需要调整的图片层级。

S106，基于页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。

在一个示例中，利用Sketch软件获取一张如图2所示的页面设计图，确定该页面设计图中的元素：“新用户专享”、“优惠券”、“领取优惠券后在购买VIP时可用”为文字类型、“立即领取”为按钮类型、“立即领取”按钮下的灰色底图和“新用户专享文字”的灰度底图为图片类型，该页面设计图中各元素的位置信息由sketch软件自动生成。基于上述该页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词：文字关键词、图片关键词、以及按钮关键词、文件夹管理关键词和图片调整关键词。基于该页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。

基于本公开上述实施例提供的页面代码生成方法，获取页面设计图，确定页面设计图中各元素的信息；基于页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词；基于页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。由此，可以快速准确定生成页面设计图的代码，省去了页面设计图中的标注信息，避免了设计人员和开发人员的理解偏差。

如图3所示，在上述图1所示实施例的基础上，其中一些可选的实施方式中，步骤S104具体可以包括：

S301，基于页面设计图中各元素的类型信息，确定页面设计图中各元素对应的元素类型关键词。

S302，基于页面设计图中各元素的层级信息，确定页面设计图中各元素对应的元素层级关键词。

如图4所示，在上述图3所示实施例的基础上，其中一些可选的实施方式中，步骤S302具体可以包括：

S401，基于页面设计图中各元素所在文件夹的层级，确定页面设计图中各元素对应的文件夹管理关键词。

S402，基于页面设计图中各元素的图片层级关系，确定页面设计图中各元素对应的图片调整关键词。

在图2所示的示例中，元素类型关键词可以包括：文字关键词为text、图片关键词为image、以及按钮关键词为button；元素层级关键词可以包括：文件夹管理关键词为floder和图片调整关键词为super。其中，由于新用户专享”、“优惠券”、“领取优惠券后在购买VIP时可用”等文字属于同一层级文件夹，因此，标记为关键词floder表示在同一层级，也可以表示不存在视图层级；“立即领取”按钮下的灰度底图和“新用户专享文字”的灰度底图由于在文字下显示，因此，标记关键词super表示灰度底图在文字下一层级。

由此，本公开实施例的上述实施例利用文件夹管理关键词和图片调整关键词，可以准确的对页面视图中的文件夹管理和图片层级进行划分，从而提高了页面代码生成的准确率。

在一些可选的实施方式中，步骤104与步骤S106之间还可以包括：基于页面设计图中各元素的文件夹管理关键词，对位于同一层级的页面设计图中各元素所在的文件夹进行合并。例如：将“新用户专享”和“优惠券”文字所在的文件夹“floder_tag”和“floder_文案”进行合并。由此，本公开的实施例可以避免很多重复代码的编写，提高了设计人员与开发人员的工作效率。

如图5所示，在上述图1所示实施例的基础上，其中一些可选的实施方式中，步骤S106具体可以包括：

S501，基于页面设计图中各元素的特征信息和位置信息，确定页面设计图中各元素对应的类和类的属性信息。

其中，类的属性信息可以包括：类中各元素的属性和各元素的属性对应的描述信息，例如：文字的字号textsize的属性为字符串number，该属性对应的描述信息为10，即字体大小为10号。

S502，基于页面设计图中各元素对应的类、类的属性信息、以及页面设计图中各元素对应的关键词，生成页面设计图的代码。

在一个具体的实施例中，首先基于页面设计图对应的文件夹管理关键词floder_cell2，确定该页面设计图对应的父类为UITableViewCell，然后基于该页面设计图中各元素的特征信息和位置信息，确定该页面设计图中各元素对应的类和该类的属性信息，例如：由文字“优惠券”的特征信息确定其属于类UILable，该类的属性信息为字符串string，该属性对应的描述信息为：优惠券，最后基于页面设计图中各元素对应的类、该类的属性信息、各元素对应的关键词，生成页面设计图的代码。

本公开实施例提供的任一种页面代码生成方法可以由任意适当的具有数据处理能力的设备执行，包括但不限于：终端设备和服务器等。或者，本公开实施例提供的任一种页面代码生成方法可以由处理器执行，如处理器通过调用存储器存储的相应指令来执行本公开实施例提及的任一种页面代码生成方法。下文不再赘述。

图6是本公开一示例性实施例提供的页面代码生成装置的结构示意图。该测试装置可以设置于终端设备、服务器等电子设备中，执行本公开上述任一实施例的页面代码生成方法。如图6所示，该页面代码生成装置包括：

第一确定模块61，用于获取页面设计图，确定所述页面设计图中各元素的信息；其中，所述页面设计图中各元素的信息包括：类型信息、层级信息、特征信息、以及位置信息；

第二确定模块62，用于基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词；

生成模块63，用于基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码。

基于本公开上述实施例提供的页面代码生成装置，获取页面设计图，确定页面设计图中各元素的信息；基于页面设计图中各元素的类型信息和层级信息，确定页面设计图中各元素对应的关键词；基于页面设计图中各元素的特征信息和位置信息、以及各元素对应的关键词，生成页面设计图的代码。由此，本公开实施例可以快速准确定生成页面设计图的代码，省去了页面设计图中的标注信息，避免了设计人员和开发人员的理解偏差。

在其中一些实施方式中，所述页面设计图中各元素对应的关键词，包括：元素类型关键词和元素层级关键词。

在其中一些实施方式中，所述第二确定模块62，包括：

第一确定单元，用于基于所述页面设计图中各元素的类型信息，确定所述页面设计图中各元素对应的元素类型关键词；

第二确定单元，用于基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素对应的元素层级关键词。

在其中一些实施方式中，所述元素层级关键词包括：文件夹管理关键词和图片调整关键词。

在其中一些实施方式中，所述第二确定单元，用于：

基于所述页面设计图中各元素所在文件夹的层级，确定所述页面设计图中各元素对应的文件夹管理关键词；

基于所述页面设计图中各元素的图片层级关系，确定所述页面设计图中各元素对应的图片调整关键词。

在其中一些实施方式中，所述第二确定模块62和生成模块63之间，还包括：合并模块，用于基于所述页面设计图中各元素的文件夹管理关键词，对位于同一层级的所述页面设计图中各元素所在的文件夹进行合并。

在其中一些实施方式中，所述生成模块63，包括：

第三确定单元，用于基于所述页面设计图中各元素的特征信息和位置信息，确定所述页面设计图中各元素对应的类和所述类的属性信息；

生成单元，用于基于所述页面设计图中各元素对应的类、所述类的属性信息、以及所述页面设计图中各元素对应的关键词，生成所述页面设计图的代码。

另外，本公开实施例还提供了一种电子设备，该电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现本公开上述任一实施例所述的页面代码生成方法。

下面，参考图7来描述根据本公开实施例的电子设备。该电子设备可以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。图7图示了根据本公开实施例的电子设备的框图。如图7所示，电子设备包括一个或多个处理器71和存储器72。

处理器71可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。

存储器72可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器71可以运行所述程序指令，以实现上文所述的本公开的各个实施例的软件程序的页面代码生成方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置73和输出装置74，这些组件通过总线***和/或其他形式的连接机构(未示出)互连。

此外，该输入设备73还可以包括例如键盘、鼠标等等。

该输出装置74可以向外部输出各种信息。该输出设备74可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图7中仅示出了该电子设备中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述各种实施例的软件程序的页面代码生成方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述各种实施例的软件程序的页面代码生成方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于***实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、***的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、***。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (11)

1.一种页面代码生成方法，其特征在于，包括：

获取页面设计图，确定所述页面设计图中各元素的信息；其中，所述页面设计图中各元素的信息包括：类型信息、层级信息、特征信息、以及位置信息；

基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词；

其中，所述页面设计图中各元素对应的关键词包括：元素层级关键词，所述元素层级关键词包括：文件夹管理关键词和图片调整关键词；基于所述页面设计图中各元素所在文件夹的层级，确定所述页面设计图中各元素对应的文件夹管理关键词；基于所述页面设计图中各元素的图片层级关系，确定所述页面设计图中各元素对应的图片调整关键词；

基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码。

2.根据权利要求1所述的方法，其特征在于，所述页面设计图中各元素对应的关键词包括：元素类型关键词。

3.根据权利要求1或2所述的方法，其特征在于，所述基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词，包括：

基于所述页面设计图中各元素的类型信息，确定所述页面设计图中各元素对应的元素类型关键词；

基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素对应的元素层级关键词。

4.根据权利要求1所述的方法，其特征在于，所述基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词与所述基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码之间，还包括：基于所述页面设计图中各元素的文件夹管理关键词，对位于同一层级的所述页面设计图中各元素所在的文件夹进行合并。

5.根据权利要求1所述的方法，其特征在于，所述基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码，包括：

基于所述页面设计图中各元素的特征信息和位置信息，确定所述页面设计图中各元素对应的类和所述类的属性信息；

基于所述页面设计图中各元素对应的类、所述类的属性信息、以及所述页面设计图中各元素对应的关键词，生成所述页面设计图的代码。

6.一种页面代码生成装置，其特征在于，包括：

第一确定模块，用于获取页面设计图，确定所述页面设计图中各元素的信息；其中，所述页面设计图中各元素的信息包括：类型信息、层级信息、特征信息、以及位置信息；

第二确定模块，用于基于所述页面设计图中各元素的类型信息和层级信息，确定所述页面设计图中各元素对应的关键词；

其中，所述页面设计图中各元素对应的关键词包括：元素层级关键词，所述元素层级关键词包括：文件夹管理关键词和图片调整关键词；

所述第二确定模块，用于：

基于所述页面设计图中各元素所在文件夹的层级，确定所述页面设计图中各元素对应的文件夹管理关键词；基于所述页面设计图中各元素的图片层级关系，确定所述页面设计图中各元素对应的图片调整关键词；

生成模块，用于基于所述页面设计图中各元素的特征信息和位置信息、以及所述各元素对应的关键词，生成所述页面设计图的代码。

7.根据权利要求6所述的装置，其特征在于，所述第二确定模块，包括：

第一确定单元，用于基于所述页面设计图中各元素的类型信息，确定所述页面设计图中各元素对应的元素类型关键词；

第二确定单元，用于基于所述页面设计图中各元素的层级信息，确定所述页面设计图中各元素对应的元素层级关键词。

8.根据权利要求6所述的装置，其特征在于，所述第二确定模块和生成模块之间，还包括：合并模块，用于基于所述页面设计图中各元素的文件夹管理关键词，对位于同一层级的所述页面设计图中各元素所在的文件夹进行合并。

9.根据权利要求8所述的装置，其特征在于，所述生成模块，包括：

第三确定单元，用于基于所述页面设计图中各元素的特征信息和位置信息，确定所述页面设计图中各元素对应的类和所述类的属性信息；

生成单元，用于基于所述页面设计图中各元素对应的类、所述类的属性信息、以及所述页面设计图中各元素对应的关键词，生成所述页面设计图的代码。

10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-5任一所述的页面代码生成方法。

11.一种电子设备，其特征在于，所述电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述权利要求1-5任一所述的页面代码生成方法。