[发明专利]前端页面的代码生成方法、装置、设备以及存储介质

说明书

本公开提供了一种前端页面的代码生成方法、装置、设备以及存储介质，其中，该方法包括：获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

技术领域

本公开涉及前端开发的技术领域，具体而言，涉及一种前端页面的代码生成方法、装置、设备以及存储介质。

背景技术

在前端开发技术领域中，开发人员通常需要将设计人员设计的界面设计稿中的组件转换为相应的代码。现有的技术中，可以利用D2C(Designto Code，设计稿生成代码)方法将设计稿中的组件转换为相应的代码，以减少开发人员的工作量。然而，现有的D2C方法针对设计稿中的每个组件均生成对应的代码。当设计稿中的组件被重复利用，且以不同的渲染样式进行展示时，根据现有的D2C方法会为每个被重复利用的组件均生成对应的代码，从而导致代码的重复度较高、代码的可读性较差，进而影响后续代码的可维护性。

发明内容

本公开实施例至少提供一种前端页面的代码生成方法、装置、设备以及存储介质。

第一方面，本公开实施例提供了一种前端页面的代码生成方法，该方法包括：获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态。

一种可选的实施方式中，所述基于所述组件属性确定目标组件代码，包括：基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

一种可选的实施方式中，所述获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件，包括：基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；计算各个所述组件中对应相同图层子组件的组件属性的相似度；根据所述相似度确定所述界面设计稿中的多个复用组件。

一种可选的实施方式中，所述确定所述多个复用组件的组件属性，包括：基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

一种可选的实施方式中，所述对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性，包括：将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。