界面代码生成方法、装置、计算机设备以及存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN114185531A(43)申请公布日2022.03.15(21)申请号202111554371.0(22)申请日2021.12.17(71)申请人北京字节跳动网络技术有限公司地址100041北京市石景山区实兴大街30号院3号楼2层B-0035房间(72)发明人杨健(74)专利代理机构北京中知法苑知识产权代理有限公司11226代理人李明(51)Int.Cl.G06F8/34(2018.01)G06F8/38(2018.01)G06F8/41(2018.01)权利要求书3页说明书17页附图6页(54)发明名称界面代码生成方法、装置、计算机设备以及存储介质(57)摘要本公开提供了一种界面代码生成方法、装置、计算机设备以及存储介质，其中，该方法包括：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。CN114185531ACN114185531A权利要求书1/3页1.一种界面代码生成方法，其特征在于，包括：获取界面设计稿；并识别所述界面设计稿中的目标界面组件；所述目标界面组件对应多个变体组件，不同变体组件对应不同的组件显示状态；在组件设计库中确定与所述目标界面组件相匹配的第一源组件；并确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息；确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差异信息，并基于所述第一差异信息和所述第二差异信息生成所述界面设计稿中的目标界面组件的组件代码。2.根据权利要求1所述的方法，其特征在于，所述目标界面组件中包含多个具有层级关系的子组件；所述第一源组件中包含多个具有层级关系的子源组件；所述确定所述目标界面组件和所述第一源组件之间组件属性的属性差异信息，得到第一差异信息，包括：确定所述目标界面组件中位于每个层级的目标子组件，并确定所述第一源组件中位于相同层级的第一子源组件；检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化；在检测出未发生变化的情况下，基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息。3.根据权利要求2所述的方法，其特征在于，所述基于所述目标子组件和所述第一子源组件之间的视觉属性差异确定所述第一差异信息，包括：确定所述目标子组件的视觉属性，得到第一视觉属性，并确定所述第一子源组件的视觉属性，得到第二视觉属性；确定所述第一视觉属性和所述第二视觉属性之间的第一视觉差异；其中，所述第一视觉差异包含：所述目标子组件的组件标识，所述第一子源组件的组件标识和第一差异描述信息；基于所述第一视觉差异确定所述第一差异信息。4.根据权利要求2所述的方法，其特征在于，所述方法还包括：在检测出所述第二源组件相对于所述第一子源组件发生了变化的情况下，确定所述目标子组件的视觉属性，得到第三视觉属性，并确定所述第二源组件的视觉属性，得到第四视觉属性；确定所述第三视觉属性和所述第四视觉属性之间的第二视觉差异；其中，所述第二视觉差异包含：所述目标子组件的组件标识，所述第二源组件的组件标识和第二差异描述信息；确定组件变化信息，其中，所述组件变化信息用于指示所述目标界面组件中目标子组件的源组件从第一子源组件变化为所述第二源组件；基于所述第二视觉差异和所述组件变化信息确定第二差异信息。5.根据权利要求2所述的方法，其特征在于，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：在确定出所述目标子组件不是所述目标界面组件中变体组件的情况下，确定所述目标2CN114185531A权利要求书2/3页子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。6.根据权利要求5所述的方法，其特征在于，所述检测所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件是否发生了变化，包括：在确定出所述目标子组件是所述目标界面组件中变体组件的情况下，确定所述第二源组件与所述第一子源组件是否相同；在确定出相同的情况下，确定所述目标子组件在所述组件设计库中的第二源组件相对于所述第一子源组件未发生变化。7.根据权利要求1所述的方法，其特征在于，所述变体差异信息对应一个信息维度；所述确定所述目标界面组件的多个变体组件之间的变体差异信息，得到第二差