CN116483343A - 前端代码生成方法及装置 - Google Patents

Abstract

本公开涉及计算机技术领域，尤其涉及一种前端代码生成方法及装置。其中，该前端代码生成方法，包括：接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息，其中，已标记视觉稿包括至少一个已标记视觉组件，已标记视觉组件与节点信息一一对应，节点信息包括组件标识和节点标记信息；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码，其中，组件标识和前端组件代码一一对应；根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。采用本公开可以提高前端代码的开发效率。

Description

前端代码生成方法及装置

技术领域

本公开涉及计算机技术领域，尤其涉及一种前端代码生成方法及装置。

背景技术

随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码以展示该网页。

在获取前端代码时，需要技术人员针对网页中的每个内容元素，分别手动编写其对应的显示代码，得到该网页的前端代码，从而导致前端代码的开发效率较低。

发明内容

本公开提供一种前端代码生成方法及装置，以至少解决相关技术中前端代码的开发效率较低的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种前端代码生成方法，应用于第一终端，包括：

接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；

根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；

根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。

可选的，所述对所述已标记视觉稿进行节点解析，包括：

对所述已标记视觉稿进行校验；

在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。

可选的，在所述对所述已标记视觉稿进行校验之后，还包括：

在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提示信息用于指示所述已标记视觉稿未通过校验。

可选的，在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还包括：

获取设计组件库中至少一个视觉组件对应的第一路径配置信息；

获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；

接收针对任一第一路径配置信息的路径关联指令；

根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；

对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。

可选的，所述根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码，包括：

确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；

获取初始前端框架，并将所述抽象语法树转换到所述初始前端框架中，得到所述已标记视觉稿对应的前端代码。

可选的，在所述生成所述已标记视觉稿对应的前端代码之后，还包括：

接收所述第二终端发送的所述已标记视觉稿中任一已标记视觉组件对应的替换组件；

获取所述任一已标记视觉组件对应的节点信息，并根据所述任一已标记视觉组件对应的节点信息对所述替换组件进行重命名，得到重命名后的替换组件；

根据所述任一已标记视觉组件对应的节点信息，将所述任一已标记视觉组件替换为所述重命名后的替换组件，得到资源替换后的前端代码。

根据本公开实施例的第二方面，提供一种前端代码生成方法，其特征在于，应用于第二终端，包括：

获取初始视觉稿，其中，所述初始视觉稿包括至少一个视觉组件；

对所述至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；

将所述已标记视觉稿发送至第一终端。

根据本公开实施例的第三方面，提供一种前端代码生成装置，包括：

节点解析单元，被配置为执行接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；

代码获取单元，被配置为执行根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；

代码生成单元，被配置为执行根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。

可选的，所述节点解析单元被配置为执行对所述已标记视觉稿进行节点解析时，具体被配置为执行：

对所述已标记视觉稿进行校验；

在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。

可选的，所述节点解析单元被配置为执行在所述对所述已标记视觉稿进行校验之后，还被配置为执行：

在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提示信息用于指示所述已标记视觉稿未通过校验。

可选的，所述代码获取单元被配置为执行在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还被配置为执行：

获取设计组件库中至少一个视觉组件对应的第一路径配置信息；

获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；

接收针对任一第一路径配置信息的路径关联指令；

根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；

对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。

可选的，所述代码生成单元被配置为执行根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码时，具体被配置为执行：

确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；

获取初始前端框架，并将所述抽象语法树转换到所述初始前端框架中，得到所述已标记视觉稿对应的前端代码。

可选的，代码生成单元，被配置为执行在所述生成所述已标记视觉稿对应的前端代码之后，还被配置为执行：

接收所述第二终端发送的所述已标记视觉稿中任一已标记视觉组件对应的替换组件；

获取所述任一已标记视觉组件对应的节点信息，并根据所述任一已标记视觉组件对应的节点信息对所述替换组件进行重命名，得到重命名后的替换组件；

根据所述任一已标记视觉组件对应的节点信息，将所述任一已标记视觉组件替换为所述重命名后的替换组件，得到资源替换后的前端代码。

根据本公开实施例的第四方面，提供一种前端代码生成装置，包括：

视觉稿获取单元，被配置为执行获取初始视觉稿，其中，所述初始视觉稿包括至少一个视觉组件；

组件标记单元，被配置为执行对所述至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；

视觉稿发送单元，被配置为执行将所述已标记视觉稿发送至第一终端。

根据本公开实施例的第五方面，提供一种终端，包括：

处理器；

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

其中，所述处理器被配置为执行所述指令，以实现前述第一方面或第二方面中任一项所述的前端代码生成方法。

根据本申请的第四方面，提供了一种存储介质，当所述存储介质中的指令由终端的处理器执行时，使得终端能够执行前述第一方面或第二方面中任一项所述的前端代码生成方法。

根据本申请的第五方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现前述第一方面或第二方面中任一项所述的方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

在一些或者相关实施例中，前端代码生成方法包括：接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息，其中，已标记视觉稿包括至少一个已标记视觉组件，已标记视觉组件与节点信息一一对应，节点信息包括组件标识和节点标记信息；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码，其中，组件标识和前端组件代码一一对应；根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。因此，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种前端代码开发的背景示意图；

图2根据一示例性实施例示出的一种前端代码生成方法的流程图；

图3是根据一示例性实施例示出的另一种前端代码生成方法的流程图；

图4是根据一示例性实施例示出的一种FigCode的功能示意图；

图5是根据一示例性实施例示出的又一种前端代码生成方法的流程图；

图6是根据一示例性实施例示出的再一种前端代码生成方法的流程图；

图7是根据一示例性实施例示出的再一种前端代码生成方法的流程图；

图8是根据一示例性实施例示出的再一种前端代码生成方法的流程图；

图9是根据一示例性实施例示出的一种前端代码生成装置框图；

图10是根据一示例性实施例示出的另一种前端代码生成装置框图；

图11是根据一示例性实施例示出的一种终端的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

根据一些实施例，网页页面的开发流程包括用户界面(User Interface)框架开发和终稿资源替换两个环节。其中，UI框架开发指的是从视觉稿到前端代码的翻译过程，翻译官是前端工程师。终稿资源替换是一个文件搬运过程，搬运工是前端工程师。

在一些实施例中，图1是根据一示例性实施例示出的一种前端代码开发的背景示意图。如图1所示，首先，设计师通过自身使用的终端(例如可以称为设计终端)完成框架稿设计。接着，可以将框架稿交付至前端工程师使用的终端(例如可以称为前端终端)。其次，前端工程师可以利用前端资产中的基础组件，根据框架稿在前端终端中进行基于组件库的UI框架和逻辑开发，得到第一前端代码；同时，设计师可以在设计终端中完成动画、图片素材和整体UI开发，并将开发完成的终稿交付至前端终端。接着，前端工程师可以根据交付的终稿将第一前端代码中需要替换的组件进行资源替换，得到第二前端代码，并将第二前端代码发送至设计终端。接着，设计师可以在设计终端中对第二前端代码进行走查，并将走查完成的第二前端代码发送至前端工程师。最后，前端工程师在前端终端中对第二前端代码进行细节调整，并上线细节调整后的第二前端代码。

易于理解的是，UI框架开发部分属于低级重复的工作，时间大约占编码时间的30％至50％；终稿资源替换环节，前端工程师手动替换资源，大约要花费1至2天处理。因此，前端代码的开发效率较低。

图2根据一示例性实施例示出的一种前端代码生成方法的流程图，如图2所示，该前端代码生成方法应用于第一终端，该前端代码生成方法可以应用于前端开发场景中，包括以下步骤：

在步骤S11中，接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息；

根据一些实施例，第一终端指的是前端工程师根据接收的视觉稿设计前端代码时使用的终端。

在一些实施例中，视觉稿是高保真的静态设计图，视觉稿可以表达信息框架，静态演示内容和功能。视觉稿可以为基于组件的框架稿。

在一些实施例中，前端代码指的是终端展示视觉稿时运行的代码。

在一些实施例中，第二终端指的是设计师进行设计稿设计时使用的终端。

根据一些实施例，已标记视觉稿指的是对设计稿中至少一个视觉组件进行标记后得到的已标记视觉稿。已标记视觉稿包括至少一个已标记视觉组件。已标记视觉组件指的是对视觉组件进行标记后得到的组件。视觉组件包括但不限于导航菜单、按钮、标签页、分页、输入框等。

在一些实施例中，节点信息与已标记视觉组件一一对应，节点信息包括组件标识、节点标记信息、节点结构等。组件标识用于指示已标记视觉组件的组件名称。节点标记信息用于指示视觉组件在视觉稿中所处的节点的类型的信息。组件名称例如可以为导航菜单A，例如也可以为按钮B。节点标记信息包括但不限于页面入口节点、组件入口节点、列表容器节点、切图节点等。

易于理解的是，当第一终端进行前端代码生成时，第一终端可以接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息。

在步骤S12中，根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；

根据一些实施例，设计组件库指的是设计师进行设计稿设计时所采用的组件库。设计组件库包括至少一个视觉组件。

在一些实施例中，前端组件库包括至少一段可以通用的前端组件代码。视觉组件与前端组件代码一一对应，也就是说，组件标识和前端组件代码一一对应。

在一些实施例中，前端组件代码又称组件粒度代码。其中，组件粒度代码的文件大小越小，其对应的组件的粒度越大。可以根据不同的需求定义组件粒度的大小。

易于理解的是，当第一终端获取到至少一个节点信息时，第一终端可以根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码。

在步骤S13中，根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。

易于理解的是，当第一终端获取到至少一个节点信息和至少一段前端组件代码时，第一终端可以根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。

综上，本公开实施例提供的方法，通过接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。因此，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

图3是根据一示例性实施例示出的一种前端代码生成方法的流程图，如图3所示，该前端代码生成方法应用于第一终端，包括以下步骤：

在步骤S21中，接收第二终端发送的已标记视觉稿；

根据一些实施例，第一终端可以安装有设计标记工具插件。该设计标记工具插件可以用于执行前端代码生成方法。该设计标记工具插件例如可以为Figma插件(FigCode)。

易于理解的是，当第一终端进行前端代码生成时，第一终端中安装的FigCode可以接收第二终端发送的已标记视觉稿。

在步骤S22中，对已标记视觉稿进行校验，在已标记视觉稿满足校验条件的情况下，对已标记视觉稿进行节点解析，得到至少一个节点信息；

根据一些实施例，对已标记视觉稿进行校验时，校验内容包括但不限于对已标记视觉稿进行自动布局(auto layout)校验，对已标记视觉稿进行切图和组件标记步骤缺省校验等。

在一些实施例中，校验条件指的是判断是否可以对已标记视觉稿进行节点解析时采用的条件。该校验条件包括但不限于已标记视觉稿已进行自动布局、已标记视觉稿已进行切图和组件标记等。

根据一些实施例，图4是根据一示例性实施例示出的一种FigCode的功能示意图。如图4所示，FigCode具备视觉稿lint功能，基于该视觉稿lint功能，当第一终端中安装的FigCode接收到第二终端发送的已标记视觉稿时，FigCode可以对该已标记视觉稿进行视觉稿auto layout校验以及切图和组件标记步骤缺省校验。

在一些实施例中，如图4所示，当FigCode判断已标记视觉稿满足校验条件时，FigCode可以通过组件识别功能对已标记视觉稿进行节点解析，具体可以通过figmaplugin api对已标记视觉稿中至少一个节点信息进行读取。

在步骤S23中，在已标记视觉稿不满足校验条件的情况下，发出提示信息；

根据一些实施例，提示信息用于指示已标记视觉稿未通过校验。

在一些实施例中，在已标记视觉稿不满足校验条件的情况下，不对已标记视觉稿进行节点解析，并将提示信息发送至第二客户端以指示第二客户端对已标记视觉稿进行调整，直至已标记视觉稿满足校验条件。

在步骤S24中，获取设计组件库中至少一个视觉组件对应的第一路径配置信息；

根据一些实施例，第一路径配置信息指的是对视觉组件的文件路径进行配置时采用的配置信息。其中，每一个视觉组件均对应一个文件路径。

在步骤S25中，获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；

根据一些实施例，第二路径配置信息指的是对前端组件代码的文件路径进行配置时采用的配置信息。其中，每一段前端组件代码均对应一个文件路径。

在一些实施例中，如图4所示，对视觉组件的文件路径进行配置或对前端组件代码的文件路径进行配置时，采用的配置方式包括但不限于json配置、远程json文件url配置等。

在步骤S26中，接收针对任一第一路径配置信息的路径关联指令，根据路径关联指令，在至少一个第二路径配置信息中确定与任一第一路径配置信息对应的第二路径配置信息；

根据一些实施例，路径关联指令指的是对第一路径配置信息和第二路径配置信息进行关联时采用的指令。第一路径配置信息和第二路径配置信息一一对应。

在步骤S27中，对任一第一路径配置信息和任一第一路径配置信息对应的第二路径配置信息进行关联，得到设计组件库与前端组件库之间的对应关系；

根据一些实施例，如图4所示，FigCode还具备配置保存功能。当获取到第一路径配置信息和第二路径配置信息并对任一第一路径配置信息和任一第一路径配置信息对应的第二路径配置信息进行关联时，可以保存该第一路径配置信息、第二路径配置信息以及任一第一路径配置信息和任一第一路径配置信息对应的第二路径配置信息之间的关联信息。因此，当下一次进行前端代码生成时，可以根据保存的缓存信息直接得到设计组件库与前端组件库之间的对应关系，可以提高前端代码的生成速度。

在一些实施例中，当设计组件库发生更新时，可以对第一路径配置信息进行更新并保存。当前端组件库发生更新时，可以对第二路径配置信息进行更新并保存。

在步骤S28中，根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；

根据一些实施例，如图4所示，FigCode可以基于组件识别功能，根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码。

在步骤S29中，根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。

根据一些实施例，如图4所示，FigCode还具备代码块文件拆分功能，在已标记视觉稿对应的前端代码对应的文件大小满足文件拆分条件的情况下，可以对已标记视觉稿对应的前端代码按组件维度进行文件拆分，得到拆分后的前端代码集合。因此，可以提高对前端代码进行维护时的便利性。

根据一些实施例，如图4所示，FigCode还具备组件道具类型(props type)生成功能。组件props type生成功能用于将组件props type识别为打字类型(Type Script)。具体的，该组件props type生成功能用于将前端代码中暴露出来的变量识别为标准变量，即对已标记视觉稿对应的前端代码进行代码格式化处理，得到格式化后的前端代码。

在一些实施例中，也可以对拆分后的前端代码集合中每一段拆分后的前端代码进行代码格式化处理，得到格式化后的拆分后的前端代码集合。

综上，本公开实施例提供的方法，首先，通过接收第二终端发送的已标记视觉稿，对已标记视觉稿进行校验，在已标记视觉稿满足校验条件的情况下，对已标记视觉稿进行节点解析，得到至少一个节点信息，在已标记视觉稿不满足校验条件的情况下，发出提示信息，因此，可以提高节点信息获取的准确性。接着，通过获取设计组件库中至少一个视觉组件对应的第一路径配置信息；获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；接收针对任一第一路径配置信息的路径关联指令，根据路径关联指令，在至少一个第二路径配置信息中确定与任一第一路径配置信息对应的第二路径配置信息；对任一第一路径配置信息和任一第一路径配置信息对应的第二路径配置信息进行关联，得到设计组件库与前端组件库之间的对应关系；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；因此，可以提高前端组件代码获取的准确性。最后，根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码；因此，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

图5是根据一示例性实施例示出的一种前端代码生成方法的流程图，如图5所示，该前端代码生成方法应用于第一终端，包括以下步骤：

在步骤S31中，接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息；

具体过程如上，此处不再赘述。

在步骤S32中，根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；

具体过程如上，此处不再赘述。

在步骤S33中，确定至少一段前端组件代码和至少一个节点标记信息对应的抽象语法树；

根据一些实施例，抽象语法树(Abstract Syntax Tree，AST)，或简称语法树(Syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

易于理解的是，当获取到至少一段前端组件代码和至少一个节点标记信息时，可以将该至少一段前端组件代码和至少一个节点标记信息转换为抽象语法树。

在步骤S34中，获取初始前端框架，并将抽象语法树转换到初始前端框架中，得到已标记视觉稿对应的前端代码；

根据一些实施例，初始前端框架指的是预设的前端框架。该预设的前端框架包括但不限于领域特定语言(Domain Specific Language，DSL)前端框架、Vue或React等。

易于理解的是，当获取到至少一段前端组件代码和至少一个节点标记信息对应的抽象语法树时，可以获取初始前端框架，并将抽象语法树转换到初始前端框架中，得到已标记视觉稿对应的前端代码。

在步骤S35中，接收第二终端发送的已标记视觉稿中任一已标记视觉组件对应的替换组件；

根据一些实施例，当第一终端接收第二终端发送的已标记视觉稿中任一已标记视觉组件对应的替换组件时，第一终端可以接收第二终端发送的已标记视觉稿对应的终稿。接着，第二终端可以从终稿中获取任一已标记视觉组件对应的替换组件。

在一些实施例中，终稿指的是在已标记视觉稿的基础上完成动画、图片素材和整体UI开发后得到的稿件。

在一些实施例中，替换组件例如可以为图片资源。此时，第一终端需要将前端代码中已标记视觉组件替换为对应的图片资源。

在步骤S36中，获取任一已标记视觉组件对应的节点信息，并根据任一已标记视觉组件对应的节点信息对替换组件进行重命名，得到重命名后的替换组件；

根据一些实施例，获取任一已标记视觉组件对应的第一组件标识时，可以通过figma plugin api获取任一已标记视觉组件对应的节点信息，以得到任一已标记视觉组件对应的组件标识和节点标记信息。接着，可以根据任一已标记视觉组件对应的组件标识和组件标识和节点标记信息对替换组件进行重命名。

在一些实施例中，重命名后的替换组件对应的组件名称与任一已标记视觉组件对应的组件名称相同。

例如，可以通过FigCode的切图标记功能获取到任一已标记视觉组件对应的组件标识为导航菜单A、节点标记信息为组件入口节点“％”，接着将替换组件重命名为“％导航菜单A”。

在步骤S37中，根据任一已标记视觉组件对应的节点信息，将任一已标记视觉组件替换为重命名后的替换组件，得到资源替换后的前端代码；

根据一些实施例，当对任一已标记视觉组件进行资源替换(切图替换)时，可以采用同名替换，将任一已标记视觉组件替换为重命名后的替换组件，得到资源替换后的前端代码。

在一些实施例中，当接收第二终端发送的针对重命名后的替换组件对应的替换组件时，具体替换过程如上，将替换组件进行同名替换即可。

根据一些实施例，当第一终端获取到资源替换后的前端代码时，第一终端可以输出该资源替换后的前端代码以及替换组件。

在一些实施例中，如图4所示，FigCode还具备输出路径管理功能。通过该输出路径管理功能，可以对输出资源替换后的前端代码以及替换组件时的组件代码路径和图片资源路径进行管理。

在一些实施例中，组件代码路径和图片资源路径可以默认保存历史填写记录，例如上一次填写记录。

在步骤S38中，展示任一已标记视觉组件和替换组件。

根据一些实施例，展示任一已标记视觉组件和替换组件时，可以展示任一已标记视觉组件对应的组件信息和替换组件对应的组件信息。组件信息包括但不限于图片尺寸、文件大小、图片内容、格式、文件名称等。因此，可以根据展示的任一已标记视觉组件和替换组件，对比资源替换前后图片尺寸、图片内容、文件大小、格式、文件名称的变化，以便于前端工程师进行自查。

综上，本公开实施例提供的方法，首先，通过接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码；确定至少一段前端组件代码和至少一个节点标记信息对应的抽象语法树；获取初始前端框架，并将抽象语法树转换到初始前端框架中，得到已标记视觉稿对应的前端代码；因此，可以提高前端代码获取的准确性以及生成效率，同时，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。接着，接收第二终端发送的已标记视觉稿中任一已标记视觉组件对应的替换组件；获取任一已标记视觉组件对应的节点信息，并根据任一已标记视觉组件对应的节点信息对替换组件进行重命名，得到重命名后的替换组件；根据任一已标记视觉组件对应的节点信息，将任一已标记视觉组件替换为重命名后的替换组件，得到资源替换后的前端代码；展示任一已标记视觉组件和替换组件。因此，通过对需要替换的组件进行同名替换，可以无需前端工程师手动替换资源，可以提高资源替换效率，可以提高前端代码的开发效率。

图6是根据一示例性实施例示出的一种前端代码生成方法的流程图，如图6所示，该前端代码生成方法应用于第二终端，包括以下步骤：

在步骤S41中，获取初始视觉稿；

根据一些实施例，初始视觉稿包括至少一个视觉组件。

在一些实施例中，初始视觉稿例如可以为基于组件的框架稿。

易于理解的是，当第二终端进行前端代码生成时，第二终端可以获取初始视觉稿。

在步骤S42中，对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；

根据一些实施例，节点类型指的是视觉组件在初始视觉稿中所处的节点的类型。节点类型与节点标记信息一一对应。例如，当节点类型为“页面入口节点”时，节点标记信息可以为“#”。当节点类型为“组件入口节点”时，节点标记信息可以为“％”。当节点类型为“列表容器节点”时，节点标记信息可以为“～”。当节点类型为“切图节点”时，节点标记信息可以为“@”。

在一些实施例中，对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记时，可以在设计标记工具节点，例如figma节点中对任一个视觉组件进行重命名，以节点标记信息作为开头标记。

例如，当任一个视觉组件的组件名称为“导航菜单A”时，可以将“％”作为开头标记，将该任一个视觉组件重命名为“％导航菜单A”。

易于理解的是，当第二终端获取到初始视觉稿时，第二终端可以对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿。

在步骤S43中，将已标记视觉稿发送至第一终端；

根据一些实施例，第二终端在将已标记视觉稿发送至第一终端前，第二终端也可以对已标记视觉稿进行校验，如果已标记视觉稿未通过校验，则发出提示信息。接着，第二终端可以根据提示信息对已标记视觉稿进行调整，直至已标记视觉稿通过校验。最终将满足校验条件的已标记视觉稿发送至第一终端。

或者，第二终端也可以直将已标记视觉稿发送至第一终端，如果之后接收到针对已标记视觉稿的提示信息，则对已标记视觉稿进行调整，将调整后的对已标记视觉稿发送至第一终端以供校验。

易于理解的是，当第二终端获取到已标记视觉稿时，第二终端可以将已标记视觉稿发送至第一终端。

在步骤S44中，将终稿发送至第一终端。

根据一些实施例，终稿中包括已标记视觉稿中至少一个已标记视觉组件对应的替换组件。已标记视觉组件与替换组件一一对应。

易于理解的是，第二终端还可以将终稿发送至第一终端，以使第一终端根据终稿进行资源替换。

综上，本公开实施例提供的方法，通过获取初始视觉稿；对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；将已标记视觉稿发送至第一终端；将终稿发送至第一终端。因此，通过对初始视觉稿进行标记，将标记后的已标记视觉稿发送至第一终端，可以使第一终端从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。同时，通过将终稿发送至第一终端，可以使第一终端根据终端进行资源替换，可以无需前端工程师手动替换资源，可以提高资源替换效率，可以提高前端代码的开发效率。

图7是根据一示例性实施例示出的一种前端代码生成方法的流程图，如图7所示，该前端代码生成方法包括以下步骤：

在步骤S51中，第二终端将设计师根据figma组件库完成的基于组件的框架稿交付至FigCode，并基于FigCode对基于组件的框架稿进行设计转代码(Design转Code，D2C)标记以及合规调整。

在步骤S52中，第二终端将D2C标记以及合规调整后的基于组件的框架稿发送至第一终端。

在步骤S53中，第一终端利用FigCode打通资产配置约束变化，以生成D2C标记以及合规调整后的基于组件的框架稿对应的UI代码，并基于生成的UI代码和前端资产中的基础组件以及玩法组件进行逻辑开发，得到前端代码。

根据一些实施例，图8是根据一示例性实施例示出的一种前端代码生成方法的流程图。如图8所示，当第一终端利用FigCode打通资产配置约束变化，生成D2C标记以及合规调整后的基于组件的框架稿对应的UI代码时，首先，第一终端可以利用FigCode读取设计资产和组件库代码映射配置(即读取设计组件库与前端组件库之间的对应关系)以及读取美化(prettier)配置。接着，第一终端可以利用FigCode进行节点解析，对于标记节点可以解析出页面拆分“#”标记、文件分割“％”标记、列表“～”标记以及图片“@”标记，对于原始节点可以解析出虚拟标签“dom tag”、虚拟子元素对象“dom children”、“css class”、“cssstyle”、属性“assert”。

在一些实施例中，对于标记节点而言，第一终端可以利用FigCode进行资产库组件识别，获取资产库组件中的前端组件代码。对于原始节点而言，第一终端可以利用FigCode进行非资产库组件识别，获取原始节点对应的原生代码。从而，第一终端可以确定标记节点和标记节点对应的前端组件代码，以及原始节点和原始节点对应的原生代码对应的抽象语法树，并将抽象语法树转换到初始前端框架中，得到前端代码。

在步骤S55中，第二终端基于D2C标记以及合规调整后的基于组件的框架稿进行动画、图片素材和整体UI开发，并将开发完成的终稿交付至第一终端。

在步骤S56中，第一终端利用FigCode和终稿进行资源替换，并对资源替换后的前端代码进行自查，将自查完成的前端代码。

根据一些实施例，如图8所示，可以根据prettier配置对资源替换后的前端代码进行代码格式化，并导出资源替换时替换后的图片。

在步骤S57中，第二终端对自查完成的前端代码进行走查，并将走查完成的前端代码发送至第一终端。

在步骤S58中，第一终端对走查完成的前端代码进行细节调整，并上线细节调整后的前端代码。

综上，因此，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

图9是根据一示例性实施例示出的一种前端代码生成装置框图。参照图9，该前端代码生成装置900包括节点解析单元901，代码获取单元902和代码生成单元903。

节点解析单元901，被配置为执行接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息，其中，已标记视觉稿包括至少一个已标记视觉组件，已标记视觉组件与节点信息一一对应，节点信息包括组件标识和节点标记信息；

代码获取单元902，被配置为执行根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码，其中，组件标识和前端组件代码一一对应；

代码生成单元903，被配置为执行根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。

根据一些实施例，节点解析单元901被配置为执行对已标记视觉稿进行节点解析时，具体被配置为执行：

对已标记视觉稿进行校验；

在已标记视觉稿满足校验条件的情况下，对已标记视觉稿进行节点解析。

根据一些实施例，节点解析单元901被配置为执行在对已标记视觉稿进行校验之后，还被配置为执行：

在已标记视觉稿不满足校验条件的情况下，发出提示信息，其中，提示信息用于指示已标记视觉稿未通过校验。

根据一些实施例，代码获取单元902被配置为执行在根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还被配置为执行：

获取设计组件库中至少一个视觉组件对应的第一路径配置信息；

获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；

接收针对任一第一路径配置信息的路径关联指令；

根据路径关联指令，在至少一个第二路径配置信息中确定与任一第一路径配置信息对应的第二路径配置信息；

对任一第一路径配置信息和任一第一路径配置信息对应的第二路径配置信息进行关联，得到设计组件库与前端组件库之间的对应关系。

根据一些实施例，代码生成单元903被配置为执行根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码时，具体被配置为执行：

确定至少一段前端组件代码和至少一个节点标记信息对应的抽象语法树；

获取初始前端框架，并将抽象语法树转换到初始前端框架中，得到已标记视觉稿对应的前端代码。

根据一些实施例，代码生成单元903，被配置为执行在生成已标记视觉稿对应的前端代码之后，还被配置为执行：

接收第二终端发送的已标记视觉稿中任一已标记视觉组件对应的替换组件；

获取任一已标记视觉组件对应的节点信息，并根据任一已标记视觉组件对应的节点信息对替换组件进行重命名，得到重命名后的替换组件；

根据任一已标记视觉组件对应的节点信息，将任一已标记视觉组件替换为重命名后的替换组件，得到资源替换后的前端代码。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

综上，本公开实施例提供的装置，通过节点解析单元接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息，其中，已标记视觉稿包括至少一个已标记视觉组件，已标记视觉组件与节点信息一一对应，节点信息包括组件标识和节点标记信息；代码获取单元根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码，其中，组件标识和前端组件代码一一对应；代码生成单元根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。因此，通过从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

图10是根据一示例性实施例示出的一种前端代码生成装置框图。参照图10，该前端代码生成装置1000包括视觉稿获取单元1001，组件标记单元1002和视觉稿发送单元1003。

视觉稿获取单元1001，被配置为执行获取初始视觉稿，其中，初始视觉稿包括至少一个视觉组件；

组件标记单元1002，被配置为执行对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；

视觉稿发送单元1003，被配置为执行将已标记视觉稿发送至第一终端。

根据一些实施例，视觉稿发送单元1003，还被配置为执行：

将终稿发送至第一终端。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

综上，本公开实施例提供的装置，通过视觉稿获取单元获取初始视觉稿，其中，初始视觉稿包括至少一个视觉组件；组件标记单元对至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；视觉稿发送单元将已标记视觉稿发送至第一终端。因此，通过对初始视觉稿进行标记，将标记后的已标记视觉稿发送至第一终端，可以使第一终端从前端组件库中获取组件标识对应的前端组件代码，并根据节点标记信息和前端组件代码生成前端代码，可以无需手动编写已标记视觉稿中节点解析得到的节点信息对应的前端代码，可以减少前端代码的开发时长，可以提高前端代码的开发效率。

图11是根据一示例性实施例示出的一种用于前端代码生成的终端的框图。

参照图11，终端1100可以包括以下一个或多个组件：处理组件1102，存储器1104，电力组件1106，多媒体组件1108，音频组件1110，输入/输出(I/O)的接口1112，传感器组件1114，以及通信组件1116。

处理组件1102通常控制终端1100的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件1102可以包括一个或多个处理器1120来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1102可以包括一个或多个模块，便于处理组件1102和其他组件之间的交互。例如，处理组件1102可以包括多媒体模块，以方便多媒体组件1108和处理组件1102之间的交互。

存储器1104被配置为存储各种类型的数据以支持在终端1100的操作。这些数据的示例包括用于在终端1100上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器1104可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件1106为终端1100的各种组件提供电力。电源组件1106可以包括电源管理系统，一个或多个电源，及其他与为终端1100生成、管理和分配电力相关联的组件。

多媒体组件1108包括在所述终端1100和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件1108包括一个前置摄像头和/或后置摄像头。当终端1100处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件1110被配置为输出和/或输入音频信号。例如，音频组件1110包括一个麦克风(MIC)，当终端1100处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1104或经由通信组件1116发送。在一些实施例中，音频组件1110还包括一个扬声器，用于输出音频信号。

I/O接口1112为处理组件1102和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件1114包括一个或多个传感器，用于为终端1100提供各个方面的状态评估。例如，传感器组件1114可以检测到终端1100的打开/关闭状态，组件的相对定位，例如所述组件为终端1100的显示器和小键盘，传感器组件1114还可以检测终端1100或终端1100一个组件的位置改变，用户与终端1100接触的存在或不存在，终端1100方位或加速/减速和终端1100的温度变化。传感器组件1114可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1114还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1114还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件1116被配置为便于终端1100和其他设备之间有线或无线方式的通信。终端1100可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件1116经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件1116还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，终端1100可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器1104，上述指令可由终端1100的处理器1120执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种前端代码生成方法，其特征在于，应用于第一终端，包括：

接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；

根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；

根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。

2.根据权利要求1的方法，其特征在于，所述对所述已标记视觉稿进行节点解析，包括：

对所述已标记视觉稿进行校验；

在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。

3.根据权利要求2的方法，其特征在于，在所述对所述已标记视觉稿进行校验之后，还包括：

在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提示信息用于指示所述已标记视觉稿未通过校验。

4.根据权利要求1的方法，其特征在于，在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还包括：

获取设计组件库中至少一个视觉组件对应的第一路径配置信息；

获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；

接收针对任一第一路径配置信息的路径关联指令；

根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；

对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。

5.根据权利要求1的方法，其特征在于，所述根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码，包括：

确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；

获取初始前端框架，并将所述抽象语法树转换到所述初始前端框架中，得到所述已标记视觉稿对应的前端代码。

6.根据权利要求1的方法，其特征在于，在所述生成所述已标记视觉稿对应的前端代码之后，还包括：

接收所述第二终端发送的所述已标记视觉稿中任一已标记视觉组件对应的替换组件；

获取所述任一已标记视觉组件对应的节点信息，并根据所述任一已标记视觉组件对应的节点信息对所述替换组件进行重命名，得到重命名后的替换组件；

根据所述任一已标记视觉组件对应的节点信息，将所述任一已标记视觉组件替换为所述重命名后的替换组件，得到资源替换后的前端代码。

7.一种前端代码生成方法，其特征在于，应用于第二终端，包括：

获取初始视觉稿，其中，所述初始视觉稿包括至少一个视觉组件；

对所述至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；

将所述已标记视觉稿发送至第一终端。

8.一种前端代码生成装置，其特征在于，包括：

节点解析单元，被配置为执行接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；

代码获取单元，被配置为执行根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；

代码生成单元，被配置为执行根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。

9.一种终端，其特征在于，包括：

处理器；

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

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6或权利要求7中任一项所述的前端代码生成方法。

10.一种存储介质，当所述存储介质中的指令由终端的处理器执行时，使得终端能够执行如权利要求1至6或权利要求7中任一项所述的前端代码生成方法。