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

权利要求书

1.一种前端页面的代码生成方法，其特征在于，包括：

获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件；每个所述复用组件中包含满足相似度要求的多个子组件；

确定所述多个复用组件的组件属性，其中，所述组件属性包含通用属性和特殊属性；所述通用属性用于表征每个复用组件的相同显示状态，所述特殊属性用于表征每个复用组件的特殊显示状态；

基于所述组件属性确定目标组件代码，其中，所述目标组件代码中包含通用组件代码和目标状态参数，所述目标状态参数用于指示每个复用组件的特殊显示状态；所述通用组件代码用于渲染界面中复用组件的相同显示状态以及渲染每个复用组件的特殊显示状态；

其中，所述通用组件代码在用于渲染复用组件的特殊显示状态时携带目标状态变量，所述目标状态参数指示的所述目标状态变量的变量值用于被输入到所述通用组件代码，以在界面渲染对应的复用组件。

2.根据权利要求1所述的方法，其特征在于，所述基于所述组件属性确定目标组件代码，包括：

基于所述通用属性生成第一组件代码；所述第一组件代码用于渲染界面中复用组件的相同显示状态；

基于所述特殊属性生成携带目标状态变量的第二组件代码；所述目标状态变量的变量值的取值范围为所述目标状态参数，所述第二组件代码用于根据所述目标状态变量的不同变量值渲染复用组件的特殊显示状态；

基于所述第一组件代码和所述第二组件代码确定所述目标组件代码中的通用组件代码。

3.根据权利要求1所述的方法，其特征在于，所述获取待处理的界面设计稿，并确定所述界面设计稿中的多个复用组件，包括：

基于所述界面设计稿中各个组件的图层结构信息，遍历所述界面设计稿中的每个所述组件中的子组件，得到每个所述子组件的组件属性；

计算各个所述组件中对应相同图层子组件的组件属性的相似度；

根据所述相似度确定所述界面设计稿中的多个复用组件。

4.根据权利要求1所述的方法，其特征在于，所述确定所述多个复用组件的组件属性，包括：

基于所述界面设计稿中各个复用组件的图层结构信息，遍历各个所述复用组件中每个子组件的子组件属性，得到各个所述复用组件的初始组件属性；

对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性。

5.根据权利要求4所述的方法，其特征在于，所述对各个所述复用组件的初始组件属性进行属性分类，基于属性分类结果确定所述多个复用组件的组件属性，包括：

将各个所述复用组件的初始组件属性进行比较，得到各个所述复用组件的初始组件属性中的第一组件属性和第二组件属性；其中，所述第一组件属性为各个所述复用组件的初始组件属性中相同的组件属性，所述第二组件属性为各个所述复用组件的初始组件属性中不相同的组件属性；

将各个所述复用组件的第一组件属性确定为所述组件属性中的通用属性；

将各个所述复用组件的第二组件属性进行汇总，得到所述组件属性中的特殊属性。

6.根据权利要求2所述的方法，其特征在于，所述目标状态参数包括多个子状态参数，每个所述子状态参数用于指示对应复用组件的特殊显示状态；所述方法还包括：

在所述目标状态参数中确定目标子状态参数，将所述目标子状态参数作为所述目标状态变量的变量值输入至所述第二组件代码中，得到新第二组件代码；

基于所述第一组件代码和所述新第二组件代码，在界面上渲染所述目标子状态参数所对应的复用组件。

7.根据权利要求6所述的方法，其特征在于，所述在所述目标状态参数中确定目标子状态参数，包括：

响应于针对所述目标状态参数的选择操作，将所述选择操作所指示选择的子状态参数确定为所述目标子状态参数；或者

基于所述多个复用组件的渲染顺序确定当前时刻待渲染的复用组件，并在所述多个子状态参数中确定用于渲染所述待渲染的复用组件的特殊显示状态的目标子状态参数。