1.本公开涉及互联网
技术领域：
：，尤其涉及一种页面的生成方法、装置、电子设备和存储介质。
背景技术：
：：2.目前，渲染引擎是一种综合了cssgrid(网格布局)和flex布局的web(orldwideweb，全球广域网)动态可视化渲染方案。它首先根据不同的布局需求，设计了两种布局方案：自定义位置布局和自适应布局。其次根据不同的元素渲染要求，又对常见的文本、链接、图片和按钮等进行了组件抽象和功能封装，使web内容渲染方案统一、高效和通用。3.在web渲染可视化
技术领域：
：，经历了很多发展和变迁。其中如何实现元素布局和渲染是前端绕不开的问题。比如最开始实现布局是通过浮动或者table(表格)来控制元素的位置，通过原生的html(hypertextmarkuplanguage，超级文本标记语言)标签实现元素的渲染，复杂的元素则需要通过多种html标签组合完成；后来随着html5(hypertextmarkuplanguage5.0，超级文本标记语言5.0)的发展，div(division，层叠样式表单元的位置和层次)与css(cascadingstylesheets，层叠样式表)逐步替换了table布局方案，但是元素的渲染技术没有得到进一步发展，布局和渲染仍然需要通过复杂的方式来维护。技术实现要素：4.本公开提供一种页面的生成方法、装置、电子设备和存储介质，以至少解决相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。本公开的技术方案如下：5.根据本公开实施例的第一方面，提供一种页面的生成方法，包括：6.在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；7.根据所述网格属性对所述网格子项进行位置布局；以及8.根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。9.在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，包括：10.对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；11.根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；12.根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。13.在本公开实施例一种可能的实现方式中，根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局，包括：14.根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；15.根据所述布局信息将所述填充内容填充至对应的所述网格子项。16.在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，还包括：17.根据所述网格属性确定所述多个网格子项之中的最大列高度；18.遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；19.根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；20.根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；21.响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。22.在本公开实施例一种可能的实现方式中，所述根据所述每个所述网格子项的实际位置，确定待对齐的网格子项，包括：23.获取所述每个所述网格子项的宽度值；24.根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述多个网格子项中确定实际位置被占用的网格子项，并将所述实际位置被占用的网格子项作为所述待对齐的网格子项。25.根据本公开实施例的第二方面，提供一种页面的生成装置，包括：26.生成模块，被配置为在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；27.布局模块，被配置为根据所述网格属性对所述网格子项进行位置布局；以及28.内容填充模块，被配置为根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。29.在本公开实施例一种可能的实现方式中，所述布局模块，具体被配置为：30.对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；31.根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；32.根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。33.在本公开实施例一种可能的实现方式中，所述内容填充模块，具体被配置为：34.根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；35.根据所述布局信息将所述填充内容填充至对应的所述网格子项。36.在本公开实施例一种可能的实现方式中，所述布局模块，包括：37.第一确定单元，被配置为根据所述网格属性确定所述多个网格子项之中的最大列高度；38.第一获取单元，被配置为遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；39.第二确定单元，被配置为根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；40.第二获取单元，被配置为根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；41.高度补齐单元，被配置为响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。42.在本公开实施例一种可能的实现方式中，所述第二确定单元，具体被配置为：43.获取所述每个所述网格子项的宽度值；44.根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述多个网格子项中确定实际位置被占用的网格子项，并将所述实际位置被占用的网格子项作为所述待对齐的网格子项。45.根据本公开实施例的第三方面，提供一种电子设备，包括：46.处理器；47.用于存储所述处理器可执行指令的存储器；48.其中，所述处理器被配置为执行所述指令，以实现上述的页面的生成方法。49.根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。50.根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述的页面的生成方法。51.本公开的实施例提供的技术方案至少带来以下有益效果：52.在页面之中生成多个网格子项，并根据网格属性对网格子项进行位置布局，以及根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，通过这种方法，解决了相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量，并且可以提升了web渲染研发效率。53.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。附图说明54.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。55.图1是根据一示例性实施例示出的一种页面的生成方法的流程图；56.图2是根据一示例性实施例示出的一种多个网格子项的示意图；57.图3是根据一示例性实施例示出的另一种页面的生成方法的流程图；58.图4是根据一示例性实施例示出的另一种页面的生成方法的流程图；59.图5是根据一示例性实施例示出的另一种页面的生成方法的流程图；60.图6是根据一示例性实施例示出的另一种页面的生成方法的流程图；61.图7是根据一示例性实施例示出的一种页面的生成装置框图；以及62.图8是根据一示例性实施例示出的一种电子设备框图。具体实施方式63.为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。64.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。65.下面参考附图描述本公开实施例的页面的生成方法、装置、电子设备和存储介质。66.本公开实施例提供的页面的生成方法，可以由电子设备来执行，该电子设备可为pc(personalcomputer，个人计算机)电脑、手机、平板电脑或掌上电脑等，此处不做任何限定。67.在本公开实施例中，电子设备中可以设置有处理组件、存储组件和驱动组件。可选的，该驱动组件和处理组件可以集成设置，该存储组件可以存储操作系统、应用程序或其他程序模块，该处理组件通过执行存储组件中存储的应用程序来实现本公开实施例提供的页面的生成方法。68.需要说明的是，本公开实施例提供的页面的生成方法，对于web元素(即，页面元素)的展示，可主要考虑两方面：一是元素的位置布局，二是元素自身的展示。其中，该方法的实现可分为两部分，一部分为框架层，一部分为元素组件库；框架层是通过基础的javascript和css实现，不管是vue框架、reac框架还是其它前端技术框架下等都可以使用该框架。元素渲染可采用通用的schema(架构)渲染的方案，任何前端框架都是适用的，其它技术栈需要按照预先设计完成的组件schema渲染方案去适配下，就可以和框架层结合使用了。69.需要说明的是，上述实施例中所描述的元素可以是页面中使用到的一切用于组织结构和表达内容的对象，其中，组织结构可包括表格(布局)、层、导航条，链接等等，表达内容可包括文字、图像、动画等等。比如，本公开实施例中的网格子项就是一种元素。70.图1是根据一示例性实施例示出的一种页面的生成方法的流程图，如图1所示，该页面的生成方法可用于电子设备中，包括以下步骤。71.在步骤s11中，在页面之中生成多个网格子项，其中，每个网格子项包括网格属性和弹性布局属性，网格属性用于描述网格子项的位置信息，弹性布局属性用于描述网格子项中的填充内容的布局配置信息。72.需要说明的是，该实施例中所描述的页面可为html(例如,html5)页面，该html页面也是web页面(html是属于web前端开发的一部分，万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言)，该实施例中所描述的网格属性可包括grid属性，可用于描述网格子项的位置信息，该实施例中所描述的弹性布局属性可包括flex属性，可用于描述网格子项中的填充内容的布局配置信息，其中，页面可以是短视频app(application，应用程序)中的播放界面，也可以是短视频app中的信息浏览页面，还可以是浏览器中显示的某个界面，此处不做任何限定。grid属性可以是其所有网格项(网格子项)的父元素，可以精确的规定网页中的网格的大小，且对于网页上面的图像与文字就可以精确的进行控制，从而达到合理分布内容的目标。flex属性可用于设置或检索弹性盒模型对象的子元素如何分配空间。73.其中，grid属性和flex属性均可属于css和javascript(脚本语言)的范畴。74.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，当用户使用手机打开短视频app中的信息浏览页面时，该手机将会加载该信息浏览页面的代码，在加载该代码的过程中，可先在该信息浏览页面之中生成多个网格子项。75.需要说明的是，该实施例中所描述的多个网格子项在该信息浏览页面中的位置可由网格属性决定，该实施例中所描述的多个网格子项中的内容可由弹性布局属性决定。76.在步骤s12中，根据网格属性对网格子项进行位置布局。77.在步骤s13中，根据弹性布局属性对网格子项中的填充内容进行弹性布局。78.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，当用户使用手机打开短视频app中的信息浏览页面时，该手机将会加载该信息浏览页面的代码，在加载该代码的过程中，可先在该信息浏览页面之中生成多个网格子项，然后根据网格属性对每个网格子项进行位置布局，以确定每个网格子项在该信息浏览页面中的位置，并根据弹性布局属性对每个网格子项中的填充内容进行弹性布局，以确定每个网格子项之中显示的内容以及内容样式。79.在本公开实施例中，电子设备首先在页面之中生成多个网格子项，然后根据网格属性对网格子项进行位置布局，并根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。80.为了清楚说明上一实施例，在本公开实施例一种可能的实现方式中，如图3所示，根据网格属性对网格子项进行位置布局，可包括：81.步骤s31，对网格属性进行解析，以获取网格子项的位置信息，其中，位置信息包括网格子项的坐标属性。82.在本公开实施例中，可根据预设的解析算法对网格属性进行解析，以获取网格子项的位置信息，其中，预设的解析算法可根据实际情况进行标定。83.需要说明的是，该实施例中所描述的坐标属性可为grid属性中的{x:”,endx:”,y:”,endy:”,width:”,height:”}，也可以是div属性中的坐标配置，此处不做任何限定。84.步骤s32，根据坐标属性确定网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标。85.步骤s33，根据开始横坐标、结束横坐标、开始纵坐标和结束纵坐标，将网格子项设置到对应的位置。86.在本公开实施例中，在网格子项(即web元素)位置布局方面，可通过cssgrid布局实现，布局中每一个网格子项可简称为item(网格、项目)子项。根据gridcss属性rowstart(行开始)、rowend(行结束)、columnstart(列开始)和columnend(列结束)来设计网格子项的坐标属性{x:开始横坐标,endx:结束横坐标，y:开始纵坐标,endy:结束纵坐标}，用来表示网格子项所占据的位置和空间，如图2中的气泡图片的坐标属性可为{x:1,endx:3,y:1,endy:3}，其它展示的网格子项的位置都可以通过坐标来表示，因此网格子项位置布局中可以避免写一些样式属性(例如，csspostioon等样式属性)，从而简化了网格子项的位置布局，进而降低了网格子项布局的复杂度。87.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据上述预设的解析算法对网格属性进行解析，以获取网格子项的位置信息，并根据gridcss属性(即，坐标属性)rowstart、rowend、columnstart和columnend来设计网格子项的位置(坐标){x:开始横坐标,endx:结束横坐标，y:开始纵坐标,endy:结束纵坐标}，以确定每个网格子项在该信息浏览页面中的位置，然后将每个网格子项设置到对应的位置，从而简化了网格子项的位置布局，进而降低了网格子项布局的复杂度。88.进一步地，在本公开实施例一种可能的实现方式中，如图4所示，根据弹性布局属性对网格子项中的填充内容进行弹性布局，可包括：89.步骤41，根据弹性布局属性和填充内容，确定网格子项的布局信息，其中，填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种。90.需要说明的是，该实施例中所描述的描述信息和字段信息是组合信息，即描述和字段值，比如，参见图2，第一行第一列的文字类型的展示，姓名(描述信息)：张三(字段信息)。该实施例中所描述的渲染方式可包括普通、对象和数组，并定义了组件属性配置，通过属性配置即可完成一个元素的渲染，避免重复的样式和代码。该实施例中所描述的填充内容布局信息指的是，填充内容在网格子项(网格)中所展示的形态，例如，字体的样式、图片的大小及样式等。91.在一个实例中，如图2所示，填充内容可包括文字、链接、图片、时间、按钮和动画等，布局配置信息可包括字体的样式、图片的大小及样式、动画的大小及展示效果等，此处不做任何限定。由此，通过上述填充内容以及填充内容的布局信息，可以实现网格子项中内容的填充和样式渲染，从而可以避免或减少自定义样式，提高了相关页面设计人员的研发效率。92.步骤42，根据布局信息将填充内容填充至对应的网格子项。93.在本公开实施例中，在网格子项的内容填充和样式渲染的布局上，如图2所示，其中每一个小的展示区域(即，网格子项)都称为一个item子项。每个子项的展示部分可支持两部分内容的展示，即，描述和字段值，比如，第一行第一列的文字类型的展示，姓名(描述)：张三(字段值)，第一行第二列图片的展示，头像(描述)：图像图片(字段值)等，即冒号左侧的就是字段描述，右侧就是字段值。item子项可采用cssflex布局实现，默认是横向布局，支持了flex的基础属性配置，实现flex布局样式。同时还可基于文字、链接、图片、按钮等基础元素,结合实际的诉求，封装并实现常见的组件和功能，元素的样式内置到组件中，并定义了组件属性配置，通过属性配置即可完成一个网格子项的渲染，避免重复的样式和代码。94.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可采用cssflex布局，以根据弹性布局属性和填充内容，确定网格子项的布局信息，并根据该布局信息将填充内容填充至对应的网格子项。由此，可以避免或减少自定义样式，解决布局中比较繁琐的重复书写样式问题，并且基于css的flex布局可以解决grid子模块item本身的布局问题。95.需要说明的是，上述实施例中所描述的item的完整的配置属性，json(javascript，脚本语言)schema的定义如下：{name:’子项描述’,key:’子项字段’,type:’item类型’,layout:{flexdrection:’布局方向’,flex:’宽度flex值’,alignitems:’垂直方向对其方式’},griditem:{x:”,endx:”,y:”,endy:”,width:”,height:”}}。其中name表示该元素的描述信息，key表示要展示的元素对应的字段值。type是组件类型。layout是item子项的flex布局配置项,通过flex的布局方向flexdirection、垂直方向对其属性alignitems、宽度flex等实现子项的内容布局。griditem是item子项的grid坐标属性。96.在一个实例中，对于有边框的渲染需求，如果没有对其，视觉效果会很不好看，如图2所示，针对没对齐的问题，可自动补充空白的元素实现对齐如第一列最后一行，修改第一列的最后一行item子项(即，网格子项)的高度如第五列的图片本身高度是1，但是为了对其，可根据预设的算法自动修改图片item的griditem中的endy或者height，实现对齐，其中，预设的算法可根据实际情况进行标定。97.为了提升页面的视觉效果，在本公开实施例一种可能的实现方式中，如图5所示，根据网格属性对网格子项进行位置布局，还可包括：98.步骤51，根据网格属性确定多个网格子项之中的最大列高度。99.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据每个网格子项的网格属性，计算出图2所示的每列的高度，并获取其中的最大列高度，即多个网格子项之中的最大列高度。100.步骤52，遍历每个网格子项，以获取每个网格子项的实际位置。101.需要说明的是，该实施例中所描述的实际位置可为实际坐标信息。102.步骤53，根据每个网格子项的实际位置，确定待对齐的网格子项。103.为了清楚说明上一实施例，在本公开实施例一种可能的实现方式中，如图6所示，根据每个网格子项的实际位置，确定待对齐的网格子项，可包括：104.步骤61，获取每个网格子项的宽度值。105.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据每个网格子项的网格属性，计算出图2所示的每个网格子项的宽度值。106.步骤62，根据每个网格子项的实际位置和每个网格子项的宽度值，从多个网格子项中确定实际位置被占用的网格子项，并将实际位置被占用的网格子项作为待对齐的网格子项。107.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，电子设备可在获取到上述的每个网格子项的宽度值之后，可根据每个网格子项的实际位置和每个网格子项的宽度值，判断哪个网格子项被占用，并可从多个网格子项中确定实际位置被占用的网格子项，以及将实际位置被占用的网格子项作为待对齐的网格子项。108.步骤54，根据待对齐的网格子项的实际位置，获取待对齐的网格子项所在列的列高度。109.在本公开实施例中，电子设备在得到待对齐的网格子项之后，可先直接获取该待对齐的网格子项的实际位置，并根据该实际位置确定该待对齐的网格子项所在(处)的列，并获取该列的列高度。110.步骤55，响应于列高度小于最大列高度，对待对齐的网格子项进行高度补齐。111.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可先根据网格属性(例如，布局样式和配置)确定图2所示的每列的高度，并获取其中的最大列高度mheight，然后遍历每一列(即，每个每个网格子项)，计算子项item(即，网格子项)的实际位置{x，endx，y，endy，height,width}，此时可判断当前item的实际位置是否被前几列宽度较大的(例如，大于1的)item占用，如果是，则可根据该当前item的实际位置获取该当前item的所在列的列高度。然后可判断该当前item的所在列的列高度是否小于最大列高度，如果是，则说明需要对该当前item进行高度补齐，此时可对该当前item相邻(例如，上下相邻)的两项之间的空白，做自动填充空白item，如果该当前item是某一列的最后一项，则可根据坐标信息、iteminfo、自身高度height，列最大高度mheight，做高度补齐。由此，可实现布局元素(例如，网格子项)的自动化对齐，提升页面的视觉效果。112.进一步地，如果该当前item的所在列的列高度大于或等于最大列高度，则可不对该当前item进行高度补齐。113.本公开的实施例提供的页面的生成方法，电子设备首先在页面之中生成多个网格子项，然后根据网格属性对网格子项进行位置布局，并根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。114.图7是根据一示例性实施例示出的一种页面的生成方法框图。参照图7，该页面的生成装置70包括：生成模块71、布局模块72和内容填充模块73。115.其中，生成模块71被配置为在页面之中生成多个网格子项，其中，每个网格子项包括网格属性和弹性布局属性，网格属性用于描述网格子项的位置信息，弹性布局属性用于描述网格子项中的填充内容的布局配置信息。116.布局模块72被配置为根据网格属性对网格子项进行位置布局。117.内容填充模块73被配置为根据弹性布局属性对网格子项中的填充内容进行弹性布局。118.在本公开实施例一种可能的实现方式中，布局模块72具体被配置为：对网格属性进行解析，以获取网格子项的位置信息，其中，位置信息包括网格子项的坐标属性；根据坐标属性确定网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；根据开始横坐标、结束横坐标、开始纵坐标和结束纵坐标，将网格子项设置到对应的位置。119.在本公开实施例一种可能的实现方式中，内容填充模块73具体被配置为：根据弹性布局属性和填充内容，确定网格子项的布局信息，其中，填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；根据布局信息将填充内容填充至对应的网格子项。120.在本公开实施例一种可能的实现方式中，布局模块72还可包括：第一确定单元、第一获取单元、第二确定单元、第二获取单元和高度补齐单元。121.其中，第一确定单元，被配置为根据网格属性确定多个网格子项之中的最大列高度。122.第一获取单元，被配置为遍历每个网格子项，以获取每个网格子项的实际位置。123.第二确定单元，被配置为根据每个网格子项的实际位置，确定待对齐的网格子项。124.第二获取单元，被配置为根据待对齐的网格子项的实际位置，获取待对齐的网格子项所在列的列高度。125.高度补齐单元，被配置为响应于列高度小于最大列高度，对待对齐的网格子项进行高度补齐。126.在本公开实施例一种可能的实现方式中，第二确定单元，具体被配置为：获取每个网格子项的宽度值；根据每个网格子项的实际位置和每个网格子项的宽度值，从多个网格子项中确定实际位置被占用的网格子项，并将实际位置被占用的网格子项作为待对齐的网格子项。127.在实际使用时，本公开实施例提供的页面的生成装置，可以被配置在电子设备中，以执行前述页面的生成方法。因此，关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。128.本公开的实施例提供的页面的生成装置，首先通过生成模块在页面之中生成多个网格子项，然后通过布局模块根据网格属性对网格子项进行位置布局，最后通过内容填充模块根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。129.为了实现上述实施例，本公开还提出了一种电子设备。130.其中，该电子设备，包括处理器和用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述的页面的生成方法。131.为了实现上述实施例，本公开还提出了一种存储介质。132.其中，当存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。133.为了实现上述实施例，本公开还提供一种计算机程序产品。134.其中，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。135.图8是根据一示例性实施例示出的一种电子设备框图。图8示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。136.如图8所示，电子设备80包括处理器81，其可以根据存储在只读存储器(rom，readonlymemory)82中的程序或者从存储器86加载到随机访问存储器(ram，randomaccessmemory)83中的程序而执行各种适当的动作和处理。在ram83中，还存储有电子设备80操作所需的各种程序和数据。处理器81、rom82以及ram83通过总线84彼此相连。输入/输出(i/o，input/output)接口85也连接至总线84。137.以下部件连接至i/o接口85：包括硬盘等的存储器86；以及包括诸如lan(局域网，localareanetwork)卡、调制解调器等的网络接口卡的通信部分87，通信部分87经由诸如因特网的网络执行通信处理；驱动器88也根据需要连接至i/o接口85。138.特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分87从网络上被下载和安装。在该计算机程序被处理器81执行时，执行本公开的方法中限定的上述功能。139.在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由电子设备80的处理器81执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd‑rom、磁带、软盘和光数据存储设备等。140.在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。141.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本技术旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本
技术领域：
：中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。142.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。当前第1页12当前第1页12
技术领域：
：，尤其涉及一种页面的生成方法、装置、电子设备和存储介质。
背景技术：
：：2.目前，渲染引擎是一种综合了cssgrid(网格布局)和flex布局的web(orldwideweb，全球广域网)动态可视化渲染方案。它首先根据不同的布局需求，设计了两种布局方案：自定义位置布局和自适应布局。其次根据不同的元素渲染要求，又对常见的文本、链接、图片和按钮等进行了组件抽象和功能封装，使web内容渲染方案统一、高效和通用。3.在web渲染可视化
技术领域：
：，经历了很多发展和变迁。其中如何实现元素布局和渲染是前端绕不开的问题。比如最开始实现布局是通过浮动或者table(表格)来控制元素的位置，通过原生的html(hypertextmarkuplanguage，超级文本标记语言)标签实现元素的渲染，复杂的元素则需要通过多种html标签组合完成；后来随着html5(hypertextmarkuplanguage5.0，超级文本标记语言5.0)的发展，div(division，层叠样式表单元的位置和层次)与css(cascadingstylesheets，层叠样式表)逐步替换了table布局方案，但是元素的渲染技术没有得到进一步发展，布局和渲染仍然需要通过复杂的方式来维护。技术实现要素：4.本公开提供一种页面的生成方法、装置、电子设备和存储介质，以至少解决相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。本公开的技术方案如下：5.根据本公开实施例的第一方面，提供一种页面的生成方法，包括：6.在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；7.根据所述网格属性对所述网格子项进行位置布局；以及8.根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。9.在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，包括：10.对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；11.根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；12.根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。13.在本公开实施例一种可能的实现方式中，根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局，包括：14.根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；15.根据所述布局信息将所述填充内容填充至对应的所述网格子项。16.在本公开实施例一种可能的实现方式中，所述根据所述网格属性对所述网格子项进行位置布局，还包括：17.根据所述网格属性确定所述多个网格子项之中的最大列高度；18.遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；19.根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；20.根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；21.响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。22.在本公开实施例一种可能的实现方式中，所述根据所述每个所述网格子项的实际位置，确定待对齐的网格子项，包括：23.获取所述每个所述网格子项的宽度值；24.根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述多个网格子项中确定实际位置被占用的网格子项，并将所述实际位置被占用的网格子项作为所述待对齐的网格子项。25.根据本公开实施例的第二方面，提供一种页面的生成装置，包括：26.生成模块，被配置为在页面之中生成多个网格子项，其中，每个所述网格子项包括网格属性和弹性布局属性，所述网格属性用于描述所述网格子项的位置信息，所述弹性布局属性用于描述所述网格子项中的填充内容的布局配置信息；27.布局模块，被配置为根据所述网格属性对所述网格子项进行位置布局；以及28.内容填充模块，被配置为根据所述弹性布局属性对所述网格子项中的填充内容进行弹性布局。29.在本公开实施例一种可能的实现方式中，所述布局模块，具体被配置为：30.对所述网格属性进行解析，以获取所述网格子项的位置信息，其中，所述位置信息包括所述网格子项的坐标属性；31.根据所述坐标属性确定所述网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；32.根据所述开始横坐标、所述结束横坐标、所述开始纵坐标和所述结束纵坐标，将所述网格子项设置到对应的位置。33.在本公开实施例一种可能的实现方式中，所述内容填充模块，具体被配置为：34.根据所述弹性布局属性和所述填充内容，确定所述网格子项的布局信息，其中，所述填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，所述布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；35.根据所述布局信息将所述填充内容填充至对应的所述网格子项。36.在本公开实施例一种可能的实现方式中，所述布局模块，包括：37.第一确定单元，被配置为根据所述网格属性确定所述多个网格子项之中的最大列高度；38.第一获取单元，被配置为遍历所述每个所述网格子项，以获取所述每个所述网格子项的实际位置；39.第二确定单元，被配置为根据所述每个所述网格子项的实际位置，确定待对齐的网格子项；40.第二获取单元，被配置为根据待对齐的网格子项的实际位置，获取所述待对齐的网格子项所在列的列高度；41.高度补齐单元，被配置为响应于所述列高度小于所述最大列高度，对所述待对齐的网格子项进行高度补齐。42.在本公开实施例一种可能的实现方式中，所述第二确定单元，具体被配置为：43.获取所述每个所述网格子项的宽度值；44.根据所述每个所述网格子项的实际位置和所述每个所述网格子项的宽度值，从所述多个网格子项中确定实际位置被占用的网格子项，并将所述实际位置被占用的网格子项作为所述待对齐的网格子项。45.根据本公开实施例的第三方面，提供一种电子设备，包括：46.处理器；47.用于存储所述处理器可执行指令的存储器；48.其中，所述处理器被配置为执行所述指令，以实现上述的页面的生成方法。49.根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。50.根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述的页面的生成方法。51.本公开的实施例提供的技术方案至少带来以下有益效果：52.在页面之中生成多个网格子项，并根据网格属性对网格子项进行位置布局，以及根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，通过这种方法，解决了相关技术中，页面元素的布局和渲染需要写自定义样式来实现组件布局，且布局样式和组件是分离的，导致布局和渲染需要通过复杂的方式进行的技术问题，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量，并且可以提升了web渲染研发效率。53.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。附图说明54.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。55.图1是根据一示例性实施例示出的一种页面的生成方法的流程图；56.图2是根据一示例性实施例示出的一种多个网格子项的示意图；57.图3是根据一示例性实施例示出的另一种页面的生成方法的流程图；58.图4是根据一示例性实施例示出的另一种页面的生成方法的流程图；59.图5是根据一示例性实施例示出的另一种页面的生成方法的流程图；60.图6是根据一示例性实施例示出的另一种页面的生成方法的流程图；61.图7是根据一示例性实施例示出的一种页面的生成装置框图；以及62.图8是根据一示例性实施例示出的一种电子设备框图。具体实施方式63.为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。64.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。65.下面参考附图描述本公开实施例的页面的生成方法、装置、电子设备和存储介质。66.本公开实施例提供的页面的生成方法，可以由电子设备来执行，该电子设备可为pc(personalcomputer，个人计算机)电脑、手机、平板电脑或掌上电脑等，此处不做任何限定。67.在本公开实施例中，电子设备中可以设置有处理组件、存储组件和驱动组件。可选的，该驱动组件和处理组件可以集成设置，该存储组件可以存储操作系统、应用程序或其他程序模块，该处理组件通过执行存储组件中存储的应用程序来实现本公开实施例提供的页面的生成方法。68.需要说明的是，本公开实施例提供的页面的生成方法，对于web元素(即，页面元素)的展示，可主要考虑两方面：一是元素的位置布局，二是元素自身的展示。其中，该方法的实现可分为两部分，一部分为框架层，一部分为元素组件库；框架层是通过基础的javascript和css实现，不管是vue框架、reac框架还是其它前端技术框架下等都可以使用该框架。元素渲染可采用通用的schema(架构)渲染的方案，任何前端框架都是适用的，其它技术栈需要按照预先设计完成的组件schema渲染方案去适配下，就可以和框架层结合使用了。69.需要说明的是，上述实施例中所描述的元素可以是页面中使用到的一切用于组织结构和表达内容的对象，其中，组织结构可包括表格(布局)、层、导航条，链接等等，表达内容可包括文字、图像、动画等等。比如，本公开实施例中的网格子项就是一种元素。70.图1是根据一示例性实施例示出的一种页面的生成方法的流程图，如图1所示，该页面的生成方法可用于电子设备中，包括以下步骤。71.在步骤s11中，在页面之中生成多个网格子项，其中，每个网格子项包括网格属性和弹性布局属性，网格属性用于描述网格子项的位置信息，弹性布局属性用于描述网格子项中的填充内容的布局配置信息。72.需要说明的是，该实施例中所描述的页面可为html(例如,html5)页面，该html页面也是web页面(html是属于web前端开发的一部分，万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言)，该实施例中所描述的网格属性可包括grid属性，可用于描述网格子项的位置信息，该实施例中所描述的弹性布局属性可包括flex属性，可用于描述网格子项中的填充内容的布局配置信息，其中，页面可以是短视频app(application，应用程序)中的播放界面，也可以是短视频app中的信息浏览页面，还可以是浏览器中显示的某个界面，此处不做任何限定。grid属性可以是其所有网格项(网格子项)的父元素，可以精确的规定网页中的网格的大小，且对于网页上面的图像与文字就可以精确的进行控制，从而达到合理分布内容的目标。flex属性可用于设置或检索弹性盒模型对象的子元素如何分配空间。73.其中，grid属性和flex属性均可属于css和javascript(脚本语言)的范畴。74.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，当用户使用手机打开短视频app中的信息浏览页面时，该手机将会加载该信息浏览页面的代码，在加载该代码的过程中，可先在该信息浏览页面之中生成多个网格子项。75.需要说明的是，该实施例中所描述的多个网格子项在该信息浏览页面中的位置可由网格属性决定，该实施例中所描述的多个网格子项中的内容可由弹性布局属性决定。76.在步骤s12中，根据网格属性对网格子项进行位置布局。77.在步骤s13中，根据弹性布局属性对网格子项中的填充内容进行弹性布局。78.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，当用户使用手机打开短视频app中的信息浏览页面时，该手机将会加载该信息浏览页面的代码，在加载该代码的过程中，可先在该信息浏览页面之中生成多个网格子项，然后根据网格属性对每个网格子项进行位置布局，以确定每个网格子项在该信息浏览页面中的位置，并根据弹性布局属性对每个网格子项中的填充内容进行弹性布局，以确定每个网格子项之中显示的内容以及内容样式。79.在本公开实施例中，电子设备首先在页面之中生成多个网格子项，然后根据网格属性对网格子项进行位置布局，并根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。80.为了清楚说明上一实施例，在本公开实施例一种可能的实现方式中，如图3所示，根据网格属性对网格子项进行位置布局，可包括：81.步骤s31，对网格属性进行解析，以获取网格子项的位置信息，其中，位置信息包括网格子项的坐标属性。82.在本公开实施例中，可根据预设的解析算法对网格属性进行解析，以获取网格子项的位置信息，其中，预设的解析算法可根据实际情况进行标定。83.需要说明的是，该实施例中所描述的坐标属性可为grid属性中的{x:”,endx:”,y:”,endy:”,width:”,height:”}，也可以是div属性中的坐标配置，此处不做任何限定。84.步骤s32，根据坐标属性确定网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标。85.步骤s33，根据开始横坐标、结束横坐标、开始纵坐标和结束纵坐标，将网格子项设置到对应的位置。86.在本公开实施例中，在网格子项(即web元素)位置布局方面，可通过cssgrid布局实现，布局中每一个网格子项可简称为item(网格、项目)子项。根据gridcss属性rowstart(行开始)、rowend(行结束)、columnstart(列开始)和columnend(列结束)来设计网格子项的坐标属性{x:开始横坐标,endx:结束横坐标，y:开始纵坐标,endy:结束纵坐标}，用来表示网格子项所占据的位置和空间，如图2中的气泡图片的坐标属性可为{x:1,endx:3,y:1,endy:3}，其它展示的网格子项的位置都可以通过坐标来表示，因此网格子项位置布局中可以避免写一些样式属性(例如，csspostioon等样式属性)，从而简化了网格子项的位置布局，进而降低了网格子项布局的复杂度。87.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据上述预设的解析算法对网格属性进行解析，以获取网格子项的位置信息，并根据gridcss属性(即，坐标属性)rowstart、rowend、columnstart和columnend来设计网格子项的位置(坐标){x:开始横坐标,endx:结束横坐标，y:开始纵坐标,endy:结束纵坐标}，以确定每个网格子项在该信息浏览页面中的位置，然后将每个网格子项设置到对应的位置，从而简化了网格子项的位置布局，进而降低了网格子项布局的复杂度。88.进一步地，在本公开实施例一种可能的实现方式中，如图4所示，根据弹性布局属性对网格子项中的填充内容进行弹性布局，可包括：89.步骤41，根据弹性布局属性和填充内容，确定网格子项的布局信息，其中，填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种。90.需要说明的是，该实施例中所描述的描述信息和字段信息是组合信息，即描述和字段值，比如，参见图2，第一行第一列的文字类型的展示，姓名(描述信息)：张三(字段信息)。该实施例中所描述的渲染方式可包括普通、对象和数组，并定义了组件属性配置，通过属性配置即可完成一个元素的渲染，避免重复的样式和代码。该实施例中所描述的填充内容布局信息指的是，填充内容在网格子项(网格)中所展示的形态，例如，字体的样式、图片的大小及样式等。91.在一个实例中，如图2所示，填充内容可包括文字、链接、图片、时间、按钮和动画等，布局配置信息可包括字体的样式、图片的大小及样式、动画的大小及展示效果等，此处不做任何限定。由此，通过上述填充内容以及填充内容的布局信息，可以实现网格子项中内容的填充和样式渲染，从而可以避免或减少自定义样式，提高了相关页面设计人员的研发效率。92.步骤42，根据布局信息将填充内容填充至对应的网格子项。93.在本公开实施例中，在网格子项的内容填充和样式渲染的布局上，如图2所示，其中每一个小的展示区域(即，网格子项)都称为一个item子项。每个子项的展示部分可支持两部分内容的展示，即，描述和字段值，比如，第一行第一列的文字类型的展示，姓名(描述)：张三(字段值)，第一行第二列图片的展示，头像(描述)：图像图片(字段值)等，即冒号左侧的就是字段描述，右侧就是字段值。item子项可采用cssflex布局实现，默认是横向布局，支持了flex的基础属性配置，实现flex布局样式。同时还可基于文字、链接、图片、按钮等基础元素,结合实际的诉求，封装并实现常见的组件和功能，元素的样式内置到组件中，并定义了组件属性配置，通过属性配置即可完成一个网格子项的渲染，避免重复的样式和代码。94.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可采用cssflex布局，以根据弹性布局属性和填充内容，确定网格子项的布局信息，并根据该布局信息将填充内容填充至对应的网格子项。由此，可以避免或减少自定义样式，解决布局中比较繁琐的重复书写样式问题，并且基于css的flex布局可以解决grid子模块item本身的布局问题。95.需要说明的是，上述实施例中所描述的item的完整的配置属性，json(javascript，脚本语言)schema的定义如下：{name:’子项描述’,key:’子项字段’,type:’item类型’,layout:{flexdrection:’布局方向’,flex:’宽度flex值’,alignitems:’垂直方向对其方式’},griditem:{x:”,endx:”,y:”,endy:”,width:”,height:”}}。其中name表示该元素的描述信息，key表示要展示的元素对应的字段值。type是组件类型。layout是item子项的flex布局配置项,通过flex的布局方向flexdirection、垂直方向对其属性alignitems、宽度flex等实现子项的内容布局。griditem是item子项的grid坐标属性。96.在一个实例中，对于有边框的渲染需求，如果没有对其，视觉效果会很不好看，如图2所示，针对没对齐的问题，可自动补充空白的元素实现对齐如第一列最后一行，修改第一列的最后一行item子项(即，网格子项)的高度如第五列的图片本身高度是1，但是为了对其，可根据预设的算法自动修改图片item的griditem中的endy或者height，实现对齐，其中，预设的算法可根据实际情况进行标定。97.为了提升页面的视觉效果，在本公开实施例一种可能的实现方式中，如图5所示，根据网格属性对网格子项进行位置布局，还可包括：98.步骤51，根据网格属性确定多个网格子项之中的最大列高度。99.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据每个网格子项的网格属性，计算出图2所示的每列的高度，并获取其中的最大列高度，即多个网格子项之中的最大列高度。100.步骤52，遍历每个网格子项，以获取每个网格子项的实际位置。101.需要说明的是，该实施例中所描述的实际位置可为实际坐标信息。102.步骤53，根据每个网格子项的实际位置，确定待对齐的网格子项。103.为了清楚说明上一实施例，在本公开实施例一种可能的实现方式中，如图6所示，根据每个网格子项的实际位置，确定待对齐的网格子项，可包括：104.步骤61，获取每个网格子项的宽度值。105.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可根据每个网格子项的网格属性，计算出图2所示的每个网格子项的宽度值。106.步骤62，根据每个网格子项的实际位置和每个网格子项的宽度值，从多个网格子项中确定实际位置被占用的网格子项，并将实际位置被占用的网格子项作为待对齐的网格子项。107.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，电子设备可在获取到上述的每个网格子项的宽度值之后，可根据每个网格子项的实际位置和每个网格子项的宽度值，判断哪个网格子项被占用，并可从多个网格子项中确定实际位置被占用的网格子项，以及将实际位置被占用的网格子项作为待对齐的网格子项。108.步骤54，根据待对齐的网格子项的实际位置，获取待对齐的网格子项所在列的列高度。109.在本公开实施例中，电子设备在得到待对齐的网格子项之后，可先直接获取该待对齐的网格子项的实际位置，并根据该实际位置确定该待对齐的网格子项所在(处)的列，并获取该列的列高度。110.步骤55，响应于列高度小于最大列高度，对待对齐的网格子项进行高度补齐。111.在一个实例中，页面为短视频app中的信息浏览页面，且该短视频app安装于手机中，其中，参见图2，在加载该信息浏览页面代码的过程中，可先根据网格属性(例如，布局样式和配置)确定图2所示的每列的高度，并获取其中的最大列高度mheight，然后遍历每一列(即，每个每个网格子项)，计算子项item(即，网格子项)的实际位置{x，endx，y，endy，height,width}，此时可判断当前item的实际位置是否被前几列宽度较大的(例如，大于1的)item占用，如果是，则可根据该当前item的实际位置获取该当前item的所在列的列高度。然后可判断该当前item的所在列的列高度是否小于最大列高度，如果是，则说明需要对该当前item进行高度补齐，此时可对该当前item相邻(例如，上下相邻)的两项之间的空白，做自动填充空白item，如果该当前item是某一列的最后一项，则可根据坐标信息、iteminfo、自身高度height，列最大高度mheight，做高度补齐。由此，可实现布局元素(例如，网格子项)的自动化对齐，提升页面的视觉效果。112.进一步地，如果该当前item的所在列的列高度大于或等于最大列高度，则可不对该当前item进行高度补齐。113.本公开的实施例提供的页面的生成方法，电子设备首先在页面之中生成多个网格子项，然后根据网格属性对网格子项进行位置布局，并根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。114.图7是根据一示例性实施例示出的一种页面的生成方法框图。参照图7，该页面的生成装置70包括：生成模块71、布局模块72和内容填充模块73。115.其中，生成模块71被配置为在页面之中生成多个网格子项，其中，每个网格子项包括网格属性和弹性布局属性，网格属性用于描述网格子项的位置信息，弹性布局属性用于描述网格子项中的填充内容的布局配置信息。116.布局模块72被配置为根据网格属性对网格子项进行位置布局。117.内容填充模块73被配置为根据弹性布局属性对网格子项中的填充内容进行弹性布局。118.在本公开实施例一种可能的实现方式中，布局模块72具体被配置为：对网格属性进行解析，以获取网格子项的位置信息，其中，位置信息包括网格子项的坐标属性；根据坐标属性确定网格子项的开始横坐标、结束横坐标、开始纵坐标和结束纵坐标；根据开始横坐标、结束横坐标、开始纵坐标和结束纵坐标，将网格子项设置到对应的位置。119.在本公开实施例一种可能的实现方式中，内容填充模块73具体被配置为：根据弹性布局属性和填充内容，确定网格子项的布局信息，其中，填充内容包括文字、链接、图片、时间、动画和按钮中的一种或多种，布局信息包括描述信息、字段信息、组件类型和渲染方式中的多种；根据布局信息将填充内容填充至对应的网格子项。120.在本公开实施例一种可能的实现方式中，布局模块72还可包括：第一确定单元、第一获取单元、第二确定单元、第二获取单元和高度补齐单元。121.其中，第一确定单元，被配置为根据网格属性确定多个网格子项之中的最大列高度。122.第一获取单元，被配置为遍历每个网格子项，以获取每个网格子项的实际位置。123.第二确定单元，被配置为根据每个网格子项的实际位置，确定待对齐的网格子项。124.第二获取单元，被配置为根据待对齐的网格子项的实际位置，获取待对齐的网格子项所在列的列高度。125.高度补齐单元，被配置为响应于列高度小于最大列高度，对待对齐的网格子项进行高度补齐。126.在本公开实施例一种可能的实现方式中，第二确定单元，具体被配置为：获取每个网格子项的宽度值；根据每个网格子项的实际位置和每个网格子项的宽度值，从多个网格子项中确定实际位置被占用的网格子项，并将实际位置被占用的网格子项作为待对齐的网格子项。127.在实际使用时，本公开实施例提供的页面的生成装置，可以被配置在电子设备中，以执行前述页面的生成方法。因此，关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。128.本公开的实施例提供的页面的生成装置，首先通过生成模块在页面之中生成多个网格子项，然后通过布局模块根据网格属性对网格子项进行位置布局，最后通过内容填充模块根据弹性布局属性对网格子项中的填充内容进行弹性布局。由此，能够在实现页面元素的布局和渲染的同时，有效地减少页面基础元素布局和渲染的工作量。129.为了实现上述实施例，本公开还提出了一种电子设备。130.其中，该电子设备，包括处理器和用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述的页面的生成方法。131.为了实现上述实施例，本公开还提出了一种存储介质。132.其中，当存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。133.为了实现上述实施例，本公开还提供一种计算机程序产品。134.其中，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行上述的页面的生成方法。135.图8是根据一示例性实施例示出的一种电子设备框图。图8示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。136.如图8所示，电子设备80包括处理器81，其可以根据存储在只读存储器(rom，readonlymemory)82中的程序或者从存储器86加载到随机访问存储器(ram，randomaccessmemory)83中的程序而执行各种适当的动作和处理。在ram83中，还存储有电子设备80操作所需的各种程序和数据。处理器81、rom82以及ram83通过总线84彼此相连。输入/输出(i/o，input/output)接口85也连接至总线84。137.以下部件连接至i/o接口85：包括硬盘等的存储器86；以及包括诸如lan(局域网，localareanetwork)卡、调制解调器等的网络接口卡的通信部分87，通信部分87经由诸如因特网的网络执行通信处理；驱动器88也根据需要连接至i/o接口85。138.特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分87从网络上被下载和安装。在该计算机程序被处理器81执行时，执行本公开的方法中限定的上述功能。139.在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由电子设备80的处理器81执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd‑rom、磁带、软盘和光数据存储设备等。140.在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。141.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本技术旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本
技术领域：
：中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。142.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
