[发明专利]界面生成方法、装置、计算机设备和存储介质

说明书

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

技术领域

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

背景技术

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界面。

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