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

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

【技术实现步骤摘要】
用于将UI图转换成代码文件的方法和装置
本专利技术涉及界面开发
，具体地涉及一种用于将UI图转换成代码文件的方法和装置。
技术介绍
一个完整的界面开发，一般先由UI设计人员设计出UI稿，开发人员手动开发根据UI稿上标注，设置尺寸、布局和颜色等，完成UI设计的界面。现有技术存在以下缺点：1)开发UI比较耗时；2)开发完后UI校对，会修修改改是一项麻烦且耗时的过程。
技术实现思路
本专利技术实施例的目的是提供一种用于将UI图转换成代码文件的方法和装置，其可实现自动将UI图转换成代码文件。为了实现上述目的，本专利技术实施例的一个方面提供一种用于将UI图转换成代码文件的方法，该方法包括：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码本文档来自技高网...

【技术保护点】
1.一种用于将UI图转换成代码文件的方法，其特征在于，该方法包括：/n确定所述UI图对应的json文件；/n解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；/n针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及/n基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。/n

【技术特征摘要】
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图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包...

【专利技术属性】
技术研发人员：张凯凯，
申请(专利权)人：北京房江湖科技有限公司，
类型：发明
国别省市：北京;11