[发明专利]WEB构建系统、生成方法、装置、电子设备及存储介质

说明书

本申请实施例公开了一种WEB构建系统、生成方法、装置、电子设备及存储介质。本申请实施例提供的技术方案，WEB组件模板架构设置组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块，实现对WEB组件模板架构中各个组件控件基于显示层级的架构，并基于显示层级的架构实现对显示调整相关参数的传递，通过组件控件外周的隐藏边框获取组件控件的变化参数，将变化参数反馈到其它组件控件的隐藏边框以及整个组件控件的隐藏边框，从而实现WEB组件模板架构显示的自适应调整，有效减少了WEB组件模板架构搭建过程中自定义和微调的时间。

技术领域

本申请实施例涉及软件技术领域，尤其涉及WEB构建系统、生成方法、装置、电子设备及存储介质。

背景技术

在当前的web开发中，组件模板的使用非常广泛，因为它不仅便利数据的渲染，而且统一有序美观。在电商平台展示的商品框也是使用了组件模板生成；不过不同的项目需求，对组件模板的要求也不一样，一般组件模板使用相对简单，都是固定好宽高，规划好具体样式即可。这样的规则方式太单调，不适用于复杂的自定义需求的项目。而想要做好自定义的组件模板相对难度比较高，自定义不仅是提供多种的样式调节，还要提供整体放大放小，模板中某个控件样式放大，对其他控件样式有影响等等。这些功能是紧密关联的，需要考虑计算的因素较多，架构搭建不合理很容易出现功能冲突BUG问题。

发明内容

本申请实施例提供一种WEB构建系统、生成方法、装置、电子设备及存储介质，能够提高WEB组件模板架构的设计适应性，减少架构搭建时的手动操作。

在第一方面，本申请实施例提供了一种WEB组件模板架构的构建系统，包括：组件模板结构模块、组件样式定义模块、组件对象分解模块和组件渲染模块；

所述组件模板结构模块记录所有组件控件、组件框和架构框，所述组件控件用于组成所述WEB组件模板架构，所述组件框用于对应每个所述组件控件的隐藏边框，所述架构框对应于所述WEB组件模板架构的边框；所述组件边框适应于对应组件控件的大小变化，并将所述大小变化传递到所述架构框；

所述组件样式定义模块用于记录每个所述组件控件和架构框的显示属性，以及每个所述显示属性对应的样式定义，所述显示属性包括事件类型，所述样式定义和事件类型组成显示数据；

所述组件对象分解模块，用于将所述WEB组件模板架构的数据层级分解为四级，四级数据层级从上到下分别对应于所述WEB组件模板架构的层级数据、所述架构框的层级数据、组件框的层级数据和组件控件的层级数据，其中每级所述数据层级的层级数据包括该级的数据标识、对应的显示数据以及对应下一层的数据标识；

所述组件渲染模块，用于根据所述数据层级从上到下逐层渲染，以完成所述WEB组件模板架构的显示。

进一步地，所述构建系统，还包括编辑器；

所述编辑器，用于接收用户指令，以对所述WEB组件模板架构当前的显示数据进行更新。

在第二方面，本申请实施例提供了一种WEB组件模板架构的生成方法，基于第一方面任一所述的构建系统实现，包括：

响应于架构新建指令，新建架构框，并生成所述WEB组件模板架构的层级数据以及所述架构框的层级数据，所述架构新建指令用于新建WEB组件模板架构；

响应于组件控件选择指令，在所述架构框内新建组件框，在所述组件框内新建组件控件，并对应生成所述组件框和组件控件的层级数据；

响应于架构生成指令，建立所述WEB组件模板架构、架构框、组件框和组件控件的层级关系，并记录对应层级的层级数据；

基于所述层级关系从上到下逐层渲染对应的层级数据，以完成所述WEB组件模板架构的显示。

进一步地，所述生成方法，还包括：