[发明专利]页面的生成方法、装置、电子设备和存储介质

说明书

本公开关于一种页面的生成方法、装置、电子设备和存储介质，属于互联网技术领域。其中，页面的生成方法，包括：在页面之中生成多个网格子项，其中，每个网格子项包括网格属性和弹性布局属性，网格属性用于描述网格子项的位置信息，弹性布局属性用于描述网格子项中的填充内容的布局配置信息；根据网格属性对网格子项进位置布局；以及根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。

技术领域

本公开涉及互联网技术领域，尤其涉及一种页面的生成方法、装置、电子设备和存储介质。

背景技术

目前，渲染引擎是一种综合了CSS Grid(网格布局)和flex布局的web(orld WideWeb，全球广域网)动态可视化渲染方案。它首先根据不同的布局需求，设计了两种布局方案：自定义位置布局和自适应布局。其次根据不同的元素渲染要求，又对常见的文本、链接、图片和按钮等进行了组件抽象和功能封装，使web内容渲染方案统一、高效和通用。

在web渲染可视化技术领域，经历了很多发展和变迁。其中如何实现元素布局和渲染是前端绕不开的问题。比如最开始实现布局是通过浮动或者table(表格)来控制元素的位置，通过原生的html(Hyper Text Markup Language，超级文本标记语言)标签实现元素的渲染，复杂的元素则需要通过多种html标签组合完成；后来随着html5(Hyper TextMarkup Language 5.0，超级文本标记语言5.0)的发展，DIV(DIVision，层叠样式表单元的位置和层次)与CSS(Cascading Style Sheets，层叠样式表)逐步替换了table布局方案，但是元素的渲染技术没有得到进一步发展，布局和渲染仍然需要通过复杂的方式来维护。

发明内容

本公开提供一种页面的生成方法、装置、电子设备和存储介质，以至少解决相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面的生成方法，包括：

在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；

根据所述网格属性对所述网格子项进行位置布局；以及

根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。

在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，包括：

对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；

根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；

根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。

在本公开实施例一种可能的实现方式中，根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局，包括：

根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；

根据所述布局信息将所述填充内容填充至对应的所述网格子项。

在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，还包括：