CN116301865A - 用户界面生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开实施例提供了用户界面生成方法、装置、电子设备以及存储介质，其中，用户界面生成方法包括：确定待处理的目标前端页面；目标前端页面包括预先编写的标记语言标签集合；标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个元素属性之间的层级关系；根据标记语言标签集合，生成目标前端页面对应的元素属性树；元素属性树包括按照树结构分布的多个节点，每个节点对应于标记语言标签集合中的一个元素属性；根据元素属性树，生成对应的格式代码并填充至目标前端页面；根据填充后的目标前端页面，生成对应的用户界面，以此，提高了用户界面的生成效率。

Description

用户界面生成方法、装置、电子设备及存储介质

技术领域

本申请涉及数据处理技术领域，尤其涉及一种用户界面生成方法、装置、电子设备及存储介质。

背景技术

随着电子技术的发展，用户界面的视觉效果越来越多样化。为了生成用户界面，往往需要利用前端页面编写大量的格式代码。考虑到丰富的视觉效果往往意味着用户界面中各个界面元素对应的元素属性之间具有复杂的层级关系，格式代码的编写效率低下且容易出错，影响到生成用户界面的工作效率。

发明内容

本申请实施例提供了一种用户界面生成方法、装置、电子设备及存储介质，以提高利用目标前端页面生成用户界面的工作效率。

第一方面，本申请实施例提供了一种用户界面生成方法，包括：

确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

根据填充后的所述目标前端页面，生成对应的用户界面。

第二方面，本申请实施例提供了一种用户界面生成装置，包括：

确定单元，用于确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

第一生成单元，用于根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

填充单元，用于根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

第二生成单元，用于根据填充后的所述目标前端页面，生成对应的用户界面。

第三方面，本申请实施例提供了一种电子设备，包括：处理器；以及，被配置为存储计算机可执行指令的存储器，所述计算机可执行指令在被执行时使所述处理器执行如第一方面所述的用户界面生成方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，用于存储计算机可执行指令，所述计算机可执行指令在被处理器执行时实现如第一方面所述的用户界面生成方法。

可以看出，在本申请实施例中，首先，确定待处理的目标前端页面；目标前端页面包括预先编写的标记语言标签集合；标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个元素属性之间的层级关系；其次，根据标记语言标签集合，生成目标前端页面对应的元素属性树；元素属性树包括按照树结构分布的多个节点，每个节点对应于标记语言标签集合中的一个元素属性；然后，根据元素属性树，生成对应的格式代码并填充至目标前端页面；最后，根据填充后的目标前端页面，生成对应的用户界面，以此，可以根据预先编写的标记语言标签集合生成元素属性树，该元素属性树中的每个节点对应于标记语言标签集合的一个元素属性，且该元素属性树中的每个节点按照树结构分布，故该元素属性树可以反映标记语言标签集合中的各个元素属性，以及各个元素属性的层级关系，根据该元素属性树生成对应的格式代码并填充至目标前端页面，可以使得格式代码中各个元素属性的层级关系对应于元素属性树，进而，该格式代码中各个元素属性的层级关系对应于标记语言标签集合各个元素属性的层级关系，一方面，在目标前端页面的代码编写过程中，与人工编写代码相比，通过元素属性树生成对应的格式代码，无需为了确保格式代码中元素属性的层级关系对应于与标记语言标签集合中元素属性的层级关系，在标记语言标签集合与格式代码之间来回切换，从而提高了目标前端页面的代码编写效率，另一方面，在元素属性的层级关系较为复杂且不同的层级可能具有相同的元素属性的情况下，通过元素属性树对生成对应的格式代码能够避免元素属性被配置到错误的层级，减少格式代码编写出错的概率，另外，在目标前端页面的代码编写效率提高和出错率降低的情况下，能够提高利用目标前端页面生成对应的用户界面的工作效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图；

图1为本申请实施例提供的一种用户界面生成方法的第一种处理流程图；

图2为本申请实施例提供的一种用户界面生成方法的第二种处理流程图；

图3为本申请实施例提供的一种用户界面生成方法的第三种处理流程图；

图4为本申请实施例提供的一种用户界面生成装置示意图；

图5为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请实施例中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书的一部分实施例，而不是全部的实施例。基于本申请实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请的保护范围。

在实际的用户界面开发场景中，针对用户界面，可能需要通过人工编写大量的格式代码，以实现丰富的UI(User Interface，用户界面)效果。为了实现较为复杂的UI效果，在用于构建用户界面的前端页面中，需要自定义许多界面元素的元素属性，且各个元素属性的层级关系可能较为复杂，导致各个元素属性对应的代码的嵌套关系较为复杂，人工编写代码效率低下且容易出错。为了克服上述问题，本申请实施例提供了一种用户界面生成方法。

图1为本申请实施例提供的一种用户界面生成方法的处理流程图。图1的用户界面生成方法可由电子设备执行，该电子设备可以是终端设备，比如手机、笔记本电脑、智能交互设备等等；或者，该电子设备还可以是服务器，比如独立的物理服务器、服务器集群或者是能够进行云计算的云服务器。参照图1，本实施例提供的用户界面生成方法，具体包括步骤S102至步骤S108。

步骤S102，确定待处理的目标前端页面；目标前端页面包括预先编写的标记语言标签集合；标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个元素属性之间的层级关系。

待处理的目标前端页面可以是用于编写构建用户界面的代码的前端页面。该前端页面可以是通过预设框架进行用户界面开发的页面。

标记语言标签集合可以是HTML(Hyper Text Markup Language，超文本标记语言)标签集合，HTML标签集合可以包括多个HTML标签，每个HTML标签可以具有一个对应的元素属性，且该HTML标签集合可以反映各个HTML标签之间的层级关系，例如，父子层级关系，并列层级关系，等等。

需要注意的是，每个元素属性可以对应于待生成的用户界面中的一个界面元素，且一个界面元素可以对应于一个或多个元素属性。

用户界面可以由一个或多个界面元素构成。在用户界面由多个界面元素构成的情况下，构成该用户界面的多个界面元素可以是同一种类的界面元素，也可以是多个不同种类的界面元素。

通过增加、删除或修改目标前端页面中的代码，可以改变用户界面的UI效果。

具体地，通过增加、删除或修改目标前端页面中的代码，可以改变用户界面中界面元素的数量或种类，使得用户界面的UI效果发生改变。

通过增加、删除或修改目标前端页面中的代码，也可以改变元素属性的层级关系，使得用户界面的UI效果发生改变。

通过增加、删除或修改目标前端页面中的代码，还可以改变元素属性的属性值，使得用户界面的UI效果发生改变。

界面元素可以是HTML元素。示例性地，界面元素可以是文本、图片、链接，等等。在步骤S102执行之前，用户界面的开发人员可以按照期望的UI效果编写标记语言标签集合，该标记语言标签集合可以包括多个标签，每个标签可以具有待生成的用户界面中的一个界面元素的一个元素属性。标记语言标签集合可以反映其中各个标签之间的层级关系，该层级关系可以由期望的UI效果中各个界面元素的关系确定。

用户预先编写的标记语言标签集合可以是一段代码，标记语言标签集合中的每个标签可以是该段代码中的一个代码子段，每个代码字段包含一个元素属性。

元素属性可以是class属性。class属性规定HTML元素的类名(classname)。class属性大多数时候用于指向样式表中的类(class)，也可以利用它通过JavaScript来改变带有指定class的HTML元素。

各个标签之间的层级关系可以用于表征在标记语言标签集合中各个标签对应的代码子段的嵌套关系。

例如，标签1与标签2之间的层级关系为直接父子关系，标签1对应于父，标签2对应于子，则标签1对应的代码子段中嵌套有标签2对应的代码子段。示例代码如下：

<div标签1中的class属性>

<div标签2中的class属性></div>

</div>

上述示例代码中，标签1对应的代码子段包括：

第一行的“<div标签1中的class属性>”，以及

第三行的“</div>”。

标签2对应的代码子段包括：

第二行的“<div标签2中的class属性></div>”。

又例如，标签1与标签3之间的层级关系为间接父子关系，具体地，标签1与标签2之间具有直接父子关系，标签1对应于父，标签2对应于子，标签2与标签3之间具有直接父子关系，标签2对应于父，标签3对应于子，则标签1对应的代码子段中嵌套有标签2对应的代码子段，标签2对应的代码子段嵌套有标签3对应的代码子段。示例代码如下：

上述示例代码中，标签1对应的代码子段包括：

第一行的“<div标签1中的class属性>”，以及，

第五行的“</div>”。

标签2对应的代码子段包括：

第二行的“<div标签2中的class属性>”，以及，

第四行的“</div>”。

标签3对应的代码字段包括：

第三行的“<div标签3中的class属性></div>”。

又例如，标签4与标签5之间的层级关系为并列层级关系，则标签4对应的代码子段与标签5对应的代码子段之间不存在嵌套关系，而是平行的。

示例代码如下：

<div标签4中的class属性></div>

<div标签5中的class属性></div>

上述示例代码中，标签4对应的代码子段包括：

第一行的“<div标签4中的class属性></div>”。

标签5对应的代码子段为：

第二行的“<div标签5中的class属性></div>”。

确定待处理的目标前端页面，可以是根据第一用户输入确定被用户选中的目标前端页面。

示例性地，第一用户输入可以是用户提交的页面选择输入。

确定待处理的目标前端页面，也可以是根据第二用户输入确定被用户选中的目标文件夹，将目标文件夹中包括的一个或多个用于编写构建用户界面的代码的前端页面确定为目标前端页面。

示例性地，第二用户输入可以是用户提交的文件夹选择输入。

第一用户输入和第二用户输入中“第一”和“第二”仅仅是为了便于区分两种不同的用户输入，不具有实际含义。

步骤S104，根据标记语言标签集合，生成目标前端页面对应的元素属性树；元素属性树包括按照树结构分布的多个节点，每个节点对应于标记语言标签集合中的一个元素属性。

树是一种重要的非线性数据结构，直观地看，它是数据元素按分支关系组织起来的结构，很像自然界中的树那样。

元素属性树是由n个节点组成的有限集合，其中，有一个特定的节点，称为根节点(root)，除根节点外，其余节点被分成m个互不相交的有限集合，而每个子集又都是一棵树(称为原树的子树)。根节点的层次为1，其他节点的层次等于它的父结点的层次数加1。n为大于0的自然数，m为大于0的自然数。

在元素属性树中，每个节点对应于标记语言标签集合中的一个标签中的元素属性，该元素属性树的树结构反映了标记语言标签集合中各个标签之间的层级关系。

在一种实现方式中，根据标记语言标签集合，生成目标前端页面对应的元素属性树，包括：从标记语言标签集合中读取得到多个标签，并确定每个标签之间的层级关系；根据每个标签中的元素属性以及每个标签之间的层级关系，构建目标前端页面对应的元素属性树。

从标记语言标签集合中读取得到多个标签，并确定每个标签之间的层级关系，可以是遍历标记语言标签集合，得到每个标签对应的代码子段，根据每个代码字段之间的嵌套关系，确定每个标签之间的层级关系。

在一种实现方式中，根据每个标签中的元素属性以及每个标签之间的层级关系，构建目标前端页面对应的元素属性树，包括：根据每个标签中的元素属性，确定每个标签对应的节点；根据每个标签之间的层级关系，确定存在直接父子关系的至少一组父子标签；每组父子标签包括一个父标签和一个子标签；在每组父子标签中确定父标签对应的父节点与子标签对应的子节点之间的节点连接关系；根据每个标签对应的节点和节点连接关系，构建目标前端页面对应的元素属性树。

在标记语言标签集合包括的多个标签中，两个标签之间可能存在父子层级关系、并列层级关系等多种预设层级关系中的一者。父子层级关系可以是直接父子关系，也可以是间接父子关系。

在多个标签中，确定存在直接父子关系的至少一组父子标签，每组父子标签包括一个父标签和一个子标签。

示例代码如下：

在上述示例代码中，标签1对应的代码子段包括：

第一行的“<div标签1中的class属性>”，以及，

第五行的“</div>”。

标签2对应的代码子段包括：

第二行的“<div标签2中的class属性>”，以及，

第四行的“</div>”。

标签3对应的代码字段包括：

第三行的“<div标签3中的class属性></div>”。

由示例代码中标签1对应的代码子段与标签2对应的代码子段的嵌套关系可知，标签1与标签2之间存在直接父子关系，即标签1与标签2为存在直接父子关系的一组父子标签，其中，标签1为父标签，标签2为子标签。

由示例代码中标签2对应的代码子段与标签3对应的代码子段的嵌套关系可知，标签2与标签3之间存在直接父子关系，即标签2与标签3为存在直接父子关系的一组父子标签，其中，标签2为父标签，标签3为子标签。

在每组父子标签中，可以确定父标签对应的父节点与子标签对应的子节点之间的节点连接关系为父节点与子节点连接，且父节点指向子节点。

例如，标签1与标签2为存在直接父子关系的第一组父子标签，其中标签1为该组父子标签中的父标签，标签2为该组父子标签中的子标签；标签2与标签3为存在直接父子关系的第二组父子标签，其中标签2为该组父子标签，标签3为该组父子标签中的子标签。在第一组父子标签中，可以确定标签1对应的父节点1与标签2对应的子节点1之间的节点连接关系为父节点1与子节点1连接，且父节点1指向子节点1；在第二组父子标签中，可以确定标签2对应的父节点2与标签3对应的子节点2之间的节点连接关系为父节点2与子节点2连接，且父节点2指向子节点2。子节点1与父节点2为同一个节点，均对应于标签2。

在确定每个节点对应的标签的情况下，可以根据每个标签的层级关系，确定每组父子节点中父节点与子节点之间的节点连接关系，从而在各个节点之间进行有向的连接，构建目标前端页面对应的元素属性树，该元素属性树中的每个节点对应于目标前端页面中的标记语言标签集合中的一个标签中的元素属性。

在一种实现方式中，根据每个标签中的元素属性以及每个标签之间的层级关系，构建目标前端页面对应的元素属性树，包括：将标记语言标签集合中读取的首个标签确定为第一标签；根据每个标签之间的层级关系，将标记语言标签集合中与第一标签存在直接父子关系的标签确定为第二标签；根据每个标签之间的层级关系，将标记语言标签集合中与第一标签存在间接父子关系的标签确定为第三标签；在第一标签中存在元素属性的情况下，根据第一标签中的元素属性构建根节点；根据每个第二标签中的元素属性，构建每个第二标签对应的第一子节点；第一子节点与根节点存在直接父子关系；根据每个第三标签中的元素属性，构建每个第三标签对应的第二子节点；第二子节点与根节点存在间接父子关系；根据根节点、每个第一子节点、每个第二子节点、直接父子关系以及间接父子关系，生成目标前端页面对应的元素属性树。

标记语言标签集合中读取的首个标签可以是按照各个标签对应的代码子段的嵌套关系，在逻辑上处于嵌套最外层的标签。将该首个标签确定为第一标签。

判断第一标签中是否存在元素属性，若存在，则根据第一标签中的元素属性构建根节点。

根据每个标签之间的层级关系，将标记语言标签集合中与第一标签存在直接父子关系的标签确定为第二标签。根据每个标签之间的层级关系，将标记语言标签集合中与第一标签存在间接父子关系的标签确定为第三标签。

第二标签与第三标签之间可能存在直接父子关系，也可能存在间接父子关系，还可能不存在任何形式的父子关系。

示例代码如下：

上述示例代码中，标签1对应的代码子段包括：

第一行的“<div标签1中的class属性>”，以及，

第七行的“</div>”。

标签2对应的代码子段包括：

第二行的“<div标签2中的class属性></div>”。

标签3对应的代码子段包括：

第三行的“<div标签3中的class属性>”，以及，

第六行的“</div>”。

标签4对应的代码子段包括：

第四行的“<div标签4中的class属性></div>”。

标签5对应的代码子段包括：

第五行的“<div标签5中的class属性></div>”。

其中，标签1与标签2存在直接父子关系，标签1与标签3存在直接父子关系，标签1与标签4存在间接父子关系，标签1与标签5存在间接父子关系，标签2与标签3存在并列层级关系，标签3与标签4存在直接父子关系，标签3与标签5存在直接父子关系，标签4与标签5存在并列层级关系。

将标签1可以确定为第一标签。根据每个标签之间的层级关系，可以将与标签1存在直接父子关系的标签2和标签3确定为第二标签；根据每个标签之间的层级关系，可以将与标签1存在间接父子关系的标签4和标签5确定为第三标签。

根据标签1中的class属性可以构建根节点。根据标签2中的class属性，可以构建标签2对应的第一子节点1，该第一子节点1与根节点存在直接父子关系。根据标签3中的class属性，可以构建标签3对应的第一子节点2，该第一子节点2与根节点存在直接父子关系。

根据标签4中的class属性，可以构建标签4对应的第二子节点1，具体地，由于标签1与标签3存在直接父子关系，标签3与标签4存在直接父子关系，则根节点与标签3对应的第一子节点2存在直接父子关系，该第一子节点2与该标签4对应的第二子节点1存在直接父子关系，根节点与该标签4对应的第二子节点1存在间接父子关系。

根据标签5中的class属性，可以构建标签5对应的第二子节点2，具体地，由于标签1与标签3存在直接父子关系，标签3与标签5存在直接父子关系，则根节点与标签3对应的第一子节点2存在直接父子关系，该第一子节点2与该标签5对应的第二子节点2存在直接父子关系，根节点与该标签5对应的第二子节点2存在间接父子关系。

根据根节点、每个第一子节点、每个第二子节点、直接父子关系以及间接父子关系，生成目标前端页面对应的元素属性树，其中，根节点与每个第一子节点连接且根节点指向每个第一子节点，存在直接父子关系的第一子节点与第二子节点连接且第一子节点指向第二子节点，存在间接父子关系的第一子节点与第二子节点之间的连接方式由该间接父子关系确定，不存在任何形式的父子关系的第一子节点与第二子节点之间不连接。

在一种实现方式中，将标记语言标签集合中读取的首个标签确定为第一标签之后，还包括：在第一标签中不存在元素属性的情况下，生成错误提示信息；错误提示信息用于提示用户标记语言标签集合存在编写错误。

判断第一标签中是否存在元素属性，若不存在，说明该标记语言标签集合在预先编写的过程中编写有误，则生成错误提示信息。

错误提示信息用于提示用户标记语言标签集合存在编写错误，需要对其进行修改，使得修改后的标记语言标签集合中第一标签存在元素属性。

步骤S106，根据元素属性树，生成对应的格式代码并填充至所述目标前端页面。

格式代码可以是SCSS(Sassy Cascading Style Sheets，活泼的层叠样式表)格式代码。

Sass(Syntactically Awesome Stylesheets，语法上很棒的样式表)是一款强化CSS(Cascading Style Sheets，层叠样式表)的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理格式文件，以及更高效地开发项目。

SCSS是Sass所使用的格式，这种格式仅在CSS3语法的基础上进行拓展，所有CSS3语法在SCSS中都是通用的，同时加入Sass的特色功能。此外，SCSS也支持大多数CSS hacks写法以及浏览器前缀写法(vendor-specific syntax)，以及早期的IE(InternetExplorer，网页浏览器)滤镜写法。这种格式以.scss作为拓展名。

元素属性树对应的格式代码，可以是一个或多个CSS格式代码子段。在元素属性树对应的格式代码为多个CSS格式代码子段的情况下，该元素属性树对应的格式代码可以反映其中的各个格式代码子段之间的嵌套关系。

将一个或多个CSS格式代码子段填充至目标前端页面，可以得到填充后的目标前端页面。

填充后的目标前端页面可以至少包括标记语言标签集合，以及，元素属性树对应的格式代码，且标记语言标签集合中各个标签的层级关系对应于该格式代码中各个CSS格式代码子段的嵌套关系。在已根据UI效果编写好标记语言标签集合的情况下，若通过手动编写CSS格式代码子段，为了确保各个元素属性的层级关系无误，需要在目标前端页面中的标记语言标签集合部分与格式代码部分手动来回切换，从而导致代码编写效率低下，且CSS格式代码子段的嵌套关系容易出错。通过根据标记语言标签集合生成元素属性树，并根据元素属性树生成格式代码，可以避免在格式代码的编写过程中来回切换，提高了代码编写效率，且即便在元素属性的层级关系较为复杂的情况下，也能够通过元素属性树记录各元素属性的层级关系，避免各个CSS格式代码子段的嵌套关系出错。

在一种实现方式中，根据元素属性树，生成对应的格式代码，包括：遍历元素属性树中的每个节点，生成与每个节点对应的预设代码子段；每个预设代码子段之间的嵌套关系对应于元素属性树中每个节点之间的节点连接关系。

具体实施时，可以按照先序遍历的方法遍历元素属性树中的每个节点，也可以按照每个节点的生成顺序依次遍历各个节点。

先序遍历的方法如下所示：首先访问根节点，然后遍历左子树，最后遍历右子树。在遍历左、右子树时，仍然先访问根结点，然后遍历左子树，最后遍历右子树，如果二叉树为空则返回。

例如，各个节点的遍历顺序为根节点1—>节点2—>节点3—>节点4—>节点5，且根节点1分别与节点2和节点3存在直接父子关系，节点3分别与节点4和节点5存在直接父子关系。遍历具体过程如下：

遍历根节点1，根据该节点1对应的元素属性，生成与根节点1对应的预设代码子段；

遍历节点2，根据该节点2对应的元素属性，生成与节点2对应的预设代码子段，且根节点1对应的预设代码子段中嵌套有该与节点2对应的预设代码子段；

遍历节点3，根据该节点3对应的元素属性，生成与节点3对应的预设代码子段，且根节点1对应的预设代码子段中嵌套有该与节点3对应的预设代码子段，该与节点2对应的预设代码子段与该与节点3对应的预设代码子段是平行的；

遍历节点4，根据该节点4对应的元素属性，生成与节点4对应的预设代码子段，且节点3对应的预设代码子段中嵌套有该与节点4对应的预设代码子段；

遍历节点5，根据该节点5对应的元素属性，生成与节点5对应的预设代码子段，且节点3对应的预设代码子段中嵌套有该与节点5对应的预设代码子段，该与节点4对应的预设代码子段与该与节点5对应的预设代码子段是平行的。

遍历元素属性树中的每个节点，生成与每个节点对应的预设代码子段，可以是根据每个节点对应的元素属性，生成与每个节点对应的CSS格式代码子段。

每个元素属性可以对应于一个预设代码子段。该预设代码字段可以是待填充的格式代码模板，例如，SCSS格式的预设代码结构，在该预设代码结构中可以通过人工编写具体的CSS格式代码。示例代码为：

其中，目标前端页面中可以预先生成如下代码：第1行的“<style lang＝"scss"scoped>”，以及，

第15行的“</style>”。

将根据元素属性树所生成的格式代码填充至目标前端页面，可以是将该格式代码填充至上述预先生成的两行代码之间，即填充至“<style lang＝"scss"scoped>”与“</style>”之间。

元素属性1对应的预设代码子段1可以包括：

第2行的“.元素属性1{”，以及，

第14行的“}”。

元素属性2对应的预设代码子段2可以包括：

第3行的“.元素属性2{”，

第4行的空行，以及，

第5行的“}”。

元素属性3对应的预设代码子段3可以包括：

第6行的“.元素属性3{”，以及，

第13行的“}”。

元素属性4对应的预设代码子段4可以包括：

第7行的“.元素属性4{”，

第8行的空行，以及，

第9行的“}”。

元素属性5对应的预设代码子段5可以包括：

第10行的“.元素属性5{”，

第11行的空行，以及，

第12行的“}”。

如上述示例代码所示，各个预设代码字段均为与元素属性对应的格式代码模板，该格式代码模板中可以通过人工编写具体的格式代码。

该预设代码字段也可以是具体的格式代码，例如，CSS格式代码。

具体实施时，可以预先根据特殊的class属性值生成具体的CSS格式代码，进而，根据节点对应的class属性值，生成与该节点对应的CSS格式代码。步骤S108，根据填充后的目标前端页面，生成对应的用户界面。

填充后的目标前端页面包括预先编写的标记语言标签集合以及步骤S106中生成的格式代码。通过运行该填充后的目标前端页面中的代码，可以生成该目标前端页面对应的用户界面，从而在用户界面中实现用户期望的UI效果。

在一种实现方式中，目标前端页面为预设框架页面；预设框架页面包括从前往后依次排列的标记语言标签集合、框架代码以及格式代码。

示例性地，预设框架页面可以是Vue页面。框架代码可以是Vue代码。

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以用于辅助高效地开发用户界面。JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

在Vue页面中，标记语言标签集合位于开头，格式代码位于最后，Vue代码位于标记语言标签集合与格式代码之间。

若通过手动编写代码，为保证标记语言标签集合中各元素属性的层级关系对应于格式代码中各元素属性的层级关系，用户可能需要在Vue页面开头和Vue页面末尾进行切换，如果通过该Vue页面构建的用户界面中的界面元素很多，且该用户界面布局很复杂，则来回切换编写大量的格式代码以及在格式代码中手动编写元素属性很容易出错，且效率低下。在标记语言标签集合中元素属性的层级较多且层级关系复杂的情况下，如果在不同的层级具有相同的元素属性，也很容易把元素属性写错位置，出错几率会大大增加。

通过本实施例提供的用户界面生成方法，可以通过生成的元素属性树记录预先编写的标记语言标签集合中各个元素属性的层级关系，再根据该元素属性树生成对应的格式代码，该生成的格式代码中各个元素属性的层级关系对应于元素属性树所记录的各个元素属性的层级关系，一方面，使得Vue页面的代码编写过程中无需在开头和结尾来回切换，明显提高了代码编写效率，另一方面，在界面元素较多且布局复杂的情况下，可以保证格式代码中各元素属性的层级关系以及位置不易出错。

在如图1所示的实施例中在本申请实施例中，确定待处理的目标前端页面；目标前端页面包括预先编写的标记语言标签集合；标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个元素属性之间的层级关系；其次，根据标记语言标签集合，生成目标前端页面对应的元素属性树；元素属性树包括按照树结构分布的多个节点，每个节点对应于标记语言标签集合中的一个元素属性；然后，根据元素属性树，生成对应的格式代码并填充至目标前端页面；最后，根据填充后的目标前端页面，生成对应的用户界面，以此，可以根据预先编写的标记语言标签集合生成元素属性树，该元素属性树中的每个节点对应于标记语言标签集合的一个元素属性，且该元素属性树中的每个节点按照树结构分布，故该元素属性树可以反映标记语言标签集合中的各个元素属性，以及各个元素属性的层级关系，根据该元素属性树生成对应的格式代码并填充至目标前端页面，可以使得格式代码中各个元素属性的层级关系对应于元素属性树，进而，该格式代码中各个元素属性的层级关系对应于标记语言标签集合各个元素属性的层级关系，一方面，在目标前端页面的代码编写过程中，与人工编写代码相比，通过元素属性树生成对应的格式代码，无需为了确保格式代码中元素属性的层级关系对应于与标记语言标签集合中元素属性的层级关系，在标记语言标签集合与格式代码之间来回切换，从而提高了目标前端页面的代码编写效率，另一方面，在元素属性的层级关系较为复杂且不同的层级可能具有相同的元素属性的情况下，通过元素属性树对生成对应的格式代码能够避免元素属性被配置到错误的层级，减少格式代码编写出错的概率，另外，在目标前端页面的代码编写效率提高和出错率降低的情况下，能够提高利用目标前端页面生成对应的用户界面的工作效率。

出于与前述的方法实施例相同的技术构思，本申请实施例还提供了另一种用户界面生成方法的实施例。图2为本申请实施例提供的一种用户界面生成方法的第二种处理流程图。在图2实施例中，目标前端页面可以是Vue页面。参见图2，用户界面生成方法的处理流程具体包括步骤S202至步骤S222。

步骤S202，新建一个Vue页面。

步骤S204，根据UI效果编写标签层级。

标签可以是HTML标签。编写标签层级可以是编写标记语言标签集合，该标记语言标签集合中包括各个标签对应的代码子段，且该标记语言标签集合可以反映各个代码子段的嵌套关系。

步骤S206，在标签中定义class属性。

步骤S208，打开格式代码生成工具。

在定义完成class属性之后，可以打开用于自动生成格式代码的格式代码生成工具。

步骤S210，选择需要生成样式层级的Vue页面或文件夹。

需要生成样式层级的Vue页面可以是需要生成SCSS样式层级的Vue页面。需要生成样式层级的文件夹可以是包括一个或多个需要生成SCSS样式层级的Vue页面的文件夹。

另外，步骤S210可以被替换为确定被用户选中的需要生成样式层级的Vue页面或文件夹。

需要生成样式层级的Vue页面可以是需要生成格式代码的Vue页面，该待生成的格式代码可以反映待生成的用户界面中各个界面元素的元素属性之间的层级关系。

本步骤与图1实施例中的步骤S102的技术构思相似，可以参照对应说明部分。

步骤S212，读取Vue页面中标签中的代码段。

步骤S214，逐行读取代码段中的标签中的class属性。

步骤S216，根据标签中的class属性生成父子层级的class属性树。

步骤S212-步骤S216与图1实施例中的步骤S104的技术构思相似，可参照对应说明部分。

步骤S218，遍历class属性树。

步骤S220，生成class属性树对应的class属性层级SCSS代码。

步骤S222，打开生成好的SCSS代码层级的Vue页面，根据UI效果集中编写CSS格式代码。

步骤S218-步骤S222与图1实施例中的步骤S106的技术构思相似，可以参照对应说明部分。

在步骤S222之后，可以根据编写后的Vue页面构建对应的用户界面。

由于技术构思相同，本实施例中描述得比较简单，相关的部分请参见上述提供的方法实施例的对应说明即可。

出于与前述的方法实施例相同的技术构思，本申请实施例还提供了又一种用户界面生成方法的实施例。图3为本申请实施例提供的一种用户界面生成方法的第三种处理流程图。在图2实施例中，目标前端页面可以是Vue页面。参见图3，用户界面生成方法的处理流程具体包括步骤S302至步骤S334。

步骤S302，新建一个Vue页面。

步骤S304，根据UI效果编写标签层级。

步骤S306，在标签中定义class属性。

若首个标签中未定义class属性，则后续步骤S324中格式代码生成工具会生成错误提示信息。

步骤S308，打开格式代码生成工具。

步骤S310，选择编辑好的Vue页面。

编辑好的Vue页面可以是包括标记语言标签集合的Vue页面，具体可参照图1实施例中的目标前端页面。

步骤S312，读取Vue页面中首个标签并记住行号。

具体实施时，可以是读取Vue页面中首个用于表征标签开头的第一符号并记住该第一符号所在的行号。

步骤S314，读取Vue页面中最后一个标签并记住行号。

具体实施时，可以是读取Vue页面中最后一个用于表征标签结束的第二符号并记住该第二符号所在的行号。

步骤S316，读取首个标签与最后一个标签之间的代码。

步骤S318，读取第一行标签中的class属性。

具体实施时，可以是读取首个第一符号对应的首个标签中的class属性。

步骤S320，判断是否存在class属性。

若是，则执行步骤S322；若否，则执行步骤S324。

步骤S322，保存class属性为树的根节点。

步骤S324，返回错误提示。

步骤S326，读取该节点后续标签所有直接子节点的class属性。

步骤S328，判断是否存在子节点和子class属性。

若是，则执行步骤S330；若否，则执行步骤S332。

步骤S330，把读取到的所有子节点的class属性添加到该节点下，作为树的子节点。

步骤S332，遍历子节点。

若存在未遍历过的子节点，则返回执行步骤S326；若所有子节点均遍历过，则执行步骤S334。

步骤S334，遍历class名称的树结构，生成格式代码结构。

在生成的格式代码结构基础上，可以根据期望的UI效果进行格式代码的编写。

由于技术构思相同，本实施例中描述得比较简单，相关的部分请参见上述提供的方法实施例的对应说明即可。

在上述的实施例中，提供了一种用户界面生成方法，与之相对应的，基于相同的技术构思，本申请实施例还提供了一种用户界面生成装置，下面结合附图进行说明。

图4为本申请实施例提供的一种用户界面生成装置示意图。

本实施例提供一种用户界面生成装置400，包括：

确定单元402，用于确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

第一生成单元404，用于根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

填充单元406，用于根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

第二生成单元408，用于根据填充后的所述目标前端页面，生成对应的用户界面。

可选地，第一生成单元404，包括：

确定子单元，用于从所述标记语言标签集合中读取得到多个标签，并确定每个所述标签之间的层级关系；

构建子单元，用于根据每个所述标签中的元素属性以及每个所述标签之间的层级关系，构建所述目标前端页面对应的元素属性树。

可选地，构建子单元，具体用于：

根据每个所述标签中的元素属性，确定每个所述标签对应的节点；

根据每个所述标签之间的层级关系，确定存在直接父子关系的至少一组父子标签；每组所述父子标签包括一个父标签和一个子标签；

在每组所述父子标签中确定所述父标签对应的父节点与所述子标签对应的子节点之间的节点连接关系；

根据每个所述标签对应的节点和所述节点连接关系，构建所述目标前端页面对应的元素属性树。

可选地，构建子单元，具体用于：

将所述标记语言标签集合中读取的首个标签确定为第一标签；根据每个所述标签之间的层级关系，将所述标记语言标签集合中与所述第一标签存在直接父子关系的标签确定为第二标签；根据每个所述标签之间的层级关系，将所述标记语言标签集合中与所述第一标签存在间接父子关系的标签确定为第三标签；

在所述第一标签中存在所述元素属性的情况下，根据所述第一标签中的元素属性构建根节点；

根据每个所述第二标签中的元素属性，构建每个所述第二标签对应的第一子节点；所述第一子节点与所述根节点存在直接父子关系；

根据每个所述第三标签中的元素属性，构建每个所述第三标签对应的第二子节点；所述第二子节点与所述根节点存在间接父子关系；

根据所述根节点、每个所述第一子节点、每个所述第二子节点、所述直接父子关系以及所述间接父子关系，生成所述目标前端页面对应的元素属性树。

可选地，构建子单元，还用于：

在所述第一标签中不存在所述元素属性的情况下，生成错误提示信息；所述错误提示信息用于提示用户所述标记语言标签集合存在编写错误。

可选地，填充单元406，具体用于：

遍历所述元素属性树中的每个节点，生成与每个所述节点对应的预设代码子段；每个所述预设代码子段之间的嵌套关系对应于所述元素属性树中每个节点之间的节点连接关系。

可选地，所述目标前端页面为预设框架页面；所述预设框架页面包括从前往后依次排列的所述标记语言标签集合、框架代码以及所述格式代码。

本申请实施例所提供的用户界面生成装置包括确定单元、第一生成单元、填充单元以及第二生成单元，其中：确定单元，用于确定待处理的目标前端页面；目标前端页面包括预先编写的标记语言标签集合；标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个元素属性之间的层级关系；第一生成单元，用于根据标记语言标签集合，生成目标前端页面对应的元素属性树；元素属性树包括按照树结构分布的多个节点，每个节点对应于标记语言标签集合中的一个元素属性；填充单元，用于根据元素属性树，生成对应的格式代码并填充至目标前端页面；第二生成单元，用于根据填充后的目标前端页面，生成对应的用户界面。以此，可以根据预先编写的标记语言标签集合生成元素属性树，该元素属性树中的每个节点对应于标记语言标签集合的一个元素属性，且该元素属性树中的每个节点按照树结构分布，故该元素属性树可以反映标记语言标签集合中的各个元素属性，以及各个元素属性的层级关系，根据该元素属性树生成对应的格式代码并填充至目标前端页面，可以使得格式代码中各个元素属性的层级关系对应于元素属性树，进而，该格式代码中各个元素属性的层级关系对应于标记语言标签集合各个元素属性的层级关系，一方面，在目标前端页面的代码编写过程中，与人工编写代码相比，通过元素属性树生成对应的格式代码，无需为了确保格式代码中元素属性的层级关系对应于与标记语言标签集合中元素属性的层级关系，在标记语言标签集合与格式代码之间来回切换，从而提高了目标前端页面的代码编写效率，另一方面，在元素属性的层级关系较为复杂且不同的层级可能具有相同的元素属性的情况下，通过元素属性树对生成对应的格式代码能够避免元素属性被配置到错误的层级，减少格式代码编写出错的概率，另外，在目标前端页面的代码编写效率提高和出错率降低的情况下，能够提高利用目标前端页面生成对应的用户界面的工作效率。

对应上述描述的一种用户界面生成方法，本申请实施例还提供一种电子设备，该电子设备用于执行上述提供的用户界面生成方法，图5为本申请实施例提供的一种电子设备的结构示意图。

如图5所示，电子设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上的处理器501和存储器502，存储器502中可以存储有一个或一个以上存储应用程序或数据。其中，存储器502可以是短暂存储或持久存储。存储在存储器502的应用程序可以包括一个或一个以上模块(图示未示出)，每个模块可以包括电子设备中的一系列计算机可执行指令。更进一步地，处理器501可以设置为与存储器502通信，在电子设备上执行存储器502中的一系列计算机可执行指令。电子设备还可以包括一个或一个以上电源503，一个或一个以上有线或无线网络接口504，一个或一个以上输入/输出接口505，一个或一个以上键盘506等。

在一个具体的实施例中，电子设备包括有存储器，以及一个或一个以上的程序，其中一个或者一个以上程序存储于存储器中，且一个或者一个以上程序可以包括一个或一个以上模块，且每个模块可以包括对电子设备中的一系列计算机可执行指令，且经配置以由一个或者一个以上处理器执行该一个或者一个以上程序包含用于进行以下计算机可执行指令：

确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

根据填充后的所述目标前端页面，生成对应的用户界面。

本说明书提供的一种计算机可读存储介质实施例如下：

对应上述描述的一种用户界面生成方法，基于相同的技术构思，本申请实施例还提供一种计算机可读存储介质。

本实施例提供的计算机可读存储介质，用于存储计算机可执行指令，计算机可执行指令在被处理器执行时实现以下流程：

确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

根据填充后的所述目标前端页面，生成对应的用户界面。

需要说明的是，本说明书中关于计算机可读存储介质的实施例与本说明书中关于用户界面生成方法的实施例基于同一发明构思，因此该实施例的具体实施可以参见前述对应方法的实施，重复之处不再赘述。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本领域内的技术人员应明白，本申请实施例可提供为方法、系统或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可读存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程设备的处理器以产生一个机器，使得通过计算机或其他可编程设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本申请实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、数据、组件、数据结构等等。也可以在分布式计算环境中实践本说明书的一个或多个实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

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

以上所述仅为本文件的实施例而已，并不用于限制本文件。对于本领域技术人员来说，本文件可以有各种更改和变化。凡在本文件的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本文件的权利要求范围之内。

Claims (10)

1.一种用户界面生成方法，其特征在于，包括：

确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

根据填充后的所述目标前端页面，生成对应的用户界面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树，包括：

从所述标记语言标签集合中读取得到多个标签，并确定每个所述标签之间的层级关系；

根据每个所述标签中的元素属性以及每个所述标签之间的层级关系，构建所述目标前端页面对应的元素属性树。

3.根据权利要求2所述的方法，其特征在于，所述根据每个所述标签中的元素属性以及每个所述标签之间的层级关系，构建所述目标前端页面对应的元素属性树，包括：

根据每个所述标签中的元素属性，确定每个所述标签对应的节点；

根据每个所述标签之间的层级关系，确定存在直接父子关系的至少一组父子标签；每组所述父子标签包括一个父标签和一个子标签；

在每组所述父子标签中确定所述父标签对应的父节点与所述子标签对应的子节点之间的节点连接关系；

根据每个所述标签对应的节点和所述节点连接关系，构建所述目标前端页面对应的元素属性树。

4.根据权利要求2所述的方法，其特征在于，所述根据每个所述标签中的元素属性以及每个所述标签之间的层级关系，构建所述目标前端页面对应的元素属性树，包括：

将所述标记语言标签集合中读取的首个标签确定为第一标签；根据每个所述标签之间的层级关系，将所述标记语言标签集合中与所述第一标签存在直接父子关系的标签确定为第二标签；根据每个所述标签之间的层级关系，将所述标记语言标签集合中与所述第一标签存在间接父子关系的标签确定为第三标签；

在所述第一标签中存在所述元素属性的情况下，根据所述第一标签中的元素属性构建根节点；

根据每个所述第二标签中的元素属性，构建每个所述第二标签对应的第一子节点；所述第一子节点与所述根节点存在直接父子关系；

根据每个所述第三标签中的元素属性，构建每个所述第三标签对应的第二子节点；所述第二子节点与所述根节点存在间接父子关系；

根据所述根节点、每个所述第一子节点、每个所述第二子节点、所述直接父子关系以及所述间接父子关系，生成所述目标前端页面对应的元素属性树。

5.根据权利要求4所述的方法，其特征在于，所述将所述标记语言标签集合中读取的首个标签确定为第一标签之后，还包括：

在所述第一标签中不存在所述元素属性的情况下，生成错误提示信息；所述错误提示信息用于提示用户所述标记语言标签集合存在编写错误。

6.根据权利要求1所述的方法，其特征在于，所述根据所述元素属性树，生成对应的格式代码，包括：

遍历所述元素属性树中的每个节点，生成与每个所述节点对应的预设代码子段；每个所述预设代码子段之间的嵌套关系对应于所述元素属性树中每个节点之间的节点连接关系。

7.根据权利要求1-6任一项所述的方法，其特征在于，所述目标前端页面为预设框架页面；所述预设框架页面包括从前往后依次排列的所述标记语言标签集合、框架代码以及所述格式代码。

8.一种用户界面生成装置，其特征在于，所述装置包括：

确定单元，用于确定待处理的目标前端页面；所述目标前端页面包括预先编写的标记语言标签集合；所述标记语言标签集合用于反映待生成的用户界面中多个界面元素的元素属性以及每个所述元素属性之间的层级关系；

第一生成单元，用于根据所述标记语言标签集合，生成所述目标前端页面对应的元素属性树；所述元素属性树包括按照树结构分布的多个节点，每个节点对应于所述标记语言标签集合中的一个所述元素属性；

填充单元，用于根据所述元素属性树，生成对应的格式代码并填充至所述目标前端页面；

第二生成单元，用于根据填充后的所述目标前端页面，生成对应的用户界面。

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

处理器；以及，被配置为存储计算机可执行指令的存储器，所述计算机可执行指令在被执行时使所述处理器执行如权利要求1-7任一项所述的用户界面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储计算机可执行指令，所述计算机可执行指令在被处理器执行时实现如权利要求1-7任一项所述的用户界面生成方法。

Images