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

本公开涉及计算机，具体涉及一种页面渲染方法、装置、电子设备及计算机存储介质。

背景技术：

1、随着计算机技术的不断发展，用户可以通过与客户端页面的多种交互操作，实现多种业务。例如，视频播放、图文阅读、地图查找、地图定位等。在开发客户端的过程中，开发人员可以设计页面展示元素、展示组件等信息，并将其渲染至前端页面，以便实现多种交互操作。

2、相关技术中，可以基于渲染引擎自身的基础组件实现简单的交互场景。例如，对于简单的图文渲染场景，可以基于渲染引擎自身的文本组件、图像组件等，利用自渲染方式实现图文信息的渲染。对于复杂的交互场景，由于渲染引擎自身不具备复杂的原生组件，因此，渲染引擎很难利用自渲染方式实现复杂交互场景，如视频、地图交互场景。

技术实现思路

1、鉴于上述问题，本公开提供了一种页面渲染方法、装置、电子设备及计算机存储介质。

2、根据本公开的第一个方面，提供了一种页面渲染方法，包括：

3、响应于接收到用于渲染目标页面的请求，确定渲染树中当前渲染节点的节点类型，其中，渲染树包括至少一个渲染节点，每个渲染节点用于渲染目标页面内的一个组件；

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、在本公开的实施例中，通过创建用于实现原生组件的原生渲染节点，使得渲染树中可以包括原生渲染节点，与渲染树对应的层级树中也包括原生渲染节点对应的纹理层节点，从而实现原生组件的渲染。此外，由于渲染时可以包括原生渲染节点和基础节点，因此，在利用渲染引擎进行渲染时，可以基于渲染树灵活控制原生组件与基础组件的层级关系，避免原生组件遮挡基础组件，从而实现原生组件的同层渲染。

技术特征：

1.一种页面渲染方法，包括：

2.根据权利要求1所述的方法，其中，所述调用原生系统将所述原生渲染节点待渲染的原生组件绘制在虚拟绘图表面，包括：

3.根据权利要求1或2所述的方法，其中，在将所述原生组件绘制在所述虚拟绘图表面之后，还包括：

4.根据权利要求3所述的方法，其中，所述根据与所述原生渲染节点对应的纹理层节点和所述虚拟绘图表面，在目标页面中渲染出所述原生组件，包括：

5.根据权利要求4所述的方法，其中，所述根据所述纹理层节点从所述消息队列中获取所述虚拟绘图表面，包括：

6.根据权利要求4所述的方法，其中，所述将所述虚拟绘图表面中的原生组件绘制在实际绘图表面，包括：

7.根据权利要求1所述的方法，其中，在调用原生系统，将与所述当前原生渲染节点对应的原生组件绘制在虚拟绘图表面之前，还包括：

8.根据权利要求1所述的方法，其中，所述原生组件上层覆盖有交互组件，所述交互组件用于通过与用户之间的交互操作控制所述原生组件；所述方法还包括：

9.一种页面渲染装置，包括：

10.一种电子设备，包括：

11.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～8中任一项所述的方法。

12.一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现根据权利要求1～8中任一项所述的方法。

技术总结
本公开提供了一种页面渲染方法、装置、电子设备及计算机存储介质方法，可以应用于计算机技术领域。该方法包括：响应于接收到用于渲染目标页面的请求，确定渲染树中当前渲染节点的节点类型，其中，渲染树包括至少一个渲染节点，每个渲染节点用于渲染目标页面内的一个组件；在确定节点类型为原生渲染节点的情况下，调用原生系统，将原生渲染节点待渲染的原生组件绘制在虚拟绘图表面，其中，原生系统表征用于展示目标页面的终端系统；以及根据与原生渲染节点对应的纹理层节点和虚拟绘图表面，在目标页面中渲染出原生组件，其中，纹理层节点用于存储原生渲染节点的纹理信息。

技术研发人员：李海峰
受保护的技术使用者：北京沃东天骏信息技术有限公司
技术研发日：
技术公布日：2024/12/5