一种代码确定方法、装置、设备、介质、产品与流程

本申请涉及计算机，尤其涉及一种代码确定方法、装置、设备、介质、产品。

背景技术：

1、随着软件开发和设计领域的不断发展，设计稿转代码(design to code，d2c)的需求越来越重要。比如，在一些场景，如软件开发场景下，可以先由设计人员手动创建设计稿，以使该设计稿用于展示应用程序或者网站的外观和/或交互；再由研发人员通过手动方式将该设计稿转换成代码。其中，因研发人员需要手动解析设计稿中的元素以及将解析获得的元素手动转换为相应的代码，以使将一个设计稿转换成代码的任务成为一种繁琐且耗时的任务，如此导致效率比较低。

技术实现思路

1、本申请提供了一种代码确定方法、装置、设备、介质、产品，有利于提高d2c的效率。

2、为了实现上述目的，本申请提供的技术方案如下：

3、本申请提供一种代码确定方法，所述方法包括：

4、获取设计稿以及所述设计稿的标注信息，所述设计稿包括第一元素，组件库中存在与所述第一元素匹配的目标组件，所述标注信息包括所述第一元素的属性与所述目标组件的属性之间的映射关系；

5、对所述设计稿以及所述标注信息进行分析，得到结构化文件；所述结构化文件包括所述第一元素对应的结构化数据；

6、依据所述目标组件的组件引用代码和所述第一元素对应的结构化数据，确定所述第一元素对应的代码；

7、依据所述第一元素对应的代码，确定所述设计稿在所述组件库适配的开发框架下的代码。

8、在一种可能的实施方式下，所述第一元素对应的代码的确定过程，包括：

9、从所述第一元素对应的结构化数据中获取至少一个属性信息，所述至少一个属性信息包括第一属性，所述第一属性不属于预设类型；

10、依据所述第一属性的数据类型，确定所述第一属性对应的处理方式；

11、按照所述第一属性对应的处理方式，对所述第一属性进行处理，得到所述第一属性对应的处理结果，所述处理结果属于所述预设类型；

12、依据所述第一属性对应的处理结果，确定所述第一元素对应的属性代码；

13、依据所述目标组件的组件引用代码和所述第一元素对应的属性代码，确定所述第一元素对应的代码。

14、在一种可能的实施方式下，所述至少一个属性信息还包括第二属性，所述第二属性属于预设类型；

15、所述依据所述第一属性对应的处理结果，确定所述第一元素对应的属性代码，包括：

16、依据所述第二属性与所述第一属性对应的处理结果之间的拼接结果，确定所述第一元素对应的属性代码。

17、在一种可能的实施方式下，所述依据所述目标组件的组件引用代码和所述第一元素对应的结构化数据，确定所述第一元素对应的代码，包括：

18、依据所述目标组件的组件引用代码和所述第一元素对应的结构化数据中的属性信息，确定所述第一元素对应的组件代码；

19、依据所述第一元素对应的组件代码和所述第一元素对应的结构化数据中的样式信息，确定所述第一元素对应的代码。

20、在一种可能的实施方式下，所述设计稿还包括所述第一元素的子元素；

21、所述结构化文件还包括所述子元素对应的结构化数据；

22、所述依据所述第一元素对应的代码，确定所述设计稿在所述组件库适配的开发框架下的代码之前，所述方法还包括：

23、利用所述子元素对应的代码，更新所述第一元素对应的代码，所述子元素对应的代码是依据所述子元素对应的结构化数据所确定的。

24、在一种可能的实施方式下，所述设计稿还包括第二元素，所述组件库中不存在与所述第二元素匹配的组件；

25、所述结构化文件还包括所述第二元素对应的结构化数据；

26、所述依据所述第一元素对应的代码，确定所述设计稿在所述组件库适配的开发框架下的代码，包括：

27、依据所述第一元素对应的代码和所述第二元素对应的代码，确定所述设计稿在所述组件库适配的开发框架下的代码；所述第二元素对应的代码是依据所述第二元素对应的结构化数据所确定的。

28、本申请提供了一种代码确定装置，包括：

29、数据获取单元，用于获取设计稿以及所述设计稿的标注信息，所述设计稿包括第一元素，组件库中存在与所述第一元素匹配的目标组件，所述标注信息包括所述第一元素的属性与所述目标组件的属性之间的映射关系；

30、数据分析单元，用于对所述设计稿以及所述标注信息进行分析，得到结构化文件；所述结构化文件包括所述第一元素对应的结构化数据；

31、第一确定单元，用于依据所述目标组件的组件引用代码和所述第一元素对应的结构化数据，确定所述第一元素对应的代码；

32、第二确定单元，用于依据所述第一元素对应的代码，确定所述设计稿在所述组件库适配的开发框架下的代码。

33、本申请提供了一种电子设备，所述设备包括：处理器和存储器；

34、所述存储器，用于存储指令或计算机程序；

35、所述处理器，用于执行所述存储器中的所述指令或计算机程序，以使得所述电子设备执行本申请提供的代码确定方法。

36、本申请提供了一种计算机可读介质，所述计算机可读介质中存储有指令或计算机程序，当所述指令或计算机程序在设备上运行时，使得所述设备执行本申请提供的代码确定方法。

37、本申请提供了一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行本申请提供的代码确定方法的程序代码。

38、与相关技术相比，本申请至少具有以下优点：

39、本申请提供的技术方案中，先获取设计稿以及该设计稿的标注信息，该设计稿包括第一元素，组件库中存在与该第一元素匹配的目标组件，该标注信息包括该第一元素的属性与该目标组件的属性之间的映射关系；再对该设计稿以及该标注信息进行分析，得到结构化文件；该结构化文件包括该第一元素对应的结构化数据；然后，依据该目标组件的组件引用代码和该第一元素对应的结构化数据，确定该第一元素对应的代码；最后，依据该第一元素对应的代码，确定该设计稿在该组件库适配的开发框架下的代码，如此能够实现自动将设计稿转换成代码的目的。

40、另外，因设计稿中的第一元素与组件库中的目标组件相匹配，以使该第一元素及其属性可以借助该目标组件及其属性进行实现，从而使得该第一元素对应的代码可以借助该目标组件的组件引用代码进行确定，如此能够实现在d2c过程中将第一元素转换为组件库中相应组件，从而能够有效地克服在d2c过程中将第一元素转换为超文本标记语言(hyper text markup language，html)元素所导致的缺陷，如转换后的代码与实际开发框架不适配等缺陷，进而能够有效地提高d2c效果。

技术特征：

1.一种代码确定方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述第一元素对应的代码的确定过程，包括：

3.根据权利要求2所述的方法，其特征在于，所述至少一个属性信息还包括第二属性，所述第二属性属于预设类型；

4.根据权利要求1所述的方法，其特征在于，所述依据所述目标组件的组件引用代码和所述第一元素对应的结构化数据，确定所述第一元素对应的代码，包括：

5.根据权利要求1所述的方法，其特征在于，所述设计稿还包括所述第一元素的子元素；

6.根据权利要求1所述的方法，其特征在于，所述设计稿还包括第二元素，所述组件库中不存在与所述第二元素匹配的组件；

7.一种代码确定装置，其特征在于，包括：

8.一种电子设备，其特征在于，所述设备包括：处理器和存储器；

9.一种计算机可读介质，其特征在于，所述计算机可读介质中存储有指令或计算机程序，当所述指令或计算机程序在设备上运行时，使得所述设备执行权利要求1-6任一项所述的方法。

10.一种计算机程序产品，其特征在于，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行权利要求1-6任一项所述的方法的程序代码。

技术总结本申请公开了一种代码确定方法、装置、设备、介质、产品，该方法包括：先获取设计稿以及该设计稿的标注信息，该设计稿包括第一元素，组件库中存在与该第一元素匹配的目标组件，该标注信息包括该第一元素的属性与该目标组件的属性之间的映射关系；再对该设计稿以及该标注信息进行分析，得到结构化文件；该结构化文件包括该第一元素对应的结构化数据；然后，依据该目标组件的组件引用代码和该第一元素对应的结构化数据，确定该第一元素对应的代码；最后，依据该第一元素对应的代码，确定该设计稿在该组件库适配的开发框架下的代码，如此能够实现自动将设计稿转换成代码的目的。技术研发人员：肖芳,于猛,杨强,韩旭阳,冯伟尧受保护的技术使用者：北京有竹居网络技术有限公司技术研发日：技术公布日：2024/9/2