页面的生成方法、装置、电子设备和存储介质制造方法及图纸

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

【技术实现步骤摘要】
页面的生成方法、装置、电子设备和存储介质


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

技术介绍

[0002]目前，渲染引擎是一种综合了CSS Grid(网格布局)和flex布局的web(orld Wide Web，全球广域网)动态可视化渲染方案。它首先根据不同的布局需求，设计了两种布局方案：自定义位置布局和自适应布局。其次根据不同的元素渲染要求，又对常见的文本、链接、图片和按钮等进行了组件抽象和功能封装，使web内容渲染方案统一、高效和通用。
[0003]在web渲染可视化
，经历了很多发展和变迁。其中如何实现元素布局和渲染是前端绕不开的问题。比如最开始实现布局是通过浮动或者table(表格)来控制元素的位置，通过原生的html(Hyper Text Markup Language，超级文本标记语言)标签实现元素的渲染，复杂的元素则需要通过多种html标签组合完成；后来随着html5(Hyper Text Markup Language 5.0，超级文本标记语言5.0)的发展，DIV(DIVision，层叠样式表单元的位置和层次)与CSS(Cascading Style Sheets，层叠样式表)逐步替换了table布局方案，但是元素的渲染技术没有得到进一步发展，布局和渲染仍然需要通过复杂的方式来维护。

技术实现思路

[0004]本公开提供一种页面的生成方法、装置、电子设备和存储介质，以至少解决相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。本公开的技术方案如下：
[0005]根据本公开实施例的第一方面，提供一种页面的生成方法，包括：
[0006]在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；
[0007]根据所述网格属性对所述网格子项进行位置布局；以及
[0008]根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。
[0009]在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，包括：
[0010]对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；
[0011]根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；
[0012]根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。
[0013]在本公开实施例一种可能的实现方式中，根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局，包括：
[0014]根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；
[0015]根据所述布局信息将所述填充内容填充至对应的所述网格子项。
[0016]在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，还包括：
[0017]根据所述网格属性确定所述多个网格子项之中的最大列高度；
[0018]遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；
[0019]根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；
[0020]根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；
[0021]响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。
[0022]在本公开实施例一种可能的实现方式中，所述根据所述每个所述网格子项的实际位置，确定待对齐的网格子项，包括：
[0023]获取所述每个所述网格子项的宽度值；
[0024]根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述多个网格子项中确定实际位置被占用的网格子项，并将所述实际位置被占用的网格子项作为所述待对齐的网格子项。
[0025]根据本公开实施例的第二方面，提供一种页面的生成装置，包括：
[0026]生成模块，被配置为在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；
[0027]布局模块，被配置为根据所述网格属性对所述网格子项进行位置布局；以及
[0028]内容填充模块，被配置为根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。
[0029]在本公开实施例一种可能的实现方式中，所述布局模块，具体被配置为：
[0030]对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；
[0031]根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；
[0032]根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。
[0033]在本公开实施例一种可能的实现方式中，所述内容填充模块，具体被配置为：
[0034]根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；
[0035]根据所述布局信息将所述填充内容填充至对应的所述网格子项。
[0036]在本公开实施例一种可能的实现方式中，所述布局模块，包括：
[0037]第一确定单元，被配置为根据所述网格属性确定所述多个网格子项之中的最大列高度；
[0038]第一获取单元，被配置为遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；
[0039]第二确定单元，被配置为根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；
[0040]第二获取单元，被配置为根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；
[0041]高度补齐单元，被配置为响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。
[0042]在本公开实施例一种可能的实现方式中，所述第二确定单元，具体被配置为：
[0043]获取所述每个所述网格子项的宽度值；
[0044]根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面的生成方法，其特征在于，包括：在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；根据所述网格属性对所述网格子项进行位置布局；以及根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。2.如权利要求1所述的页面的生成方法，其特征在于，所述根据所述网格属性对所述网格子项进行位置布局，包括：对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。3.如权利要求1所述的页面的生成方法，其特征在于，根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局，包括：根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；根据所述布局信息将所述填充内容填充至对应的所述网格子项。4.如权利要求1所述的页面的生成方法，其特征在于，所述根据所述网格属性对所述网格子项进行位置布局，还包括：根据所述网格属性确定所述多个网格子项之中的最大列高度；遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。5.如权利要求4所述的页面的生成方法，其特征在于，所述根据所述每个所述网格子项的实际位置，确定待对齐的网格子项，包括：获取...

【专利技术属性】
技术研发人员：李惠清，
申请(专利权)人：北京达佳互联信息技术有限公司，
类型：发明
国别省市：