CN114398138A - 界面生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请实施例提供了一种界面生成方法、装置、计算机设备和存储介质，应用于应用开发技术领域，包括：采用同步读取文件方法获取目标UI设计图对应的目标html文件；从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息；根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件的布局信息和组件样式生成组件结构化信息；遍历组件结构化信息生成dom树，并对dom树进行渲染处理，得到前端代码来生成目标UI界面，可提高界面生成效率。本申请涉及区块链技术，如可将目标html文件写入区块链中，以用于根据目标html文件生成前端代码等场景。

Description

界面生成方法、装置、计算机设备和存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及应用开发技术领域，具体涉及一种界面生成方法、装置、计算机设备和存储介质。

背景技术

Figma是一款基于浏览器的协作式UI(User Interface，用户界面)设计工具，从推出至今因其跨平台、云端存储等特性越来越受到UI设计师的青睐。Web(World Wide Web，万维网)开发工程师的正常开发流程往往是先根据UI设计师输出的设计图绘制基本UI界面，再添加交互事件等进行二次开发。在根据UI设计师输出的设计图绘制基本UI界面时，主要依赖Web开发工程师根据该设计图进行分析，然后编写对应代码以实现设计图对应的UI界面，导致界面开发效率低下。

发明内容

本申请实施例提供了一种界面生成方法、装置、计算机设备和存储介质，可以提高界面生成的效率。

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

当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是在UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

调用所述前端代码生成所述目标UI界面。

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

获取单元，用于当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是通过UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

处理单元，用于从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

所述处理单元，还用于根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

所述处理单元，还用于遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

所述处理单元，还用于调用所述前端代码生成所述目标UI界面。

本申请实施例一方面提供了一种计算机设备，包括处理器和存储器，所述处理器和所述存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述所述的界面生成方法。

本申请实施例一方面提供了一种计算机可读存储介质，该计算机可读存储介质中存储有程序指令，该程序指令被执行时，用于实现上述所述的界面生成方法。

本申请实施例一方面提供了一种计算机程序产品或计算机程序，计算机程序产品或计算机程序包括计算机指令，计算机指令存储在计算机可读存储介质中，计算机指令被计算机设备的处理器执行时，执行上述所述的界面生成方法。

在本申请实施例中，当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取目标UI设计图对应的目标超文本标记语言html文件，目标UI设计图是在UI设计工具生成的，目标UI设计图用于构建目标UI界面；从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息；根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件在目标UI界面中的布局信息和组件样式生成组件结构化信息；遍历组件结构化信息生成文档对象模型dom树，并对dom树进行渲染处理，得到目标UI界面对应的前端代码；调用前端代码生成目标UI界面，可以直接获取该目标设计图对应的html文件，并自动对html文件进行处理，生成目标UI界面，无需前端开发师对该目标UI设计图进行理解，然后编写相应代码来生成目标UI界面，提高了界面生成的效率，降低开发成本。

附图说明

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

图1是本申请实施例提供的一种界面生成系统的架构示意图；

图2是本申请实施例提供的一种界面生成方法的流程示意图；

图3是本申请实施例提供的一种多个组件在UI界面布局情况的示意图；

图4是本申请实施例提供的一种界面生成装置的结构示意图；

图5是本申请实施例提供的一种计算机设备的结构示意图。

具体实施方式

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

本申请实施例可以基于人工智能技术对目标UI设计图等进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本申请实施例提供了一种界面生成方案。该界面生成方案可以由计算机设备来执行，界面生成方案的大致原理如下：当用户或者企业想要生成一个UI界面(UserInterface，用户界面)时，可以提供关于该UI界面的需求信息，该需求信息可以是该UI界面的界面功能(如该UI界面用来展示数据、收集数据等等)，或者该需求信息可以对UI界面的布局需求的相关信息等等。然后可以根据UI界面的需求信息在UI设计工具(如figma设计工具)中设计该UI界面，并在该UI界面对应目标UI设计图设计完成之后，获取该目标UI设计图对应的目标html(Hyper Text Markup Language，超文本标记语言)文件，并从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息；然后根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件在目标UI界面中的布局信息和组件样式生成组件结构化信息；然后遍历组件结构化信息生成dom(Document Object Model，文档对象模型)树，并对dom树进行渲染处理，得到目标UI界面对应的前端代码；最后调用前端代码生成目标UI界面。

通过上述界面生成方案，可以直接获取该目标UI设计图对应的目标html文件，并自动对目标html文件进行处理，生成目标UI界面，无需前端开发师对该目标UI设计图进行理解，然后编写相应代码来生成目标UI界面，提高了界面生成的效率，降低开发成本。

基于上述提供的界面生成方案，本申请实施例提供了一种界面生成系统，请参见图1，该界面生成系统可以包括至少一个终端设备101和服务器102，终端设备101可以运行有UI设计工具，在该UI设计工具中可以提供不同类型的组件，在该UI设计工具中用户可以根据提供的组件设计需要的目标UI界面，得到目标UI界面对应的目标UI设计图，当得到目标UI设计图之后，用户可以触发对目标UI设计图的确认操作或者取消操作。服务器102在检测到针对目标UI设计图的确认操作时，可以获取该目标UI设计图对应的目标html文件，并基于目标html文件生成实现该目标UI界面的前端代码。其中，终端设备101和服务器102可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。终端设备可以是手机、平板电脑、笔记本电脑、掌上电脑、移动互联网设备(mobile internet device，MID)、可穿戴设备等智能设备。上述服务器包括多个服务器(也可称节点)，该多个服务器可以是独立的物理服务器，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

在一个实施例中，上述界面生成方案可由终端设备101来执行，该界面生成方案可以是：当用户触发了针对目标UI界面对应的目标UI设计图的确认操作时，终端设备101检测到针对目标UI设计图的确认操作，然后可以从服务器102中获取目标UI设计图对应的目标html文件，并从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息，并基于每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件在目标UI界面中的布局信息和组件样式生成组件结构化信息，遍历组件结构化信息生成文档对象模型dom树，并对dom树进行渲染处理，得到目标UI界面对应的前端代码，调用前端代码生成目标UI界面。然后可以将目标UI界面以及前端代码均存储在服务器102中。

在另一个实施例中，上述界面生成方案可由服务器102来执行，该界面生成方案可以是：在终端设备101提供的UI设计工具中设计目标UI界面对应的目标UI设计图，终端设备101在检测到针对该目标UI设计图的确认操作后，可以向服务器102发送检测到的针对该目标UI设计图的确认操作，然后服务器102可以获取目标UI设计图对应的目标html文件，然后服务器102可以按照上述终端设备101根据目标html文件生成目标UI界面的具体实现过程生成目标UI界面，并通过终端设备101显示生成的目标UI界面。

通过上述界面生成方案和界面生成系统，可以直接获取该目标UI设计图对应的html文件，并自动对html文件确定组件的组件信息和UI界面的页面尺寸信息，基于该组件信息和页面尺寸信息生成目标UI界面，无需前端开发师对该目标设计图进行理解，然后编写相应代码来生成目标UI界面，提高了界面生成效率，降低开发成本。

基于上述界面生成方案和界面生成系统，请参见图2，图2为本申请实施例提供的一种界面生成方法的流程示意图。该界面生成方法可以由计算机设备执行，该计算机设备可以是终端设备101或者服务器102。本申请实施例中所描述的界面生成方法，可以包括以下步骤S201-S205：

S201、当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取目标UI设计图对应的目标超文本标记语言html文件，目标UI设计图是在UI设计工具生成的，目标UI设计图用于构建目标UI界面。

其中，UI设计工具是一款基于浏览器的协作式UI设计工具，例如，该UI设计工具可以是figma设计工具、sketch设计工具等等，UI设计工具可以支持导出html文件，在该UI设计工具中提供有不同功能的组件。该目标UI设计图为网页版的UI设计图，在目标UI设计图中包括构成目标UI界面的多个组件。该同步读取文件方法可以是使用node.js提供的fs.readFilesSync方法。目标UI界面可以是医疗平台相关的医疗UI界面，例如医疗数据管理界面；或者，目标UI界面可以是游戏界面、音乐界面、即时通讯界面等等，本申请对此不作限定。

在一个实施例中，在UI设计工具中可以包括多个UI设计图，每个UI设计图均可用于创建一个UI界面。用户可以从多个UI设计图中选择目标UI设计图，并触发对该目标UI设计图的确认操作。然后计算机设备可以检测到针对目标UI设计图的确认操作。其中，触发目标UI设计图的确认操作的方式可以是点击目标UI设计图、双击目标UI设计图、特定手势(如OK手势)等方式；或者，触发目标UI设计图的确认操作的方式可以是语音触发的方式，例如语音输入“确认目标UI设计图”，计算机设备可以对该“确认目标UI设计图”进行语音识别，基于语音识别结果“确认”触发针对目标UI设计图的确认操作。

在一个实施例中，计算机设备可以根据某个用户或者企业的UI界面需求在UI设计工具中选择合适的组件实时生成目标UI界面对应的目标UI设计图，并在生成目标UI设计图之后，可以显示确认按键和取消按键，当用户触发确认按键时，计算机设备可以检测到针对目标UI设计图的确认操作；当用户触发取消按键时，计算机设备可以检测到针对目标UI设计图的取消操作，当检测到取消操作时，意味着该目标UI设计图需要修改或者是该用户或企业取消了目标UI设计图。在一个实施例中，在UI设计工具中一直显示有确认按键和取消按键，可以随时点击该确认按键或者取消按键，本申请实施例对此不作限定。

S202、从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息。其中，组件可以是输入框、各种按钮、TextView(文本类)等等组件，组件信息可以包括组件的宽度、高度、位置坐标、组件名称、组件类型、组件属性等等，页面尺寸信息可以包括目标UI界面的大小(如宽度和高度)。

由步骤S201可知，目标UI设计图包括构成目标UI界面的多个组件，因此，计算机设备获取到的目标html文件中包括了多个组件以及每个组件的组件信息、目标UI界面的页面尺寸信息，计算机设备可以从目标html文件中获取到构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息。

在一个实施例中，步骤S202的具体实现方式可以是：首先采用变长字符编码规则对目标html文件进行编码格式转换，得到目标html文件对应的目标格式转换结果，其中，长字符编码规则是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符，该变长字符编码规则可以是utf-8(Universal Character Set/UnicodeTransformation Format，8位元)编码规则、utf-16编码规则等等，本申请实施例不作限定。通过变长字符编码规则可以方便后期从格式转换结果中获取组件的组件信息。然后计算机设备可以从格式转换结果中，获取构建目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息。

在一个实施例中，计算机设备可以利用正则匹配方式从目标格式转换结果中获取构建目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息。作为一种实现方式，计算机设备可以获取正则匹配的正则表达式，该正则表达式可以用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置，可理解为：针对任意UI界面都可以使用上述正则表达式来确定构成任意UI界面的每个组件的组件信息以及该任意UI界面页面尺寸信息的目标起始位置和目标结束位置，即任意UI界面的UI设计图对应的html文件经过上述处理得到格式转换结果，在格式转换结果中每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置相同，需要说明的是，本申请所提到的目标起始位置和目标结束位置不单单可以是指实际在该格式转换结果中的位置，由于格式转换结果对应字符串，目标起始位置和目标结束位置也可以是指某个字符。作为另一种实现方式，计算机设备可以获取UI界面类型对应的正则表达式，该正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置，此时可以理解为：同一UI界面类型的正则表达式相同，正则表达式所指示的每个组件的组件信息和UI界面的页面尺寸信息中的目标起始位置和目标结束位置相同，不同UI类型界面的的正则表达式不同，例如UI界面类型1的正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置1和目标结束位置2；UI界面类型2的正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置3和目标结束位置4。

作为另一种实现方式，UI界面是通过多个组件构成的，不同类型组件的组件信息在格式转换结果中可能所处位置不同，在这种情况下，计算机设备可以获取组件类型对应的正则表达式，该组件类型的正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置。作为另一种实现方式，每个html文件可以对应一个正则表达式，计算机设备可以获取目标html文件的正则表达式，该目标html文件的正则表达式用于指示获取每个组件的组件信息和目标UI界面的页面尺寸信息的目标起始位置和目标结束位置。作为一种实现方式，计算机设备还可以获取文件类型对应的正则表达式，文件类型为html文件类型，每个html文件包括一个或多个script标签，每个组件的组件信息和UI界面的页面尺寸信息均存储一个或多个script标签中，在这种情况下，计算机设备获取的正则表达式为/<script>\s？var\sFILE_DAtA\s＝\s(.+),\bPAGED_FRAMES/。计算机设备可以根据正则表达式可以确定目标起始位置为script，并确定目标结束位置为PAGED_FRAME。

然后，在获取到正则表达式之后，计算机设备可以根据正则表达式在目标格式转换结果中确定目标起始位置和目标结束位置，并从目标起始位置和目标结束位置之间的字符信息中提取目标UI界面中每个组件的组件信息和目标UI界面的页面尺寸信息。承接上述例子，计算机设备通过上述变长字符编码对目标html编码处理后，目标html文件的目标格式转换结果对应有一系列字符串，而每个组件的组件信息和页面尺寸信息在script标签中同样也是对应着一串字符串对应的字符信息，计算机设备可以确定目标格式转换结果中的目标起始位置scrip和目标结束位置PAGED_FRAMES，并从scrip和PAGED_FRAMES之间的字符串对应的字符信息提取出每个组件的组件信息和页面尺寸信息，当根据正则表达式查找完成所有的起始位置为script，结束位置为PAGED_FRAMES之间的字符串对应的字符信息之后，最终得到多个组件的组件信息和页面尺寸信息。在实际应用过程中，目标起始位置和目标结束位置之间的字符串对应的字符信息可以认为包括了需要提取的每个组件的组件信息以及目标UI界面的页面尺寸信息。

S203、根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件在目标UI界面中的布局信息和组件样式生成组件结构化信息。

其中，布局信息可以包括组件在目标UI界面中的位置坐标、组件的组件高度和宽度，组件样式可以包括动画样式、背景样式、形状样式等等，当该组件包含字体时，该组件样式还可以包括字体样式等等。组件结构化信息可以是指json树或者json数组。

在一个实施例中，根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式的具体实现方式可以是：根据每个组件的组件信息和页面尺寸信息确定各个组件之间的组件关系以及每个组件在目标UI界面的布局信息；具体的，该页面尺寸信息包括界面宽度和界面高度，组件信息包括组件的位置坐标、组件高度和组件宽度。计算机设备可以根据目标UI界面的界面高度和界面宽度构成坐标体系，根据每个组件的位置坐标、组件宽度和组件高度对每个组件进行排序，得到各个组件之间的组件关系以及每个组件在目标UI界面的布局信息。例如，每个组件的位置坐标可以用(x，y)表示，x值从左到右递增，y值从下到上递增，也就是x值较大的在右侧，y值较大到的在上方，设2个组件，组件1的位置坐标为(0，0)，组件高度为1，组件宽度为2；组件2的位置坐标(3，4)，组件高度为3，组件宽度为1，计算机设备根据目标UI界面的界面高度和界面宽度构成坐标体系，根据2个组件的位置坐标、组件高度和组件宽度对每个组件排序，得到如图3所示的组件关系和每个号组件的布局信息。然后计算机设备可以根据各个组件之间的组件关系以及每个组件在目标UI界面的布局信息确定每个组件的组件样式。例如，2个组件的组件关系为：组件2在组件1在右上方，计算机设备可以根据每个组件在目标UI界面的布局信息和2个组件之间的组件关系可以确定组件1的组件样式和组件2的组件样式可以均为矩形框。

在一个实施例中，计算机设备基于每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息的具体实现方式可以是根据每个组件在目标UI界面中的布局信息和组件样式，采用公共组件flex Container对每个组件进行布局处理，得到所述目标UI界面的弹性布局；并根据弹性布局配置每个组件的组件样式字段、布局信息字段和第一组件属性字段，其中每个组件的第一组件属性字段可以基于每个组件的组件信息确定的，第一组件属性字段包括组件的大小、组件类型、组件名等等信息；然后计算机设备可以根据每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息。其中，弹性布局可以称为flex布局，Flex布局的主要思想是使父容器能够调节子项目的宽度/高度/排列方式等等；flex布局中包括12属性，其中作用于父容器有6大属性。作用于子项目有6大属性，在本申请实施例中，Flex布局的子项目为组件；计算机设备可以根据布局信息和组件样式，采用flex Container中的属性进行布局处理，得到目标UI界面的弹性布局，其中，弹性布局包括调节后的各组件的组件样式和布局信息。然后计算机设备可以根据调节后的各组件的组件样式和布局信息可以配置每个组件的组件样式字段的字段信息、布局信息字段的字段信息，以及第一组件属性字段的字段信息。

在一个实施例中，计算机设备根据每个组件的组件样式字段布局信息字段和第一组件属性字段生成组件结构化信息的具体实现方式可以是：计算机设备基于每个组件的组件样式字段、布局信息字段和第一组件属性字段生成初始结构化信息；可以获取提取指示信息，该提取指示信息用于指示获取目标字段的字段信息，其中，目标字段可以是上述组件样式字段、布局信息字段和第一组件属性字段中的一个或多个；然后从初始结构化信息中提取该提取指示信息所指示的目标字段的字段信息，并将提取到的目标字段的字段信息生成组件结构化信息。其中，通过提取指示信息可以提取想要的字段的字段信息，同时还可以去除无用字段的字段信息。例如，在生成组件结构化信息的时候，可以只需要每个组件的组件样式字段的字段信息和第一组件属性字段的字段信息，计算机设备获取的提取指示信息可以用于指示获取该组件样式字段的字段信息和第一组件属性字段的字段信息；然后从初始结构化信息提取组件样式字段的字段信息以及第一组件属性字段的字段信息，并根据提取到的组件样式字段的字段信息以及第一组件属性字段的字段信息生成组件结构化信息。

在一个实施例中，可能存在UI设计工具中使用的组件的组件名称与前端使用的组件名称对应不上的情况，在这种情况下，根据组件结构化信息无法生成前端代码，基于此，上述构成目标UI界面的多个组件均为UI设计工具中的组件，计算机设备可以基于每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息的具体实现方式可以是：针对构成目标UI界面的多个组件中的目标组件，计算机设备根据UI设计工具包括的组件与前端包括的组件之间的对应关系，判断目标组件的组件属性是否与相对应目标前端组件的组件属性相同，其中，组件属性至少包括以下一种：组件名和组件类型；若目标组件的组件属性与相对应目标前端组件的组件属性不相同，则为目标组件添加第二组件属性字段，第二组件属性字段的字段信息包括目标前端组件的组件属性；然后基于每个组件的组件样式字段、布局信息字段、第一组件属性字段和所述第二组件属性字段生成组件结构化信息。通过增加第二组件属性字段不仅能够生成前端代码，并调用该前端代码时不会出现保存，而且保留第一组件属性字段可以方便后续从UI设计工具中查找第一组件属性字段所指示的组件。

S204、遍历组件结构化信息生成文档对象模型dom树，并对dom树进行渲染处理，得到目标UI界面对应的前端代码。

在具体实现中，计算机设备可以利用解析器解析组件结构化信息，并基于解析结果确定dom树的父节点和父节点对应的子节点，然后根据父节点对应的信息和子节点对应的信息构建dom树。然后计算机设备可以对dom树进行渲染处理，可以理解为将dom树中每个节点上的信息转换成前端能够识别的格式的信息，即生成前端代码，以使得可以直接运行该前端代码就可以生成目标UI界面。在一个实施例中，计算机设备对dom树进行渲染处理的具体实现方式可以是：计算机设备接收CSS(Cascading Style Sheet，式级联样式表)解析器对组件结构化信息进行解析得到的CSS样式信息，并将CSS样式信息和DOM树上的节点的信息进行渲染，得到前端代码

S205、调用前端代码生成目标UI界面。

在一个实施例中，在生成目标UI界面之后，计算机设备可以向区块链节点发送前端代码和目标UI界面对应的目标UI设计图，区块链节点可以对前端代码和目标UI设计图进行合法性验证，并在合法性验证通过后，将前端代码和目标UI设计图生成区块，并将该区块发送到区块链其他节点进行共识，并在共识通过后，将该区块保存到区块链中。

在本申请实施例中，当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取目标UI设计图对应的目标超文本标记语言html文件，目标UI设计图是在UI设计工具生成的，目标UI设计图用于构建目标UI界面；从目标html文件中提取构成目标UI界面的多个组件的组件信息和目标UI界面的页面尺寸信息；根据每个组件的组件信息和页面尺寸信息确定每个组件在目标UI界面中的布局信息和组件样式，并基于每个组件在目标UI界面中的布局信息和组件样式生成组件结构化信息；遍历组件结构化信息生成文档对象模型dom树，并对dom树进行渲染处理，得到目标UI界面对应的前端代码；调用前端代码生成目标UI界面，以直接获取该目标设计图对应的html文件，并自动对html文件进行处理，生成目标UI界面，无需前端开发师对该目标UI设计图进行理解，然后编写相应代码来生成目标UI界面，提高了界面开发的效率，降低开发成本。

基于上述界面生成方法实施例的描述，本申请实施例还公开了一种界面生成装置，该界面生成装置可以是运行于上述所提及的计算机设备中的一个计算机程序(包括程序代码)。该界面生成装置可以执行图2所示的方法。请参见图4，所述界面生成装置可以运行如下单元：

获取单元401，用于当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是通过UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

处理单元402，用于从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

所述处理单元402，还用于根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

所述处理单元402，还用于遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

所述处理单元402，还用于调用所述前端代码生成所述目标UI界面。

在一个实施例中，所述处理单元在从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息时，可具体用于：

采用变长字符编码规则对所述目标html文件进行编码格式转换，得到所述目标html文件对应的目标格式转换结果；

从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息。

在一个实施例中，所述处理单元402在从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息时，可具体用于：

获取正则表示式，所述正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置；

根据所述正则表达式在所述目标格式转换结果中确定所述目标起始位置和所述目标结束位置，并从所述目标起始位置和所述目标结束位置之间的字符信息中提取所述目标UI界面中每个组件的组件信息和所述目标UI界面的页面尺寸信息。

在一个实施例中，所述处理单元402在根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式时，可具体用于：

根据每个组件的组件信息和所述页面尺寸信息确定各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息；

根据所述各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息确定所述每个组件的组件样式。

在一个实施例中，所述处理单元在基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息时，可具体用于：

根据每个组件在所述目标UI界面中的布局信息和组件样式，采用公共组件flexContainer对所述每个组件进行布局处理，得到所述目标UI界面的弹性布局；

根据所述弹性布局配置所述每个组件的组件样式字段、布局信息字段和第一组件属性字段；

根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息。

在一个实施例中，所述处理单元402在根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息时，可具体用于：

基于所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成初始结构化信息；

获取提取指示信息，所述提取指示信息用于指示获取目标字段的字段信息；

从所述初始结构化信息提取所述提取指示信息所指示的目标字段的字段信息，并将提取到的目标字段的字段信息生成组件结构化信息。

在一个实施例中，所述多个组件为UI设计工具中的组件；所述处理单元402在根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息时，可具体用于：

针对所述多个组件中的目标组件，根据所述UI设计工具包括的组件与前端包括的组件之间的对应关系，判断所述目标组件的组件属性是否与相对应目标前端组件的组件属性相同，所述组件属性至少包括以下一种：组件名和组件类型；

若所述目标组件的组件属性与相对应目标前端组件的组件属性不相同，则为所述目标组件添加第二组件属性字段，所述第二组件属性字段的字段信息包括所述目标前端组件的组件属性；

基于所述每个组件的组件样式字段、布局信息字段、第一组件属性字段和所述第二组件属性字段生成组件结构化信息。

可以理解的是，本实施例的界面生成装置的各功能单元可根据上述方法实施例图2中的方法具体实现，其具体实现过程可以参照上述方法实施例图2的相关描述，此处不再赘述。

进一步地，请参见图5，图5是本申请实施例提供的一种计算机设备的结构示意图。上述图2对应实施例中的计算机设备可以为图5所示的计算机设备。如图5所示，计算机设备可以包括：处理器501和存储器504，可选地，计算机设备还可以包括输入设备502和输出设备503。上述处理器501、输入设备502、输出设备503和存储器504通过总线505连接。存储器504用于存储计算机程序，所述计算机程序包括程序指令，处理器501用于执行存储器504存储的程序指令。

在本申请实施例中，处理器501通过运行存储器504中的可执行程序代码，执行如下操作：

当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是在UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

调用所述前端代码生成所述目标UI界面。

在一个实施例中，所述处理器501在从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息时，可具体用于：

采用变长字符编码规则对所述目标html文件进行编码格式转换，得到所述目标html文件对应的目标格式转换结果；

从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息。

在一个实施例中，所述处理器501在从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息时，可具体用于：

获取正则表示式，所述正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置；

根据所述正则表达式在所述目标格式转换结果中确定所述目标起始位置和所述目标结束位置，并从所述目标起始位置和所述目标结束位置之间的字符信息中提取所述目标UI界面中每个组件的组件信息和所述目标UI界面的页面尺寸信息。

在一个实施例中，所述处理器501在根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式时，可具体用于：

根据每个组件的组件信息和所述页面尺寸信息确定各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息；

根据所述各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息确定所述每个组件的组件样式。

在一个实施例中，所述处理器501在基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息时，可具体用于：

根据每个组件在所述目标UI界面中的布局信息和组件样式，采用公共组件flexContainer对所述每个组件进行布局处理，得到所述目标UI界面的弹性布局；

根据所述弹性布局配置所述每个组件的组件样式字段、布局信息字段和第一组件属性字段；

根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息。

在一个实施例中，所述处理器501在根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息时，可具体用于：

基于所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成初始结构化信息；

获取提取指示信息，所述提取指示信息用于指示获取目标字段的字段信息；

从所述初始结构化信息提取所述提取指示信息所指示的目标字段的字段信息，并将提取到的目标字段的字段信息生成组件结构化信息。

在一个实施例中，所述多个组件为UI设计工具中的组件；所述处理器501在根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息时，可具体用于：

针对所述多个组件中的目标组件，根据所述UI设计工具包括的组件与前端包括的组件之间的对应关系，判断所述目标组件的组件属性是否与相对应目标前端组件的组件属性相同，所述组件属性至少包括以下一种：组件名和组件类型；

若所述目标组件的组件属性与相对应目标前端组件的组件属性不相同，则为所述目标组件添加第二组件属性字段，所述第二组件属性字段的字段信息包括所述目标前端组件的组件属性；

基于所述每个组件的组件样式字段、布局信息字段、第一组件属性字段和所述第二组件属性字段生成组件结构化信息。

应当理解，在本申请实施例中，所称处理器501可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器501还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

该存储器504可以包括只读存储器和随机存取存储器，并向处理器501提供指令和数据。存储器504的一部分还可以包括非易失性随机存取存储器。

该输入设备502可以包括键盘等，并向处理器501输入界面需求；该输出设备503可以包括显示器等。

具体实现中，本申请实施例中所描述的处理器501、输入设备502、输出设备503和存储器504可执行上述所有实施例中描述的实现方式，也可执行上述装置中所描述的实现方式，在此不再赘述。

本申请实施例中提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令被处理器执行时，可执行上述所有实施例中所执行的步骤。

本申请实施例还提供一种计算机程序产品或计算机程序，计算机程序产品或计算机程序包括计算机指令，计算机指令存储在计算机可读存储介质中，计算机指令被计算机设备的处理器执行时，执行上述所有实施例中的方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。需要强调的是，为进一步保证上述数据的私密和安全性，上述所涉及的目标慢性病的知识图谱还可以存储于一区块链的节点中。其中，本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

以上所揭露的仅为本申请一种较佳实施例而已，当然不能以此来限定本申请之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本申请权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (10)

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

当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是在UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

调用所述前端代码生成所述目标UI界面。

2.根据权利要求1所述的方法，其特征在于，所述从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息，包括：

采用变长字符编码规则对所述目标html文件进行编码格式转换，得到所述目标html文件对应的目标格式转换结果；

从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息。

3.根据权利要求2所述的方法，其特征在于，所述从所述目标格式转换结果中，获取构建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息，包括：

获取正则表示式，所述正则表达式用于指示获取每个组件的组件信息和UI界面的页面尺寸信息的目标起始位置和目标结束位置；

根据所述正则表达式在所述目标格式转换结果中确定所述目标起始位置和所述目标结束位置，并从所述目标起始位置和所述目标结束位置之间的字符信息中提取所述目标UI界面中每个组件的组件信息和所述目标UI界面的页面尺寸信息。

4.根据权利要求1所述的方法，其特征在于，所述根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，包括：

根据每个组件的组件信息和所述页面尺寸信息确定各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息；

根据所述各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息确定所述每个组件的组件样式。

5.根据权利要求1所述的方法，其特征在于，所述基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息，包括：

根据每个组件在所述目标UI界面中的布局信息和组件样式，采用公共组件flexContainer对所述每个组件进行布局处理，得到所述目标UI界面的弹性布局；

根据所述弹性布局配置所述每个组件的组件样式字段、布局信息字段和第一组件属性字段；

根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息。

6.根据权利要求5所述的方法，其特征在于，所述根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息，包括：

基于所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成初始结构化信息；

获取提取指示信息，所述提取指示信息用于指示获取目标字段的字段信息；

从所述初始结构化信息提取所述提取指示信息所指示的目标字段的字段信息，并将提取到的目标字段的字段信息生成组件结构化信息。

7.根据权利要求5所述的方法，其特征在于，所述多个组件为UI设计工具中的组件；所述根据所述每个组件的组件样式字段、布局信息字段和第一组件属性字段生成组件结构化信息，包括：

针对所述多个组件中的目标组件，根据所述UI设计工具包括的组件与前端包括的组件之间的对应关系，判断所述目标组件的组件属性是否与相对应目标前端组件的组件属性相同，所述组件属性至少包括以下一种：组件名和组件类型；

若所述目标组件的组件属性与相对应目标前端组件的组件属性不相同，则为所述目标组件添加第二组件属性字段，所述第二组件属性字段的字段信息包括所述目标前端组件的组件属性；

基于所述每个组件的组件样式字段、布局信息字段、第一组件属性字段和所述第二组件属性字段生成组件结构化信息。

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

获取单元，用于当检测到针对目标UI设计图的确认操作时，采用同步读取文件方法获取所述目标UI设计图对应的目标超文本标记语言html文件，所述目标UI设计图是通过UI设计工具生成的，所述目标UI设计图用于构建目标UI界面；

处理单元，用于从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息；

所述处理单元，还用于根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面中的布局信息和组件样式，并基于所述每个组件在所述目标UI界面中的布局信息和组件样式生成组件结构化信息；

所述处理单元，还用于遍历所述组件结构化信息生成文档对象模型dom树，并对所述dom树进行渲染处理，得到所述目标UI界面对应的前端代码；

所述处理单元，还用于调用所述前端代码生成所述目标UI界面。

9.一种计算机设备，其特征在于，包括存储器，用于存储计算机程序；

处理器，调用所述存储器中的所述计算机程序，用于执行如权利要求1～7任一项所述的界面生成方法。

10.一种计算机存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令被处理器执行时，执行权利要求1～7任一项所述的界面生成方法。

Images