CN112965716B - 页面处理方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

本公开的实施例提供了一种页面处理方法、装置、电子设备及可读存储介质，所述方法包括：响应业务调用请求，解析业务代码中React组件的组件标签；根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；对所述业务代码中的目标React组件，创建对应的游戏实例；在目标页面中展示所述游戏实例。通过本公开实施例，可以直接使用React语言开发Web浏览器游戏，并且可以得到和游戏引擎语言开发一样的性能。本公开实施例可以降低Web浏览器游戏的开发门槛，提高开发效率和减少开发成本。

Description

页面处理方法、装置、电子设备及可读存储介质

技术领域

本公开的实施例涉及互联网技术领域，尤其涉及一种页面处理方法、装置、电子设备及可读存储介质。

背景技术

React是由Fackbook推出的一个JavaScipt框架，是一个用于构建组件化UI(UserInterface，用户界面)的库，是一个前端界面开发工具。

目前，前端界面中对小游戏的需求不断增加，然而，如果直接使用React开发前端界面中的小游戏，不仅开发过程较为复杂，而且界面的动画效果也不够流畅。如果利用专门的游戏引擎语言开发前端界面中的小游戏，虽然可以保证界面的动画效果，但是由于游戏引擎语言的门槛较高，导致实现难度较大，影响开发效率和增加开发成本。

发明内容

本公开的实施例提供一种页面处理方法、装置、电子设备及可读存储介质，用以降低Web浏览器游戏的开发门槛，提高开发效率和减少开发成本。

根据本公开的实施例的第一方面，提供了一种页面处理方法，所述方法包括：

响应业务调用请求，解析业务代码中React组件的组件标签；

根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

对所述业务代码中的目标React组件，创建对应的游戏实例；

在目标页面中展示所述游戏实例。

根据本公开的实施例的第二方面，提供了一种页面处理装置，所述装置包括：

标签解析模块，用于响应业务调用请求，解析业务代码中React组件的组件标签；

目标确定模块，用于根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

实例创建模块，用于对所述业务代码中的目标React组件，创建对应的游戏实例；

实例展示模块，用于在目标页面中展示所述游戏实例。

根据本公开的实施例的第三方面，提供了一种电子设备，包括：

处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如上述的页面处理方法。

本公开的实施例提供了一种页面处理方法、装置、电子设备及可读存储介质，所述方法包括：

本公开实施例提供的页面处理方法，预先对游戏引擎方法封装得到用于开发Web浏览器游戏的基础组件，使得Web浏览器游戏开发的形式仍然沿用React的组件形式，React-Game框架提供的游戏组件，使得用户可以使用React的形式引入游戏引擎相关的游戏组件，在进行游戏开发的时候只需引入React组件并配置相关的属性即可。本公开实施例通过解析业务代码中React组件的组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；并且对所述业务代码中的目标React组件，创建对应的游戏实例，进而在目标页面中展示所述游戏实例。由此，通过本公开实施例，前端开发工程师不需要花费额外的成本去学习晦涩的游戏引擎语言，可以直接使用熟悉的React语言去开发Web浏览器游戏，并且可以得到和游戏引擎语言开发一样的性能。本公开实施例可以降低Web浏览器游戏的开发门槛，提高开发效率和减少开发成本。

附图说明

为了更清楚地说明本公开的实施例的技术方案，下面将对本公开的实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的实施例的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了本公开的一个实施例中的页面处理方法的步骤流程图；

图2示出了本公开的一个实施例中的页面处理方法的完整步骤流程示意图；

图3示出了本公开的一个实施例中的页面处理装置的结构图；

图4示出了本公开的一个实施例提供的电子设备的结构图。

具体实施方式

下面将结合本公开的实施例中的附图，对本公开的实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开的实施例一部分实施例，而不是全部的实施例。基于本公开的实施例中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开的实施例保护的范围。

实施例一

参照图1，其示出了本公开一个实施例中的页面处理方法的步骤流程图，所述方法包括：

步骤101、响应业务调用请求，解析业务代码中React组件的组件标签；

步骤102、根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

步骤103、对所述业务代码中的目标React组件，创建对应的游戏实例；

步骤104、在目标页面中展示所述游戏实例。

本公开提供的页面处理方法可应用于电子设备，所述电子设备指能够通过显示屏进行人机交互的设备，所述电子设备可以通过所述显示屏显示应用程序的显示界面。所述电子设备包括但不限于：家居智能终端(包括：空调、冰箱、电饭煲、热水器等)，商务智能终端(包括：可视电话、会议桌面智能终端等)，可穿戴设备(包括智能手表、智能眼镜等)，金融智能终端机，以及智能手机、平板电脑、个人数字助理(personal digital assistant，PDA)、车载设备、计算机等。

所述电子设备可以通过浏览器展示Web(World Wide Web，万维网)Web浏览器游戏，Web浏览器游戏也称为HTML5(Hyper Text Markup Language 5，超文本标记语言5)游戏。由于游戏引擎语言开发HTML5游戏的方式较为复杂，编写代码晦涩，导致开发人员的学习成本增加，工作效率却在降低；而单纯使用React语言来开发，导致游戏的性能又远远达不到可用的标准。为解决该问题，本公开设计了React-Game框架，React-Game框架是一个React语言和游戏引擎语言结合的语法糖(Syntactic sugar)，利用React-Game提供的组件可以快速编写Web浏览器游戏，React-Game框架中还可以包括动画库、媒体库、工具类等用于编写Web浏览器游戏的库文件。React-Game框架基于游戏引擎语言封装常用的组件，也即，本公开实施例在React组件中封装了游戏引擎的方法，使得游戏开发的形式仍然沿用React的组件形式，React-Game框架提供的游戏组件，使得用户可以使用React的形式引入游戏引擎相关的游戏组件，在进行游戏开发的时候只需引入React组件并配置相关的属性即可。由此，通过本公开实施例，前端开发工程师不需要花费额外的成本去学习晦涩的游戏引擎语言，可以直接使用熟悉的React语言去开发Web浏览器游戏，并且可以得到和游戏引擎语言开发一样的性能。

在本公开实施例中，React-Game框架提供基于游戏引擎语言封装的用于开发Web浏览器游戏的基础组件。所述基础组件指开发Web浏览器游戏时的常用组件，包括但不限于View组件、Image组件、ImageText组件、Text组件以及Sprite组件。其中，View组件的作用类似于HTML中的div标签，每个View都可以添加其他组件作为子级。Image组件为图片组件。ImageText组件为位文本图片组件。Text组件为提供文字显示功能的组件。Sprite组件为精灵组件。

本公开实施例响应业务调用请求，解析业务代码中React组件的组件标签，并且根据所述组件标签，确定所述业务代码中的目标React组件。其中，业务调用请求可以是请求打开Web浏览器游戏的请求，如在浏览器中打开目标页面的请求，目标页面指用于展示游戏的页面。业务代码指基于React编写的用于实现Web浏览器游戏的程序代码。目标React组件为预先对游戏引擎方法封装得到，也即，目标React组件为React-Game框架提供的基于游戏引擎语言封装用于开发Web浏览器游戏的基础组件。

在本公开实施例中，组件标签类似于HTML5中的元素标签，组件标签可以由用户自定义，在React编译的时候可以解析这些组件标签并进行一系列的解析识别操作，最终解析成HTML5的元素标签，浏览器将根据这些元素标签进行渲染并展现在页面上。

本公开实施例解析业务代码中React组件的组件标签，并且根据所述组件标签，确定所述业务代码中的目标React组件。例如，在解析到某个组件标签包含View、Image、ImageText、Text、Sprite中的任一关键词时，可以确定该组件为React-Game框架提供的基于游戏引擎语言封装用于开发Web浏览器游戏的基础组件，也即目标组件。

本公开实施例对所述业务代码中的目标React组件，创建对应的游戏实例，并且在目标页面中展示所述游戏实例。在本公开实施例中，目标React组件为预先对游戏引擎方法封装得到的，通过调用游戏引擎方法可以创建目标React组件对应的游戏实例，用户不用关心游戏引擎的具体实现，只需要引入React组件并配置相关的属性即可。

在本公开的一种可选实施例中，所述对所述业务代码中的目标React组件，创建对应的游戏实例，包括：

调用React渲染器Reconciler中的预设函数，通过执行所述预设函数将所述目标React组件的语法映射到画布Canvas中生成游戏引擎组件，并创建所述游戏引擎组件对应的游戏实例。

其中，Canvas，是一个画布，在实际应用中，Web浏览器游戏主要是利用Html5中的Canvas标签作为画布，在Canvas上进行绘制图形，通过定时刷新以及配合外部的输入来做到动画效果的过程。

Reconciler是React渲染器，React之所以具备跨平台特性，是因为其渲染器Reconciler只关心如何组织组件与组件间关系，而不关心具体实现。React组件本质是一个描述，即组件标签+属性，所以Reconciler不关心元素是如何创建的，需要通过预设函数createInstance拿到组件的属性，在Web平台利用DOM(Document Object Model，文档对象模型)API(Application Programming Interface，应用程序接口)实现。

本公开实施例在创建DOM的时候，调用Reconciler中的预设函数createInstance，解析React的组件标签，在解析到当前React组件为目标React组件时，通过执行预设函数createInstance将目标React组件的语法映射到Canvas中生成游戏引擎组件，并创建所述游戏引擎组件对应的游戏实例。其中，createInstance是Reconciler中的钩子函数。这样，开发人员对底层封装的游戏引擎是毫无感知的，他们能够像平常使用React组件一样进行游戏开发。

在本公开的一种可选实施例中，所述通过执行所述预设函数将所述目标React组件的语法映射到Canvas中生成游戏引擎组件，可以包括：

步骤S11、通过执行所述预设函数获取所述目标React组件的用户设置属性；

步骤S12、判断所述用户设置属性是否符合Canvas中的游戏引擎语法，若不符合，则对所述目标React组件的用户设置属性进行转换，得到符合游戏引擎语法的属性；

步骤S13、对转换属性之后的目标React组件，生成游戏引擎组件。

在本公开实施例中，React-Game的目的是让熟悉React语法的开发人员可以无障碍的使用ReactGame，但是Web浏览器游戏中有些属性的描述习惯与React组件中不同，比如对于坐标，Web浏览器游戏中习惯用x，y表示，React组件中习惯用left、top表示，因此，为了减少用户理解成本，在Web浏览器游戏的开发过程中，支持开发人员使用React组件中的属性描述习惯，本公开实施例在创建游戏实例之前，对目标组件进行属性转化。具体地，在Reconciler中接收到React组件的用户设置属性时进行转换，转换后再生成对应的游戏实例。其中，用户设置属性指在用户Web浏览器游戏的开发过程中引入React-Game框架提供的游戏组件时设置的属性。

本公开实施例在解析到当前React组件为目标React组件的情况下，通过执行所述预设函数createInstance获取所述目标React组件的用户设置属性，并且判断所述用户设置属性是否符合Canvas中的游戏引擎语法，若不符合，则对所述目标React组件的用户设置属性进行转换，得到符合游戏引擎语法的属性。可选地，如果存在不支持的属性，可以输出提示信息，以提示用户修改其设置的属性。其中，不支持的属性指无法转换为符合游戏引擎语法的属性。

需要说明的是，本公开实施例对目标React组件的属性类别不加以限制。例如，目标React组件的属性可以包括但不限于动画属性，位置属性，样式属性，事件属性。

在本公开的一种可选实施例中，所述创建对应的游戏实例之后，所述方法还可以包括：

绑定所述游戏实例的属性和事件，并对所述游戏实例的属性与所述目标React组件进行绑定。

对转换属性之后的目标React组件，可以生成游戏引擎组件，并且创建对应的游戏实例。同时，可以绑定所述游戏实例的属性和事件。

其中，绑定的属性为转换之后符合游戏引擎语法的属性。绑定的事件指对目标React组件定义的事件。可以理解，本公开实施例对事件类型不做限制，例如，绑定的事件包括但不限于点击事件、手指移动事件。

此外，本公开实施例还对所述游戏实例的属性与所述目标React组件进行绑定，也即，将当前游戏实例上的属性反绑定到对应的目标React组件上。

由于游戏实例和React组件表示的是不同的对象，游戏实例是游戏引擎生成的对象，目标React组件是React生成的实例，因此，为了使得用户能够直接操作生成的游戏实例，包括直接操作游戏实例的属性和方法，本公开实施例在绑定游戏实例的属性和事件之后，还将当前游戏实例上的属性反绑定到对应的目标React组件上。

一个示例中：

Const a＝<View id＝“test”></View>，这是一个目标React组件。

Const b＝a.Refcurrent.gameObject，这是一个游戏实例。

在该示例中，如果想要获取游戏实例的X属性，那么就需要获取a.Refcurrent.gameObject.X。如果将该游戏实例上的属性反绑定到该目标React组件上，获取游戏实例的X属性，只需要获取a.Refcurrent.X即可。第二种方式更符合React开发人员的思维习惯，使得用户能够直接操作生成的游戏实例，包括操作其属性和方法，可以降低Web浏览器游戏的开发难度，提高开发效率。

在本公开的一种可选实施例中，所述创建对应的游戏实例之后，所述方法还可以包括：

以键值对的形式保存创建的游戏实例，并导出游戏实例的全局调用方法。

具体地，本公开实施例将生成的游戏实例以键值对(Key-Value)的形式保存在React-Game的数组当中，并导出游戏实例的全局调用方法作为全局能力提供给用户去调用。

为了使得React-Game框架提供的游戏组件可以支持跨组件调用以及跨页面调用。本公开实施例在React-Game框架内部保存一个组件池，该组件池中以键值对的形式保存创建的游戏实例。在该组件池中，每个游戏实例和其对应的目标React组件的组件ID具有一一对应的关系。通过组件ID即可实现对相应游戏实例的调用。此外，本公开实施例导出游戏实例的全局调用方法，并将这个方法挂载在导出的全局模块Lingbo中。全局模块Lingbo是React-Game挂载全局方法的模块，在引用全局模块Lingbo之后即可使用模块中的方法。

在本公开实施例中，通过调用全局调用方法，并且在调用时传入相应的组件ID，即可调用该组件ID对应的游戏实例，进而可以支持跨组件调用游戏实例，进而可以直接对游戏实例的方法、属性进行操作。

全局调用方法包括但不限于获取游戏组件实例、获取游戏舞台场景宽高、碰撞检测等等。一个示例中，将全局调用方法导出在React-Game框架的全局模块Lingbo目录下，通过import形式即可引用。例如：

import{Lingbo}from‘@lingbo/react-game’；

Lingbo.getGameObject(‘xx’)。

在本公开的一种可选实施例中，所述在目标页面中展示所述游戏实例之后，所述方法还可以包括：

在检测到更新内容的情况下，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，所述更新内容包括更新的数据、属性、组件中的至少一种。

本公开实施例在展示目标页面之后，在检测到更新内容的情况下，还可以对目标页面进行更新，包括对所述目标页面中游戏实例的变化进行更新。

所述更新内容包括但不限于数据、属性、组件的更新。进一步地，为了能够监听到数据、属性、组件的变化的同时，使得用户无感知，本发明实施例通过React渲染器的钩子函数Reconciler监听目标页面的更新内容。

在本公开实施例中，在React创建DOM之前，通过React渲染器的钩子函数Reconciler监听并解析业务代码中React组件的组件标签，判断当前的React组件是否为React-Game提供的游戏组件，如果是，则进行解析分析，调用游戏引擎的方法去创建游戏实例并绑定属性和事件。同时，在有数据、属性、组件更新的时候，Reconciler在监听到更新内容时进入updateElement钩子函数，以更新游戏实例。在此过程中，用户对底层封装的游戏引擎是毫无感知的，使得开发人员就能够像平常使用React组件一样进行游戏开发。

以属性更新为例，假设某个目标React组件包含属性Test，该属性Test的默认值为false，该目标React组件对应目标页面中的游戏实例为一个按钮。当接收到点击该按钮的操作时，执行将该目标React组件的Test属性设置成true的更新操作。此时，Reconciler检测到更新内容，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，也即，Reconciler调用updateElement钩子函数，将Test的默认值false更新为true，并且根据更新后的属性值更新该按钮的显示状态。

进一步地，本公开实施例将生成的游戏实例保存在gameObject这个对象中，并将这个对象挂到该游戏实例对应目标React组件的属性上，当有数据更新的时候，会进入Reconciler的updateElement钩子函数中，在这个函数里面可以拿到当前游戏实例gameObject以及更新的属性，如记为new Props，然后在这里将gameObject上的属性进行查找更新，并返回给对应的目标React组件。

在本公开的一种可选实施例中，所述方法还可以包括：

对所述业务代码中的非目标React组件，创建对应的DOM元素，并且在所述目标页面中展示所述DOM元素。

非目标React组件，指的是React框架原有的React语法的组件，而非对游戏引擎方法封装得到的组件。

在本公开实施例中，在业务代码中包含使用React的形式引入的相关组件的时候，React会进行React DOM解析Virtual DOM(虚拟DOM树)。并且在创建DOM的时候，调用Reconciler的createInstance钩子函数，通过createInstance钩子函数解析React组件的组件标签。如果根据组件标签确定当前React组件为目标组件，则创建对应的游戏实例；如果根据组件标签确定当前React组件为非目标组件，则创建对应的DOM元素。根据创建的游戏实例以及DOM元素对目标页面进行渲染，以展示目标页面，该目标页面中包含创建的游戏实例和DOM元素。

本发明实施例在渲染目标页面的过程中，如果解析到当前React组件为非目标组件，则按照React原有的渲染过程，创建当前React组件对应的DOM元素。如果解析到当前React组件为非目标组件，则调用游戏引擎方法创建游戏实例。

在检测到目标页面中存在更新内容的情况下，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，并且对非目标React组件进行重新渲染。

重新渲染是React渲染器Reconciler自身的渲染机制，一旦有数据更新，Reconciler会触发React重新执行其自身的生命周期render方法，render方法基于diff算法以最小成本更新目标页面上展现的元素和数据。

在Reconciler中包含两个参数，一个是oldProps(更新前的旧属性)，一个是newProps(待更新的新属性)。具体地，React整个的渲染机制就是Reconciler调用render方法构建一棵DOM树，在state/props发生改变的时候，render方法会被再次调用渲染出另外一棵树，重新渲染所有的节点，render方法对这oldProps和newProps这两个参数进行对比，对构造出新的虚拟DOM树跟原来的DOM树用diff算法进行比较，确定出不同的部分，这一部分就是需要更新的diff数据，对diff数据批量更新，再渲染到真实的DOM上。由此可以减少对DOM的频繁操作，从而提升性能。

参照图2，示出了本公开一个实施例中的页面处理方法的完整步骤流程示意图。如图2所示，本公开实施例解析业务代码中React组件的组件标签，并且根据组件标签，确定所述业务代码中的目标React组件。具体地，在React创建DOM之前，通过React渲染器的钩子函数Reconciler监听并解析业务代码中React组件的组件标签，判断当前的React组件是否为React-Game提供的游戏组件，如果是，则进行解析分析，调用游戏引擎的方法去创建游戏实例并绑定属性和事件。其中，绑定的属性包括动画属性、位置属性、样式属性、事件属性。在绑定属性和事件之后，还可以对所述游戏实例的属性与所述目标React组件进行绑定，也即，将当前游戏实例上的属性反绑定到对应的目标React组件上。此外，为了实现跨组件调用以及跨页面调用，本公开实施例以键值对的形式保存创建的游戏实例，并导出游戏实例的全局调用方法。同时，在有数据、属性、组件更新的时候，Reconciler在监听到更新内容时进入updateElement钩子函数，获取到需要更新的diff数据以及当前挂载的游戏实例，进而根据diff数据更新当前挂载的游戏实例。在此过程中，用户对底层封装的游戏引擎是毫无感知的，使得开发人员就能够像平常使用React组件一样进行游戏开发。

在本公开的一种可选实施例中，所述在目标页面中展示所述游戏实例，可以包括：在所述目标页面的部分显示区域中展示所述游戏实例。

其中，部分显示区域可以为目标页面的一半显示区域，或者目标页面的任意比例的显示区域，如三分之一的显示区域等。

React语言是前端开发语言，游戏引擎语言与前端开发语言的语法具有较大区别，因此单纯的游戏引擎语言与前端开发语言在一个页面中无法融合，一个页面中要么展示游戏引擎语言开发的Web浏览器游戏，要么展示React语言开发的Web应用。本公开提供的React-Game框架，采用React语言封装游戏引擎，并不会对页面中React语言的内容造成入侵或者强制要求，因此，可以在一个页面中融合Web浏览器游戏和Web应用，实现半屏区域游戏。半屏区域游戏指一个页面的一部分显示区域用于展示Web浏览器游戏，其余部分显示区域可用于展示其他业务应用(指非Web浏览器游戏的应用)，由此达到单页面中形成业务与游戏的结合，通过游戏辅助业务应用的推广。此外，本公开实施例还可以提高页面的利用率，以及提高页面展示的灵活性。

一个示例中，在目标页面的上半部分显示区域中展示Web浏览器游戏，在目标页面的上半部分显示区域中展示在线点餐、信息浏览等应用。

需要说明的是，在本发明实施例中，React-Game框架提供基于游戏引擎语言封装的用于开发Web浏览器游戏的基础组件，其中，游戏引擎语言的种类本公开不做具体限制。本公开实施例可以封装不同游戏引擎语言的游戏组件，支持的游戏引擎语言包括但不限于Laya、Coco、Hilo。

综上，本公开实施例提供的页面处理方法，预先对游戏引擎方法封装得到用于开发Web浏览器游戏的基础组件，使得Web浏览器游戏开发的形式仍然沿用React的组件形式，React-Game框架提供的游戏组件，使得用户可以使用React的形式引入游戏引擎相关的游戏组件，在进行游戏开发的时候只需引入React组件并配置相关的属性即可。本公开实施例通过解析业务代码中React组件的组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；并且对所述业务代码中的目标React组件，创建对应的游戏实例，进而在目标页面中展示所述游戏实例。由此，通过本公开实施例，前端开发工程师不需要花费额外的成本去学习晦涩的游戏引擎语言，可以直接使用熟悉的React语言去开发Web浏览器游戏，并且可以得到和游戏引擎语言开发一样的性能。本公开实施例可以降低Web浏览器游戏的开发门槛，提高开发效率和减少开发成本。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本公开实施例并不受所描述的动作顺序的限制，因为依据本公开实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本公开实施例所必须的。

实施例三

参照图3，其示出了本公开一个实施例中的页面处理装置的结构图，具体如下。

标签解析模块301，用于响应业务调用请求，解析业务代码中React组件的组件标签；

目标确定模块302，用于根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

实例创建模块303，用于对所述业务代码中的目标React组件，创建对应的游戏实例；

实例展示模块304，用于在目标页面中展示所述游戏实例。

可选地，所述实例创建模块303，具体用于调用React渲染器Reconciler中的预设函数，通过执行所述预设函数将所述目标React组件的语法映射到画布Canvas中生成游戏引擎组件，并创建所述游戏引擎组件对应的游戏实例。

可选地，所述实例创建模块303，包括：

属性获取子模块，用于通过执行所述预设函数获取所述目标React组件的用户设置属性；

属性转换子模块，用于判断所述用户设置属性是否符合Canvas中的游戏引擎语法，若不符合，则对所述目标React组件的用户设置属性进行转换，得到符合游戏引擎语法的属性；

组件创建子模块，用于对转换属性之后的目标React组件，生成游戏引擎组件。

可选地，所述装置还包括：

绑定模块，用于绑定所述游戏实例的属性和事件，并对所述游戏实例的属性与所述目标React组件进行绑定。

可选地，所述装置还包括：

保存导出模块，用于以键值对的形式保存创建的游戏实例，并导出游戏实例的全局调用方法。

可选地，所述装置还包括：

更新模块，用于在检测到更新内容的情况下，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，所述更新内容包括更新的数据、属性、组件中的至少一种。

可选地，所述装置还包括：

元素展示模块，用于对所述业务代码中的非目标React组件，创建对应的DOM元素，并且在所述目标页面中展示所述DOM元素。

可选地，所述实例展示模块304，具体用于在所述目标页面的部分显示区域中展示所述游戏实例。

本公开实施例提供的页面处理装置，预先对游戏引擎方法封装得到用于开发Web浏览器游戏的基础组件，使得Web浏览器游戏开发的形式仍然沿用React的组件形式，React-Game框架提供的游戏组件，使得用户可以使用React的形式引入游戏引擎相关的游戏组件，在进行游戏开发的时候只需引入React组件并配置相关的属性即可。本公开实施例通过解析业务代码中React组件的组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；并且对所述业务代码中的目标React组件，创建对应的游戏实例，进而在目标页面中展示所述游戏实例。由此，通过本公开实施例，前端开发工程师不需要花费额外的成本去学习晦涩的游戏引擎语言，可以直接使用熟悉的React语言去开发Web浏览器游戏，并且可以得到和游戏引擎语言开发一样的性能。本公开实施例可以降低Web浏览器游戏的开发门槛，提高开发效率和减少开发成本。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开的实施例还提供了一种电子设备，参见图4，包括：处理器401、存储器402以及存储在所述存储器上并可在所述处理器上运行的计算机程序4021，所述处理器执行所述程序时实现前述实施例的页面处理方法。

本公开的实施例还提供了一种可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行前述实施例的页面处理方法。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本公开的实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本公开的实施例的内容，并且上面对特定语言所做的描述是为了披露本公开的实施例的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本公开的实施例的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本公开的实施例的示例性实施例的描述中，本公开的实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本公开的实施例要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本公开的实施例的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

本公开的实施例的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本公开的实施例的排序设备中的一些或者全部部件的一些或者全部功能。本公开的实施例还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序。这样的实现本公开的实施例的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本公开的实施例进行说明而不是对本公开的实施例进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本公开的实施例可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

以上所述仅为本公开的实施例的较佳实施例而已，并不用以限制本公开的实施例，凡在本公开的实施例的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本公开的实施例的保护范围之内。

以上所述，仅为本公开的实施例的具体实施方式，但本公开的实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开的实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本公开的实施例的保护范围之内。因此，本公开的实施例的保护范围应以权利要求的保护范围为准。

Claims (14)

1.一种页面处理方法，其特征在于，所述方法包括：

响应业务调用请求，解析业务代码中React组件的组件标签；

根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

调用React渲染器Reconciler中的预设函数，通过执行所述预设函数获取所述目标React组件的用户设置属性；

判断所述用户设置属性是否符合Canvas中的游戏引擎语法，若不符合，则对所述目标React组件的用户设置属性进行转换，得到符合游戏引擎语法的属性；

对转换属性之后的目标React组件，生成游戏引擎组件，并创建所述游戏引擎组件对应的游戏实例；

在目标页面中展示所述游戏实例。

2.根据权利要求1所述的方法，其特征在于，所述创建对应的游戏实例之后，所述方法还包括：

绑定所述游戏实例的属性和事件，并对所述游戏实例的属性与所述目标React组件进行绑定。

3.根据权利要求1所述的方法，其特征在于，所述创建对应的游戏实例之后，所述方法还包括：

以键值对的形式保存创建的游戏实例，并导出游戏实例的全局调用方法。

4.根据权利要求1所述的方法，其特征在于，所述在目标页面中展示所述游戏实例之后，所述方法还包括：

在检测到更新内容的情况下，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，所述更新内容包括更新的数据、属性、组件中的至少一种。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

对所述业务代码中的非目标React组件，创建对应的DOM元素，并且在所述目标页面中展示所述DOM元素。

6.根据权利要求1所述的方法，其特征在于，所述在目标页面中展示所述游戏实例，包括：

在所述目标页面的部分显示区域中展示所述游戏实例。

7.一种页面处理装置，其特征在于，所述装置包括：

标签解析模块，用于响应业务调用请求，解析业务代码中React组件的组件标签；

目标确定模块，用于根据所述组件标签，确定所述业务代码中的目标React组件，所述目标React组件为预先对游戏引擎方法封装得到；

实例创建模块，用于调用React渲染器Reconciler中的预设函数，通过执行所述预设函数将所述目标React组件的语法映射到画布Canvas中生成游戏引擎组件，并创建所述游戏引擎组件对应的游戏实例；

实例展示模块，用于在目标页面中展示所述游戏实例；

所述实例创建模块，包括：

属性获取子模块，用于通过执行所述预设函数获取所述目标React组件的用户设置属性；

属性转换子模块，用于判断所述用户设置属性是否符合Canvas中的游戏引擎语法，若不符合，则对所述目标React组件的用户设置属性进行转换，得到符合游戏引擎语法的属性；

组件创建子模块，用于对转换属性之后的目标React组件，生成游戏引擎组件。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

绑定模块，用于绑定所述游戏实例的属性和事件，并对所述游戏实例的属性与所述目标React组件进行绑定。

9.根据权利要求7所述的装置，其特征在于，所述装置还包括：

保存导出模块，用于以键值对的形式保存创建的游戏实例，并导出游戏实例的全局调用方法。

10.根据权利要求7所述的装置，其特征在于，所述装置还包括：

更新模块，用于在检测到更新内容的情况下，通过React状态管理以及渲染调度机制对所述目标页面中游戏实例的变化进行更新，所述更新内容包括更新的数据、属性、组件中的至少一种。

11.根据权利要求7所述的装置，其特征在于，所述装置还包括：

元素展示模块，用于对所述业务代码中的非目标React组件，创建对应的DOM元素，并且在所述目标页面中展示所述DOM元素。

12.根据权利要求7所述的装置，其特征在于，所述实例展示模块，具体用于在所述目标页面的部分显示区域中展示所述游戏实例。

13.一种电子设备，其特征在于，包括：

处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-6中任一所述的页面处理方法。

14.一种可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1-6中任一所述的页面处理方法。

Images