页面组件渲染方法、装置、电子设备及存储介质与流程

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


背景技术：

2.随着网页组件化的兴起，基于组件化思想开发的页面也越来越流行，目前许多客户端的页面都是通过组件化完成。
3.组件是页面上的视图，是组件化布局渲染的最小单位，页面中各个组件相互独立，目前，相关技术在页面进行组件渲染的过程中，对于一些需要依据视口定位的组件，例如，弹窗，悬浮按钮，难以实现依据视口布局组件，渲染过后页面组件也会随页面滚动而且页面大小与屏幕大小不匹配。
4.因此，如何提供一种依据视口定位布局组件的渲染方法是需要解决的技术问题。


技术实现要素：

5.有鉴于此，本发明的目的在于提供一种页面组件渲染方法、装置、电子设备及存储介质，用以提供一种依据视口定位布局组件的渲染方法，解决难以实现依据视口布局组件，渲染过后页面组件也会随页面滚动而且页面大小与屏幕大小不匹配的问题。
6.为了实现上述目的，本发明实施例采用的技术方案如下：
7.第一方面，本发明提供一种页面组件渲染方法，所述方法包括：启动运行渲染控制组件；其中，所述渲染控制组件对应有一个父级渲染组件和至少一个子渲染组件；所述父级渲染组件对应的页面尺寸为视口尺寸；所述视口尺寸表征用户可视区域的大小；所述子渲染组件用于在页面渲染至少一种页面组件；所述子渲染组件配置有固定定位属性；所述渲染控制组件与所述子渲染组件具有父子关系；控制所述渲染控制组件的子渲染组件依据所述固定定位属性和所述父级渲染组件对应的所述视口尺寸进行页面组件渲染。
8.可选地，启动运行渲染控制组件之前，还包括：依据业务组件，配置所述渲染控制组件以及所述渲染控制组件和所述业务组件的所述父级渲染组件；其中，所述业务组件对应所述页面；所述业务组件和所述渲染控制组件互为兄弟组件；将所述业务组件对应的深级渲染组件队列配置给所述渲染控制组件，以使所述渲染控制组件与所述深级渲染组件队列内的所述渲染组件具有父子关系；所述深级渲染组件队列中包含所述子渲染组件。
9.可选地，所述方法还包括：根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，所述子节点队列内具有至少一个所述子渲染组件和子渲染控制组件。
10.可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第一接口，在所述子节点队列中插入新的子渲染控制组件和/或新的子渲染组件，并返回新插入的子渲染控制组件或者子渲染组件对应的组件标识。
11.可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第二接口，在所述子节点队列中将所述渲染控制组件对应的子渲染控制组件和/或子渲染组件替换。
12.可选地，根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，包括：通过所述渲染控制组件的第三接口，在所述子节点队列中将所述渲染控制组件对应的至少一个子渲染控制组件和/或子渲染组件移除。
13.第二方面，本发明提供一种页面组件渲染装置，包括：启动模块，用于启动运行渲染控制组件；其中，所述渲染控制组件对应有一个父级渲染组件和至少一个子渲染组件；所述父级渲染组件对应的页面尺寸为视口尺寸；所述视口尺寸表征用户可视区域的大小；所述子渲染组件用于在页面渲染至少一种页面组件；所述子渲染组件配置有固定定位属性；所述渲染控制组件与所述子渲染组件具有父子关系；控制模块，用于控制所述渲染控制组件的子渲染组件依据所述固定定位属性和所述父级渲染组件对应的所述视口尺寸进行页面组件渲染。
14.可选地，页面组件渲染装置还包括：配置模块，用于：依据业务组件，配置所述渲染控制组件以及所述渲染控制组件和所述业务组件的所述父级渲染组件；其中，所述业务组件对应所述页面；所述业务组件和所述渲染控制组件互为兄弟组件；将所述业务组件对应的深级渲染组件队列配置给所述渲染控制组件，以使所述渲染控制组件与所述深级渲染组件队列内的所述渲染组件具有父子关系；所述深级渲染组件队列中包含所述子渲染组件。
15.可选地，页面组件渲染装置还包括：更新模块，用于：根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，所述子节点队列内具有至少一个所述子渲染组件和子渲染控制组件。
16.可选地，更新模块，用于具体通过所述渲染控制组件的第一接口，在所述子节点队列中插入新的子渲染控制组件和/或新的子渲染组件，并返回新插入的子渲染控制组件或者子渲染组件对应的组件标识。
17.可选地，更新模块，还用于具体通过所述渲染控制组件的第二接口，在所述子节点队列中将所述渲染控制组件对应的子渲染控制组件和/或子渲染组件替换。
18.可选地，更新模块，还用于具体通过所述渲染控制组件的第三接口，在所述子节点队列中将所述渲染控制组件对应的至少一个子渲染控制组件和/或子渲染组件移除。
19.第三方面，本发明提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器可执行所述机器可执行指令以实现第一方面所述的页面组件渲染方法。
20.第四方面，本发明提供一种存储介质，其上存储有机器可执行指令，所述机器可执行指令被处理器执行时实现第一方面所述的页面组件渲染方法。
21.本发明提供的一种页面组件渲染方法、装置、电子设备及存储介质，方法包括：启动运行渲染控制组件；其中，渲染控制组件对应有一个父级渲染组件和至少一个渲染组件；父级渲染组件对应的页面尺寸为视口尺寸；视口尺寸表征用户可视区域的大小；子渲染组件用于在页面渲染至少一种页面组件；子渲染组件配置有固定定位属性；渲染控制组件与子渲染组件具有父子关系；控制渲染控制组件的子渲染组件依据固定定位属性和父级渲染组件对应的视口尺寸进行页面组件渲染。与现有技术的区别在于：现有技术中，业务组件对
应的一些深层次的渲染组件在进行渲染时，只能依据只有业务组件根节点对应的页面大小为视口尺寸，此时渲染出来的页面可能只占据半个屏幕或者占据屏幕的一小部分，影响用户查看。本发明通过调整dom模型的内部结构，使得渲染组件可以依据其祖先节点对应父级渲染组件的视口尺寸以及固定定位属性实现依视口布局定位的效果，从而降低了现有技术框架中出现页面只占据半个占据屏幕的一小部分的风险。
22.为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
23.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
24.图1为本发明实施例提供的页面组件渲染方法的实现原理图；
25.图2为本发明实施例提供的一种页面组件渲染方法的示意性流程图；
26.图3为本发明实施例提供的一种页面对应的文档对象模型的树形结构示意图；
27.图4为本发明实施例提供的另一种页面组件渲染方法的示意性流程图之一；
28.图5为本发明实施例提供的另一种页面组件渲染方法的示意性流程图之二；
29.图6为本发明实施例提供的一种更新渲染控制组件配置的示意图；
30.图7为本发明实施例提供的一种页面组件渲染装置的功能模块图；
31.图8为本发明实施例提供的一种电子设备结构框图。
具体实施方式
32.下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
33.因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
34.需要说明的是，术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
35.随着网页组件化的兴起，基于组件化思想开发的页面也越来越流行，目前许多客户端的页面都是通过组件化完成。组件是页面上的视图，是组件化布局渲染的最小单位，页面中各个组件相互独立，目前，相关技术在页面进行组件渲染的过程中，对于一些需要依据
视口定位的组件，例如，弹窗，悬浮按钮，难以实现依据视口布局组件，渲染过后组件会随页面滚动且页面大小与屏幕大小不匹配。
36.因此，为了解决上述技术问题，本发明实施例提供一种依据视口定位布局页面组件的渲染方法，具体为：将页面对应的多个组件构成一个文档对象模型(documentobjectmodel，简称dom)，dom是一个树形结构模型。树的每个结点表示了一个html标签或标签内的文本项。在本发明实施例中，通过改变原始页面对应的dom树的内部结构，从而可以实现依据视口布局渲染一些在树形结构中层次较深的页面组件。
37.基于上述内容，本发明实施例提供的依据视口定位布局组件的渲染方法的实现思想为：在业务组件(页面)运行之前，通过重写注册组件(registercomponent)，为业务组件(根节点)注册一个兄弟节点和一个父节点，即虚拟dom节点和新根节点，重写之后的dom树的内部结构可以如图1所示，图1为本发明实施例提供的页面组件渲染方法的实现原理图，其中新根节点作为一个渲染组件，对应的页面大小正好为视口大小，然后将负责渲染一些深层次的页面组件的渲染组件(hostcomponent)也就是业务组件(根节点)对应的一些比较深层级的子节点，通过虚拟dom节点的接口，插入到虚拟dom节点内部，作为虚拟dom节点的子节点，虚然后控制虚拟dom节点的子节点可以实现依据视口布局渲染。
38.其中，上述的由注册组件是由react
‑
native的appregistry模块提供的一个接口，负责注册react
‑
native启动渲染所需的入口组件，入口组件是由开发者决定的业务组件。
39.基于上述思路，请参见图2，图2为本发明实施例提供的一种页面组件渲染方法的示意性流程图，该方法可以包括：
40.s23、启动运行渲染控制组件。
41.其中，上述的渲染控制组件可以对应有一个父级渲染组件，基于上述dom树形结构可知，渲染控制组件和父级渲染组件可以分别对应上述的“虚拟dom节点和新根节点”，父级渲染组件可以是预先配置的业务渲染组件，用于用户层界面渲染，该父级渲染组件对应的页面尺寸可以为视口尺寸，视口尺寸指得是设备上用户可视区域的大小。
42.其中，上述的渲染控制组件可以维护有一个子节点队列，该子节点队列内具有多个子渲染组件，这些子渲染组件均是业务组件对应的深级渲染组件，所谓深级渲染组件可以是与业务组件之间的层级关系超过3层的渲染组件。这些子渲染组件通过react
‑
native支持的固定定位属性就可以实现相对于视口布局。基于上述dom树形结构，渲染控制组件和子渲染组件之间具有父子关系，可以分别对应子节点和孙子节点，子渲染组件可以用于在页面渲染至少一种页面组件，也就是上述的“业务根节点比较深层级的子节点”，该页面组件可以是弹窗、悬浮按钮等形式的页面组件，子渲染组件可以配置有固定定位属性，以使渲染后的页面组件不会因为用户滑动页面而出现位置漂移的现象。
43.s25、控制渲染控制组件的子渲染组件依据固定定位属性的父级组件对应的视口尺寸对页面组件进行渲染。
44.可以理解的是，子渲染组件可以依据视口布局逻辑对页面组件进行渲染，视口布局逻辑指的是:当前节点可以相对于最接近当前节点的父节点或祖先节点的尺寸布局，基于此，当上述子渲染组件要渲染一个页面组件，可以依据渲染控制组件(子渲染组件的父节点)或者父级组件(子渲染组件的祖先节点)的视口尺寸进行布局，可见，父级组件对应的页面大小正好为视口大小，因此，子渲染组件可以实现依据视口渲染页面组件。
45.为了方便理解上述实现流程，下面将结合dom技术详细阐述。
46.首先请参见图3，图3为本发明实施例提供的一种页面对应的文档对象模型的树形结构示意图，其中，现有技术中的页面对应的dom模型如图3中虚线框所示，本发明中页面的dom模型如图3实线框内所示。
47.可以看出，在没有改变页面对应的dom模型的内部结构之前，dom模型可以如图3所示的虚线框所示，在这种模型结构下，假设要对业务组件的深层次渲染组件(例如第n层)进行渲染，那么依据视口布局逻辑，第n层渲染组件可以相对于最接近当前节点的父节点或祖先节点的尺寸布局，可知第n层渲染组件的父节点或祖先节点的尺寸并不是视口尺寸，但在目前的结构中，只有业务组件根节点对应的页面大小为视口尺寸，此时渲染出来的页面可能只占据半个屏幕或者占据屏幕的一小部分，影响用户查看。调整dom模型的内部结构如图3实线框内所示，使得父级渲染组件对应的尺寸并为视口尺寸，同时父级渲染组件还是第n层渲染组件的祖先节点，那么在进行渲染时，可以依据父级渲染组件对应的页视口尺寸和固定定位属性实现依视口布局定位的效果，避免出现页面只占据半个占据屏幕的一小部分。
48.本发明实施例提供的一种页面组件渲染方法，与现有技术的区别在于：现有技术中，业务组件对应的一些深层次的渲染组件在进行渲染时，只能依据只有业务组件根节点对应的页面大小为视口尺寸，此时渲染出来的页面可能只占据半个屏幕或者占据屏幕的一小部分，影响用户查看。本发明通过调整dom模型的内部结构，使得渲染组件可以依据其祖先节点对应父级渲染组件的视口尺寸以及固定定位属性实现依视口布局定位的效果，从而降低了现有技术框架中出现页面只占据半个占据屏幕的一小部分的风险。
49.可选地，为了实现上述依据视口布局定位渲染的目的，在执行上述实现流程之前，该方法还可以包括以下流程，参见图4，图4为本发明实施例提供的另一种页面组件渲染方法的示意性流程图之一；
50.s20、依据业务组件，配置渲染控制组件以及渲染控制组件和业务组件的父级渲染组件。
51.其中，上述的业务组件对应页面，业务组件和渲染控制组件互为兄弟组件。
52.s22、将业务组件对应的深级渲染组件队列配置给渲染控制组件，以使渲染控制组件与深级渲染组件队列内的渲染组件具有父子关系。
53.可以理解的是，所谓深级渲染组件为与业务组件之间的层级关系超过3层的渲染组件。对于业务组件对应的一些深层次的渲染组件，由于它们对应的父级组件或者祖先级组件对应的页面大小不是视口大小，所以在渲染的时候无法实现依据视口布局，但将这些深级渲染组件配置给渲染控制组件，以使渲染控制组件与这些渲染组件具有父子关系，那么在渲染时，这些深级渲染组件可以依据渲染控制组件的父级组件的视口大小实现依视口布局的效果。
54.可选地，为了适应更多类型的页面组件的渲染，在上述提出的渲染控制组件的基础上，本发明实施例还提供的另一种更新渲染控制组件配置的实现方式，参见图5，图5为本发明实施例提供的另一种页面组件渲染方法的示意性流程图之二，本发明实施例提供的页面组件渲染方法还可以包括以下流程：
55.s16、通过渲染控制组件提供的接口，更新渲染控制组件对应的子节点队列，该子
节点队列内具有至少一个子渲染组件和子渲染控制组件。
56.在一些可能的实现方式中，开发者可通过静态方法topview.getinstance(),获取渲染控制组件实例，实例通过渲染控制组件提供的各种接口，更新子节点队列内的成员。
57.例如，参见图6，图6为本发明实施例提供的一种更新渲染控制组件配置的示意图，本发明实施例中的渲染控制组件提供了增加(add)接口、替换(replace)接口和移除(remove)接口，其中，通过调用增加接口，可以在渲染控制组件的子节点队列内插入一个子节点，通过调用替换接口，可以将子节点队列内的其中一个子节点替换为另外一个子节点，通过移除接口，可以将子节点队列内的其中一个子节点移除。
58.需要说明的是，上述该增加或者替换或者移除的子节点既可以是带有渲染组件的子渲染控制组件也可以是子渲染组件节点。
59.基于上述示例，则上述步骤s16的一种可能的实现方式为：
60.s16a、通过渲染控制组件的第一接口，在子节点队列中插入新的子渲染控制组件和/或新的渲染组件，并返回新插入的子渲染控制组件或者渲染组件对应的组件标识。
61.可以理解的是，上述的第一接口可以为如图6所示的增加接口。
62.在一种可能的实现方式中，上述步骤s16的一种可能的实现方式为：
63.s16b、通过渲染控制组件的第二接口，在子节点队列中其中将渲染控制组件对应的子渲染控制组件和/或子渲染组件替换。
64.可以理解的是，上述的第二接口可以为如图6所示的替换接口。
65.在一种可能的实现方式中，上述步骤s16的另一种可能的实现方式为：
66.s16c、通过渲染控制组件的第三接口，在子节点队列中将渲染控制组件对应的至少一个子渲染控制组件和/或子渲染组件移除。
67.可以理解的是，上述的第三接口可以为如图6所示的移除接口。
68.可以理解的是，上述s16a、s16b和s16c可以同时执行，也可以根据实际的需求执行其中的任何一个步骤或者任何两个步骤，此处不做限定。
69.为了执行上述实施例及各个可能的方式中的相应步骤，下面给出一种页面组件渲染装置的实现方式，请参阅图7，图7为本发明实施例提供的一种页面组件渲染装置的功能模块图。需要说明的是，本实施例所提供的页面组件渲染装置70，其基本原理及产生的技术效果和上述实施例相同，为简要描述，本实施例部分未提及之处，可参考上述的实施例中相应内容。该页面组件渲染装置70包括：
70.启动模块701，用于启动运行渲染控制组件；其中，所述渲染控制组件对应有一个父级渲染组件和至少一个子渲染组件；所述父级组件对应的页面尺寸为视口尺寸；所述视口尺寸表征用户可视区域的大小；所述子渲染组件用于在页面渲染至少一种页面组件；所述子渲染组件配置有固定定位属性；所述渲染控制组件与所述子渲染组件具有父子关系；
71.控制模块702，用于控制渲染控制组件的子渲染组件依据固定定位属性和父级渲染组件对应的视口尺寸进行页面组件渲染。
72.可选地，页面组件渲染装置70还包括：配置模块，用于依据业务组件，配置所述渲染控制组件以及所述渲染控制组件和所述业务组件的所述父级渲染组件；其中，所述业务组件对应所述页面；所述业务组件和所述渲染控制组件互为兄弟组件；将所述业务组件对应的深级渲染组件队列配置给所述渲染控制组件，以使所述渲染控制组件与所述深级渲染
组件队列内的所述渲染组件具有父子关系；所述深级渲染组件队列中包含所述子渲染组件。
73.可选地，页面组件渲染装置70还包括：更新模块，用于：根据所述渲染控制组件提供的接口，更新所述渲染控制组件对应的子节点队列，所述子节点队列内具有至少一个所述子渲染组件和子渲染控制组件。
74.可选地，更新模块，具体用于：通过所述渲染控制组件的第一接口，在所述子节点队列中插入新的子渲染控制组件和/或新的子渲染组件，并返回新插入的子渲染控制组件或者子渲染组件对应的组件标识。
75.可选地，更新模块，还具体用于：通过所述渲染控制组件的第二接口，在所述子节点队列中将所述渲染控制组件对应的子渲染控制组件和/或子渲染组件替换。
76.可选地，更新模块，还具体用于：通过所述渲染控制组件的第三接口，在所述子节点队列中将所述渲染控制组件对应的至少一个子渲染控制组件和/或子渲染组件移除。
77.本发明实施例还提供一种电子设备，如图8，图8为本发明实施例提供的一种电子设备结构框图。该电子设备80包括通信接口801、处理器802和存储器803。该处理器802、存储器803和通信接口801相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器803可用于存储软件程序及模块，如本发明实施例所提供的页面组件渲染方法对应的程序指令/模块，处理器802通过执行存储在存储器803内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口801可用于与其他节点设备进行信令或数据的通信。在本发明中该电子设备80可以具有多个通信接口801。
78.其中，存储器803可以是但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread
‑
onlymemory，prom)，可擦除只读存储器(erasableprogrammableread
‑
onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread
‑
onlymemory，eeprom)等。
79.处理器802可以是一种集成电路芯片，具有信号处理能力。该处理器可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等；还可以是数字信号处理器(digitalsignalprocessing，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field－programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。
80.在一些可能的实施例中，上述页面组件渲染装置70可以包括至少一个可以软件或固件(firmware)的形式存储于存储器803中或固化在电子设备80的操作系统(operatingsystem，os)中的软件功能模块。处理器802用于执行存储器803中存储的可执行模块，例如页面组件渲染装置70所包括的软件功能模块及计算机程序等。
81.本发明实施例提供一种存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如前述实施方式中任一项页面组件渲染方法。该计算机可读存储介质可以是，但不限于，u盘、移动硬盘、rom、ram、prom、eprom、eeprom、磁碟或者光盘等各种可以存储程序代码的介质。
82.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何
熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。