界面代码生成方法、装置、计算机设备以及存储介质制造方法及图纸

本公开提供了一种界面代码生成方法、装置、计算机设备以及存储介质，其中，该方法包括：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。组件代码。组件代码。

【技术实现步骤摘要】
界面代码生成方法、装置、计算机设备以及存储介质


[0001]本公开涉及计算机
，具体而言，涉及一种界面代码生成方法、装置、计算机设备以及存储介质。

技术介绍

[0002]在现有的界面转代码技术中，在生成设计稿中对应组件的代码时，通常基于该组件在该设计稿中的状态生成对应的代码。如果该组件在设计稿中对应多种变化的状态，此时，针对多种变化的状态，现有的界面转代码技术将无法为每种变化的状态生成对应的代码。此时，需要设计师手动对基于设计稿生成的代码进行修改，以满足上述多种变化的状态。然而，该处理方式将浪费较多的时间，从而降低了应用程序的开发效率，延长了应用程序的开发流程。

技术实现思路

[0003]本公开实施例至少提供一种界面代码生成方法、装置、计算机设备以及存储介质。
[0004]第一方面，本公开实施例提供了一种界面代码生成方法，包括：
[0005]获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。
[0006]一种可选的实施方式中，所述目标界面组件中包含多个具有层级关系的子组件；所述第一源组件中包含多个具有层级关系的子源组件；所述确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息，包括：
[0007]确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件；检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化；在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。
[0008]一种可选的实施方式中，所述基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，包括：
[0009]确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；基于所述第一视觉差异确定所述第一差异信息。
[0010]一种可选的实施方式中，所述方法还包括：
[0011]在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所
述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；基于所述第二视觉差异和所述组件变化信息确定第二差异信息。
[0012]一种可选的实施方式中，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：
[0013]在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。
[0014]一种可选的实施方式中，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：
[0015]在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。
[0016]一种可选的实施方式中，所述变体差异信息对应一个信息维度；所述确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，包括：
[0017]在所述多个变体组件中确定基础变体组件；在所述多个变体组件中确定至少一个变体组合，其中，每个所述变体组合对应一个信息维度，该变体组合中的变体组件在该信息维度下的信息相对于所述基础变体组件在该信息维度下的信息发生了变化；基于每个所述变体组合中所包含的变体组件的目标组件信息，确定所述第二差异信息，其中，所述目标组件信息用于指示该变体组合中所包含变体组件的组件标识，和/或，该变体组合中每个变体组件在信息维度下的信息相对于所述基础变体组件在该信息维度下的信息的变化信息。
[0018]一种可选的实施方式中，所述在所述多个变体组件中确定至少一个变体组合，包括：
[0019]确定所述多个变体组件中每个变体组件与所述基础变体组件之间变化信息的信息数量；基于所述信息数量对所述多个变体组件进行分组，得到多个组件集合；并按照所述信息数量从小到大的顺序对所述多个组件集合进行排序，得到排序结果；基于所述排序结果在所述多个变体组件中确定至少一个变体组合。
[0020]一种可选的实施方式中，所述基于所述排序结果在所述多个变体组件中确定至少一个变体组合，包括：
[0021]针对所述排序结果中任意相邻的两个组件集合，将第一组件集合中每个第一组件的组件属性与第二组件集合中各个第二组件的组件属性进行比较，得到属性比较结果；所述第一组件集合和所述第二组件集合为所述两个组件集合中的集合，且所述第一组件集合位于所述第二组件集合之前；基于所述属性比较结果在所述各个第二组件中确定目标组件，并基于所述目标组件确定对应的变体组合，得到所述至少一个变体组合；其中，所述目标组件与所述第一组件在对应信息维度下的信息相对于所述基础变体组件在该信息维度下的信息均发生了变化。
[0022]第二方面，本公开实施例还提供一种界面代码生成装置，包括：
[0023]获取单元，用于获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；第一确定单元，用于在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；第二确定单元，用于确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。
[0024]第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面代码生成方法，其特征在于，包括：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。2.根据权利要求1所述的方法，其特征在于，所述目标界面组件中包含多个具有层级关系的子组件；所述第一源组件中包含多个具有层级关系的子源组件；所述确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息，包括：确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件；检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化；在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。3.根据权利要求2所述的方法，其特征在于，所述基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，包括：确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；基于所述第一视觉差异确定所述第一差异信息。4.根据权利要求2所述的方法，其特征在于，所述方法还包括：在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；基于所述第二视觉差异和所述组件变化信息确定第二差异信息。5.根据权利要求2所述的方法，其特征在于，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标
子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。6.根据权利要求5所述的方法，其特征在于，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对...

【专利技术属性】
技术研发人员：杨健，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：