CN113010169A - 用于将ui图转换成代码文件的方法和装置 - Google Patents

Abstract

本发明实施例提供一种用于将UI图转换成代码文件的方法和装置，属于界面开发技术领域。该方法包括：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。藉此，实现了自动将UI图转换成代码文件。

Description

用于将UI图转换成代码文件的方法和装置

技术领域

本发明涉及界面开发技术领域，具体地涉及一种用于将UI图转换成代码文件的方法和装置。

背景技术

一个完整的界面开发，一般先由UI设计人员设计出UI稿，开发人员手动开发根据UI稿上标注，设置尺寸、布局和颜色等，完成UI设计的界面。现有技术存在以下缺点：1)开发UI比较耗时；2)开发完后UI校对，会修修改改是一项麻烦且耗时的过程。

发明内容

本发明实施例的目的是提供一种用于将UI图转换成代码文件的方法和装置，其可实现自动将UI图转换成代码文件。

为了实现上述目的，本发明实施例的一个方面提供一种用于将UI图转换成代码文件的方法，该方法包括：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。

可选地，针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。

可选地，所述UI图为sketch文件，所述确定所述UI图对应的json文件包括：将所述sketch文件转换为zip文件；解压所述zip文件；搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。

可选地，在所述确定所述UI图对应的json文件之前，该方法还包括：为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，其中，所述相关信息还包括所述辅助标签。

可选地，针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

相应地，本发明实施例的另一方面提供一种用于将UI图转换成代码文件的装置，该装置包括：json文件确定模块，用于确定所述UI图对应的json文件；解析模块，用于解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；元素代码文件确定模块，用于针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及代码文件生成模块，用于基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。

可选地，所述元素代码文件确定模块针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。

可选地，所述UI图为sketch文件，所述json文件确定模块确定所述UI图对应的json文件包括：将所述sketch文件转换为zip文件；解压所述zip文件；搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。

可选地，在所述确定所述UI图对应的json文件之前，该装置还包括：辅助标签添加模块，用于在所述json文件确定模块确定所述UI图对应的json文件之前，为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，其中，所述相关信息还包括所述辅助标签。

可选地，所述元素代码文件确定模块针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

此外，本发明实施例的另一方面还提供一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行上述的方法。

另外，本发明实施例的另一方面还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的方法。

通过上述技术方案，确定出UI图对应的json文件，通过对UI图解析及处理，得到UI图对应的代码文件，如此，实现了自动将UI图转换成代码文件，自动完成UI界面的设计，降低开发UI的时间成本；此外，自动将UI图转换成代码文件，可以完全复原UI图的内容，无需校对及修修改改，进一步降低了人力及时间成本。

本发明实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明实施例，但并不构成对本发明实施例的限制。在附图中：

图1是本发明一实施例提供的用于将UI图转换成代码文件的方法的流程图；

图2是本发明另一实施例提供的用于将UI图转换成代码文件的方法的逻辑示意图；

图3是本发明另一实施例提供的UI图的示意图；以及

图4是本发明另一实施例提供的用于将UI图转换成代码文件的装置的结构框图。

附图标记说明

1 json文件确定模块 2 解析模块

3 元素代码文件确定模块 4 代码文件生成模块

具体实施方式

以下结合附图对本发明实施例的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明实施例，并不用于限制本发明实施例。

本发明实施例的一个方面提供一种用于将UI图转换成代码文件的方法。

图1是本发明一实施例提供的用于将UI图转换成代码文件的方法的流程图。如图1所示，该方法包括以下内容。

在步骤S10中，确定UI图对应的json文件。其中，该json文件中包括UI图中的每一元素的相关信息。例如，对于某一元素，相关信息包括元素类型、该元素在UI图中的坐标、尺寸及外观属性。其中，外观属性描述了关于该元素的可以观察到的信息，例如，颜色、形状、阴影、边框等。具体地，在本发明实施例中，可以利用python脚本来实现确定UI图对应的json文件。

在步骤S11中，解析json文件，以获取UI图中的至少一个元素的相关信息。其中，针对任一元素，相关信息包括：元素类型、该元素在UI图中的坐标、尺寸及外观属性。其中，外观属性描述了关于该元素的可以观察到的信息，例如，颜色、形状、阴影、边框等。

在步骤S12中，针对UI图中的至少一个元素，根据相关信息确定元素对应的代码文件。在该步骤中，将UI图中的至少一个元素中的每一元素的相关内容转换成代码文件。例如，针对任一元素，利用python脚本根据元素的相关信息确定其对应的代码文件。

在步骤S13中，基于UI图中的至少一个元素对应的代码文件，生成UI图对应的代码文件。可选地，在本发明实施例中，通过运行脚本，例如，python脚本，将至少一个元素对应的代码文件替换到代码编译器中得到UI图对应的代码文件。

另外，在本发明实施例中，在json文件中表明了至少一个元素分别属于的层级之间的嵌套关系，在生成UI图对应的代码文件时结合元素所属层级之间的嵌套关系进行生成。具体地，在得到一个元素对应的代码文件后，将该元素的代码文件根据所属层级之间的嵌套关系添加到该元素所属层级的低一层级的元素的代码文件上。例如，在通过运行python脚本，将至少一个元素对应的代码文件替换到代码编译器中得到UI图对应的代码文件时，同时考虑至少一个元素所属于的层级之间的嵌套关系。另外，需要说明的是，在本发明实施例中，结合元素所属层级之间的嵌套关系生成UI图对应的代码文件时，可以是先考虑元素所属层级之间的嵌套关系，得到元素对应的代码文件，根据嵌套关系将得到的元素对应的代码文件添加到处于该元素所属层级的前一层级的元素对应的代码文件。具体地，先确定出属于最底层的元素对应的代码文件，然后确定出属于最底层的上一层级的元素对应的代码文件，将属于上一层级的元素对应的代码文件添加到最底层的元素对应的代码文件，根据层级之间的嵌套关系依次类推。此外，还可以是先得到至少一个元素分别对应的代码文件，然后根据元素所属层级之间的嵌套关系，进行代码文件之间的添加，得到最终的UI图对应的代码。此外，在本发明实施例中，层级可以理解为UI界面上不同的图像模块。

通过上述技术方案，确定出UI图对应的json文件，通过对UI图解析及处理，得到UI图对应的代码文件，如此，实现了自动将UI图转换成代码文件，自动完成UI界面的设计，降低开发UI的时间成本；此外，自动将UI图转换成代码文件，可以完全复原UI图的内容，无需校对及修修改改，进一步降低了人力及时间成本。

可选地，在本发明实施例中，可以根据以下内容来针对UI图中的任一元素，确定该元素对应的代码文件。以下描述为针对UI图中的某一元素确定其对应的代码文件，需要说明的是，针对UI图中的任一元素，均可根据以下内容确定其对应的代码文件。根据元素的元素类型及预设映射表，确定该元素类型对应的类型模板，其中，预设映射表包括元素类型与类型模板之间的对应关系，也就是描述了哪一元素类型对应哪一类型模板。将确定出的类型模板生成对应的代码文件，例如，可以利用python脚本将类型模板转换为代码文件。根据坐标、尺寸及外观属性，对所确定出的类型模板对应的代码文件进行调整，以将坐标、尺寸和外观属性添加至代码文件中，进而获得该元素对应的代码文件。

可选地，在本发明实施例中，在UI图为sketch文件的情况下，确定UI图对应的json文件包括以下内容。将sketch文件转换为zip文件。解压zip文件。搜索解压zip文件得到的至少一个文件夹，以找到配置文件夹。从配置文件夹中找到json文件，其中所找到的json文件即为UI图对应的json文件。可选地，可以用python脚本来实现确定UI图对应的json文件。

可选地，在本发明实施例中，在确定UI图对应的json文件之前，该方法还包括：为UI图中的至少一个元素添加辅助标签，其中，针对任一元素，辅助标签表明该元素是否包括点击事件，相关信息还包括辅助标签。在相关信息包括辅助标签的情况下，解析json文件所获得的至少一个元素的相关信息包括辅助标签；在根据相关信息确定任一元素对应的代码文件时，也需要将辅助标签考虑在内。

可选地，在本发明实施例中，针对UI图中的任一元素，在根据元素类型及预设映射表确定出元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据坐标、尺寸及外观属性对所确定出的类型模板对应的代码文件进行调整外，根据相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。可选地，通过将辅助标签转成代码文件中的函数名称来对代码文件进行调整以实现将辅助标签添加至代码文件中。例如，利用Python语言将辅助标签转成代码文件中的函数名称。可选地，在本发明实施例中，利用python脚本，查找辅助标签key(例如：actionName)的值，如果没有就不考虑辅助标签；若有则执行以下内容：1)利用python脚本，根据key(例如：actionName)，在UI转成json文件中查找辅助标签，取到对应value值clickToJump；2)通过Python语言拼接clickToJump成@selector(clickToJump)，生成对应OC代码事件函数名称；3)在OC代码中提前实现clickToJump函数，在运行时执行@selector(clickToJump)方法。

图2是本发明另一实施例提供的用于将UI图转换成代码文件的方法的逻辑示意图。如图2所示，在该实施例中，该方法包括以下内容。其中，在该实施例中，UI图为在sketch工具内设计出来的，UI图为sketch文件。

对设计出来的UI图中的元素通过命名添加辅助标签，其中，辅助标签表明元素是否包括点击事件。具体地，若sketch工具中设计图稿的模板是有辅助标签这一项的，那么在设计图稿的时候可以直接添加辅助标签；若sketch工具中的模板是没有辅助标签这一项的，那么可以在将UI图设计完成后添加辅助标签。此外，UI图中的元素可以参照图3来理解。如图3中所示，“姓名”、“5.0”、“评分”、“客户好评99％”等等，均是该UI图中的元素。

利用python脚本，确定出UI图对应的json文件，其中，该json文件中包括UI图中的每一元素的相关信息，其中，相关信息描述了元素的全部属性。例如，对于某一元素，相关信息包括元素类型、该元素在UI图中的坐标、尺寸、外观属性及辅助标签。其中，外观属性描述了关于该元素的可以观察到的信息，例如，颜色、形状、阴影、边框等。具体地，确定UI图对应的json文件包括以下内容。将sketch文件转换为zip文件；解压zip文件；遍历解压zip文件得到的所有文件夹，以找到配置文件夹；以及从配置文件夹中找到json文件，其中所找到的json文件即为UI图对应的json文件。

基于json文件，结合预设映射表，确定出UI图中的每一元素对应的代码文件。具体地，包括以下内容。解析json文件，以获取UI图中的每一元素的相关信息，其中，相关信息包括：元素类型、该元素在UI图中的坐标、尺寸、外观属性及辅助标签。针对UI图中的每一元素，根据其相关信息确定其对应的代码文件。具体地，对于某一元素，根据其相关信息确定其对应的代码文件可以包括以下内容。根据元素类型及预设映射表，确定元素类型对应的类型模板，其中，预设映射表包括所述元素类型与类型模板的对应关系。这些类型模板需开发人员用开发语言提前写好，代码格式自定义，创建工程量较大，需要适配所有元素，是个长期工作。将所确定出的类型模板生成对应的代码文件，例如，用python脚本，将确定出的类型模板生成对应的代码文件。根据坐标、尺寸、外观属性及辅助标签，对所确定出的类型模板对应的代码文件进行调整，以将坐标、尺寸、外观属性和辅助标签添加至代码文件中，进而获得该元素对应的代码文件。

通过运行python脚本，将每一元素对应的代码文件替换到代码编译器中得到UI图对应的代码文件。代码编译器运行该UI图对应的代码文件即可得到UI界面。

通过本发明实施例中所述的技术方案，运行脚本，自动将UI图生成对应代码；完善脚本后，100％复原UI内容，不需要人工UI校对。在本发明实施例中，将UI图自动转化成代码文件，构建一套标准映射表，即本发明实施例中所述的预设映射表；支持可配置，生成不同的代码风格，具体地，类型模板可以具有不同的风格；支持开发工具，方便在Xcode IDE(代码编辑器)中生成代码。

相应地，本发明实施例的另一方面提供一种用于将UI图转换成代码文件的装置。图4是本发明另一实施例提供的用于将UI图转换成代码文件的装置的结构框图。如图4所示，该装置包括json文件确定模块1、解析模块2、元素代码文件确定模块3和代码文件生成模块4。其中，json文件确定模块1用于确定UI图对应的json文件；解析模块2用于解析json文件，以获取UI图中的至少一个元素的相关信息，其中，针对任一元素，相关信息包括：元素类型、该元素在UI图中的坐标、尺寸及外观属性；元素代码文件确定模块3用于针对UI图中的至少一个元素，根据相关信息确定元素对应的代码文件；代码文件生成模块4用于基于UI图中的至少一个元素对应的代码文件，生成UI图对应的代码文件。

可选地，在本发明实施例中，元素代码文件确定模块针对UI图中的至少一个元素中的任一元素，根据相关信息确定该元素对应的代码文件包括：根据元素类型及预设映射表，确定元素类型对应的类型模板，其中，预设映射表包括元素类型与类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据坐标、尺寸及外观属性，对所确定出的类型模板对应的代码文件进行调整，以将坐标、尺寸和外观属性添加至代码文件中，进而获得该元素对应的代码文件。

可选地，在本发明实施例中，UI图为sketch文件，json文件确定模块确定UI图对应的json文件包括：将sketch文件转换为zip文件；解压zip文件；搜索解压zip文件得到的至少一个文件夹，以找到配置文件夹；以及从配置文件夹中找到json文件，其中所找到的json文件即为UI图对应的json文件。

可选地，在本发明实施例中，在确定UI图对应的json文件之前，该装置还包括：辅助标签添加模块，用于在json文件确定模块确定UI图对应的json文件之前，为UI图中的至少一个元素添加辅助标签，其中，针对任一元素，辅助标签表明该元素是否包括点击事件，相关信息还包括所述辅助标签。

可选地，在本发明实施例中，所述元素代码文件确定模块针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

本发明实施例提供的用于将UI图转换成代码文件的装置的具体工作原理及益处与本发明实施例提供的用于将UI图转换成代码文件的方法的具体工作原理及益处相似，这里将不再赘述。

所述用于将UI图转换成代码文件的装置包括处理器和存储器，上述json文件确定模块、解析模块、元素代码文件确定模块、和代码文件生成模块等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来实现自动将UI图转换成代码文件。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本发明实施例提供了一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行上述实施例中所述的方法。。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述实施例中所述的方法。

本发明实施例提供了一种电子设备，电子设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件；针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件；所述UI图为sketch文件，所述确定所述UI图对应的json文件包括：将所述sketch文件转换为zip文件；解压所述zip文件；搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件；在所述确定所述UI图对应的json文件之前，该方法还包括：为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，所述相关信息还包括所述辅助标签；针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。本文中的设备可以是服务器、PC、PAD、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。其中，针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。其中，所述UI图为sketch文件，所述确定所述UI图对应的json文件包括：将所述sketch文件转换为zip文件；解压所述zip文件；搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。其中，在所述确定所述UI图对应的json文件之前，该方法还包括：为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，所述相关信息还包括所述辅助标签。其中，针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种用于将UI图转换成代码文件的方法，其特征在于，该方法包括：

确定所述UI图对应的json文件；

解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；

针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及

基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。

2.根据权利要求1所述的方法，其特征在于，针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：

根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；

将所确定出的类型模板生成对应的代码文件；以及

根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。

3.根据权利要求1或2所述的方法，其特征在于，所述UI图为sketch文件，所述确定所述UI图对应的json文件包括：

将所述sketch文件转换为zip文件；

解压所述zip文件；

搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及

从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。

4.根据权利要求1或2所述的方法，其特征在于，在所述确定所述UI图对应的json文件之前，该方法还包括：为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，所述相关信息还包括所述辅助标签。

5.根据权利要求4所述的方法，其特征在于，针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：

根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

6.一种用于将UI图转换成代码文件的装置，其特征在于，该装置包括：

json文件确定模块，用于确定所述UI图对应的json文件；

解析模块，用于解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；

元素代码文件确定模块，用于针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及

代码文件生成模块，用于基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。

7.根据权利要求6所述的装置，其特征在于，所述元素代码文件确定模块针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：

根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；

将所确定出的类型模板生成对应的代码文件；以及

根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。

8.根据权利要求6或7所述的装置，其特征在于，所述UI图为sketch文件，所述json文件确定模块确定所述UI图对应的json文件包括：

将所述sketch文件转换为zip文件；

解压所述zip文件；

搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及

从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。

9.一种机器可读存储介质，其特征在于，该机器可读存储介质上存储有指令，该指令用于使得机器执行权利要求1-5中任一项所述的方法。

10.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-5中任一项所述的方法。

Images