一种页面绘制方法、装置、计算机设备和存储介质与流程

1.本公开涉及计算机技术领域，具体而言，涉及一种页面绘制方法、装置、计算机设备和存储介质。


背景技术：

2.热更新作为应用程序(application，app)开发者常用的一种更新方式。简单来说，就是在用户下载安装app之后，打开app时遇到的即时更新。针对游戏类app而言，对游戏页面的更新属于常见的热更新内容。但常见的针对游戏类app的更新方案，要么存在开发复杂、成本高的问题，要么存在过度依赖开发框架的原生能力，导致无法实现及时热更新的问题。


技术实现要素：

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.所述生成模块，在所述基于所述页面代码，在所述目标开发端生成目标页面组件，并根据所述组件层叠样式信息，生成所述目标页面组件对应的键值对信息时，用于：
38.基于所述页面代码中与所述原生功能相关的子页面代码，在所述目标开发端生成所述目标视图组件，并根据所述组件层叠样式信息中的视图层叠样式信息，生成所述目标视图组件对应的第一键值对信息；
39.所述创建模块，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，用于：
40.在所述游戏引擎中，创建所述目标视图组件对应的第一原生对象组件；其中，所述第一原生对象组件具有所述原生功能。
41.在一种可能的实施方式中，所述目标页面组件还包括与在所述游戏引擎中待创建功能相匹配的目标图像组件，所述键值对信息还包括所述目标图像组件对应的第二键值对信息；
42.所述生成模块，在所述基于所述页面代码，在所述目标开发端生成目标页面组件，并根据所述组件层叠样式信息，生成所述目标页面组件对应的键值对信息时，还用于：
43.基于所述页面代码中与所述待创建功能相关的子页面代码，在所述目标开发端生成所述目标图像组件，并根据所述组件层叠样式信息中的图像属性信息，生成所述目标图像组件对应的所述第二键值对信息；
44.所述创建模块，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，还用于：
45.在所述游戏引擎中，创建所述目标图像组件对应的第二原生对象组件；其中，所述第二原生对象组件具有所述待创建功能；
46.将所述第一原生对象组件和所述第二原生对象组件合并为所述原生对象组件。
47.在一种可能的实施方式中，所述创建模块，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，用于：
48.利用连接所述游戏引擎和所述目标开发端的中间通信层中的信息调用方式，调用所述游戏引擎中的组件创建方法，以利用所述游戏引擎的组件创建功能，创建所述目标页面组件对应的原生对象组件。
49.在一种可能的实施方式中，所述绘制模块，在所述按照所述组件布局信息，绘制包括各个所述原生对象组件的目标页面时，用于：
50.调用所述游戏引擎中的页面绘制方法，按照所述组件布局信息指示的位置信息和组件尺寸信息，绘制包括各个所述原生对象组件的目标页面。
51.在一种可能的实施方式中，所述装置还包括：
52.更新模块，用于在所述按照所述组件布局信息，绘制包括各个所述原生对象组件的目标页面之后，确定所述目标页面所属的目标游戏；
53.将所述目标页面下发至所述目标游戏对应的各个游戏客户端，以使各个所述游戏客户端在打开所述目标游戏时，根据获取的目标页面更新本地游戏页面。
54.在一种可能的实施方式中，所述创建模块，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件之后，还用于：
55.将所述原生对象组件反馈至所述目标开发端，以使所述目标开发端获取所述目标页面组件对应的原生对象组件的信息。
56.第三方面，本公开可选实现方式还提供一种计算机设备，处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述处理器用于执行所述存储器中存储的机器可读指令，所述机器可读指令被所述处理器执行时，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
57.第四方面，本公开可选实现方式还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
58.关于上述页面绘制装置、计算机设备、及计算机可读存储介质的效果描述参见上述页面绘制方法的说明，这里不再赘述。
59.本公开实施例提供的页面绘制方法、装置、计算机设备和存储介质，由于目标开发端具有成熟的界面开发框架，通过在目标开发端开发页面代码，降低了代码开发的难度和成本。在获取在目标开发端开发的页面代码和组件层叠样式信息之后，通过先生成目标页面组件的方式，可以实现在目标开发端对页面代码的转换；通过生成键值对信息的方式，可以实现在目标开发端对组件层叠样式信息的结构化存储。通过在游戏引擎创建目标页面组件对应的原生对象组件，可以实现将目标页面组件映射至游戏引擎，既降低了对游戏引擎的原始能力的依赖，又能够完成目标开发端和游戏引擎的组件同步。通过将键值对信息解析为具有目标数据结构的组件布局信息，实现了将目标开发端的键值对信息，转换为游戏引擎能够处理的组件布局信息，最后基于组件布局信息，可以准确绘制出包括各个原生对象组件的目标页面，实现及时地对页面进行热更新。
60.为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
61.为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
62.图1示出了本公开实施例所提供的一种页面绘制方法的流程图；
63.图2示出了本公开实施例所提供的一种页面绘制系统的示意图；
64.图3示出了本公开实施例所提供的一种react开发框架的示意图；
65.图4示出了本公开实施例所提供的一种创建第一原生对象组件和第二原生对象组件的示意图；
66.图5示出了本公开实施例所提供的一种页面绘制方法的具体实施流程图；
67.图6示出了本公开实施例所提供的另一种页面绘制方法的示意图；
68.图7示出了本公开实施例所提供的一种页面绘制装置的示意图；
69.图8示出了本公开实施例所提供的一种计算机设备的结构示意图。
具体实施方式
70.为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
71.另外，本公开实施例中的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。
72.在本文中提及的“多个或者若干个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
73.经研究发现，针对游戏类app页面的热更新而言，常见的方式包括两种：第一种为利用脚本语言进行热更新，如使用xlua脚本语言、puerts脚本语言等。但是该方式缺少成熟的用户界面(user interface，ui)框架，提高了开发的复杂性和成本。第二种为使用搭建好的前端框架进行热更新，如使用react、weex等框架。这种方式虽然可以实现与用户的良好交互，降低了开发复杂性，但不同的框架具有不同的原生能力，在进行热更新时产生了过度依赖原生能力的问题，导致无法实现及时热更新。
74.基于上述研究，本公开提供了一种页面绘制方法、装置、计算机设备和存储介质，由于目标开发端具有成熟的界面开发框架，通过在目标开发端开发页面代码，降低了代码开发的难度和成本。在获取在目标开发端开发的页面代码和组件层叠样式信息之后，通过先生成目标页面组件的方式，可以实现在目标开发端对页面代码的转换；通过生成键值对信息的方式，可以实现在目标开发端对组件层叠样式信息的结构化存储。通过在游戏引擎创建目标页面组件对应的原生对象组件，可以实现将目标页面组件映射至游戏引擎，既降低了对游戏引擎的原始能力的依赖，又能够完成目标开发端和游戏引擎的组件同步。通过将键值对信息解析为具有目标数据结构的组件布局信息，实现了将目标开发端的键值对信息，转换为游戏引擎能够处理的组件布局信息，最后基于组件布局信息，可以准确绘制出包括各个原生对象组件的目标页面，实现及时地对页面进行热更新。
75.针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。
76.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
77.需要说明的是，本公开实施例中所提到的特定名词包括：
78.yoga：一种ui跨平台布局引擎；
79.js引擎：泛指客户端javascript的引擎；
80.react native：一种跨平台引擎，react是用于构建用户界面的javascript库；
81.xlua：游戏中基于lua语言的热更新框架；
82.puerts：游戏中基于ts语言的热更新框架；
83.weex：一个构建移动端跨平台ui框架；
84.typescript：简称ts，是微软开发的一个开源的编程语言，通过在javascript的基础上添加静态类型定义构建而成。
85.为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面绘制方法进行详细介绍，本公开实施例所提供的页面绘制方法的执行主体一般为具有一定计算能力的终端设备或其他处理设备，其中终端设备可以为用户设备(user equipment，ue)、移动设备、用户终端、终端、个人数字处理设备(personal digital assistant，pda)、手持设备、计算机设备等；在一些可能的实现方式中，该页面绘制方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
86.下面以执行主体为服务器为例对本公开实施例提供的页面绘制方法加以说明。
87.如图1所示，为本公开实施例提供的一种页面绘制方法的流程图，可以包括以下步骤：
88.s101：获取在目标开发端开发的页面代码和组件层叠样式信息；目标开发端为基于目标开发语言进行页面开发的一端。
89.这里，目标开发语言可以为javascript(简称js)代码语言，目标开发端可以为具有javascript代码开发能力的任一端，能够利用javascript代码语言实现页面的开发。具体的，目标开发端可以为js端。示例性的，目标开发端可以为react开发框架、js开发平台、ts开发平台等。页面代码为与待创建的目标页面相关的代码，其中可以包括页面组件代码和其他页面代码。页面组件代码即为目标页面中的页面组件的代码，目标页面中的页面组件可以称为js组件，页面中的组件可以包括一个或多个，不同的js组件可以具有不同的能力。例如，js组件可以包括视频播放组件、界面刷新组件、界面虚拟化组件等等。
90.组件层叠样式信息能够表征js组件的尺寸、在页面中的位置等与布局相关的信息。具体的，组件层叠样式信息可以用层叠样式表风格(css style)表示。
91.如图2所示，为本公开实施例提供的一种页面绘制系统的示意图，其中，本公开实施例提供的页面绘制方法可以基于该页面绘制系统实现。页面绘制系统中的目标开发端(js端)可以包括react开发框架、js开发平台、ts开发平台，jsx是前端框架层，通过自定义主机配置(hostconfig)对外提供完整的js开发能力，针对利用js端开发的页面代码，jsx中的框架核心(react core)用于运行react开发框架，jsx中的调节器reconciler负责根据页面代码生成虚拟文档对象模型树(即dom tree)，以及调用代码运行的生命周期函数。jsx中的组件配置功能(unx hostconfig)和主机组件功能(hostcomponemts)，用于基于reconciler生成的dom进行js组件的生成。其中，unx hostconfig功能用于进行功能配置项
的定义，hostcomponemts功能用于进行数组的组件的定义。利用jsx中各个部分对在目标开发端获取的页面代码进行处理，能够生成目标页面组件。
92.由于目标开发端和下文中的native不能直接进行通信，所以需要利用基于quickjs或v8引擎运行的puerts作为中间通信层，实现jsx和native(泛指开发平台)的通信。puerts具有跨语言调用能力，可以先对目标开发端的数据进行格式转换，转换为native所支持的数据格式，之后，将格式转换后的数据发送至native，以供native使用。
93.quickjs是一个小型并且可嵌入的javascript引擎；v8是一个可独立运行的javascript引擎。native具体可以为unity、unreal、webgl等游戏引擎中的任一个，用于生成游戏中的目标页面。其中，unity是一种游戏引擎，可以用于进行游戏页面的开发；unreal是另一种游戏引擎，也可以用于进行游戏页面的开发；webgl(web网页图形库，全称web graphics library)是一种3d绘图协议，可以用于进行页面开发。
94.puerts中的弯曲功能(warp)和映射功能(reflect)，均为调用功能，可以支持不同的调用方式，用于对native进行调用。warp功能用于进行静态调用，reflect功能用于进行反射调用。puerts中的箱子功能(box)和开箱功能(unbox)，均用于进行数据传输。box功能用于对待传输的数据进行打包传输，unbox功能用于对打包后的数据进行拆封。
95.native中的游戏对象扩展功能(gameobjectextensions)，是一种用于对native的原生功能组件进行功能扩展的功能，native中的组件扩展功能(components extensions)，用于扩展具有其他功能的组件，通过将利用gameobjectextensions扩展的原始功能组件和components extensions扩展的其他功能组件进行组合，既可以在native中得到与目标页面组件相匹配的原生对象组件，该原生对象组件具有与目标页面组件一样的功能并在前端进行使用。native中的rx节点(rxnode)用于存储原生对象组件的尺寸、在页面中的位置等布局信息。yoga布局(yoga layout)用于根据rx节点中存储的信息，绘制包括原生对象组件的目标页面。
96.示例性的，以目标开发端为上述的react开发框架为例，先对react开发框架进行说明。其中，react框架分为react应用、react调节器(react reconciler)和自定义渲染三部分。react应用具有与开发平台无关的js封装特性，react reconciler负责生成虚拟dom tree，调用生命周期函数。自定义渲染用于在react native(一种跨平台移动应用开发框架)、react dom(一种用于开发h5页面的游戏引擎)、react unity(一种适用于ios操作系统和安卓android操作系统的游戏引擎)、react unreal(一种适用于ios操作系统的游戏引擎)、react webgl(一种基于3d绘图协议的游戏引擎)等游戏引擎上进行页面渲染，具体的，可以在任一游戏引擎上执行真实的dom操作。如图3所示，为本公开实施例提供的一种react开发框架的示意图。
97.步骤s101在具体实施时，可以先获取用户根据页面创建需求，在目标开发端开发的页面代码和组件层叠样式信息，以及确定出页面代码对应的目标页面组件的组件层叠样式信息。
98.s102：基于页面代码，在目标开发端生成目标页面组件，并根据组件层叠样式信息，生成目标页面组件对应的键值对信息；目标页面组件为基于目标开发语言生成的。
99.这里，目标页面组件即为目标开发端创建的组件，是一种基于目标开发语言生成的组件。示例性的，目标页面组件具体可以为js组件，在目标开发端(js端)为react的情况
下，目标页面组件即为react组件。
100.具体实施时，在获取到页面代码之后，可以运行页面代码，代码运行后将调用jsx中的react组件创建方法(react.createelement)方法，基于代码运行的结果以及目标开发语言(javascript)在目标开发端生成目标页面组件。同时，可以对组件层叠样式信息进行数据结构的转换，转换为具有键值对结构(key—value结构)的键值对信息并存储在目标开发端。
101.s103：在游戏引擎创建目标页面组件对应的原生对象组件；原生对象组件为基于游戏引擎对应的引擎开发语言生成的。
102.这里，游戏引擎可以为native包括的unity引擎、unreal引擎、webgl引擎中的任一种。引擎开发语言即为游戏引擎所支持使用的代码开发语言。原生对象组件即为基于游戏引擎对应的引擎开发语言，在游戏引擎创建的、与目标页面组件具有相同功能的组件。
103.在一种实施例中，针对s103，可以按照以下步骤实施：
104.利用连接游戏引擎和目标开发端的中间通信层中的信息调用方式，调用游戏引擎中的组件创建方法，以利用游戏引擎的组件创建功能，创建目标页面组件对应的原生对象组件。
105.这里，中间通信层可以为上述puerts。中间通信层中的信息调用方式可以为基于上述warp功能或者上述reflcet功能开发的调用方式。组件创建方法即为创建unx游戏对象(createunxgameobject)方法；其中，createunxgameobject方法，能够用于在游戏引擎中创建组件。
106.以游戏引擎为unity引擎为例，可以利用puerts中的信息调用方式，调用unity中的createunxgameobject方法，利用createunxgameobject方法调用unity组件创建方法(即unity引擎.游戏对象(unityengine.gameobject)方法)，利用unityengine.gameobject方法，在unity引擎中创建目标页面组件对应的原生对象组件。
107.在一种实施例中，目标页面组件可以包括与游戏引擎的原生功能相匹配的目标视图组件。具体的，在目标页面组件为js页面组件的情况下，目标视图组件可以为js视图(js view)组件，键值对信息可以包括目标视图组件对应的第一键值对信息。
108.针对上述s102，可以基于页面代码中与原生功能相关的子页面代码，在目标开发端生成目标视图组件，并根据组件层叠样式信息中的视图层叠样式信息，生成目标视图组件对应的第一键值对信息。
109.其中，视图层叠样式信息即为与js view组件相关的层叠样式信息。原生功能可以为游戏引擎中的基础组件具有的功能。
110.示例性的，可以先确定游戏引擎所具有的各个原有功能，并利用react.createelement方法调用实例创建(createinstance)方法，利用createinstance方法，在react端生成用于创建react组件的react实例。之后，可以利用react实例，运行页面代码中与原生功能相关的子页面代码，并基于运行结果，在react端生成js view组件。同时，可以确定组件层叠样式信息中的视图层叠样式信息，利用react实例将视图层叠样式信息解析为具有键值对结构的键值对信息，将其作为js view组件的第一键值对信息并存储在react端。
111.进一步的，针对s103，在得到目标视图组件和第一键值对信息之后，可以在游戏引
擎中，创建目标视图组件对应的第一原生对象组件；其中，第一原生对象组件具有原生功能。第一原生对象组件可以使用unity游戏对象(unity gameobject)表示。
112.这里，第一原生对象组件为在游戏引擎中创建的、与目标视图组件(具体为js view组件)具有相同功能的组件，第一原生对象组件具有的功能，即为js view组件在游戏引擎所匹配的功能。示例性的，第一原生对象组件可以为游戏引擎中的基础组件。
113.具体实施时，可以利用puerts中的信息调用方式，调用unity引擎中的createunxgameobject方法，利用createunxgameobject方法调用unity组件创建方法(即unity引擎.游戏对象(unityengine.gameobject)方法)，利用unityengine.gameobject方法，在unity引擎中创建js view组件对应的第一原生对象组件(unity gameobject组件)。
114.在一种实施例中，在游戏引擎创建目标页面组件对应的原生对象组件之后，还可以将原生对象组件反馈至目标开发端，以使目标开发端获取目标页面组件对应的原生对象组件的信息。
115.示例性的，在unity引擎中创建js view组件对应的unity gameobject组件之后，可以将unity gameobject组件反馈至react端，以使在react端开发页面代码的用户，获取已经生成原生对象组件的信息。
116.在一种实施例中，目标页面组件还包括与在游戏引擎中待创建功能相匹配的目标图像组件。具体的，在目标页面组件为js页面组件的情况下，目标图像组件可以为js图像(js image)组件，键值对信息还包括目标图像组件对应的第二键值对信息。
117.这里，待创建功能可以为游戏引擎还未开发的功能，是一种新创建的功能。
118.针对上述s102，可以基于页面代码中与待创建功能相关的子页面代码，在目标开发端生成目标图像组件，并根据组件层叠样式信息中的图像属性信息，生成目标图像组件对应的第二键值对信息。
119.其中，图像属性信息即为与js image组件相关的层叠样式信息。
120.示例性的，在利用createinstance方法，在react端生成用于创建react组件的react实例之后，可以利用react实例，运行页面代码中与待创建功能相关的子页面代码，并基于运行结果，在react端创建js image组件。同时，可以确定组件层叠样式信息中的图像属性信息，利用react实例将图像属性信息解析为具有键值对结构的键值对信息，将其作为js image组件的第二键值对信息并存储在react端。
121.进一步的，针对s103，在得到目标图像组件和第二键值对信息之后，可以在游戏引擎中，创建目标图像组件对应的第二原生对象组件；其中，第二原生对象组件具有待创建功能；然后，可以将第一原生对象组件和第二原生对象组件合并为原生对象组件。
122.这里，第二原生对象组件为在游戏引擎中创建的、与目标图像组件具有相同功能的组件。示例性的，第二原生对象组件可以为在游戏引擎中创建的、与js image组件具有相同功能的组件。第二原生对象组件可以使用unity图像(unity image)组件表示。
123.具体实施时，同样可以利用puerts中的信息调用方式，调用unity中的createunxgameobject方法，利用createunxgameobject方法调用unity组件创建方法(即unity引擎.游戏对象(unityengine.gameobject)方法)，利用unityengine.gameobject方法，在unity引擎中创建js image组件对应的第二原生对象组件(unity image组件)。
124.进一步的，在得到第一原生对象组件和第二原生对象组件之后，还可以将第一原
生对象组件和第二原生对象组件进行合并，从而得到目标页面组件对应的原生对象组件。
125.可理解的，在得到将第一原生对象组件和第二原生对象组件进行合并，得到原生对象组件之后，可以将合并后的原生对象组件反馈至目标开发端，以使目标开发端获取目标页面组件对应的原生对象组件的信息。
126.如图4所示，为本公开实施例提供的一种创建第一原生对象组件和第二原生对象组件的示意图。在得到页面代码之后，可以先基于页面代码，在目标开发端同时生成js view组件和js image组件，之后，可以按照上述实施例中提供的方式，在游戏引擎中创建js view组件对应的第一原生对象组件(unity gameobject组件)，以及在游戏引擎中创建js image组件对应的第二原生对象组件(unity image组件)。
127.在一种可能的实施方式中，在图4中，在得到页面代码之后，可以先基于页面代码，在目标开发端生成js view组件，并按照上述实施例中提供的方式，在游戏引擎中创建js view组件对应的unity gameobject组件。之后，可以再基于页面代码，在目标开发端生成js image组件，并按照上述实施例中提供的方式，在游戏引擎中创建js image组件对应的unity image组件。
128.s104：将在游戏引擎创建的各个原生对象组件分别对应的键值对信息，解析为具有目标数据结构的组件布局信息；目标数据结构为与游戏引擎的页面布局引擎相匹配的数据结构。
129.这里，页面代码中可以包括一个或多个目标页面组件对应的代码。在页面代码中包括多个目标页面组件对应的代码时，针对每个目标页面组件对应的代码，均可以按照上述各实施例介绍的步骤，生成该目标页面组件对应的原生对象组件。
130.游戏引擎的页面布局引擎可以为yoga引擎。目标数据结构即为yoga引擎所能处理的信息具有的数据结构。组件布局信息用于表征各个原生对象组件在目标页面中的尺寸、位置等布局信息，为yoga引擎所能处理的信息。
131.具体实施时，针对每个原生对象组件，可以将利用yoga引擎中的布局信息计算方法(updateyogaprops方法)，对该原生对象组件的键值对信息进行解析，得到具有目标数据结构的组件布局信息。在得到各个原生对象组件的组件布局信息之后，可以将各个原生对象组件的组件布局信息，分别存储至每个原生对象组件对应的rxnode节点中。
132.这里，在原生对象组件由第一原生对象组件和第二原生对象组件组成的情况下，可以在得到第一原生对象组件之后，先利用updateyogaprops方法，将第一原生对象组件的第一键值对信息，解析为具有目标数据结构的第一布局信息。然后在得到第二原生对象组件之后，再利用updateyogaprops方法，将第二原生对象组件的第二键值对信息，解析为具有目标数据结构的第二布局信息。最后，可以在将第一原生对象组件和第二原生对象组件合并为原生对象组件之后，将第一布局信息和第二布局信息合并为组件布局信息。
133.或者，也可以在将第一原生对象组件和第二原生对象组件合并为原生对象组件之后，将第一原生对象组件的第一键值对信息和第二原生对象组件的第二键值对信息，合并为该原生对象组件的键值对信息。之后，利用updateyogaprops方法，将该键值对信息解析为组件布局信息。
134.另外，在页面代码中包括多个目标页面组件对应的代码时，可以按照上述各实例的步骤，依次在游戏引擎创建每个目标页面组件对应的原生对象组件，并在每个原生对象
组件创建完成后，就利用updateyogaprops方法，将该原生对象组件的键值对信息解析为组件布局信息。示例性的，在目标页面组件包括目标页面组件1和目标页面组件2的情况下，可以先在游戏引擎创建目标页面组件1对应的原生对象组件1，并在原生对象组件1创建完成的情况下，利用updateyogaprops方法，将原生对象组件1的键值对信息解析为组件布局信息并存储。之后，可以在游戏引擎创建目标页面组件2对应的原生对象组件2，并在原生对象组件2创建完成的情况下，利用updateyogaprops方法，将原生对象组件2的键值对信息解析为组件布局信息并存储。
135.或者，在页面代码中包括多个目标页面组件对应的代码时，可以在按照上述各实例的步骤，创建了每个目标页面组件对应的原生对象组件之后，利用updateyogaprops方法，统一将各个原生对象组件的键值对信息解析为组件布局信息。示例性的，在目标页面组件包括目标页面组件1和目标页面组件2的情况下，可以先在游戏引擎创建目标页面组件1对应的原生对象组件1，以及创建目标页面组件2对应的原生对象组件2。之后，可以利用updateyogaprops方法，将原生对象组件1的键值对信息解析为组件布局信息并存储，同时可以将原生对象组件2的键值对信息解析为组件布局信息并存储。
136.s105：按照组件布局信息，绘制包括各个原生对象组件的目标页面。
137.示例性的，在各个目标页面组件对应的原生对象组件均创建完成之后，可以响应于目标开发端(即js端)触发渲染发方法(resetaftercommit方法)，利用resetaftercommit方法调用unity端(unity引擎)的布局计算方法(calculatelayout方法)，利用calculatelayout方法，在各个原生对象组件对应的rxnode节点中，分别获取每个原生对象组件对应的组件布局信息，并根据每个组件布局信息，确定每个原生对象组件在目标页面中的组件尺寸信息和位置信息。之后，可以按照每个原生对象组件在目标页面中的组件尺寸信息和位置信息，绘制出包括各个原生对象组件的目标页面。
138.此外，若目标页面为已经生成的页面，则可以获取该页面中已经存在的各个已生成对象组件，根据各个已生成对象组件的组件布局信息和各个原生对象组件的组件布局信息，将各个原生对象组件添加在该页面中，对并对各个已生成对象组件的位置进行调整，从而实现对页面的更新，得到更新后的目标页面。
139.在一种实施例中，针对绘制目标页面的步骤，可以调用游戏引擎中的页面绘制方法(即ygattachnodesfromviewhierachy方法)，按照各个原生对象组件的组件布局信息，分别指示的位置信息和组件尺寸信息，绘制包括各个原生对象组件的目标页面。
140.如图5所示，为本公开实施例提供的一种页面绘制方法的具体实施流程图，可以包括如下步骤：
141.s501：获取在目标开发端开发的页面代码和组件层叠样式信息。
142.s502：基于页面代码中与原生功能相关的子页面代码，在目标开发端生成目标视图组件。
143.具体实施时，还可以根据组件层叠样式信息中的视图层叠样式信息，生成目标视图组件对应的第一键值对信息。
144.s503：在游戏引擎中，创建目标视图组件对应的第一原生对象组件。
145.s504：将第一原生对象组件对应的第一键值对信息，解析为具有目标数据结构的第一布局信息。
146.s505：基于页面代码中与待创建功能相关的子页面代码，在目标开发端生成目标图像组件。
147.具体实施时，还可以根据组件层叠样式信息中的图像属性信息，生成目标图像组件对应的第二键值对信息。
148.s506：在游戏引擎中，创建目标图像组件对应的第二原生对象组件。
149.s507：将第二原生对象组件对应的第二键值对信息，解析为具有目标数据结构的第二布局信息。
150.其中，s505～s507可以和s502～s505，可以同步执行，也可以异步执行。
151.s508：将第一原生对象组件和第二原生对象组件进行合并，得到原生对象组件。
152.这里，在将第一原生对象组件和第二原生对象组件进行合并的同时，还可以将第一原生对象组件的第一布局信息和第一原生对象组件的第二布局信息，合并为原生对象组件的组件布局信息。
153.此外，在页面代码中包括多个目标页面组件对应的代码时，可以在生成第一个目标页面组件对应的原生对象组件之后，返回执行上述s502～s508，以创建第二个页面组件对应的原生对象组件，经过一次或多次循环，得到各个目标页面组件分别对应的原生对象组件。
154.s509：按照各个原生对象组件的组件布局信息，绘制包括各个原生对象组件的目标页面。
155.关于上述s501～s509的具体实施步骤，可以参照上述各实施例，此处不再赘述。
156.在一种实施例中，在得到目标页面之后，还可以确定目标页面所属的目标游戏；将目标页面下发至目标游戏对应的各个游戏客户端，以使各个游戏客户端在打开目标游戏时，根据获取的目标页面更新本地游戏页面。这里，目标游戏对应的各个游戏客户端，即为确定安装有目标游戏的各个客户端，本地游戏页面即为更新前的游戏页面，目标页面即为更新后的游戏页面。
157.示例性的，在绘制出目标页面之后，可以将目标页面下发至各个游戏客户端。游戏客户端在接收到目标页面之后，可以在打开目标游戏时，确定出该目标页面对应的需要更新的本地游戏页面，并将本地游戏页面更新为获取的目标页面，从而实现及时对页面进行热更新。
158.此外，利用本公开实施例提供的页面绘制方法，还可以实现在已有页面中增加新的原生对象组件(也称附加子项(appendchild))、删除已有页面的原生对象组件(也称删除子项(removechild))和修改已有页面的原生对象组件(也称在子项之前插入(insertbeforechild))。如图6所示，为本公开实施例提供的另一种页面绘制方法的示意图。其中，react端的appendchild表示在react端生成新的原生对象组件对应的目标页面组件，unity端(即unity引擎)的appendchild表示在unity端进行同步更新，unity端的添加子视图(addsubview)表示在unity端生成目标页面组件对应的原生对象组件，yoga端yoga布局(yogalayout)表示根据新生成的原生对象组件的组件布局信息，将新生成的原生对象组件绘制在已生成页面，从而实现对已生成页面的更新。react端的removechild表示在react端删除已生成的目标页面组件，unity端的removechild表示在unity端进行同步更新，unity端的毁坏(destory)表示在unity端，将已生成的目标页面组件对应的已生成原生对
象组件删除，yoga端yoga毁坏(yogadestory)表示根据已生成原生对象组件的组件布局信息，将已生成页面中的该已生成原生对象组件删除。react端的insertbeforechild表示在react端确定需要修改的第一目标页面组件以及因修改第一目标页面组件造成也需要修改的各个第二目标页面组件，unity端的insertbeforechild表示在unity端进行同步更新，unity端的设置兄弟姐妹指标(setsiblingindex)表示在unity端，确定第一目标页面组件对应的第一目标原生对象组件、第一目标原生对象组件的组件布局信息，各个第二目标页面组件对应的第二目标原生对象组，第二目标原生对象组的组件布局信息。yoga端更新yoga指标(updateyogaindex)表示根据第一目标原生对象组件的组件布局信息、第二目标原生对象组的组件布局信息，对已生成页面中的各个原生对象组件进行修改，得到包括修改后的原生对象组件的已生成页面。基于如图6所示的方法，可以实现及时将react端的信息同步至unity，进行实现对页面进行及时地热更新。
159.基于本公开实施例提供的页面绘制方法，由于js端具有成熟的界面开发框架，通过在js端开发页面代码，降低了代码开发的难度和成本。在获取在js端开发的页面代码和组件层叠样式信息之后，通过先生成目标页面组件的方式，可以实现在js端对页面代码的转换，通过生成组件层叠样式信息的方式，可以实现在js端对组件层叠样式信息的结构化存储。通过在游戏引擎创建目标页面组件对应的原生对象组件，可以实现将目标页面组件映射至游戏引擎，既降低了对游戏引擎的原始能力的依赖，又能够完成js端和游戏引擎的组件同步。通过将键值对信息解析为具有目标数据结构的组件布局信息，实现了将js端的键值对信息，转换为游戏引擎能够处理的组件布局信息，最后基于组件布局信息，可以在游戏引擎，准确绘制出包括各个原生对象组件的目标页面，实现及时地对页面进行热更新。
160.本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
161.基于同一发明构思，本公开实施例中还提供了与页面绘制方法对应的页面绘制装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面绘制方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
162.如图7所示，为本公开实施例提供的一种页面绘制装置的示意图，包括：
163.获取模块701，用于获取在目标开发端开发的页面代码和组件层叠样式信息；所述目标开发端为基于目标开发语言进行页面开发的一端；
164.生成模块702，用于基于所述页面代码，在所述目标开发端生成目标页面组件，并根据所述组件层叠样式信息，生成所述目标页面组件对应的键值对信息；所述目标页面组件为基于所述目标开发语言生成的；
165.创建模块703，用于在游戏引擎创建所述目标页面组件对应的原生对象组件；所述原生对象组件为基于所述游戏引擎对应的引擎开发语言生成的；
166.解析模块704，用于将在所述游戏引擎创建的各个所述原生对象组件分别对应的所述键值对信息，解析为具有目标数据结构的组件布局信息；所述目标数据结构为与所述游戏引擎的页面布局引擎相匹配的数据结构；
167.绘制模块705，用于按照所述组件布局信息，绘制包括各个所述原生对象组件的目标页面。
168.在一种可能的实施方式中，所述目标页面组件包括与所述游戏引擎的原生功能相匹配的目标视图组件，所述键值对信息包括所述目标视图组件对应的第一键值对信息；
169.所述生成模块702，在所述基于所述页面代码，在所述目标开发端生成目标页面组件，并根据所述组件层叠样式信息，生成所述目标页面组件对应的键值对信息时，用于：
170.基于所述页面代码中与所述原生功能相关的子页面代码，在所述目标开发端生成所述目标视图组件，并根据所述组件层叠样式信息中的视图层叠样式信息，生成所述目标视图组件对应的第一键值对信息；
171.所述创建模块703，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，用于：
172.在所述游戏引擎中，创建所述目标视图组件对应的第一原生对象组件；其中，所述第一原生对象组件具有所述原生功能。
173.在一种可能的实施方式中，所述目标页面组件还包括与在所述游戏引擎中待创建功能相匹配的目标图像组件，所述键值对信息还包括所述目标图像组件对应的第二键值对信息；
174.所述生成模块702，在所述基于所述页面代码，在所述目标开发端生成目标页面组件，并根据所述组件层叠样式信息，生成所述目标页面组件对应的键值对信息时，还用于：
175.基于所述页面代码中与所述待创建功能相关的子页面代码，在所述目标开发端生成所述目标图像组件，并根据所述组件层叠样式信息中的图像属性信息，生成所述目标图像组件对应的所述第二键值对信息；
176.所述创建模块703，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，还用于：
177.在所述游戏引擎中，创建所述目标图像组件对应的第二原生对象组件；其中，所述第二原生对象组件具有所述待创建功能；
178.将所述第一原生对象组件和所述第二原生对象组件合并为所述原生对象组件。
179.在一种可能的实施方式中，所述创建模块703，在所述在游戏引擎创建所述目标页面组件对应的原生对象组件时，用于：
180.利用连接所述游戏引擎和所述目标开发端的中间通信层中的信息调用方式，调用所述游戏引擎中的组件创建方法，以利用所述游戏引擎的组件创建功能，创建所述目标页面组件对应的原生对象组件。
181.在一种可能的实施方式中，所述绘制模块705，在所述按照所述组件布局信息，绘制包括各个所述原生对象组件的目标页面时，用于：
182.调用所述游戏引擎中的页面绘制方法，按照所述组件布局信息指示的位置信息和组件尺寸信息，绘制包括各个所述原生对象组件的目标页面。
183.在一种可能的实施方式中，所述装置还包括：
184.更新模块706，用于在所述按照所述组件布局信息，绘制包括各个所述原生对象组件的目标页面之后，确定所述目标页面所属的目标游戏；
185.将所述目标页面下发至所述目标游戏对应的各个游戏客户端，以使各个所述游戏客户端在打开所述目标游戏时，根据获取的目标页面更新本地游戏页面。
186.在一种可能的实施方式中，所述创建模块703，在所述在游戏引擎创建所述目标页
面组件对应的原生对象组件之后，还用于：
187.将所述原生对象组件反馈至所述目标开发端，以使所述目标开发端获取所述目标页面组件对应的原生对象组件的信息。
188.关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
189.基于同一技术构思，本技术实施例还提供了一种计算机设备。参照图8所示，为本技术实施例提供的一种计算机设备的结构示意图，包括：
190.处理器81、存储器82和总线83。其中，存储器82存储有处理器81可执行的机器可读指令，处理器81用于执行存储器82中存储的机器可读指令，所述机器可读指令被处理器81执行时，处理器81执行下述步骤：s101：获取在目标开发端开发的页面代码和组件层叠样式信息；目标开发端为基于目标开发语言进行页面开发的一端；s102：基于页面代码，在目标开发端生成目标页面组件，并根据组件层叠样式信息，生成目标页面组件对应的键值对信息；目标页面组件为基于目标开发语言生成的；s103：在游戏引擎创建目标页面组件对应的原生对象组件；原生对象组件为基于游戏引擎对应的引擎开发语言生成的；s104：将在游戏引擎创建的各个原生对象组件分别对应的键值对信息，解析为具有目标数据结构的组件布局信息；目标数据结构为与游戏引擎的页面布局引擎相匹配的数据结构以及s105：按照组件布局信息，绘制包括各个原生对象组件的目标页面。
191.上述存储器82包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当计算机设备运行时，处理器81与存储器82之间通过总线83通信，使得处理器81在执行上述方法实施例中所提及的执行指令。
192.本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面绘制方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
193.本公开实施例所提供的页面绘制方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面绘制方法的步骤，具体可参见上述方法实施例，在此不再赘述。
194.该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(software development kit，sdk)等等。
195.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
196.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显
示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
197.另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
198.所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
199.若本技术技术方案涉及个人信息，应用本技术技术方案的产品在处理个人信息前，已明确告知个人信息处理规则，并取得个人自主同意。若本技术技术方案涉及敏感个人信息，应用本技术技术方案的产品在处理敏感个人信息前，已取得个人单独同意，并且同时满足“明示同意”的要求。例如，在摄像头等个人信息采集装置处，设置明确显著的标识告知已进入个人信息采集范围，将会对个人信息进行采集，若个人自愿进入采集范围即视为同意对其个人信息进行采集；或者在个人信息处理的装置上，利用明显的标识/信息告知个人信息处理规则的情况下，通过弹窗信息或请个人自行上传其个人信息等方式获得个人授权；其中，个人信息处理规则可包括个人信息处理者、个人信息处理目的、处理方式、处理的个人信息种类等信息。
200.最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。