CN113934429B - 一种设计稿的转换方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本公开提供了一种设计稿转化方法、装置、计算机设备和存储介质，其中，该方法包括：确定待转化的设计稿对应的符合第一预设结构的初始代码；对第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在目标搭建系统中的第一位置区域展示组件代码；其中，组件代码用于生成展示在目标搭建系统中的第二位置区域的目标组件。本公开实施例通过生成的临时目标组件完成设计稿对应的页面的搭建，提高了页面搭建的灵活性以及搭建设计稿对应的页面的搭建效率。

Description

一种设计稿的转换方法、装置、计算机设备和存储介质

技术领域

本公开涉及设计稿转代码技术领域，具体而言，涉及一种设计稿的转化方法、装置、计算机设备和存储介质。

背景技术

前端页面开发是一种创建WEB页面或APP(Application，应用程序)等前端页面并呈现给用户的过程。在将前端页面展示给用户时，需要终端从服务器、云平台等远程服务平台获取前端页面对应的程序代码，再通过对程序代码的处理，如编码运行、渲染等，得到前端页面并展示给用户。而针对前端页面开发的具体过程，通常需要页面设计人员先设计出前端页面对应的设计稿，再由程序编程人员将设计稿转换为前端页面对应的程序代码，进而基于该程序代码在终端渲染出设计稿对应的前端页面。

为了提高前端页面的开发效率，使用可视化的搭建系统进行前端页面的开发成为了一种常见的开发方式，具体的，用户可以通过在搭建系统中对设计稿对应的页面组件进行拖拽，实现对设计稿对应的页面的搭建，之后，搭建系统可以基于搭建完成的页面，生成设计稿对应的程序代码。

但在使用搭建系统进行页面搭建的过程中，如果搭建系统中不存在页面对应的、预先开发好的页面组件，则需要开发人员从零开始对该页面组件进行开发，并在开发完成后将其发布到搭建系统，进而，才可以使用发布的该页面组件完成页面的搭建，但这样的页面搭建方式严重降低了页面的搭建效率，进而影响了前端页面开发的效率。

发明内容

本公开实施例至少提供一种设计稿转化方法、装置、计算机设备和存储介质，以提高页面搭建的效率以及前端页面开发的效率。

第一方面，本公开实施例提供了一种设计稿转化方法，包括：

确定待转化的设计稿对应的符合第一预设结构的初始代码；

对所述第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在所述目标搭建系统中的第一位置区域展示所述组件代码；

其中，所述组件代码用于生成展示在所述目标搭建系统中的第二位置区域的目标组件。

在一种可能的实施方式中，在得到所述组件代码之后，还包括：

对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，在将所述组件代码展示在所述第一位置区域之后，还包括：

获取针对所述组件代码的代码编辑信息；

基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第一组件变量；

所述对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件，包括：

对所述组件代码进行编译，生成所述组件代码对应的所述第一组件变量；

将所述第一组件变量存储到所述目标搭建系统对应的存储位置；

从所述存储位置获取所述第一组件变量，并基于获取的所述第一组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第二组件变量；

所述对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件，包括：

获取所述目标搭建系统中的目标类型的已存储变量；所述目标类型包括事件类型和/或数据类型；

基于所述已存储变量，对所述组件代码进行编译，得到所述组件代码对应的第二组件变量；

基于所述第二组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，在所述生成所述组件代码对应的所述第一组件变量之后，还包括：

获取所述目标搭建系统中的已生成组件对应的结构树；其中，所述结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量；所述结构树展示在所述目标搭建系统中的第三位置区域；

响应于针对所述结构树中的目标节点的选定操作，将所述第一组件变量插入至所述目标节点，得到更新后的结构树；

基于所述更新后的结构树中的各个节点对应的变量，在所述目标搭建系统中的所述第二位置区域展示所述结构树中的各个节点分别对应的组件，所述各个节点对应的变量包括第一组件变量或已存储变量，所述各个节点分别对应的组件包括目标组件或已生成组件。

在一种可能的实施方式中，在将所述组件代码展示在所述第一位置区域之后，还包括：

获取针对所述组件代码的属性设置信息；

将所述属性设置信息添加至所述组件代码中；其中，所述属性设置信息用于表征所述组件代码对应的目标组件的组件属性。

在一种可能的实施方式中，所述基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码，包括：

基于所述代码编辑信息，在在线集成开发环境WebIDE中对所述组件代码进行更新，得到更新后的组件代码。

第二方面，本公开实施例还提供一种设计稿转化装置，包括：

确定模块，用于确定待转化的设计稿对应的符合第一预设结构的初始代码；

转换展示模块，用于对所述第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在所述目标搭建系统中的第一位置区域展示所述组件代码；

其中，所述组件代码用于生成展示在所述目标搭建系统中的第二位置区域的目标组件。

在一种可能的实施方式中，所述装置还包括：

编译模块，用于在得到所述组件代码之后，对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述装置还包括：

获取模块，用于在将所述组件代码展示在所述第一位置区域之后，获取针对所述组件代码的代码编辑信息；

基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第一组件变量；

所述编译模块，用于对所述组件代码进行编译，生成所述组件代码对应的所述第一组件变量；

将所述第一组件变量存储到所述目标搭建系统对应的存储位置；

从所述存储位置获取所述第一组件变量，并基于获取的所述第一组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第二组件变量；

所述编译模块，用于获取所述目标搭建系统中的目标类型的已存储变量；所述目标类型包括事件类型和/或数据类型；

基于所述已存储变量，对所述组件代码进行编译，得到所述组件代码对应的第二组件变量；

基于所述第二组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述装置还包括：

更新模块，用于在所述生成所述组件代码对应的所述第一组件变量之后，获取所述目标搭建系统中的已生成组件对应的结构树；其中，所述结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量；所述结构树展示在所述目标搭建系统中的第三位置区域；

响应于针对所述结构树中的目标节点的选定操作，将所述第一组件变量插入至所述目标节点，得到更新后的结构树；

基于所述更新后的结构树中的各个节点对应的变量，在所述目标搭建系统中的所述第二位置区域展示所述结构树中的各个节点分别对应的组件，所述各个节点对应的变量包括第一组件变量或已存储变量，所述各个节点分别对应的组件包括目标组件或已生成组件。

在一种可能的实施方式中，所述装置还包括：

设置模块，用于在将所述组件代码展示在所述第一位置区域之后，获取针对所述组件代码的属性设置信息；

将所述属性设置信息添加至所述组件代码中；其中，所述属性设置信息用于表征所述组件代码对应的目标组件的组件属性。

在一种可能的实施方式中，所述获取模块，用于基于所述代码编辑信息，在在线集成开发环境WebIDE中对所述组件代码进行更新，得到更新后的组件代码。

第三方面，本公开可选实现方式还提供一种计算机设备，处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开可选实现方式还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

关于上述设计稿转化装置、计算机设备、及计算机可读存储介质的效果描述参见上述设计稿转化方法的说明，这里不再赘述。

本公开实施例提供的设计稿转化方法、装置、计算机设备和存储介质，通过将待转化的设计稿对应的第一预设结构的初始代码转化为与目标搭建系统相匹配的符合第二预设结构的组件代码，并展示在目标搭建系统中的第一位置区域；再利用组件代码生成设计稿对应的目标组件并展示在目标搭建系统中的第二位置区域。本公开实施例通过将初始代码转化为与目标搭建系统相匹配的组件代码，能够实现利用组件代码生成临时的目标组件，再利用目标组件实现对设计稿对应的页面的搭建；这样基于生成的临时的目标组件实现页面搭建，避免了目标搭建系统中不存在已发布完成的目标组件，需要重新开发并发布目标组件的问题；如此，不仅提高了页面搭建的灵活性，还极大的提高了搭建设计稿对应的页面的搭建效率。

进一步，本公开实施例提供的设计稿转化方法、装置、计算机设备和存储介质，还可以基于获取的针对组件代码的代码编辑信息，对转换得到的组件代码进行编辑、更新；而组件代码对应于目标组件，基于对组件代码的编辑，能够实现对目标组件的灵活编辑，进而提高了页面搭建的灵活性。

进一步，本公开实施例提供的设计稿转化方法、装置、计算机设备和存储介质，还可以将对组件代码进行编译后得到的第一组件变量存储到目标搭建系统对应的存储位置；如此实现了将第一组件变量变为目标搭建系统能够使用的变量，进而，目标搭建系统可以使用第一组件变量，并基于第一组件变量生成能够展示在第二位置区域的目标组件，实现对目标组件的可视化处理。

进一步，本公开实施例提供的设计稿转化方法、装置、计算机设备和存储介质，还可以通过使用目标搭建系统中的已存储变量，实现对第二组件变量的信息绑定，例如，数据绑定、事件绑定等，增加了生成的第二组件变量的信息量。

进一步，本公开实施例提供的设计稿转化方法、装置、计算机设备和存储介质，还可以利用组件代码对应的第一组件变量，对目标搭建系统中的已生成组件对应的结构树的节点进行更新；由于已生成组件可以对应于目标搭建系统中的非临时组件，所以利用组件代码对结构树的节点进行更新，能够实现临时的目标组件和已生成组件对应的非临时组件的兼容，提高了生成的临时的目标组件的适用性。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种设计稿转化方法的流程图；

图2示出了本公开实施例所提供的一种设计稿的示意图；

图3示出了本公开实施例所提供的一种目标搭建系统的示意图；

图4示出了本公开实施例所提供的一种基于第二组件变量生成并展示的目标组件的示意图；

图5示出了本公开实施例所提供的一种设计稿转化装置的示意图；

图6示出了本公开实施例所提供的一种计算机设备结构示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

另外，本公开实施例中的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。

在本文中提及的“多个或者若干个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

经研究发现，前端页面开发是一种创建WEB页面或APP(Application，应用程序)等前端页面并呈现给用户的过程。在将前端页面展示给用户时，需要终端从服务器、云平台等远程服务平台获取前端页面对应的程序代码，再通过对程序代码的处理，如编码运行、渲染等，得到前端页面并展示给用户。而针对前端页面开发的具体过程，通常需要页面设计人员先设计出前端页面对应的设计稿，再由程序编程人员将设计稿转换为前端页面对应的程序代码，进而基于该程序代码在终端渲染出设计稿对应的前端页面。

为了提高前端页面的开发效率，使用可视化的搭建系统进行前端页面的开发成为了一种常见的开发方式，具体的，用户可以通过在搭建系统中对设计稿对应的页面组件进行拖拽，实现对设计稿对应的页面的搭建，之后，搭建系统可以基于搭建完成的页面，生成设计稿对应的程序代码。

但在使用搭建系统进行页面搭建的过程中，如果搭建系统中不存在页面对应的、预先开发好的页面组件，则需要开发人员从零开始对该页面组件进行开发，并在开发完成后将其发布到搭建系统，进而，才可以使用发布的该页面组件完成页面的搭建，但这样的页面搭建方式严重降低了页面的搭建效率，进而影响了前端页面开发的效率。

基于上述研究，本公开提供了一种设计稿转化方法、装置、计算机设备和存储介质，通过将初始代码转化为与目标搭建系统相匹配的组件代码，能够实现利用组件代码生成临时的目标组件，再利用目标组件实现对设计稿对应的页面的搭建；这样基于生成的临时的目标组件实现页面搭建，避免了目标搭建系统中不存在已发布完成的目标组件，需要重新开发并发布目标组件的问题；如此，不仅提高了页面搭建的灵活性，还极大的提高了搭建设计稿对应的页面的搭建效率。

针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

需要说明的是，本公开实施例中所提到的特定名词包括：

设计稿：指用户界面的设计稿，通常由UI(User Interface，用户界面)设计师通过Figma、Sketch、Photoshop等工具画出；

DFS：Depth First Search，深度优先搜索，是一种常见的图/树结构的遍历算法；

React：是一个用于构建用户界面的JAVASCRIPT库，主要用于构建UI页面，方便开发者开发用户界面；

Vue：是一套用于构建用户界面的渐进式框架；

Babel：一个常用JavaScript编译器，如果不编译，无法保证组件代码能够在浏览器中直接运行；

WebIDE：Web Integrity Develop Environment，一种针对编程开发人员的在线集成开发环境，编程人员无需本地安装开发环境，只需打开浏览器就能立即开发，同时支持断点调试、版本管理、团队开发等；

结构树：在可视化搭建中，通常会提供一个树形的界面让用户了解所搭建的页面的组成结构。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种设计稿转化方法进行详细介绍，本公开实施例所提供的设计稿转化方法的执行主体一般为具有一定计算能力的计算机设备，在一些可能的实现方式中，该设计稿转化方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

下面以执行主体为计算机设备为例对本公开实施例提供的设计稿转化方法加以说明。

如图1所示，为本公开实施例提供的一种设计稿转化方法的流程图，可以包括以下步骤：

S101：确定待转化的设计稿对应的符合第一预设结构的初始代码。

这里，待转化的设计稿可以为由UI(User Interface，用户界面)设计师画出的、UI页面对应的设计稿。如图2所示，为本公开实施例所提供的一种设计稿的示意图。

第一预设结构可以为JSON格式的树形结构，初始代码为能够表征设计稿对应的页面的代码。

在获取到待转化的设计稿之后，可以利用设计稿转代码技术中的布局算法，将设计稿转化为符合JSON格式的树形结构的初始代码，也即，可以得到设计稿对应的树形的JSON数据。

具体实施时，在获取到待转化的设计稿之后，可以直接使用计算机设备，基于设计稿转代码技术中的布局算法，将设计稿转化为初始代码。或者，在获取到待转化的设计稿之后，也可以直接将待转化的设计稿输入到目标搭建系统，利用目标搭建系统，基于设计稿转代码技术中的布局算法，将设计稿转化为初始代码，这里不进行限定。

S102：对第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在目标搭建系统中的第一位置区域展示组件代码；其中，组件代码用于生成展示在目标搭建系统中的第二位置区域的目标组件。

这里，目标搭建系统为一种通过可视化交互界面的方式，来搭建页面或网站的可视化搭建系统，在具体应用时，用户可以在目标搭建系统中，通过拖拽组件的方式，实现页面的搭建。

针对目标搭建系统，其中可以包括用于展示组件代码对应的目标组件的位置区域和用于展示目标搭建系统中的已生成组件对应的结构树的位置区域，其中，已生成组件可以为目标搭建系统中的、开发人员预先开发好并发布完成的非临时组件。此外，目标搭建系统中还可以包括用于展示组件代码的位置区域。

如图3所示，为本公开实施例所提供的一种目标搭建系统的示意图，其中，第一位置区域为展示生成的组件代码的位置区域，其中还可以包括后续更新完组件代码之后，用于关闭对组件代码进行更新的关闭按钮、用于保存更新后的组件代码的保存按钮、以及保存更新后的组件代码并关闭代码更新功能(关闭展示的组件代码)的保存并关闭按钮；此外，还可以展示有目标搭建系统对应的日志信息。例如，展示有组件代码对应的编译日志信息。

第二位置区域为用于展示渲染后的、组件代码对应的目标组件的区域，或者，第二位置区域也可以用于展示由至少一个组件组成的页面，具体的，在图3中展示有一种目标组件，该目标组件中还展示有组件数据(实时入库量)对应的信息。第三位置区域为用于展示目标搭建系统中的已生成组件对应的结构树的位置区域，在图3中，展示有结构树对应的节点1、节点2和节点3，且关于节点1、节点2和节点3，将在后文进行介绍。

另外，目标搭建系统中的不同区域位置展示的内容可以根据开发需要进行设定，这里不进行限定。例如，针对图3中的各个位置区域，生成的组件代码可以展示在第一位置区域，也可以展示在第二位置区域，也可以展示在第三位置区域，同理，目标组件和结构树也可以展示在任一区域位置。

并且，目标搭建系统中的各个位置区域的大小可以根据其展示的内容进行调整。例如，当第一位置区域中未展示有组件代码时，第一位置区域可以为目标搭建系统对应的整体区域的五分之一，第二位置区域可以为目标搭建系统对应的整体区域的三分之一；当第一位置区域中展示有目标组件对应的组件代码时，第一位置区域可以为目标搭建系统对应的整体区域的三分之一，第二位置区域可以相应调整为目标搭建系统对应的整体区域的四分之一，并且，第二位置区域中展示的内容不会由于第二位置区域的大小变化而被遮盖。

第二预设结构为与目标搭建系统相匹配的结构，也即第二预设结构为与目标搭建系统相兼容的代码结构，具体的，第二预设结构可以为组件格式的树结构。组件代码为能够表征设计稿对应的页面中的目标组件的代码，决定着各个目标组件的样式，如尺寸、形状等。不同的组件对应于不同的组件代码，具体的，组件代码可以为设计稿对应的页面的源码。基于目标组件对应的组件代码，可以生成能够展示在目标搭建系统中的第二位置区域的目标组件，基于设计稿对应的页面中的各个目标组件的组件代码，可以生成展示在目标搭建系统中的第二位置区域的页面。

在得到初始代码之后，可以利用目标搭建系统，通过DFS算法对初始代码进行转换，得到初始代码对应的组件代码。其中，得到的组件代码可以为React组件代码、Vue组件代码等任一种与目标搭建系统相兼容的组件代码。

具体转化过程可以为：先确定初始代码对应的每个目标组件，然后，针对每个目标组件，将该目标组件对应的初始代码转换为与目标搭建系统相匹配的符合第二预设结构的组件代码，进而，实现将每个目标组件分别对应的初始代码转换为组件代码，并可以将每个目标组件对应的组件代码展示在第一位置区域。或者，也可以响应于用户的目标组件选定操作，仅将用户选中的目标组件对应的组件代码展示在第一位置区域。其中，本公开实施例所涉及的用户均可以为开发人员，但不仅限于开发人员。

在初始代码对应的目标组件仅包括一个的情况下，可以直接将目标组件对应的组件代码展示在第一位置区域。

此外，目标搭建系统还可以支持将展示在第一位置区域的组件代码进行隐藏，也即，可以响应于用户的代码展示请求，将目标组件对应的组件代码展示在第一位置区域，或者，响应于用户的代码隐藏请求，将展示在第一位置区域的组件代码隐藏，也即，删除展示在第一位置区域的组件代码。

在另一种实施方式中，将初始代码转换为符合第二预设结构的组件代码的步骤，也可以是部署在计算机设备中的代码转换插件执行的，在得到初始代码之后，可以调用部署的代码转换插件，利用代码转换插件通过DFS算法将初始代码转换为目标组件对应的组件代码。在得到组件代码之后，可以将组件代码输入目标搭建系统中，利用目标搭建系统将组件代码展示在第一位置区域。

并且，目标搭建系统在得到组件代码之后，还可以对组件代码进行编译，以生成组件代码对应的目标组件并展示在第二位置区域。

另外，在得到组件代码之后，还可以将其存储到设计稿对应的页面搭建信息中，以便于后续获取组件代码以及生成目标组件。其中，页面搭建信息为设计稿对应的页面中的各个组件(包括目标组件)的搭建信息，可以决定各个组件的拼装方式，页面搭建信息具体可以包括设计稿对应的页面中的各个组件的功能、各个组件的类型、各个组件在页面中的位置、各个组件的生成方式等信息。基于页面搭建信息，还可以保证后续生成的组件代码对应的目标组件能够和其他的已生成组件共存，其中，其他的已生成组件为目标搭建系统中发布完成的已生成组件。

这样，通过将初始代码转化为与目标搭建系统相匹配的组件代码，能够实现利用组件代码生成临时的目标组件，再利用目标组件实现对设计稿对应的页面的搭建；这样基于生成的临时的目标组件实现页面搭建，避免了目标搭建系统中不存在已发布完成的目标组件，需要重新开发并发布目标组件的问题；如此，不仅提高了页面搭建的灵活性，还极大的提高了搭建设计稿对应的页面的搭建效率。

在一种实施例中，在得到组件代码之后，还可以对组件代码进行编译，得到组件代码对应的编译产物。具体的，可以利用Babel对组件代码进行编译。编译产物为一种机器可以识别的、二进制格式或汇编语言格式的数据。之后，可以基于编译产物在目标搭建系统中的第二位置区域展示组件代码对应的目标组件。

具体实施时，可以对编译产物进行识别，对识别结果进行渲染以得到组件代码对应的、可视化的目标组件，并将目标组件展示在目标搭建系统的第二位置区域，在图3中的第二位置区域处，展示有一种生成的目标组件。其中，图3中的目标组件仅为一种示意图，在具体实施时，不同组件代码对应的目标组件的样式和内容各不相同。

在另一种实施方式中，在得到组件代码之后，也可以不对组件代码进行编译，这样，也不能生成组件代码对应的目标组件，从而，目标搭建系统可以只在第一位置区域展示组件代码，不生成并展示组件代码对应的目标组件。

在一种实施例中，在将组件代码展示在第一位置区域之后，还可以获取针对组件代码的代码编辑信息。这里，代码编辑信息可以为用户输入的、对组件代码进行编辑的信息。例如，代码编辑信息可以为增加组件代码的信息、删除组件代码的信息、修改组件代码的信息等等。

之后，目标搭建系统可以基于代码编辑信息，对组件代码进行更新，如在组件代码中增加部分代码、删除部分代码、修改部分代码等，进而，可以得到更新后的组件代码。

并且，在目标搭建系统中，还可以设置有代码更新监控机制，当监控到展示在第一位置区域的组件代码被更新了之后，可以利用Babel对更新后的组件代码进行编译，得到新的编译产物，并基于新的编译产物生成更新后的组件代码对应的目标组件，并展示在第二位置区域。

在另一种实施方式中，在监控到展示在第一位置区域的组件代码被更新了之后，也可以不对更新后的组件代码进行编译，也即，不生成更新后的组件代码对应的目标组件，也不对第二位置区域对应的展示内容(目标组件)进行更新。

在一种实施例中，针对对组件代码进行更新的步骤，可以基于代码编辑信息，在在线集成开发环境WebIDE中对组件代码进行更新，得到更新后的组件代码。并且，在在线集成开发环境WebIDE中对组件代码进行更新的过程，可以以可视化的方式展示在目标搭建系统的第一位置区域中。

在一种实施例中，编译产物可以包括组件代码对应的第一组件变量。其中，第一组件变量为组件类型的变量，用于表征组件代码编译运行后的运行结果。具体的，第一组件变量为基于组件代码生成的组件变量。

针对对组件代码进行编译，得到编译产物，并基于编译产物在目标搭建系统中的第二位置区域展示组件代码对应的目标组件的步骤，可以按照以下步骤实施：

步骤一、对组件代码进行编译，生成组件代码对应的第一组件变量。

这里，可以使用Babel对组件代码进行编译、运行，得到组件代码对应的第一组件变量。

步骤二、将第一组件变量存储到目标搭建系统对应的存储位置。

这里，目标搭建系统只能获取和使用存储在其对应的存储位置的变量，通过将第一组件变量存储到目标搭建系统对应的存储位置，可以实现将第一组件变量注册为目标搭建系统能够使用和获取的变量。

步骤三、从存储位置获取第一组件变量，并基于获取的第一组件变量在目标搭建系统中的第二位置区域展示组件代码对应的目标组件。

本步骤中，目标搭建系统可以从存储位置处获取存储的第一组件变量，然后，可以基于获取的第一组件变量，渲染生成组件代码对应的目标组件，并将生成的目标组件展示在第二区域位置中。

这里，在初始代码对应的目标组件包括多个的情况下，可以基于目标组件对应的页面搭建信息，基于获取的存储的每个目标组件对应的第一组价变量，生成多个目标组件，并将多个目标组件展示在第二区域位置中，也即，将由多个目标组件组成的、设计稿对应的页面展示在第二区域位置中。或者，在初始代码对应的目标组件包括多个的情况下，也可以响应于用户针对生成的目标组件的选取操作，将用户选取的目标组件展示在第二区域位置。

在一种实施例中，编译产物包括组件代码对应的第二组件变量。

这里，第二组件变量为组件类型的变量，也用于表征组件代码编译运行后的运行结果。具体的，第二组件变量为基于组件代码和目标搭建系统中的已存储变量生成的组件变量。

具体实施时，针对对组件代码进行编译，得到编译产物，并基于编译产物在目标搭建系统中的第二位置区域展示组件代码对应的目标组件的步骤，可以按照以下步骤实施：

S1：获取目标搭建系统中的目标类型的已存储变量；目标类型包括事件类型和/或数据类型。

这里，已存储变量可以包括目标搭建系统中存储的、其他代码对应编译运行后得到的变量，不同的已存储变量可以具有不同的目标类型，具体的，目标类型可以包括事件类型和/或数据类型，事件类型的已存储变量能够用于表征事件，例如，跳转页面事件、信息提示事件、点击事件、长按事件、双击事件等，数据类型的已存储变量能够用于表征数据，例如，后端接口的数据、其他的已生成组件的属性、文字数据、图片数据、用户数据、系统数据等。

另外，已存储变量还可以包括目标搭建系统中开发人员预先开发好并发布完成的非临时组件对应的组件类型的变量。

具体实施时，在得到组件代码之后，还可以响应于用户针对第一位置区域中的变量获取组件的点击操作，将目标搭建系统中的各个已存储变量展示在第一位置区域中，在图3中，展示有已存储变量1、已存储变量2已和存储变量3。之后，响应于用户的变量选取操作，确定并从存储位置处获取用户选取的各个目标类型的已存储变量。例如，获取用户选取的跳转页面事件类型的已存储变量和/或后端接口的数据类型的已存储变量。

另外，在确定用户选取的已存储变量之后，目标搭建系统还可以将已存储变量对应的代码展示在第一位置区域，并且，目标搭建系统还支持用户对展示的已存储变量对应的代码进行修改。

S2：基于已存储变量，对组件代码进行编译，得到组件代码对应的第二组件变量。

本步骤中，基于根据获取的用户选定的已存储变量，对组件代码进行编译，将已存储变量对应的事件和/或数据添加至组件代码对应的变量中，得到组件代码对应的第二组件变量。其中，第二组件变量包含已存储变量对应的事件和/或数据信息。

进而，可以将生成的第二组件变量存储至目标搭建系统对应的存储位置，以用于后续目标搭建系统对第二组件变量的使用。

S3：基于第二组件变量在目标搭建系统中的第二位置区域展示组件代码对应的目标组件。

具体实施时，可以获取存储在存储位置的第二组件变量，然后，基于第二组件变量，渲染生成组件代码对应的目标组件，并将生成的目标组件展示在第二区域位置中。这样，基于获取的已存储变量，可以实现对目标组件进行事件/数据的绑定。

如图4所示，为本公开实施例提供的一种基于第二组件变量生成并展示的目标组件的示意图。其中，图4中所示的目标组件所对应的第二组件变量为基于用户的邮箱数据对应的已存储变量生成的，与图3中所示目标组件相比，图4中所示的目标组件还展示有用户邮箱信息。

在一种实施例中，在生成组件代码对应的第一组件变量之后，还可以将第一组件变量添加至目标搭建系统对应的结构树的节点中，具体实施时，可以参照以下步骤：

①：获取目标搭建系统中的已生成组件对应的结构树；其中，结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量；结构树展示在目标搭建系统中的第三位置区域。

这里，已生成组件可以为目标搭建系统中的开发人员预先开发好并发布完成的非临时组件。不同的已生成组件可以对应于不同的已存储变量，每个已存储变量对应于结构树中的一个节点，也即，一个节点能够表征一个已生成组件对应的已存储变量。结构树能够表征目标搭建系统中每个已生成组件分别对应的已存储变量，结构树可以展示在目标搭建系统中的第三位置区域。

具体实施时，可以获取目标搭建系统中的已生成组件对应的结构树，并将结构树展示在第三位置区域，例如，展示的结构树可以如图3所示。

②：响应于针对结构树中的目标节点的选定操作，将第一组件变量插入至目标节点，得到更新后的结构树。

这里，目标节点为用户的选定操作所选定的节点，为结构树中的一个节点。

具体实施时，可以响应于用户针对结构树中的目标节点的选定操作，确定将第一组件变量插入至目标节点，实现将第一组件变量对应的目标组件绑定在目标节点上，并可以得到更新后的结构树。

另外，针对用户选定的目标节点，除可以将第一组件变量插入至目标节点，还可以基于用户发起的关于插入已存储变量的请求，将目标搭建系统中除目标节点对应的已存储变量外的、其他已存储变量插入至目标节点，从而，实现对结构树中的各节点对应的变量的灵活编辑。

③：基于更新后的结构树中的各个节点对应的变量，在目标搭建系统中的第二位置区域展示结构树中的各个节点分别对应的组件，各个节点对应的变量包括第一组件变量或已存储变量，各个节点分别对应的组件包括目标组件或已生成组件。

这里，在得到更新后的结构树之后，目标搭建系统还可以基于结构树中的各个节点对应在结构树中的位置，依次获取更新后的结构树的各个节点对应的变量(可以为第一组件变量或已存储变量)，并基于获取的各个变量，渲染生成各个变量对应的组件(可以为目标组件或已生成组件，具体的，在变量为第一组件变量的情况下，渲染生成的组件为目标组件；在变量为已存储变量的情况下，渲染生成的组件为已生成组件)，并可以根据渲染生成的各个变量对应的组件，生成更新后的结构树对应的页面并展示在第二位置区域，也即，将结构树中的各个节点分别对应的组件展示在第二位置区域。

这样，通过将第一组件变量插入到结构树中的目标节点，可以实现临时的目标组件和其他的非临时组件(已生成组件)的结合，进而，生成既包含目标组件又包含已生成组件的页面，提高了生成的页面所包含的组件的多样性。

在一种实施例中，在将组件代码展示在第一位置区域之后，还可以获取针对组件代码的属性设置信息。这里，属性设置信息为用户发起的针对组件代码对应的目标组件的组件属性的设置信息，能够表征组件代码对应的目标组件的组件属性，例如，属性设置信息能够表征目标组件为节日属性的组件、为天气属性的组件等。

然后，可以将属性设置信息添加至组件代码中，之后，可以利用Babel，根据属性设置信息对组件代码进行编译以及运行，从而得到具有该属性设置信息的第一组件变量。之后，可以基于该第一组件变量，渲染得到具有该属性设置信息的目标组件。

这样，通过在组件代码中添加属性设置信息，可以实现对组件代码的属性声明，以及对组件代码对应的目标组件的属性声明，以便于后续非技术人员根据声明的属性使用目标组件，提高了目标组件的使用便利性。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与设计稿转化方法对应的设计稿转化装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述设计稿转化方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

如图5所示，为本公开实施例提供的一种设计稿转化装置的示意图，包括：

确定模块501，用于确定待转化的设计稿对应的符合第一预设结构的初始代码；

转换展示模块502，用于对所述第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在所述目标搭建系统中的第一位置区域展示所述组件代码；

其中，所述组件代码用于生成展示在所述目标搭建系统中的第二位置区域的目标组件。

在一种可能的实施方式中，所述装置还包括：

编译模块503，用于在得到所述组件代码之后，对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述装置还包括：

获取模块504，用于在将所述组件代码展示在所述第一位置区域之后，获取针对所述组件代码的代码编辑信息；

基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第一组件变量；

所述编译模块503，用于对所述组件代码进行编译，生成所述组件代码对应的所述第一组件变量；

将所述第一组件变量存储到所述目标搭建系统对应的存储位置；

从所述存储位置获取所述第一组件变量，并基于获取的所述第一组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述编译产物包括所述组件代码对应的第二组件变量；

所述编译模块503，用于获取所述目标搭建系统中的目标类型的已存储变量；所述目标类型包括事件类型和/或数据类型；

基于所述已存储变量，对所述组件代码进行编译，得到所述组件代码对应的第二组件变量；

基于所述第二组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

在一种可能的实施方式中，所述装置还包括：

更新模块505，用于在所述生成所述组件代码对应的所述第一组件变量之后，获取所述目标搭建系统中的已生成组件对应的结构树；其中，所述结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量；所述结构树展示在所述目标搭建系统中的第三位置区域；

响应于针对所述结构树中的目标节点的选定操作，将所述第一组件变量插入至所述目标节点，得到更新后的结构树；

基于所述更新后的结构树中的各个节点对应的变量，在所述目标搭建系统中的所述第二位置区域展示所述结构树中的各个节点分别对应的组件，所述各个节点对应的变量包括第一组件变量或已存储变量，所述各个节点分别对应的组件包括目标组件或已生成组件。

在一种可能的实施方式中，所述装置还包括：

设置模块506，用于在将所述组件代码展示在所述第一位置区域之后，获取针对所述组件代码的属性设置信息；

将所述属性设置信息添加至所述组件代码中；其中，所述属性设置信息用于表征所述组件代码对应的目标组件的组件属性。

在一种可能的实施方式中，所述获取模块504，用于基于所述代码编辑信息，在在线集成开发环境WebIDE中对所述组件代码进行更新，得到更新后的组件代码。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

本公开实施例还提供了一种计算机设备，如图6所示，为本公开实施例提供的一种计算机设备结构示意图，包括：

处理器61和存储器62；所述存储器62存储有处理器61可执行的机器可读指令，处理器61用于执行存储器62中存储的机器可读指令，所述机器可读指令被处理器61执行时，处理器61执行下述步骤：S101：确定待转化的设计稿对应的符合第一预设结构的初始代码；S102：对第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在目标搭建系统中的第一位置区域展示组件代码；其中，组件代码用于生成展示在目标搭建系统中的第二位置区域的目标组件。

上述存储器62包括内存621和外部存储器622；这里的内存621也称内存储器，用于暂时存放处理器61中的运算数据，以及与硬盘等外部存储器622交换的数据，处理器61通过内存621与外部存储器622进行数据交换。

上述指令的具体执行过程可以参考本公开实施例中所述的设计稿转化方法的步骤，此处不再赘述。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的设计稿转化方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例所提供的设计稿转化方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的设计稿转化方法的步骤，具体可参见上述方法实施例，在此不再赘述。

该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种设计稿转化方法，其特征在于，包括：

确定待转化的设计稿对应的符合第一预设结构的初始代码；

对所述第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在所述目标搭建系统中的第一位置区域展示所述组件代码；

对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的第二位置区域展示生成的目标组件；所述编译产物包括所述组件代码对应的第一组件变量；所述第一组件变量还用于在插入到所述目标搭建系统对应的结构树中的目标节点后，更新所述目标节点对应的已存储变量；所述结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量。

2.根据权利要求1所述的方法，其特征在于，在将所述组件代码展示在所述第一位置区域之后，还包括：

获取针对所述组件代码的代码编辑信息；

基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码。

3.根据权利要求1所述的方法，其特征在于，所述编译产物包括所述组件代码对应的第一组件变量；

所述对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件，包括：

对所述组件代码进行编译，生成所述组件代码对应的所述第一组件变量；

将所述第一组件变量存储到所述目标搭建系统对应的存储位置；

从所述存储位置获取所述第一组件变量，并基于获取的所述第一组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

4.根据权利要求1所述的方法，其特征在于，所述编译产物包括所述组件代码对应的第二组件变量；

所述对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件，包括：

获取所述目标搭建系统中的目标类型的已存储变量；所述目标类型包括事件类型和/或数据类型；

基于所述已存储变量，对所述组件代码进行编译，得到所述组件代码对应的第二组件变量；

基于所述第二组件变量在所述目标搭建系统中的所述第二位置区域展示所述组件代码对应的所述目标组件。

5.根据权利要求3所述的方法，其特征在于，在所述生成所述组件代码对应的所述第一组件变量之后，还包括：

获取所述目标搭建系统中的已生成组件对应的结构树；其中，所述结构树中包括多个节点，所述结构树展示在所述目标搭建系统中的第三位置区域；

响应于针对所述结构树中的目标节点的选定操作，将所述第一组件变量插入至所述目标节点，得到更新后的结构树；

基于所述更新后的结构树中的各个节点对应的变量，在所述目标搭建系统中的所述第二位置区域展示所述结构树中的各个节点分别对应的组件，所述各个节点对应的变量包括第一组件变量或已存储变量，所述各个节点分别对应的组件包括目标组件或已生成组件。

6.根据权利要求1所述的方法，其特征在于，在将所述组件代码展示在所述第一位置区域之后，还包括：

获取针对所述组件代码的属性设置信息；

将所述属性设置信息添加至所述组件代码中；其中，所述属性设置信息用于表征所述组件代码对应的目标组件的组件属性。

7.根据权利要求2所述的方法，其特征在于，所述基于所述代码编辑信息，对所述组件代码进行更新，得到更新后的组件代码，包括：

基于所述代码编辑信息，在在线集成开发环境WebIDE中对所述组件代码进行更新，得到更新后的组件代码。

8.一种设计稿转化装置，其特征在于，包括：

确定模块，用于确定待转化的设计稿对应的符合第一预设结构的初始代码；

转换展示模块，用于对所述第一预设结构的初始代码进行转换，得到与目标搭建系统相匹配的符合第二预设结构的组件代码，并在所述目标搭建系统中的第一位置区域展示所述组件代码；

编译模块，用于对所述组件代码进行编译，得到编译产物，并基于所述编译产物在所述目标搭建系统中的第二位置区域展示生成的目标组件；所述编译产物包括所述组件代码对应的第一组件变量；所述第一组件变量还用于在插入到所述目标搭建系统对应的结构树中的目标节点后，更新所述目标节点对应的已存储变量；所述结构树中包括多个节点，一个节点用于表征一个已生成组件对应的已存储变量。

9.一种计算机设备，其特征在于，包括：处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述处理器执行如权利要求1至7任意一项所述的设计稿转化方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被计算机设备运行时，所述计算机设备执行如权利要求1至7任意一项所述的设计稿转化方法的步骤。