CN115480762A - 显示视图控件的方法及装置 - Google Patents

Abstract

本申请提供一种显示视图控件的方法及装置，涉及电子设备领域。该方法可以应用于终端设备，终端设备包括第一引擎、第一组件、以及第二引擎。该方法包括：第一引擎确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端DOM节点。第一组件根据前端DOM节点确定视图控件对应的布局信息；根据插件属性创建视图控件对应的第三方插件和纹理数据，并将纹理数据注册到GPU中。第一组件向第二引擎发送布局信息。第一组件根据第三方插件显示纹理数据。第二引擎从GPU获取纹理数据，并根据布局信息对纹理数据进行渲染。终端设备通过该方法可以显示各种不同的视图控件，对不同的视图控件具有通用性。

Description

显示视图控件的方法及装置

技术领域

本申请实施例涉及电子设备领域，尤其涉及一种显示视图控件的方法及装置。

背景技术

操作系统(Operation System，OS)支持显示各种类型的视图控件，有利于OS生态的构建。例如，对操作系统A而言，当操作系统A支持显示安卓(android)的视图(view)控件(以下简称安卓view控件)时，安装操作系统A的终端设备可以支持显示基于安卓view控件开发的应用页面，有利于操作系统A构建OS生态。其中，安卓view控件可以是网页视图(webview)控件、地图视图(mapview)控件、相机视图(cameraview)控件等。

目前，实现操作系统支持显示视图控件的方案主要为：针对每一种视图控件，操作系统的开发框架可以提供一个与该视图控件对应的定制化控件，操作系统可以通过与该视图控件对应的定制化控件显示该视图控件。其中，不同的视图控件对应不同的定制化控件。

但是，上述方案中，视图控件的接口众多，导致在操作系统的开发框架中实现与视图控件对应的定制化控件是非常复杂的，开发工作量极大。另外，一旦操作系统有支持新的视图控件的需求，则操作系统的开发框架需要重新定制开发，这将严重影响开发效率，不利于OS生态的发展。

发明内容

本申请实施例提供一种显示视图控件的方法及装置，可以使得终端设备能够显示各种视图控件，对不同的视图控件具有通用性。

第一方面，本申请实施例提供一种显示视图控件的方法，该方法可以应用于终端设备。终端设备包括第一引擎、第一组件、以及第二引擎。

该方法包括：第一引擎确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端文档对象模型节点。第一组件根据视图控件对应的前端文档对象模型节点，确定视图控件对应的布局信息。第一组件根据视图控件的插件属性，创建视图控件对应的第三方插件和纹理数据，并将视图控件对应的纹理数据注册到GPU中。第一组件向第二引擎发送视图控件对应的布局信息。第一组件根据视图控件对应的第三方插件，显示视图控件对应的纹理数据。第二引擎从GPU获取视图控件对应的纹理数据，并根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

其中，第一应用可以为开发人员基于视图控件开发的应用。

可选地，视图控件可以包括网页视图控件、地图视图控件、相机视图控件、视频视图控件、文本视图控件、直播视图控件、广告视图控件、投屏视图控件等中的任意一种。

一些实施例中，视图控件可以是安卓视图控件、或者鸿蒙视图控件、又或者其他java语言开发的视图控件，在此不作限制。

第一应用的第一打包文件包括第一应用对应的视图控件的插件属性，视图控件的插件属性是预配置的。例如，第一应用的开发人员可以在第一应用的第一打包文件中设置视图控件的插件属性为网页视图控件或地图视图控件，对视图控件的插件属性进行预配置。

该方法中，第一应用的开发人员只需要在第一应用的代码中设置视图控件的插件(plugin)属性，即可使得终端设备可以实现支持显示不同的视图控件。终端设备按照该方法来显示不同视图控件时，不需要考虑不同视图控件的适配对接问题，整个实现流程可以由终端设备的操作系统的开发框架自动完成，第一应用的开发人员可以不感知，大大降低了适配终端设备的操作系统的第一应用的开发难度，有利于终端设备的操作系统生态的构建。

另外，终端设备的操作系统的开发框架可以实现一次开发，可部署各种复杂的视图控件的目标，大大降低开发成本。第一应用的开发人员在第一应用的代码中设置视图控件的插件(plugin)属性，操作系统的开发框架自动根据开发人员设置的视图控件的插件(plugin)属性匹配对应的第三方插件，还可以避免开发人员针对不同的视图控件进行二次开发，能够有效提高开发效率。

进一步地，该方法通过将视图控件对应的纹理数据直接注册到GPU中，还可以避免在中央处理器(central processing unit，CPU)中创建纹理缓存。第二引擎可以直接从GPU中获取视图控件对应的纹理数据进行渲染，不需要CPU和GPU之间进行纹理数据的传递，可以节省CPU在不同纹理缓存之间的拷贝时间以及纹理上传到GPU的时间，大大提高渲染性能。同时，还节省了纹理数据占用的内存和GPU显存。

可选地，所述第一组件将视图控件对应的纹理数据注册到GPU中的步骤，可以包括：

第一组件生成视图控件对应的纹理数据的纹理标识，并根据视图控件对应的纹理数据的纹理标识，将视图控件对应的纹理数据注册到GPU中。

该方法还包括：第一组件向第二引擎发送视图控件对应的纹理数据的纹理标识。

所述第二引擎从GPU获取视图控件对应的纹理数据的步骤，可以包括：

第二引擎根据视图控件对应的纹理数据的纹理标识，从GPU获取视图控件对应的纹理数据。

其中，纹理数据的纹理标识可以是纹理ID，纹理ID与纹理数据之间为一一绑定的关系。第二引擎从GPU获取纹理数据时，可以基于纹理ID从GPU中索引纹理ID对应的纹理数据。

可选地，所述第一组件根据视图控件对应的第三方插件，显示视图控件对应的纹理数据的步骤，可以包括：

第一组件获取画布纹理对象。第一组件在视图控件对应的第三方插件中创建虚显控制器，并根据画布纹理对象中的画布、以及视图控件对应的布局信息创建对应的虚显控件。第一组件通过虚显控制器将视图控件对应的第三方插件与虚显控件进行合成，并创建对应的显示控件。第一组件通过显示控件将视图控件对应的第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至画布纹理对象中合成到画布上。

可选地，所述第二引擎从GPU获取视图控件对应的纹理数据，并根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染，包括：

第二引擎从画布纹理对象中获取画布，并从GPU获取视图控件对应的纹理数据。第二引擎根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

可选地，所述第一引擎确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端文档对象模型节点，包括：

第一引擎对第一应用中的第一打包文件进行解析，得到第一应用对应的视图控件的插件属性、以及视图控件对应的第一对象及第一对象的样式和属性；第一引擎根据视图控件对应的第一对象及第一对象的样式和属性，生成视图控件对应的前端文档对象模型节点。

示例性地，第一应用可以为JS应用，第一打包文件可以为JS包。第一对象可以是JS对象。

可选地，所述第一组件根据视图控件对应的前端文档对象模型节点，确定视图控件对应的布局信息，包括：

第一组件将视图控件对应的前端文档对象模型节点对接到后端组件节点。第一组件根据后端组件节点创建对应的元素节点，并在元素节点中创建对应的绘制节点。第一组件在绘制节点计算所述视图控件对应的布局信息。

示例性地，视图控件对应的布局信息可以包括视图控件对应的位置和尺寸。

一些实施例中，第一组件可以包括：组件模块、元素模块、绘制模块、资源注册模块、纹理插件模块、纹理模块。

其中，组件模块可以用于创建视图控件对应的组件节点，将第一引擎解析的第一对象的样式和属性设置给对应的组件节点。元素模块可以用于创建组件节点对应的元素节点，并将元素节点挂载在元素树上，以便于整颗树的布局计算及相关样式属性的更新。绘制模块可以用于创建视图控件对应显示的绘制节点，并在绘制节点计算视图控件对应的布局信息。绘制模块在计算完视图控件对应的布局信息后，可以创建一个资源管理模块。

资源注册模块可以创建视图控件对应的纹理数据，生成视图对应的纹理数据的纹理标识，并基于资源注册模块和纹理插件模块将视图控件对应的纹理数据注册到GPU中。纹理模块可以创建对应的画布纹理(surfaceTexture)对象。

绘制模块在创建资源管理模块的同时，可以根据第一引擎解析得到的视图控件的插件(plugin)属性，从第一组件中匹配出与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块，并基于异步回调技术，通过与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块创建视图控件对应的第三方插件。

其中，视图控件插件模块和视图控件模块可以是由操作系统的开发人员预设在第一组件中的。

例如，第一组件中可以预设有webview控件对应的webview控件插件模块和webview控件模块，当第一引擎解析得到的视图控件的插件(plugin)属性为webview控件时，绘制模块可以从第一组件中匹配出与webview控件插件模块和webview控件模块。

又例如，第一组件中还可以预设有mapview控件对应的mapview控件插件模块和mapview控件模块，当第一引擎解析得到的视图控件的插件(plugin)属性为mapview控件时，绘制模块可以从第一组件中匹配出mapview控件插件模块和mapview控件模块等。

绘制模块在创建视图控件对应的第三方插件后，可以在第三方插件中，基于surfaceTexture对象、以及与视图控件的插件(plugin)属性对应的视图控件插件模块创建虚显控制器(virtual display controller)；并根据surfaceTexture对象中的surface、以及视图控件对应的布局信息创建对应的虚显控件(virtual display)。虚显控制器可以将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。显示控件可以将第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至到surfaceTexture对象中合成到surface上。

示例性地，终端设备的操作系统可以包括

系统、

系统、

系统、

系统、

系统、

系统等中的任意一种。

例如，一种可能的实现场景中，操作系统可以为鸿蒙系统，操作系统的开发框架为JS开发框架，第一引擎可以为JS引擎，第二引擎可以为渲染引擎。

具体地，渲染引擎可以为skia引擎。

第二方面，本申请实施例提供一种终端设备，可以包括第一引擎、第一组件、以及第二引擎。

其中，第一引擎用于确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端文档对象模型节点。第一组件用于根据视图控件对应的前端文档对象模型节点，确定视图控件对应的布局信息；根据视图控件的插件属性，创建视图控件对应的第三方插件和纹理数据，并将视图控件对应的纹理数据注册到GPU中。第一组件还用于向第二引擎发送视图控件对应的布局信息；根据视图控件对应的第三方插件，显示视图控件对应的纹理数据。第二引擎用于从GPU获取视图控件对应的纹理数据，并根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

其中，第一应用可以为开发人员基于视图控件开发的应用。

可选地，视图控件可以包括网页视图控件、地图视图控件、相机视图控件、视频视图控件、文本视图控件、直播视图控件、广告视图控件、投屏视图控件等中的任意一种。

一些实施例中，视图控件可以是安卓视图控件、或者鸿蒙视图控件、又或者其他java语言开发的视图控件，在此不作限制。

第一应用的第一打包文件包括第一应用对应的视图控件的插件属性，视图控件的插件属性是预配置的。例如，第一应用的开发人员可以在第一应用的第一打包文件中设置视图控件的插件属性为网页视图控件或地图视图控件，对视图控件的插件属性进行预配置。

可选地，第一组件具体可以用于生成视图控件对应的纹理数据的纹理标识，并根据视图控件对应的纹理数据的纹理标识，将视图控件对应的纹理数据注册到GPU中。第一组件还用于向第二引擎发送视图控件对应的纹理数据的纹理标识。第二引擎具体可以用于根据视图控件对应的纹理数据的纹理标识，从GPU获取视图控件对应的纹理数据。

可选地，第一组件具体可以用于获取画布纹理对象；在视图控件对应的第三方插件中创建虚显控制器，并根据画布纹理对象中的画布、以及视图控件对应的布局信息创建对应的虚显控件；通过虚显控制器将视图控件对应的第三方插件与虚显控件进行合成，并创建对应的显示控件；通过显示控件将视图控件对应的第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至画布纹理对象中合成到画布上。

可选地，第二引擎具体可以用于从画布纹理对象中获取画布，并从GPU获取视图控件对应的纹理数据；根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

可选地，第一引擎具体可以用于对第一应用中的第一打包文件进行解析，得到第一应用对应的视图控件的插件属性、以及视图控件对应的第一对象及第一对象的样式和属性；根据视图控件对应的第一对象及第一对象的样式和属性，生成视图控件对应的前端文档对象模型节点。

示例性地，第一应用可以为JS应用，第一打包文件可以为JS包。第一对象可以是JS对象。

可选地，第一组件具体可以用于将视图控件对应的前端文档对象模型节点对接到后端组件节点；根据后端组件节点创建对应的元素节点，并在元素节点中创建对应的绘制节点；在绘制节点计算所述视图控件对应的布局信息。

示例性地，视图控件对应的布局信息可以包括视图控件对应的位置和尺寸。

一些实施例中，第一组件可以包括：组件模块、元素模块、绘制模块、资源注册模块、纹理插件模块、纹理模块。

其中，组件模块可以用于创建视图控件对应的组件节点，将第一引擎解析的第一对象的样式和属性设置给对应的组件节点。元素模块可以用于创建组件节点对应的元素节点，并将元素节点挂载在元素树上，以便于整颗树的布局计算及相关样式属性的更新。绘制模块可以用于创建视图控件对应显示的绘制节点，并在绘制节点计算视图控件对应的布局信息。绘制模块在计算完视图控件对应的布局信息后，可以创建一个资源管理模块。

资源注册模块可以创建视图控件对应的纹理数据，生成视图对应的纹理数据的纹理标识，并基于资源注册模块和纹理插件模块将视图控件对应的纹理数据注册到GPU中。纹理模块可以创建对应的画布纹理(surfaceTexture)对象。

绘制模块在创建资源管理模块的同时，可以根据第一引擎解析得到的视图控件的插件(plugin)属性，从第一组件中匹配出与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块，并基于异步回调技术，通过与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块创建视图控件对应的第三方插件。

绘制模块在创建视图控件对应的第三方插件后，可以在第三方插件中，基于surfaceTexture对象、以及与视图控件的插件(plugin)属性对应的视图控件插件模块创建虚显控制器(virtual display controller)；并根据surfaceTexture对象中的surface、以及视图控件对应的布局信息创建对应的虚显控件(virtual display)。虚显控制器可以将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。显示控件可以将第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至到surfaceTexture对象中合成到surface上。

示例性地，终端设备的操作系统可以包括

系统、

系统、

系统、

系统、

系统、

系统等中的任意一种。

示例性地，第一引擎、第一组件、以及第二引擎均为终端设备的操作系统的开发框架中的代码。

第三方面，本申请实施例提供一种显示视图控件的装置，该装置可以用于实现上述第一方面所述的显示视图控件的方法。该装置的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元，例如，该装置可以包括第一引擎、第一组件、第二引擎等模块。该装置可以通过第一引擎、第一组件、第二引擎实现如第一方面及第一方面的任意一种可能的实现方式中所述的方法。在此不再一一赘述。

第四方面，本申请实施例提供一种电子设备，包括：处理器；存储器；以及计算机程序；其中，所述计算机程序存储在所述存储器上，当所述计算机程序被所述处理器执行时，使得所述电子设备实现如第一方面及第一方面的任意一种可能的实现方式中所述的方法。

第五方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当所述计算机程序在电子设备上运行时，使得所述电子设备实现如第一方面及第一方面的任意一种可能的实现方式中所述的方法。

第六方面，本申请实施例还提供一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码在电子设备中运行时，使得电子设备实现如第一方面及第一方面的任意一种可能的实现方式中所述的方法。

上述第二方面至第六方面所具备的有益效果，可参考第一方面中所述，在此不再赘述。

应当理解的是，本申请中对技术特征、技术方案、有益效果或类似语言的描述并不是暗示在任意的单个实施例中可以实现所有的特点和优点。相反，可以理解的是对于特征或有益效果的描述意味着在至少一个实施例中包括特定的技术特征、技术方案或有益效果。因此，本说明书中对于技术特征、技术方案或有益效果的描述并不一定是指相同的实施例。进而，还可以任何适当的方式组合本实施例中所描述的技术特征、技术方案和有益效果。本领域技术人员将会理解，无需特定实施例的一个或多个特定的技术特征、技术方案或有益效果即可实现实施例。在其他实施例中，还可在没有体现所有实施例的特定实施例中识别出额外的技术特征和有益效果。

附图说明

图1A为本申请实施例提供的终端设备的结构示意图；

图1B为本申请实施例提供的JS开发框架的组成示意图；

图1C为本申请实施例提供的终端设备的操作系统的架构示意图；

图2为本申请实施例提供的显示视图控件的方法的流程示意图；

图3为本申请实施例提供的第一组件200的结构示意图；

图4为本申请实施例提供的显示安卓view控件的渲染效果示意图；

图5为本申请实施例提供的显示安卓view控件的另一渲染效果示意图；

图6为本申请实施例提供的电子设备的结构示意图。

具体实施方式

以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个或两个以上(包含两个)。字符“/”一般表示前后关联对象是一种“或”的关系。

在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。术语“连接”包括直接连接和间接连接，除非另外说明。

以下，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。

在本申请实施例中，“示例性地”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性地”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性地”或者“例如”等词旨在以具体方式呈现相关概念。

操作系统(Operation System，OS)支持显示各种类型的视图控件，有利于OS生态的构建。其中，视图控件是指可以负责应用页面中某个显示区域的绘制和事件处理的一个控件。

例如，对操作系统A而言，当操作系统A支持显示安卓(android)的视图(view)控件(以下简称安卓view控件)时，安装操作系统A的终端设备可以支持显示基于安卓view控件开发的应用页面，有利于操作系统A构建OS生态。

示例性地，安卓view控件可以包括网页视图(webview)控件、地图视图(mapview)控件、相机视图(cameraview)控件、文本视图(textview)控件等。

目前，操作系统支持显示安卓view控件的方案主要为：针对每一种安卓view控件，操作系统的开发框架可以提供一个与该安卓view控件对应的定制化控件，操作系统可以通过与该安卓view控件对应的定制化控件显示该安卓view控件。其中，不同的安卓view控件对应不同的定制化控件。例如，针对webview控件，操作系统可以开发框架可以开发一个webview控件对应的定制化控件，操作系统可以通过webview控件对应的定制化控件显示webview控件。

但是，上述方案中，安卓view控件的接口众多，导致在操作系统的开发框架中实现与安卓view控件对应的定制化控件是非常复杂的，开发工作量极大。另外，一旦操作系统有支持新的安卓view控件的需求，则操作系统的开发框架需要重新定制开发，这将严重影响开发效率，不利于OS生态的发展。

为此，本申请实施例提供一种显示视图控件的方法，可以应用于终端设备，终端设备安装有操作系统。当终端设备安装开发者基于视图控件开发的第一应用时，终端设备可以按照本申请实施例提供的显示视图控件的方法，基于操作系统的开发框架显示第一应用对应的视图控件。该方法可以使得终端设备的操作系统支持显示各种视图控件，对不同的视图控件具有通用性。本申请实施例中，对操作系统的开发框架进行开发时，开发效率可以更高，有利于OS生态的构建。

可选地，本申请实施例中，终端设备可以包括手机、大屏(如智慧屏)、平板电脑、可穿戴设备(例如智能手表、智能手环器等)、电视、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digitalassistant，PDA)等。在此对终端设备的具体形态不作限制。

示例性地，以终端设备为手机为例，图1A为本申请实施例提供的终端设备的结构示意图。如图1A所示，手机可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。

处理器110可以包括多个处理单元，例如：应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-networkprocessing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

其中，控制器可以是手机的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，SIM接口，和/或USB接口等。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展手机的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行手机的各种功能应用以及数据处理。例如，处理器110通过运行存储在内部存储器121的指令，可以使得手机实现本申请实施例所述的显示视图控件的方法。

内部存储器121还可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如本申请实施例中所述的第一应用)等。存储数据区可存储手机使用过程中所创建的数据(比如图像数据，电话本)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

充电管理模块140用于从充电器接收充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为手机供电。电源管理模块141用于连接电池142，充电管理模块140，以及处理器110。电源管理模块141也可接收电池142的输入为手机供电。

手机可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。例如，本申请实施例中，显示屏194可以用于显示JS应用的JS页面。

手机通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

可以理解的是，图1A所示的结构并不构成对手机的具体限定。在一些实施例中，手机也可以包括比图1A所示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置等。又或者，图1A所示的一些部件可以以硬件，软件或软件和硬件的组合实现。

另外，当终端设备是其他大屏(如智慧屏)、平板电脑、可穿戴设备(例如智能手表、智能手环器等)、电视、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtualreality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)等设备时，这些其他终端设备的具体结构也可以参考图1A所示。示例性地，其他终端设备可以是在图1A给出的结构的基础上增加或减少了组件，在此不再一一赘述。

可选地，本申请实施例中，视图控件可以是安卓view控件、鸿蒙视图控件、或者其他视图控件(如其他用java语言开发的视图控件)等，本申请实施例对该方法中操作系统可以支持显示的视图控件的具体类型不作限制。例如，操作系统可以通过该方法显示不同的安卓view控件。

可选地，本申请实施例中，操作系统可以是

系统、

系统、或者

系统、或者

系统、或者

系统、又或者

系统等，在此对操作系统的具体类型也不作限制。

下面以操作系统为鸿蒙系统为例，结合鸿蒙系统显示安卓view控件的场景，对本申请实施例提供的显示视图控件的方法进行示例性说明。

其中，鸿蒙系统以JavaScript作为开发语言，其核心开发框架为JS开发框架。JS开发框架可以包括JS引擎和渲染引擎。

本申请实施例中，可以在JS开发框架中开发一个第一组件，第一组件可以和JS引擎、以及渲染引擎配合实现该显示视图控件的方法。第一组件可以是能够实现本申请实施例中所述的相应功能的代码。也即，本申请实施例中，终端设备可以包括JS引擎、第一组件、渲染引擎，终端设备可以通过JS引擎、第一组件、以及渲染引擎实现本申请实施例所述的实现该显示视图控件的方法。

下述示例性说明中将涉及以下概念：

1、JS应用

JS应用是指使用JavaScript语言开发的应用。JS应用中可以提供JS页面，JS页面通过调用安卓view控件进行显示，即，该JS页面为安卓view控件的显示页面。

2、JS包(JS bundle)

JS bundle也称JS打包文件。JS bundle是指JS应用中包含超文本标记语言(hypertext markup language，HTML)文件、层叠样式表(cascading style sheets，CSS)文件和JS文件的包。可以使用打包工具对HTML文件、CSS文件和JS文件进行打包得到JSbundle。

例如，假设JS应用中的HTML文件、CSS文件、JS文件分别如下所示：

则，使用打包工具将上述HTML文件、CSS文件、JS文件打包成的JS bundle可以如下所示：

应当理解，上述HTML文件、CSS文件、JS文件、以及JS bundle中，仅作为示例给出了部分代码。

3、JS对象

在JavaScript中，除了字符串(string)、数字(number)、布尔值(boolean)、空字符(null)、未定义值(undefined)之外，其他的数据都是JS对象，如JS对象可以是数组、日期甚至函数等。

4、虚拟文档对象模型(virtual document object model，VDOM)节点和文档对象模型(document object model，DOM)节点

VODM节点是虚拟/模拟DOM节点。

DOM节点可以用于对接后端组件(component)节点，实现前端组件的能力。

5、组件(component)节点

component节点是底层UI组件的声明式描述，描述了UI组件的属性和样式。如：component节点描述了每个JS页面中每个前端DOM节点，包含前端DOM节点对应的JS对象的样式和属性。component节点可以用于生成component的实体元素(element)。

6、元素(element)节点

element节点是component节点的实例，表示具体的component节点。

7、绘制(render)节点

render节点也称渲染节点。render节点用于计算每个element节点的渲染数据，如：element节点的渲染数据可以包括element节点在JS页面中的位置、大小/尺寸、绘制命令等。

8、虚显控件(virtual display)：一种抓取屏幕上显示内容的控件。

9、显示控件(presentation)：一个显示在指定显示屏的特殊的对话框，用于在辅助屏幕上显示内容。

10、画布纹理(surfaceTexture)：一种可将纹理数据转为外部纹理的画布(surface)，该surface不会直接来显示。

11、surface：类似一个画布，页面上的节点都绘制在这个画布。

12、上下文(context)：是指一个应用程序环境的信息。

示例性地，图1B为本申请实施例提供的JS开发框架的组成示意图。如图1B所示，本申请实施例中，JS开发框架可以包括：JS引擎100、第一组件200、渲染引擎300。

本申请实施例中，当终端设备安装开发者基于安卓view视图控件开发的JS应用时，终端设备可以通过JS开发框架加载JS应用。例如，终端设备可以提供JS应用的图标，用户可以点击JS应用的图标。终端设备可以响应于用户点击JS应用的图标，通过JS开发框架加载JS应用。通过JS开发框架加载JS应用后，JS引擎100可以对JS应用中的JS包(bundle)进行解析，确定JS应用对应的安卓view控件的插件(plugin)属性、以及安卓view控件对应的前端DOM节点。第一组件200可以根据安卓view控件对应的前端DOM节点确定安卓view控件对应的布局信息，以及根据安卓view控件的plugin属性创建安卓view控件对应的第三方插件和纹理数据，并将安卓view控件对应的纹理数据注册到GPU中。第一组件200可以根据安卓view控件对应的第三方插件，显示安卓view控件对应的纹理数据。渲染引擎300可以从GPU获取安卓view控件对应的纹理数据，并根据第一组件200确定出的安卓view控件对应的布局信息，对安卓view控件对应的纹理数据进行渲染。

示例性地，图1C为本申请实施例提供的终端设备的操作系统的架构示意图。如图1C所示，终端设备的操作系统可以包括应用程序层(applications)、应用程序框架层(application framework)、系统运行库层(libraries)、以及内核层。

其中，应用程序层包含了多个应用，如：应用程序层可以包含电子邮件、短信、日历、地图、浏览器和联系人管理等系统应用，以及开发人员利用Java语言设计和编写的第三方应用(如JS应用)。对于应用程序层包含的每个JS应用而言，开发人员在开发该应用时，可以在该JS应用的JS bundle中预配置安卓view控件的plugin属性。

上述图1B中所示的JS引擎100、第一组件200、以及渲染引擎300可以部署在图1C中所示的应用程序框架层或者系统运行库层，在此不作限制。

下面对上述图1B中所示的JS引擎100、第一组件200、以及渲染引擎300配合实现本申请实施例提供的显示视图控件的方法的具体过程进行说明。

以视图控件为安卓view控件为例，图2为本申请实施例提供的显示视图控件的方法的流程示意图。如图2所示，该显示视图控件的方法可以包括S201-S210。

S201、JS引擎100对开发者开发的JS应用中的JS包(bundle)进行解析，得到安卓view控件的插件(plugin)属性、以及安卓view控件对应的JS对象及JS对象的样式和属性。

其中，开发者开发的JS应用是由开发人员基于安卓view控件所开发的应用。开发人员在开发JS应用时，可以在JS应用的HTML文件的代码中预设(预配置)安卓view控件的插件(plugin)属性。如：可以预配置安卓view控件的插件(plugin)属性为webview控件、mapview控件、cameraview控件、textview控件等。

JS引擎100可以将开发者开发的JS应用中的JS bundle加载到JS开发框架中，对JSbundle进行解析，得到安卓view控件对应的JS对象及JS对象的样式和属性、以及安卓view的插件(plugin)属性。

例如，开发者开发的JS应用可以是基于webview控件所开发的应用。JS引擎100对JS应用中的JS bundle进行解析，可以得到安卓view控件的插件(plugin)属性为webview控件，同时，可以得到webview控件对应的JS对象及JS对象的样式和属性。

示例性地，假设开发者设计(或开发)的JS应用中HTML文件的部分代码如下：

则，JS引擎100可以解析得到该JS应用中安卓view控件的插件(plugin)属性为：webview控件。

假设开发者设计(或开发)的JS应用中HTML文件的部分代码如下：

则，JS引擎100可以解析得到该JS应用中安卓view控件的插件(plugin)属性为：mapview控件。

S202、JS引擎100根据安卓view控件对应的JS对象及JS对象的样式和属性，生成安卓view控件对应的前端文档对象模型(document object model，DOM)节点。

可选地，JS引擎100根据安卓view控件对应的JS对象及JS对象的样式和属性，生成安卓view控件对应的前端DOM节点的步骤，可以包括：JS引擎100根据安卓view控件对应的JS对象生成VDOM节点的树形结构(简称VDOM树)，VODM树包括多个VDOM节点。JS引擎100将JS对象的样式和属性设置给对应的VODM节点，并对VDOM树上的每个VDOM节点进行数据绑定。JS引擎100在生成VDOM节点的同时，同步创建对应的前端DOM节点。

其中，VODM树也即模拟DOM树的JS对象树。数据绑定是指在应用程序UI界面与数据源建立连接的过程，用于当每个VDOM节点的数据发生变化时，对应的UI节点会自动绘制更新。

JS引擎100根据安卓view控件对应的JS对象及JS对象的样式和属性，生成安卓view控件对应的前端DOM节点后，第一组件200可以根据前端DOM节点依次创建对应的后端组件(component)节点、元素(element)节点、以及绘制(render)节点，来完成布局的计算，组件样式和属性的更新等。例如，第一组件200可以执行S203-S205。

S203、第一组件200将安卓view控件对应的前端DOM节点对接到后端组件(component)节点。

S204、第一组件200根据后端组件节点创建对应的元素(element)节点，并在元素节点中创建对应的绘制(render)节点。

S205、第一组件200在绘制节点计算安卓view控件对应的布局信息。

其中，布局信息可以包括位置和尺寸，尺寸也即布局大小。例如，第一组件200可以在绘制节点计算安卓view控件对应的每个DOM节点的位置和尺寸。

S206、第一组件200根据安卓view控件的插件(plugin)属性，创建安卓view控件对应的第三方插件，并创建安卓view控件对应的纹理数据。

示例性地，如S201的举例中所述，假设开发者设计(或开发)的JS应用中HTML文件的部分代码如下：

则，JS引擎100可以解析得到该JS应用中安卓view控件的插件(plugin)属性为：webview控件。对此，S206中第一组件200根据安卓view控件的插件(plugin)属性为webview控件，创建的安卓view控件对应的第三方插件可以为：webview插件。

又例如，如S201的举例中所述，假设开发者设计(或开发)的JS应用中HTML文件的部分代码如下：

则，JS引擎100可以解析得到该JS应用中安卓view控件的插件(plugin)属性为：mapview控件。对此，S206中第一组件200根据安卓view控件的插件(plugin)属性为mapview控件，创建的安卓view控件对应的第三方插件可以为：mapview插件。

S207、第一组件200生成安卓view控件对应的纹理数据的纹理标识，并根据安卓view控件对应的纹理数据的纹理标识，将安卓view控件对应的纹理数据注册到图形处理器(graphics processing unit，GPU)中。

示例性地，安卓view控件对应的纹理数据的纹理标识可以是纹理数据的纹理ID，纹理ID可以表示纹理数据的唯一身份信息。根据安卓view控件对应的纹理数据的纹理标识，将安卓view控件对应的纹理数据注册到GPU中后，渲染引擎300后续可以根据安卓view控件对应的纹理数据的纹理标识，从GPU索引/获取安卓view控件对应的纹理数据。

需要说明的是，本申请对S205、以及S206-S207的执行顺序不作限制。例如，一些实施方式中，S205与S206-S207可以是同步执行。另外一些实施方式中，S205也可以在S206-S207之前或之后执行。

S208、第一组件200向渲染引擎300发送安卓view控件对应的布局信息、以及安卓view控件对应的纹理数据的纹理标识。

S209、第一组件200根据安卓view控件对应的第三方插件，显示安卓view控件对应的纹理数据。

可选地，第一组件200根据安卓view控件对应的第三方插件，显示安卓view控件对应的纹理数据的步骤，可以包括：第一组件200获取画布纹理(surfaceTexture)对象。第一组件200在第三方插件中创建虚显控制器(virtual display controller)，并根据surfaceTexture对象中的画布(surface)、以及安卓view控件对应的布局信息创建对应的虚显控件(virtual display)。第一组件200通过虚显控制器将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。第一组件200通过显示控件将第三方插件添加到显示控件中的视图对应的容器上，并将安卓view控件对应的纹理数据送至surfaceTexture对象中合成到surface上。

示例性地，图3为本申请实施例提供的第一组件200的结构示意图。下面结合图3所示的结构，对上述S203-S207、以及S209所述的过程进行具体说明。如图3所示，第一组件200可以包括：

组件模块210，组件模块210也可以称为NativeTextureComponent模块，可以用于创建安卓view控件对应的component节点，将JS引擎100从JS bundle中解析的JS对象的样式和属性设置给对应的component节点。

元素模块220，元素模块220也可以称为NativeTextureElement模块，可以用于创建component节点对应的element节点，并将element节点挂载在element树上，以便于整颗树的布局计算及相关样式属性的更新。

绘制模块230，绘制模块230也可以称为NativeTextureRender模块，可以用于创建安卓view控件对应显示的render节点，并在render节点计算安卓view控件对应的布局信息。绘制模块230在计算完安卓view控件对应的布局信息后，可以创建一个资源管理模块231。资源管理模块231也可以称为NativeDelegate模块或资源管理器。

第一组件200还包括：资源注册模块240、纹理插件模块250、纹理模块260。资源注册模块也可以称为ResourceRegister模块，纹理插件模块也可以称为TexturePlugin模块，纹理模块也可以称为Texture模块。

资源管理模块231可以创建安卓view控件对应的纹理数据，生成安卓view控件对应的纹理数据的纹理标识，并基于资源注册模块240和纹理插件模块250将安卓view控件对应的纹理数据注册到GPU中。纹理模块260可以创建对应的画布纹理(surfaceTexture)对象。

绘制模块230在创建资源管理模块231的同时，可以根据S201中JS引擎100解析得到的安卓view控件的插件(plugin)属性，从第一组件200中匹配出与安卓view控件的插件(plugin)属性对应的安卓view控件插件模块和安卓view控件模块，并基于异步回调技术，通过与安卓view控件的插件(plugin)属性对应的安卓view控件插件模块和安卓view控件模块创建安卓view控件对应的第三方插件。

其中，安卓view控件插件模块和安卓view控件模块可以是由操作系统的开发人员预设在第一组件200中的。例如，第一组件200中可以预设有webview控件对应的webview控件插件模块和webview控件模块，当S201中JS引擎100解析得到的安卓view控件的插件(plugin)属性为webview控件时，绘制模块230可以从第一组件200中匹配出与安卓view控件的插件(plugin)属性对应的webview控件插件模块(WebviewPlugin模块)和webview控件模块(Webview模块)。又例如，第一组件200中还可以预设有mapview控件对应的mapview控件插件模块(mapviewPlugin模块)和mapview控件模块(mapview模块)，当S201中JS引擎100解析得到的安卓view控件的插件(plugin)属性为mapview控件时，绘制模块230可以从第一组件200中匹配出与安卓view控件的插件(plugin)属性对应的mapview控件插件模块和mapview控件模块等。

绘制模块230在创建安卓view控件对应的第三方插件后，可以在第三方插件中，基于surfaceTexture对象、以及与安卓view控件的插件(plugin)属性对应的安卓view控件插件模块创建虚显控制器(virtual display controller)；并根据surfaceTexture对象中的surface、以及安卓view控件对应的布局信息创建对应的虚显控件(virtual display)。虚显控制器将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。显示控件可以将第三方插件添加到显示控件中的视图对应的容器上，并将安卓view控件对应的纹理数据送至到surfaceTexture对象中合成到surface上。

S210、渲染引擎300根据安卓view控件对应的纹理数据的纹理标识从GPU获取安卓view控件对应的纹理数据，并根据安卓view控件对应的布局信息，对安卓view控件对应的纹理数据进行渲染。

可选地，渲染引擎300根据安卓view控件对应的纹理数据的纹理标识从GPU获取安卓view控件对应的纹理数据，并根据安卓view控件对应的布局信息，对安卓view控件对应的纹理数据进行渲染的步骤，可以包括：渲染引擎300从surfaceTexture对象中获取surface，并根据安卓view控件对应的纹理数据的纹理标识从GPU获取安卓view控件对应的纹理数据。渲染引擎300根据安卓view控件对应的布局信息，对安卓view控件对应的纹理数据进行渲染。

下面以开发者在JS应用中设置插件(plugin)属性为webview控件为例，对上述图2所示的本申请实施例提供的显示安卓view控件的方法的具体应用过程进行示例性说明。

本申请实施例中，当开发者在JS应用中设置插件(plugin)属性为webview控件时，JS引擎100对开发者开发的JS应用中的JS包(bundle)进行解析，可以得到安卓view控件的插件(plugin)属性为webview控件，以及webview控件对应的JS对象及JS对象的样式和属性。然后，JS引擎100可以根据webview控件对应的JS对象及JS对象的样式和属性，生成webview控件对应的前端DOM节点。第一组件200可以将webview控件对应的前端DOM节点对接到后端component节点，根据后端component节点创建对应的element节点，并在element节点中创建对应的render节点。然后，第一组件200可以在render节点计算webview控件对应的布局信息。另外，第一组件200可以创建webview控件对应的webview插件和纹理数据。在创建webview控件对应的纹理数据后，第一组件200可以生成webview控件对应的纹理数据的纹理标识，并根据webview控件对应的纹理数据的纹理标识，将webview控件对应的纹理数据注册到GPU中。

之后，第一组件200可以向渲染引擎300发送webview控件对应的布局信息、以及webview控件对应的纹理数据的纹理标识。第一组件200还可以获取画布纹理(surfaceTexture)对象，在webview插件中创建虚显控制器(virtual displaycontroller)，并根据surfaceTexture对象中的画布(surface)、以及webview控件对应的布局信息创建对应的虚显控件(virtual display)。在创建虚显控件后，第一组件200可以通过虚显控制器将webview插件与虚显控件进行合成，并创建对应的显示控件(presentation)。创建对应的显示控件后，第一组件200可以通过显示控件将webview插件添加到显示控件中的视图对应的容器上，并将webview控件对应的纹理数据送至surfaceTexture对象中合成到surface上。渲染引擎300可以根据webview控件对应的纹理数据的纹理标识从GPU获取webview控件对应的纹理数据，并根据webview控件对应的布局信息，对webview控件对应的纹理数据进行渲染。从而，JS框架可以实现支持显示webview控件。

示例性地，图4为本申请实施例提供的显示安卓view控件的渲染效果示意图。如图4所示，当开发者设计(或开发)的JS应用的HTML文件的代码中预设的安卓view控件的plugin属性为webview控件时(代码具体可以参见前述实施例中所述)，通过本申请实施例所述的方法可以渲染出类似于如图4所示的网页页面。应当理解，不同的JS应用或JS应用请求不同的网页地址时，图4所示的页网页面中的页面内容不同。图4仅作为示例进行说明。

类似地，当开发者在JS应用中设置插件(plugin)属性为其他安卓view控件(如：mapview控件)时，操作系统的开发框架均可以按照前述实施例所述的方式，实现支持其他安卓view控件的显示。

示例性地，图5为本申请实施例提供的显示安卓view控件的另一渲染效果示意图。如图5所示，当开发者设计(或开发)的JS应用的HTML文件的代码中预设的安卓view控件的plugin属性为mapview控件时(代码具体可以参见前述实施例中所述)，通过本申请实施例所述的方法可以渲染出类似于如图5所示的地图页面。图5同样仅作为示例进行说明。

本申请实施例提供的显示安卓view控件的方法中，JS应用的开发人员只需要在JS应用的HTML文件的代码中设置安卓view控件的插件(plugin)属性，即可使得操作系统侧实现支持显示不同的安卓view控件。操作系统侧按照本申请实施例提供的显示安卓view控件的方法来显示不同的安卓view控件时，不需要考虑不同安卓view控件的适配对接问题，整个实现流程可以由操作系统的开发框架自动完成，JS应用的开发人员可以不感知，大大降低了适配操作系统的JS应用的开发难度，有利于吸引更多的开发者参与OS生态的构建。

另外，操作系统侧的开发框架可以实现一次开发，可部署各种复杂的安卓view的目标，大大降低开发成本。JS应用的开发人员在JS应用的HTML文件的代码中设置安卓view控件的插件(plugin)属性，操作系统的开发框架自动根据开发人员设置的安卓view控件的插件(plugin)属性匹配对应的第三方插件，还可以避免开发人员针对不同的安卓view控件进行二次开发，能够有效提高开发效率。

进一步地，本申请实施例提供的显示安卓view控件的方法中，通过将安卓view控件对应的纹理数据(也可以简称为安卓侧的纹理数据)直接注册到GPU中，可以避免在CPU中创建纹理缓存。渲染引擎可以直接从GPU中获取安卓view控件对应的纹理数据进行渲染，不需要CPU和GPU之间进行纹理数据的传递，可以节省CPU在不同纹理缓存之间的拷贝时间以及纹理上传到GPU的时间，大大提高渲染性能。同时，还节省了纹理数据占用的内存和GPU显存。

需要说明的是，前述实施例中虽然以安卓view控件为webview控件或mapview控件进行了示例性说明。但应当理解，在其他一些场景中，操作系统通过本申请实施例提供的显示视图控件的方法可以显示的视图控件还可以是cameraview控件、textview控件、直播视图控件、广告视图控件、投屏视图控件等其他安卓view控件，或者，鸿蒙视图控件、其他用java语言开发的视图控件等其他视图控件。当视图控件为前述其他类型时，其实现原理与前述实施例中所述的显示webview控件或mapview控件的原理相同，不再一一赘述。

另外，还应当理解，上述说明中，当操作系统是除鸿蒙^TM系统之外的其他系统时，JS开发框架可以相应被替换为其他系统对应的其他语言的开发框架，JS引擎可以是对其他语言代码进行解析的引擎。例如，ios^TM系统对应的开发框架可以是Swift开发框架，Swift开发框架可以包括Swift引擎、第一组件、渲染引擎等。

本申请实施例中，开发者基于视图控件开发的应用可以称为第一应用，第一应用对应的打包文件(如JS应用的JS bundle)可以称为第一打包文件。操作系统的开发框架中对第一应用进行解析的引擎(如鸿蒙^TM系统中的JS引擎)可以称为第一引擎，渲染引擎可以称为第二引擎。第一引擎对第一应用中的第一打包文件进行解析，得到的对象(如JS对象)可以称为第一对象。

对应于前述实施例中所述的显示视图控件的方法，本申请实施例还提供一种终端设备，终端设备可以包括第一引擎、第一组件、以及第二引擎。

其中，第一引擎用于确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端文档对象模型节点。第一组件用于根据视图控件对应的前端文档对象模型节点，确定视图控件对应的布局信息；根据视图控件的插件属性，创建视图控件对应的第三方插件和纹理数据，并将视图控件对应的纹理数据注册到GPU中。第一组件还用于向第二引擎发送视图控件对应的布局信息；根据视图控件对应的第三方插件，显示视图控件对应的纹理数据。第二引擎用于从GPU获取视图控件对应的纹理数据，并根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

其中，第一应用可以为开发人员基于视图控件开发的应用。

可选地，视图控件可以包括网页视图控件、地图视图控件、相机视图控件、视频视图控件、文本视图控件、直播视图控件、广告视图控件、投屏视图控件等中的任意一种。

一些实施例中，视图控件可以是安卓视图控件、或者鸿蒙视图控件、又或者其他java语言开发的视图控件，在此不作限制。

第一应用的第一打包文件包括第一应用对应的视图控件的插件属性，视图控件的插件属性是预配置的。例如，第一应用的开发人员可以在第一应用的第一打包文件中设置视图控件的插件属性为网页视图控件或地图视图控件，对视图控件的插件属性进行预配置。

可选地，第一组件具体可以用于生成视图控件对应的纹理数据的纹理标识，并根据视图控件对应的纹理数据的纹理标识，将视图控件对应的纹理数据注册到GPU中。第一组件还用于向第二引擎发送视图控件对应的纹理数据的纹理标识。第二引擎具体可以用于根据视图控件对应的纹理数据的纹理标识，从GPU获取视图控件对应的纹理数据。

可选地，第一组件具体可以用于获取画布纹理对象；在视图控件对应的第三方插件中创建虚显控制器，并根据画布纹理对象中的画布、以及视图控件对应的布局信息创建对应的虚显控件；通过虚显控制器将视图控件对应的第三方插件与虚显控件进行合成，并创建对应的显示控件；通过显示控件将视图控件对应的第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至画布纹理对象中合成到画布上。

可选地，第二引擎具体可以用于从画布纹理对象中获取画布，并从GPU获取视图控件对应的纹理数据；根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

可选地，第一引擎具体可以用于对第一应用中的第一打包文件进行解析，得到第一应用对应的视图控件的插件属性、以及视图控件对应的第一对象及第一对象的样式和属性；根据视图控件对应的第一对象及第一对象的样式和属性，生成视图控件对应的前端文档对象模型节点。

示例性地，第一应用可以为JS应用，第一打包文件可以为JS包。第一对象可以是JS对象。

可选地，第一组件具体可以用于将视图控件对应的前端文档对象模型节点对接到后端组件节点；根据后端组件节点创建对应的元素节点，并在元素节点中创建对应的绘制节点；在绘制节点计算所述视图控件对应的布局信息。

示例性地，视图控件对应的布局信息可以包括视图控件对应的位置和尺寸。

一些实施例中，第一组件可以包括：组件模块、元素模块、绘制模块、资源注册模块、纹理插件模块、纹理模块。

其中，组件模块可以用于创建视图控件对应的组件节点，将第一引擎解析的第一对象的样式和属性设置给对应的组件节点。元素模块可以用于创建组件节点对应的元素节点，并将元素节点挂载在元素树上，以便于整颗树的布局计算及相关样式属性的更新。绘制模块可以用于创建视图控件对应显示的绘制节点，并在绘制节点计算视图控件对应的布局信息。绘制模块在计算完视图控件对应的布局信息后，可以创建一个资源管理模块。

资源注册模块可以创建视图控件对应的纹理数据，生成视图对应的纹理数据的纹理标识，并基于资源注册模块和纹理插件模块将视图控件对应的纹理数据注册到GPU中。纹理模块可以创建对应的画布纹理(surfaceTexture)对象。

绘制模块在创建资源管理模块的同时，可以根据第一引擎解析得到的视图控件的插件(plugin)属性，从第一组件中匹配出与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块，并基于异步回调技术，通过与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块创建视图控件对应的第三方插件。

绘制模块在创建视图控件对应的第三方插件后，可以在第三方插件中，基于surfaceTexture对象、以及与视图控件的插件(plugin)属性对应的视图控件插件模块创建虚显控制器(virtual display controller)；并根据surfaceTexture对象中的surface、以及视图控件对应的布局信息创建对应的虚显控件(virtual display)。虚显控制器可以将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。显示控件可以将第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至到surfaceTexture对象中合成到surface上。

示例性地，终端设备的操作系统可以包括

系统、

系统、

系统、

系统、

系统、

系统等中的任意一种。

示例性地，第一引擎、第一组件、以及第二引擎均为终端设备的操作系统的开发框架中的代码。

示例性地，当操作系统的开发框架为JS开发框架时，第一引擎可以是JS引擎，第二引擎可以是渲染引擎。具体可以参见前述实施例中的图1B中所示。

应当理解，该终端设备可以通过第一引擎、第一组件、以及第二引擎实现本申请前述方法实施例中所述的显示视图控件的方法的全部功能。

可选地，本申请实施例还提供一种显示视图控件的装置，该装置可以用于实现前述方法实施例中所述的显示视图控件的方法。该装置的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元。

示例性地，该显示视图控件的装置可以包括第一引擎、第一组件、以及第二引擎等模块。该显示视图控件的装置可以通过第一引擎、第一组件、以及第二引擎等模块实现本申请前述方法实施例中所述的显示视图控件的方法的全部功能。

例如，第一引擎可以用于确定第一应用对应的视图控件的插件属性、以及视图控件对应的前端文档对象模型节点。第一组件可以用于根据视图控件对应的前端文档对象模型节点，确定视图控件对应的布局信息；根据视图控件的插件属性，创建视图控件对应的第三方插件和纹理数据，并将视图控件对应的纹理数据注册到GPU中。第一组件还可以用于向第二引擎发送视图控件对应的布局信息；根据视图控件对应的第三方插件，显示视图控件对应的纹理数据。第二引擎可以用于从GPU获取视图控件对应的纹理数据，并根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

其中，第一应用可以为开发人员基于视图控件开发的应用。

可选地，视图控件可以包括网页视图控件、地图视图控件、相机视图控件、视频视图控件、文本视图控件、直播视图控件、广告视图控件、投屏视图控件等中的任意一种。

一些实施例中，视图控件可以是安卓视图控件、或者鸿蒙视图控件、又或者其他java语言开发的视图控件，在此不作限制。

第一应用的第一打包文件包括第一应用对应的视图控件的插件属性，视图控件的插件属性是预配置的。例如，第一应用的开发人员可以在第一应用的第一打包文件中设置视图控件的插件属性为网页视图控件或地图视图控件，对视图控件的插件属性进行预配置。

可选地，第一组件具体可以用于生成视图控件对应的纹理数据的纹理标识，并根据视图控件对应的纹理数据的纹理标识，将视图控件对应的纹理数据注册到GPU中。第一组件还用于向第二引擎发送视图控件对应的纹理数据的纹理标识。第二引擎具体可以用于根据视图控件对应的纹理数据的纹理标识，从GPU获取视图控件对应的纹理数据。

可选地，第一组件具体可以用于获取画布纹理对象；在视图控件对应的第三方插件中创建虚显控制器，并根据画布纹理对象中的画布、以及视图控件对应的布局信息创建对应的虚显控件；通过虚显控制器将视图控件对应的第三方插件与虚显控件进行合成，并创建对应的显示控件；通过显示控件将视图控件对应的第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至画布纹理对象中合成到画布上。

可选地，第二引擎具体可以用于从画布纹理对象中获取画布，并从GPU获取视图控件对应的纹理数据；根据视图控件对应的布局信息对视图控件对应的纹理数据进行渲染。

可选地，第一引擎具体可以用于对第一应用中的第一打包文件进行解析，得到第一应用对应的视图控件的插件属性、以及视图控件对应的第一对象及第一对象的样式和属性；根据视图控件对应的第一对象及第一对象的样式和属性，生成视图控件对应的前端文档对象模型节点。

可选地，第一组件具体可以用于将视图控件对应的前端文档对象模型节点对接到后端组件节点；根据后端组件节点创建对应的元素节点，并在元素节点中创建对应的绘制节点；在绘制节点计算所述视图控件对应的布局信息。

示例性地，视图控件对应的布局信息可以包括视图控件对应的位置和尺寸。

一些实施例中，第一组件可以包括：组件模块、元素模块、绘制模块、资源注册模块、纹理插件模块、纹理模块。具体可以参考上述图3中所示。

其中，组件模块可以用于创建视图控件对应的组件节点，将第一引擎解析的第一对象的样式和属性设置给对应的组件节点。元素模块可以用于创建组件节点对应的元素节点，并将元素节点挂载在元素树上，以便于整颗树的布局计算及相关样式属性的更新。绘制模块可以用于创建视图控件对应显示的绘制节点，并在绘制节点计算视图控件对应的布局信息。绘制模块在计算完视图控件对应的布局信息后，可以创建一个资源管理模块。

资源注册模块可以创建视图控件对应的纹理数据，生成视图对应的纹理数据的纹理标识，并基于资源注册模块和纹理插件模块将视图控件对应的纹理数据注册到GPU中。纹理模块可以创建对应的画布纹理(surfaceTexture)对象。

绘制模块在创建资源管理模块的同时，可以根据第一引擎解析得到的视图控件的插件(plugin)属性，从第一组件中匹配出与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块，并基于异步回调技术，通过与视图控件的插件(plugin)属性对应的视图控件插件模块和视图控件模块创建视图控件对应的第三方插件。

绘制模块在创建视图控件对应的第三方插件后，可以在第三方插件中，基于surfaceTexture对象、以及与视图控件的插件(plugin)属性对应的视图控件插件模块创建虚显控制器(virtual display controller)；并根据surfaceTexture对象中的surface、以及视图控件对应的布局信息创建对应的虚显控件(virtual display)。虚显控制器可以将第三方插件与虚显控件进行合成，并创建对应的显示控件(presentation)。显示控件可以将第三方插件添加到显示控件中的视图对应的容器上，并将视图控件对应的纹理数据送至到surfaceTexture对象中合成到surface上。

示例性地，终端设备的操作系统可以包括

系统、

系统、

系统、

系统、

系统、

系统等中的任意一种。

示例性地，第一引擎、第一组件、以及第二引擎均为终端设备的操作系统的开发框架中的代码。

应理解以上装置中单元(或称为模块)的划分(如将显示视图控件的装置划分为第一引擎、第一组件、以及第二引擎)仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且装置中的单元可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分单元以软件通过处理元件调用的形式实现，部分单元以硬件的形式实现。

例如，各个单元可以为单独设立的处理元件，也可以集成在装置的某一个芯片中实现，此外，也可以以程序的形式存储于存储器中，由装置的某一个处理元件调用并执行该单元的功能。此外这些单元全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件又可以称为处理器，可以是一种具有信号的处理能力的集成电路。在实现过程中，上述方法的各步骤或以上各个单元可以通过处理器元件中的硬件的集成逻辑电路实现或者以软件通过处理元件调用的形式实现。

在一个例子中，以上装置中的单元可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个专用集成电路(application specific integrated circuit，ASIC)，或，一个或多个数字信号处理器(digital signal process，DSP)，或，一个或者多个现场可编辑逻辑门阵列(field programmable gate array，FPGA)，或这些集成电路形式中至少两种的组合。

再如，当装置中的单元可以通过处理元件调度程序的形式实现时，该处理元件可以是通用处理器，例如中央处理器(central processing unit，CPU)或其它可以调用程序的处理器。再如，这些单元可以集成在一起，以片上系统(system-on-a-chip，SOC)的形式实现。

在一种实现中，以上装置实现以上方法中各个对应步骤的单元可以通过处理元件调度程序的形式实现。例如，该装置可以包括处理元件和存储元件，处理元件调用存储元件存储的程序，以执行以上方法实施例所述的方法。存储元件可以为与处理元件处于同一芯片上的存储元件，即片内存储元件。

在另一种实现中，用于执行以上方法的程序可以在与处理元件处于不同芯片上的存储元件，即片外存储元件。此时，处理元件从片外存储元件调用或加载程序于片内存储元件上，以调用并执行以上方法实施例所述的方法。

例如，本申请实施例还可以提供一种装置，如：电子设备。图6为本申请实施例提供的电子设备的结构示意图。如图6所示，该电子设备可以包括：处理器601；存储器602；以及计算机程序；其中，所述计算机程序存储在所述存储器602上，当所述计算机程序被所述处理器601执行时，使得所述电子设备实现如前述实施例所述的显示视图控件的方法。该存储器602可以位于该电子设备之内，也可以位于该电子设备之外。且该处理器601包括一个或多个。

示例性地，该电子设备可以是手机、平板电脑、可穿戴设备(例如智能手表、智能手环器等)、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)等。

在又一种实现中，该装置实现以上方法中各个步骤的单元可以是被配置成一个或多个处理元件，这里的处理元件可以为集成电路，例如：一个或多个ASIC，或，一个或多个DSP，或，一个或者多个FPGA，或者这些类集成电路的组合。这些集成电路可以集成在一起，构成芯片。

例如，本申请实施例还提供一种芯片，该芯片可以应用于上述电子设备。芯片包括一个或多个接口电路和一个或多个处理器；接口电路和处理器通过线路互联；处理器通过接口电路从电子设备的存储器接收并执行计算机指令，以实现如前述实施例所述的显示视图控件的方法。

本申请实施例还提供一种计算机程序产品，包括计算机可读代码，当计算机可读代码在电子设备中运行时，使得电子设备实现如前述实施例所述的显示视图控件的方法。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。

基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，如：程序。该软件产品存储在一个程序产品，如计算机可读存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

例如，本申请实施例还可以提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当所述计算机程序在电子设备上运行时，使得所述电子设备实现如前述实施例所述的显示视图控件的方法。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何在本申请揭露的技术范围内的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (14)

1.一种显示视图控件的方法，其特征在于，所述方法应用于终端设备，所述终端设备包括：第一引擎、第一组件、以及第二引擎；所述方法包括：

所述第一引擎确定第一应用对应的视图控件的插件属性、以及所述视图控件对应的前端文档对象模型节点；

所述第一组件根据所述视图控件对应的前端文档对象模型节点，确定所述视图控件对应的布局信息；

所述第一组件根据所述视图控件的插件属性，创建所述视图控件对应的第三方插件和纹理数据，并将所述视图控件对应的纹理数据注册到图形处理器GPU中；

所述第一组件向所述第二引擎发送所述视图控件对应的布局信息；

所述第一组件根据所述视图控件对应的第三方插件，显示所述视图控件对应的纹理数据；

所述第二引擎从GPU获取所述视图控件对应的纹理数据，并根据所述视图控件对应的布局信息对所述视图控件对应的纹理数据进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述第一组件将所述视图控件对应的纹理数据注册到GPU中，包括：

所述第一组件生成所述视图控件对应的纹理数据的纹理标识，并根据所述视图控件对应的纹理数据的纹理标识，将所述视图控件对应的纹理数据注册到GPU中；

所述方法还包括：

所述第一组件向所述第二引擎发送所述视图控件对应的纹理数据的纹理标识；

所述第二引擎从GPU获取所述视图控件对应的纹理数据，包括：

所述第二引擎根据所述视图控件对应的纹理数据的纹理标识，从GPU获取所述视图控件对应的纹理数据。

3.根据权利要求1或2所述的方法，其特征在于，所述第一组件根据所述视图控件对应的第三方插件，显示所述视图控件对应的纹理数据，包括：

所述第一组件获取画布纹理对象；

所述第一组件在所述视图控件对应的第三方插件中创建虚显控制器，并根据所述画布纹理对象中的画布、以及所述视图控件对应的布局信息创建对应的虚显控件；

所述第一组件通过所述虚显控制器将所述视图控件对应的第三方插件与所述虚显控件进行合成，并创建对应的显示控件；

所述第一组件通过所述显示控件将所述视图控件对应的第三方插件添加到所述显示控件中的视图对应的容器上，并将所述视图控件对应的纹理数据送至所述画布纹理对象中合成到画布上。

4.根据权利要求3所述的方法，其特征在于，所述第二引擎从GPU获取所述视图控件对应的纹理数据，并根据所述视图控件对应的布局信息对所述视图控件对应的纹理数据进行渲染，包括：

所述第二引擎从所述画布纹理对象中获取画布，并从GPU获取所述视图控件对应的纹理数据；

所述第二引擎根据所述视图控件对应的布局信息对所述视图控件对应的纹理数据进行渲染。

5.根据权利要求1-4任一项所述的方法，其特征在于，所述第一引擎确定第一应用对应的视图控件的插件属性、以及所述视图控件对应的前端文档对象模型节点，包括：

所述第一引擎对第一应用中的第一打包文件进行解析，得到所述第一应用对应的视图控件的插件属性、以及所述视图控件对应的第一对象及第一对象的样式和属性；

所述第一引擎根据所述视图控件对应的第一对象及第一对象的样式和属性，生成所述视图控件对应的前端文档对象模型节点。

6.根据权利要求5所述的方法，其特征在于，所述第一应用的第一打包文件包括所述预配置的所述第一应用对应的视图控件的插件属性。

7.根据权利要求1-6任一项所述的方法，其特征在于，所述第一组件根据所述视图控件对应的前端文档对象模型节点，确定所述视图控件对应的布局信息，包括：

所述第一组件将所述视图控件对应的前端文档对象模型节点对接到后端组件节点；

所述第一组件根据所述后端组件节点创建对应的元素节点，并在所述元素节点中创建对应的绘制节点；

所述第一组件在所述绘制节点计算所述视图控件对应的布局信息。

8.根据权利要求7所述的方法，其特征在于，所述视图控件对应的布局信息包括所述视图控件对应的位置和尺寸。

9.根据权利要求1-8任一项所述的方法，其特征在于，所述视图控件包括以下任意一种：网页视图控件、地图视图控件、相机视图控件、视频视图控件、文本视图控件、直播视图控件、广告视图控件、投屏视图控件。

10.根据权利要求1-9任一项所述的方法，其特征在于，所述终端设备的操作系统包括以下任意一种：安卓系统、鸿蒙系统、ios系统、windows系统、mac系统、EMUI系统。

11.根据权利要求1-10任一项所述的方法，其特征在于，所述第一引擎为JS引擎，所述第二引擎为渲染引擎。

12.一种终端设备，其特征在于，包括：第一引擎、第一组件、以及第二引擎；

所述第一引擎用于确定第一应用对应的视图控件的插件属性、以及所述视图控件对应的前端文档对象模型节点；

所述第一组件用于根据所述视图控件对应的前端文档对象模型节点，确定所述视图控件对应的布局信息；根据所述视图控件的插件属性，创建所述视图控件对应的第三方插件和纹理数据，并将所述视图控件对应的纹理数据注册到图形处理器GPU中；

所述第一组件还用于向所述第二引擎发送所述视图控件对应的布局信息；根据所述视图控件对应的第三方插件，显示所述视图控件对应的纹理数据；

所述第二引擎用于从GPU获取所述视图控件对应的纹理数据，并根据所述视图控件对应的布局信息对所述视图控件对应的纹理数据进行渲染。

13.一种电子设备，其特征在于，包括：处理器；存储器；以及计算机程序；其中，所述计算机程序存储在所述存储器上，当所述计算机程序被所述处理器执行时，使得所述电子设备实现如权利要求1-11任一项所述的方法。

14.一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，其特征在于，当所述计算机程序在电子设备上运行时，使得所述电子设备实现如权利要求1-11任一项所述的方法。

Images