[发明专利]web界面定制方法、装置、电子设备及存储介质

说明书

本发明提供一种web界面定制方法、装置、电子设备及存储介质，涉及web界面定制技术领域。web界面定制方法包括：根据web界面布局定义网格布局参数；根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；解析行列布局参数并建立节点与各类组件间的关系；响应各类型组件并进行视觉渲染。本发明的目的在于提供一种web界面定制方法、装置、电子设备及存储介质，能够对通过将可视化定制后的网格布局的参数转化为行列布局，以实现便捷的可视化定制操作的同时具有良好的响应式布局支持。

技术领域

本发明涉及web界面定制技术领域，具体而言，涉及一种 web界面定制方法、装置、电子设备及存储介质。

背景技术

目前现有的web界面布局模式通常为网格布局、行列布局以及流式布局。

其中，网格布局是一种通过X坐标(横坐标)、Y坐标(纵坐标)、长度以及高度进行参数定义的界面布局方法，可以通过拖拽的方式简单便捷的对界面的网格布局参数进行定义，其可视化定制操作体验以及布局灵活度相对较好。但是网格布局的方式对于响应式布局的支持相对较差(通常通过等比缩放的形式实现)。

发明内容

本发明的目的在于提供一种web界面定制方法、装置、电子设备及存储介质，能够对通过将可视化定制后的网格布局的参数转化为行列布局，以实现便捷的可视化定制操作的同时具有良好的响应式布局支持。

本发明的实施例是这样实现的：

本发明实施例的一方面，提供一种web界面定制方法，包括：根据web界面布局定义网格布局参数；

根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；

解析行列布局参数并建立节点与各类组件间的关系；

响应各类型组件并进行视觉渲染。

可选地，根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数，包括：

判断网格布局参数的行列标志；

若行列标志为行，则获取能够规划到一行的块并进行行规划；

若行列标志为列，则获取能够规划到一列的块并进行列规划；

根据行规划和列规划形成行列布局参数的行参数和列参数。

可选地，若行列标志为行，则获取能够规划到一行的块并进行行规划，包括：

获取能规划到一行的块；

判断能规划到一行的块的个数；

若个数为一个，则将能规划到一行的块放入行列布局参数的行参数中；

若个数为零个或多个，则获取能规划到一行的块中能规划到一列的块并进行列规划；

相应地，若行列标志为列，则获取能够规划到一列的块并进行列规划，包括：

获取能规划到一列的块；

判断能规划到一列的块的个数；

若个数为一个，则将能规划到一列的块放入行列布局参数的列参数中；

若个数为零个或多个，则获取能规划到一列的块中能规划到一行的块并进行行规划。

可选地，获取能规划到一行的块，包括：

按横坐标小到大对各块进行排序；

依次计算不同块组合后的高度是否能贯穿整行；

将能贯穿整行的高度对应的组合包含的各块放入选中块集合，选中块集合中的各块作为能规划到一行的块。