[发明专利]页面组件渲染方法、装置、电子设备及存储介质

说明书

本发明提供的一种页面组件渲染方法、装置、电子设备及存储介质，方法包括：启动运行渲染控制组件；其中，渲染控制组件对应有一个父级渲染组件和至少一个子渲染组件，父级渲染组件对应的页面尺寸为视口尺寸；视口尺寸表征用户可视区域的大小；子渲染组件用于在页面渲染至少一种页面组件；子渲染组件配置有固定定位属性；渲染控制组件与子渲染组件具有父子关系；控制渲染控制组件的子渲染组件依据固定定位属性和父级渲染组件对应的视口尺寸进行页面组件渲染。本发明使得渲染组件可以依据其祖先节点对应父级渲染组件的视口尺寸以及固定定位属性实现依视口布局定位的效果，从而降低了现有技术框架中出现页面只占据半个占据屏幕的一小部分的风险。

技术领域

本发明涉及客户端页面技术领域，具体而言，涉及一种页面组件渲染方法、装置、电子设备及存储介质。

背景技术

随着网页组件化的兴起，基于组件化思想开发的页面也越来越流行，目前许多客户端的页面都是通过组件化完成。

组件是页面上的视图，是组件化布局渲染的最小单位，页面中各个组件相互独立，目前，相关技术在页面进行组件渲染的过程中，对于一些需要依据视口定位的组件，例如，弹窗，悬浮按钮，难以实现依据视口布局组件，渲染过后页面组件也会随页面滚动而且页面大小与屏幕大小不匹配。

因此，如何提供一种依据视口定位布局组件的渲染方法是需要解决的技术问题。

发明内容

有鉴于此，本发明的目的在于提供一种页面组件渲染方法、装置、电子设备及存储介质，用以提供一种依据视口定位布局组件的渲染方法，解决难以实现依据视口布局组件，渲染过后页面组件也会随页面滚动而且页面大小与屏幕大小不匹配的问题。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明提供一种页面组件渲染方法，所述方法包括：启动运行渲染控制组件；其中，所述渲染控制组件对应有一个父级渲染组件和至少一个子渲染组件；所述父级渲染组件对应的页面尺寸为视口尺寸；所述视口尺寸表征用户可视区域的大小；所述子渲染组件用于在页面渲染至少一种页面组件；所述子渲染组件配置有固定定位属性；所述渲染控制组件与所述子渲染组件具有父子关系；控制所述渲染控制组件的子渲染组件依据所述固定定位属性和所述父级渲染组件对应的所述视口尺寸进行页面组件渲染。

可选地，启动运行渲染控制组件之前，还包括：依据业务组件，配置所述渲染控制组件以及所述渲染控制组件和所述业务组件的所述父级渲染组件；其中，所述业务组件对应所述页面；所述业务组件和所述渲染控制组件互为兄弟组件；将所述业务组件对应的深级渲染组件队列配置给所述渲染控制组件，以使所述渲染控制组件与所述深级渲染组件队列内的所述渲染组件具有父子关系；所述深级渲染组件队列中包含所述子渲染组件。

可选地，所述方法还包括：根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，所述子节点队列内具有至少一个所述子渲染组件和子渲染控制组件。

可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第一接口，在所述子节点队列中插入新的子渲染控制组件和/或新的子渲染组件，并返回新插入的子渲染控制组件或者子渲染组件对应的组件标识。

可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第二接口，在所述子节点队列中将所述渲染控制组件对应的子渲染控制组件和/或子渲染组件替换。

可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第三接口，在所述子节点队列中将所述渲染控制组件对应的至少一个子渲染控制组件和/或子渲染组件移除。