[发明专利]一种前端页面的生成方法及装置、存储介质、电子装置

说明书

本发明实施例提供了一种前端页面的生成方法及装置、存储介质、电子装置，其中，方法包括：获取用户界面的设计图；识别设计图中所包括的组件的名称；根据组件的名称获取与组件对应的代码文本；根据各组件的代码文本生成用户界面的前端页面，即，直接识别设计图中的组件，然后获取组件的代码生成前端页面，因此，可以解决前端页面的生成的效率较低问题，达到快速生成前端页面的技术效果。

技术领域

本发明实施例涉及通信领域，具体而言，涉及一种前端页面的生成方法及装置、存储介质、电子装置。

背景技术

相关技术中，Web前端开发技术包括三要素：html(结构)、css(样式)、javascript(行为动作)，随着h5稳定版本的形成，前端三要素演化成HTML5、CSS3、jQuery(js中常用的库)；原始的前端开发主要就是用文本编辑器来编写代码，无需编译，本地预览确认无误后部署到服务器，为用户提供访问。但是这种用文本编辑器生成代码的方式过程缓慢并且出错率较高，使得前端页面的生成的效率较低。

发明内容

本发明实施例提供了一种前端页面的生成方法及装置、存储介质、电子装置，以至少解决相关技术中前端页面的生成的效率较低的问题。

根据本发明的一个实施例，提供了一种前端页面的生成方法，包括：

获取用户界面的设计图；

识别所述设计图中所包括的组件的名称；

根据所述组件的名称获取与所述组件对应的代码文本；

根据各所述组件的代码文本生成所述用户界面的前端页面。

在一个示例性的实施方式中，所述方法还包括：识别所述设计图中所包括的组件的位置信息；根据所述组件的所述位置信息确定所述前端页面中各所述组件的代码文本的顺序。

在一个示例性的实施方式中，所述前端页面中各所述组件的代码文本的顺序与对应的所述设计图中所述组件的位置一致。

在一个示例性的实施方式中，识别所述设计图中所包括的组件的名称，包括：识别所述设计图中的图形元素和/或文字；根据识别出的图形元素和/或文字确定所述设计图中所包括的组件的名称。

在一个示例性的实施方式中，根据所述组件的名称获取与所述组件对应的代码文本，包括：根据所述组件的名称在预设的组件代码库中查询所述组件的代码文本。

在一个示例性的实施方式中，还包括：对生成的所述前端页面进行测试。

根据本发明的另一个实施例，还提供了一种前端页面的生成装置，包括：

第一获取模块，用于获取用户界面的设计图；

识别模块，用于识别所述设计图中所包括的组件的名称；

第二获取模块，用于根据所述组件的名称获取与所述组件对应的代码文本；

生成模块，用于根据各所述组件的代码文本生成所述用户界面的前端页面。

在一个示例性的实施方式中，所述识别模块，还用于识别所述设计图中所包括的组件的位置信息；所述装置还包括：确定模块，用于根据所述组件的所述位置信息确定所述前端页面中各所述组件的代码文本的顺序。

根据本发明的又一个实施例，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。