CN110362371B - 视图层级的控制方法、装置及系统、计算机设备及介质 - Google Patents

Abstract

本发明提供一种视图层级的控制方法、装置及系统、计算机设备及介质，涉及云计算领域。其方法包括：若封装体中第一类型组件的属性发生变化，检测全局状态机是否接收到第一类型组件的属性信息；根据接收的第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测最大层级的数值是否需要更新；若需要，更新最大层级的数值；向封装体中的各第一类型组件发送更新后的最大层级的数值，以供对应的第一类型组件检测自身的真实层级的数值是否小于最大层级的数值，若是，根据对应的占位组件的信息，在第二类型组件中渲染并显示第一类型组件对应的占位组件。本发明的技术方案，能够使得小程序中组件的视图层级变得可控，保证视图层级展示的准确性。

Description

视图层级的控制方法、装置及系统、计算机设备及介质

【技术领域】

本发明涉及计算机应用技术领域，尤其涉及一种视图层级的控制方法、装置及系统、计算机设备及介质。

【背景技术】

小程序是一种运行在移动终端的应用之上的程序或者应用，是一种基于移动客户端，采用WebView组件构造的移动端的应用程序。

实际应用中，若小程序中的某些界面不能采用WebView组件来显示时，可以调用客户端的原生组件来显示。该原生组件是指由Android、iOS等操作系统内置的用于构造用户界面(User Interface；UI)的组件。其中，WebView组件拥有HTML渲染引擎，可以利用这个特点渲染出一个由HTML元素构造的UI。传统界面元素如各显示组件的定位由x/y/z三个轴构成，其中z轴的值决定了元素所在的层级，如果两个相同的元素x、y轴方向有交集，那么z轴数值越大，渲染层级越靠上，并最终将呈现到用户的界面中，z轴数值小的元素则会被部分或全部覆盖，对用户不可见。

现有技术中，由于WebView组件本身是一个原生组件，内部渲染的HTML视图使用WebView内部的坐标系，该WebView组件只能视作为一个整体，而无法与原生组件共同使用App维度的坐标系。这样，在小程序的视图层中，客户端的原生组件在z轴方向始终位于顶层，覆盖了所有由WebView组件渲染引擎生成的视图，导致小程序的视图层级无法控制，视图显示错误。

【发明内容】

本发明提供了一种视图层级的控制方法及系统、计算机设备及可读介质，用于实现小程序中视图层级的可控，保证小程序中的视图层级展示的准确性。

本发明提供一种视图层级的控制方法，所述方法包括：

若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到所述第一类型组件的属性信息；所述封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

根据所述全局状态机接收到的所述第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新；

若需要，更新所述全局状态机中的所述最大层级的数值；

向所述封装体中的各所述第一类型组件发送更新后的所述最大层级的数值，以供对应的所述第一类型组件检测自身的所述真实层级的数值是否小于所述最大层级的数值，若是，根据对应的占位组件的信息，在所述第二类型组件中渲染并显示所述第一类型组件对应的所述占位组件。

本发明还提供一种视图层级的控制方法，所述方法包括：

若当前第一类型组件的属性发生变化时，获取所述当前第一类型组件的属性信息；

向全局状态机发送所述当前第一类型组件的属性信息，以供视图层级的控制装置根据所述全局状态机接收到的所述当前第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

在所述全局状态机中的最大层级的数值更新后，接收所述视图层级的控制装置发送的更新后的所述最大层级的数值；

检测自身的所述真实层级的数值是否小于所述最大层级的数值；

若是，根据对应的占位组件的信息，在第二类型组件中渲染并显示所述当前第一类型组件对应的所述占位组件。

本发明提供一种视图层级的控制装置，所述装置包括：

检测模块，用于若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到所述第一类型组件的属性信息；所述封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

所述检测模块，还用于根据所述全局状态机接收到的所述第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新；

更新模块，用于若根据所述检测模块的检测，需要更新时，更新所述全局状态机中的所述最大层级的数值；

发送模块，用于向所述封装体中的各所述第一类型组件发送更新后的所述最大层级的数值，以供对应的所述第一类型组件检测自身的所述真实层级的数值是否小于所述最大层级的数值，若是，根据对应的占位组件的信息，在所述第二类型组件中渲染并显示所述第一类型组件对应的所述占位组件。

本发明提供一种第一类型组件，所述组件包括：

获取模块，用于若当前第一类型组件的属性发生变化时，获取所述当前第一类型组件的属性信息；

发送模块，用于向全局状态机发送所述当前第一类型组件的属性信息，以供视图层级的控制装置根据所述全局状态机接收到的所述当前第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

所述获取模块，还用于在所述全局状态机中的最大层级的数值更新后，接收所述视图层级的控制装置发送的更新后的所述最大层级的数值；

检测模块，用于检测自身的所述真实层级的数值是否小于所述最大层级的数值；

渲染模块，用于若所述检测模块检测所述真实层级的数值小于所述最大层级的数值时，根据对应的占位组件的信息，在第二类型组件中渲染并显示所述当前第一类型组件对应的所述占位组件。

本发明提供一种视图层级的控制系统，所述系统包括：视图层级的控制装置、需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成的封装体、以及全局状态机；所述全局状态机中存储各所述第一类型组件的属性信息；所述视图层级的控制装置，基于所述全局状态机中的各所述第一类型组件的属性信息，实现对所述封装体内各组件的视图层级控制；

所述视图层级的控制装置采用如上所述的视图层级的控制装置，各所述第一类型组件采用如上所述的第一类型组件。

本发明还提供一种计算机设备，所述设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的视图层级的控制方法。

本发明还提供一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如上所述的视图层级的控制方法。

本发明的视图层级的控制方法及系统、计算机设备及可读介质，通过采用上述技术方案，能够避免现有技术的不足，提供一种小程序中的视图层级的控制方案，使得小程序中组件的视图层级变得可控，保证小程序中的视图层级展示的准确性。而且本发明的技术方案还能够有效地丰富小程序的视图层的构建方式，在对用户体验影响最小并且可控的状况下完成了原生组件和WebView组件的混合排版，从而能应对更多的交互场景，并在一定程度上抽象了小程序开发时遇到的特型场景，降低了开发和维护成本。

【附图说明】

图1为本发明的视图层级的控制方法实施例一的流程图。

图2为本发明的视图层级的控制方法实施例二的流程图。

图3为本发明的视图层级的控制方法的一种UI示意图。

图4为本发明的视图层级的控制方法的另一种UI示意图。

图5为本发明的视图层级的控制方法的再一种UI示意图。

图6为本发明的视图层级的控制装置实施例的结构图。

图7为本发明的第一类型组件实施例的结构图。

图8为本发明的视图层级的控制系统实施例的结构图。

图9为本发明的计算机设备实施例的结构图。

图10为本发明提供的一种计算机设备的示例图。

【具体实施方式】

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

图1为本发明的视图层级的控制方法实施例一的流程图。如图1所示，本实施例的视图层级的控制方法，具体可以包括如下步骤：

S100、若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到所述第一类型组件的属性信息；若是，执行步骤S101；否则继续检测；该封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

本实施例的视图层级的控制方法，具体可以应用在运行在应用之上的小程序中，其执行主体可以为视图层级的控制装置，该视图层级的控制装置具体可以设置在小程序的引擎中，实现对小程序中的视图层级进行控制。具体地，在小程序中，通过采用一种类型的组件构成该小程序，例如，很多应用提供商都采用WebView组件在已有的应用之上嵌入另一种小程序。但是在小程序的界面显示时，有些界面不能采用构成小程序的主要类型的组件来显示，此时需要调用其他组件如原生组件来显示。此时，在视图层，两种类型的组件无法共用一个坐标系，导致其中一种类型的组件始终位于顶层，导致另一种类型的组件的视图无法正确显示。基于该技术问题，本实施例提供一种视图层级的控制方法，以解决此问题。本实施例的视图层级的控制方法，具体可以应用在小程序的研发过程中，以保证小程序在运行时中各种组件的视图都能正确显示。

具体地，本实施例中，可以根据需求，将需要控制视图层级的至少一个第一类型组件与第二类型组件封装成一个封装体。然后在每个封装体内，采用本实施例的视图层级的控制方法实现视图层级的控制。最后可以采用所需的多个封装体一起构成小程序中的所有视图界面的显示。

为了便于描述，本实施例中以第一类型组件为原生组件，第二类型组件为WebView组件来介绍本发明的技术方案。实际应用中，也可以应用在其他类似场景，采用其他的第一类型组件和第二类型组件也可以实现，在此不再举例。再例如，本实施例的原生组件可以为按钮组件、文本框组件、地图组件或者视频组件等。

例如，本实施例中，封装体中的原生组件在被挂载或者卸载时，其属性均会发生变化时，此时该原生组件可以获取其属性，并将其属性发送至全局状态机。即本实施例中的全局状态机中存储有该封装体内的每一个原生组件以及WebView组件的属性信息。

例如，对于原生组件被挂载时，本实施例的原生组件的属性信息可以包括原生组件的标识与被配置的在WebView组件的坐标系中的真实层级的数值的对应关系，例如本实施例中可以采用键值对来表示原生组件的标识与被配置的在WebView组件的坐标系中的真实层级的数值的对应关系，或者也可以采用其他格式的形式来表示对应关系，在此不再赘述。

而对原生组件被卸载时，原生组件发送给全局状态机的原生组件的属性信息可以仅包括原生组件的标识。此时，具体检测全局状态机是否接收到原生组件的标识即可。即本实施例中，也可以通过检测全局状态机接收到的属性信息的不同，确定该原生组件是被挂载还是被卸载。

其中该原生组件的标识用于唯一标识该原生组件，例如该原生组件的标识可以为该原生组件被加载时，随机生成的哈希id。原生组件被配置的在WebView组件的坐标系中的真实层级zIndex的数值为研发人员根据需求预先配置的。本实施例中，可以将该原生组件的标识哈希id与在WebView组件的坐标系中的真实层级zIndex的数值按照键值对的形式发送至全局状态机。另外，可选地。实际应用中，原生组件还可以向全局状态机发送的属性信息中还可以包括挂载标识或者卸载标识，以便于视图层级的控制装置能够根据该挂载标识或者卸载标识，进一步明确该原生组件是属于挂载导致的属性变化，还是卸载导致的属性变化；进而可以更加准确地进行下一步的操作。对应地，在视图层级的控制装置侧，可以一直检测检测全局状态机是否接收到所述第一类型组件的属性信息。

S101、根据全局状态机接收到的第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测全局状态机中的最大层级的数值是否需要更新；若需要，执行步骤S102；否则，若不需要，暂不需要执行任何操作，结束。

例如，本实施例的视图层级的控制装置在检测到全局状态机接收到的第一类型组件如原生组件的属性信息时，由于原生组件在发生属性变化时，会向视图层级的控制装置发送该原生组件的属性信息，且该原生组件的属性信息中包括有被配置的在WebView组件的坐标系中的真实层级的数值zIndex。因此，视图层级的控制装置根据全局状态机本次接收到的原生组件的属性信息中的真实层级的数值zIndex和已存储的其他原生组件的属性信息中的真实层级的数值zIndex，可以检测到全局状态机中的最大层级的数值是否需要更新。

例如，对于原生组件被挂载时，具体地，可以判断本次接收到的原生组件的属性信息中的真实层级的数值zIndex是否大于全局状态机中的最大层级的数值topZIndex，若大于，则需要采用本次接收到的原生组件的属性信息中的真实层级的数值zIndex去更新全局状态机中的最大层级的数值topZIndex；否则不需要更新。

而对于原生组件被卸载时，具体地，可以先从全局状态机中删除原生组件的标识以及对应的真实层级的数值zIndex；例如，若全局状态机中该原生组件的标识如哈希ID与对应的真实层级的数值zIndex是以键值对的方式存储的，此时可以直接删除该键值对。然后判断真实层级的数值zIndex是否为已存储的其他原生组件的最大层级的数值topZIndex，若是，确定全局状态机中的最大层级的数值topZIndex需要更新；否则不需要更新。

或者，本实施例中，也可以先判断真实层级的数值zIndex是否为已存储的其他原生组件的最大层级的数值topZIndex，若是，确定全局状态机中的最大层级的数值topZIndex需要更新；然后从全局状态机中删除原生组件的标识以及对应的真实层级的数值zIndex，接下来按照步骤S102更新全局状态机中的最大层级的数。

S102、更新全局状态机中的最大层级的数值；

例如，对于原生组件被挂载时，若全局状态机本次接收到的原生组件的属性信息中的真实层级的数值zIndex大于全局状态机中的最大层级的数值topZIndex，此时采用本次接收到的原生组件的真实层级的数值zIndex更新全局状态机中最大层级的数值。

而对于原生组件被卸载时，若从全局状态机删除原生组件的标识以及对应的真实层级的数值zIndex后，当被删除的原生组件的真实层级的数值zInde正好等于全局状态机中的最大层级的数值topZIndex，此时需要重新从全局状态机中各原生组件的真实层级的数值zIndex中获取最大值，作为全局状态机中的最大层级的数值topZIndex。

S103、向封装体中的各第一类型组件发送更新后的最大层级的数值，以供对应的第一类型组件检测自身的真实层级的数值是否小于所述最大层级的数值，若是，根据对应的占位组件的信息，在第二类型组件中渲染并显示第一类型组件对应的占位组件。

由于全局状态机中的最大层级的数值topZIndex发生了更新，势必会造成封装体中某些第一类型的组件如原生组件展示的视图层级需要调整。例如，在第一原生组件被挂载之前，第二原生组件的真实层级的数值zIndex是全局状态机中的最大层级的数值topZIndex，此时第二原生组件被正常显示在最上层；而若第一原生组件被挂载后，且第一原生组件的真实层级的数值zIndex大于全局状态机中的最大层级的数值topZIndex，此时第二原生组件就不能被正常显示在最上层，需要调整封装体中的原生组件的视图层级。

具体实现时，需要视图层级的控制装置先向封装体中的各第一类型组件如原生组件发送更新后的最大层级的数值，以供对应的原生组件检测自身的真实层级的数值zIndex是否小于更新后的最大层级的数值topZIndex，若是，根据对应的占位组件的信息，在第二类型组件如WebView组件中渲染并显示第一类型组件对应的占位组件。本实施例中的原生组件的占位组件为预先为原生组件配置的，以在该原生组件不是在最上层显示时，即该原生组件的真实层级的数值不是最大层级的数值topZIndex时，此时采用适用于在WebView组件中渲染并显示该原生组件的占位组件。也就是说本实施例的占位组件实际上还是一WebView组件，这样由于视图层级的可控，可以实现在小程序中原生组件和WebView组件能够混合排版。

本实施例的占位组件可以根据应用场景进行有针对性的设置，如本实施例中，若原生组件为视频组件，对应设置的占位组件可以设计成视频封面图和一个示意暂停的图标的组合。或者也可以采用其他预设的图案和和示意暂停的图标的组合而成。其中预设的图案可以为广告图案，或者可以为一个预设的黑屏或者白屏图案等。

通过采用本实施例的视图层级的控制方法，可以使得封装体中各原生组件可以实现在视图展示轴如z轴上渐进式降级，以使得各组件的视图层级变得可控，从而能够在小程序中更容易地设计出更加优秀的交互方式。

本实施例的视图层级的控制方法，通过采用上述技术方案，能够避免现有技术的不足，提供一种小程序中的视图层级的控制方案，使得小程序中组件的视图层级变得可控，保证小程序中的视图层级展示的准确性。而且本实施例的技术方案还能够有效地丰富小程序的视图层的构建方式，在对用户体验影响最小并且可控的状况下完成了原生组件和WebView组件的混合排版，从而能应对更多的交互场景，并在一定程度上抽象了小程序开发时遇到的特型场景，降低了开发和维护成本。

图2为本发明的视图层级的控制方法实施例二的流程图。如图2所示，本实施例的视图层级的控制方法，具体可以包括如下步骤：

S200、若当前第一类型组件的属性发生变化时，获取当前第一类型组件的属性信息；

如上述图1所示实施例的技术方案相同，本实施例的第一类型组件为原生组件，第二类型组件为WebView组件。实际应用中，也可以应用在其他类似场景，采用其他的第一类型组件和第二类型组件也可以实现，在此不再举例。在本实施例的应用场景中，需要控制层级的多个原生组件与WebView组件可以一起构成一个封装体，在该封装体内，每个原生组件可以采用本实施例的技术方案，实现视图层级的控制。

例如，若当前原生组件被挂载时，获取当前原生组件的标识与被配置的在WebView组件的坐标系中的真实层级的数值的对应关系，例如可以采用键值对的方式来表示该对应关系。

而若当前原生组件被卸载时，获取当前原生组件的标识。

也就是说，本实施例中当前原生组件被挂载时和被卸载时，需要获取的当前原生组件的属性信息不同。另外，可选地，还可以同时获取挂载标识或者卸载标识，也携带在属性信息中。

其中获取当前原生组件的被配置的在WebView组件的坐标系中的真实层级的数值，具体可以包括：接收为当前原生组件配置的在WebView组件的坐标系中的真实层级的数值。也就是说，本实施例的当前原生组件配置的在WebView组件的坐标系中的真实层级的数值是由研发人员外部配置的。

S201、向全局状态机发送当前第一类型组件的属性信息，以供视图层级的控制装置根据全局状态机接收到的第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

详细可以参考上述图1所示实施例的步骤S101和S102，在此不再赘述。

S202、在全局状态机中的最大层级的数值更新后，接收视图层级的控制装置发送的更新后的最大层级的数值；

S203、检测自身的真实层级的数值是否小于最大层级的数值；若是，执行步骤S204；否则，暂不执行任何操作，结束。

S204、根据对应的占位组件的信息，在第二类型组件中渲染并显示当前第一类型组件对应的占位组件。

需要说明的是，本实施例中，在该步骤S204之前，可以包括：接收为原生组件配置的WebView占位组件的信息。占位组件的信息具体可以根据应用场景的需求来设置，如本实施例中，若原生组件为视频组件，对应设置的占位组件可以设计成视频封面图和一个示意暂停的图标的组合。或者也可以采用其他预设的图案和和示意暂停的图标的组合而成。其中预设的图案可以为广告图案，或者可以为一个预设的黑屏或者白屏图案等。

由上述实施例可知，本实施例的至少一个原生组件与WebView组件封装的封装体，可以暴露有两个接口：例如，一个接口用于声明当前的原生组件在WebView组件的坐标系中的真实层级，由研发者根据实际场景配置并输入的；另一个接口为全局状态数据中最大的zIndex数值，用于显示在最上层的组件对应的zIndex数值。另外，还需要为每个原生组件配置隐藏时，需要显示的占位组件。

本实施例与上述图1所示实施例的区别在于：上述图1所示实施例在视图层级的控制装置侧描述本发明的技术方案，而本实施例在第一类型组件侧描述本发明的技术方案。因此，本实施例的详细实现亦可以参考上述图1所示实施例的记载，在此不再赘述。

本实施例的视图层级的控制方法，通过采用上述技术方案，能够避免现有技术的不足，提供一种小程序中的视图层级的控制方案，使得小程序中组件的视图层级变得可控，保证小程序中的视图层级展示的准确性。而且本实施例的技术方案还能够有效地丰富小程序的视图层的构建方式，在对用户体验影响最小并且可控的状况下完成了原生组件和WebView组件的混合排版，从而能应对更多的交互场景，并在一定程度上抽象了小程序开发时遇到的特型场景，降低了开发和维护成本。

下面介绍本发明的一种应用场景示例：

例如，图3为本发明的视图层级的控制方法的一种用户界面(User Interface；UI)示意图。如图3所示，在小程序中点击『查看视频信息』按钮，弹出视频信息模态框。

如图4所示的本发明的视图层级的控制方法的另一种UI示意图，在通常情况下，在点击图3所示的『查看视频信息』按钮后，弹出的模态框由于在构成小程序的WebView组件中渲染，会被原生组件覆盖，如图3和图4所示，本实施例的原生组件为视频组件。

此时，可以采用本实施例的上述视图层级的控制方案，使得z轴渐进式降级，将视频组件和模态框组件封装在一起构成封装体，该封装体也可以被称之为降级组件，并通过封装体的两个接口，将整数1和2分别配置为封装后的视频组件和模态框组件的zIndex属性。

在页面初始化完毕后，视频组件被挂载到视图上，触发了视频attached生命周期，视频组件生成一个哈希id，如该id的值可以为“alpha”，并向全局状态机传一个键值对：{alpha:1}，同时还可以向全局状态机发送挂载的标识，这样全局状态机便可以得知该键值对是需要在全局状态机中暂存下来。另外，此时全局状态机中只有这一个zIndex键值对，因此最大值是1。视频组件内部对比这个值和自己的zIndex属性，由于1等于1，因此视频原生组件被正常渲染。

当点击按钮时，封装后的模态框组件被挂载到视图上，触发了模态框组件的attached生命周期。模态框组件生成一个哈希id，如该id的值可以为“beta”，并向全局状态机传一个键值对：{beta:2}，并暂存；同理，模态框组件同时还可以向全局状态机发送挂载的标识，这样全局状态机便可以得知该键值对是需要在全局状态机中暂存下来。此时全局状态机中暂存的zIndex键值对变成了{alpha:1,beta:2}两对。遍历所有键值对后，对比zIndex的最大值为2，此时视频组件内部对比这个值和自己的zIndex属性，由于2大于1，此时视频组件需要替换为对应的占位组件。此时的UI示意图如图5所示。

本实施例中，占位组件由WebView组件渲染，使用WebView的坐标系，因此不会覆盖掉模态框组件。且本实施例的占位组件可以根据应用场景进行有针对性的设计，如本例中视频组件的占位组件就可以设计成视频封面图和一个示意暂停的图标的组合。

另外，当关闭模态框组件时，封装后的模态框组件触发了detached生命周期，模态框组件将触发另一个事件，将之前生成的哈希id如beta，传递给全局状态机，同时还需要携带卸载标识；此时小程序引擎可以从全局状态机中根据id索对应的键值对，并删除。然后确定全局状态机中仅存在{alpha:1}，此时小程序引擎可以向视频组件发送1，视频组件经过对比发现自身的zIndex就是1等于1，再次正常渲染。

本实施例的视图层级的控制方法，通过采用上述技术方案，能够避免现有技术的不足，提供一种小程序中的视图层级的控制方案，使得小程序中组件的视图层级变得可控，保证小程序中的视图层级展示的准确性。而且本实施例的技术方案还能够有效地丰富小程序的视图层的构建方式，在对用户体验影响最小并且可控的状况下完成了原生组件和WebView组件的混合排版，从而能应对更多的交互场景，并在一定程度上抽象了小程序开发时遇到的特型场景，降低了开发和维护成本。

图6为本发明的视图层级的控制装置实施例的结构图。如图6所示，本实施例的视图层级的控制装置，具体可以包括：

检测模块10用于若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到第一类型组件的属性信息；封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

检测模块10还用于根据全局状态机接收到的第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测全局状态机中的最大层级的数值是否需要更新；

更新模块11用于若根据检测模块11的检测，需要更新时，更新全局状态机中的最大层级的数值；

发送模块12用于向封装体中的各第一类型组件发送更新模块11更新后的最大层级的数值，以供对应的第一类型组件检测自身的真实层级的数值是否小于最大层级的数值，若是，根据对应的占位组件的信息，在第二类型组件中渲染并显示第一类型组件对应的占位组件。

本实施例的视图层级的控制装置，通过采用上述模块实现视图层级的控制的实现原理以及技术效果与上述相关方法实施例的实现相同，详细可以参考上述相关方法实施例的记载，在此不再赘述。

进一步可选地，若第一类型组件为原生组件，第二类型组件为WebView组件时：

检测模块10用于若封装体中的原生组件被挂载时，检测全局状态机中是否接收到原生组件的标识与被配置的在WebView组件的坐标系中的真实层级的数值的对应关系；

对应地，检测模块10还用于判断接收到的真实层级的数值是否大于已存储的最大层级的数值，若是，确定全局状态机中的最大层级的数值需要更新；否则不需要更新；

更新模块11用于采用真实层级的数值更新全局状态机中最大层级的数值。

或者可选地，若第一类型组件为原生组件，第二类型组件为WebView组件时：

检测模块10还用于若封装体中的原生组件被卸载时，检测全局状态机中是否接收到原生组件发送的原生组件的标识；

对应地，检测模块10还用于从全局状态机中删除原生组件的标识以及对应的真实层级的数值构成的键值对；

判断真实层级的数值是否为已存储的其他原生组件的最大层级的数值，若是，确定全局状态机中的最大层级的数值需要更新；否则不需要更新；

更新模块11用于重新从全局状态机中各原生组件的真实层级的数值中获取最大值，作为全局状态机中的最大层级的数值。

图7为本发明的第一类型组件实施例的结构图。如图7所示，本实施例的第一类型组件，具体可以包括：

获取模块20用于若当前第一类型组件的属性发生变化时，获取当前第一类型组件的属性信息；

发送模块21用于向全局状态机发送获取模块20获取的当前第一类型组件的属性信息，以供视图层级的控制装置根据全局状态机接收到的当前第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

获取模块20还用于在全局状态机中的最大层级的数值更新后，接收视图层级的控制装置发送的更新后的最大层级的数值；

检测模块22用于检测自身的真实层级的数值是否小于获取模块20接收到的最大层级的数值；

渲染模块23用于若检测模块22检测真实层级的数值小于最大层级的数值时，根据对应的占位组件的信息，在第二类型组件中渲染并显示当前第一类型组件对应的占位组件。

本实施例的第一类型组件，通过采用上述模块实现视图层级的控制的实现原理以及技术效果与上述相关方法实施例的实现相同，详细可以参考上述相关方法实施例的记载，在此不再赘述。

进一步可选地，本实施例的第一类型组件中，获取模块20还用于接收为当前第一类型组件配置的占位组件的信息。

进一步可选地，本实施例的第一类型组件中，第一类型组件为原生组件，第二类型组件为WebView组件时：

获取模块20用于若当前原生组件被挂载时，获取当前原生组件的标识、与被配置的在WebView组件的坐标系中的真实层级的数值的对应关系。

进一步可选地，本实施例的第一类型组件中，第一类型组件为原生组件，第二类型组件为WebView组件时：获取模块20还用于若当前原生组件被卸载时，获取当前原生组件的标识。

进一步可选地，本实施例的第一类型组件中，获取模块20用于接收为当前原生组件配置的在WebView组件的坐标系中的真实层级的数值。

图8为本发明的视图层级的控制系统实施例的结构图。如图8所示，本实施例的视图层级的控制系统：包括：视图层级的控制装置100、需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成的封装体200、以及全局状态机300；全局状态机300中存储各第一类型组件的属性信息；视图层级的控制装置100采用如上图6所示的视图层级的控制装置，封装体200中的各第一类型组件采用如上图7所述的第一类型组件。视图层级的控制装置100基于全局状态机300中的各第一类型组件的属性信息，采用如上图1所示实施例的方法，以及各第一类型组件采用如上图2所示实施例的方法，实现视图层级的控制装置对封装体200内各组件的视图层级控制。例如，本实施例的视图层级的控制系统可以应用在小程序中，其中第一类型组件为原生组件，第二类型组件为WebView组件。对于小程序中的需要控制视图层级的至少一个原生组件与WebView组件封装而成的封装体200，可以采用上述实施例的技术方案，实现对各组件的视图层级控制。详细可以参考上述实施例的记载，在此不再赘述。

本实施例中以一个封装体为例，若实际应用中，按照上述实施例的方案，视图层级的控制装置100还可以同时控制多个封装体200中各组件的层级，原理同上，在此不再赘述。

图9为本发明的计算机设备实施例的结构图。如图9所示，本实施例的计算机设备，包括：一个或多个处理器30，以及存储器40，存储器40用于存储一个或多个程序，当存储器40中存储的一个或多个程序被一个或多个处理器30执行，使得一个或多个处理器30实现如上图1或者图2所示实施例的视图层级的控制方法。图9所示实施例中以包括多个处理器30为例。也就是说，本实施例的视图层级的控制装置以及各第一类型原生组件也可以直接嵌入在计算机设备中，实现其各自的功能。

例如，图10为本发明提供的一种计算机设备的示例图。图10示出了适于用来实现本发明实施方式的示例性计算机设备12a的框图。图10显示的计算机设备12a仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图10所示，计算机设备12a以通用计算设备的形式表现。计算机设备12a的组件可以包括但不限于：一个或者多个处理器16a，系统存储器28a，连接不同系统组件(包括系统存储器28a和处理器16a)的总线18a。

总线18a表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机设备12a典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备12a访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28a可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30a和/或高速缓存存储器32a。计算机设备12a可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34a可以用于读写不可移动的、非易失性磁介质(图10未显示，通常称为“硬盘驱动器”)。尽管图10中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18a相连。系统存储器28a可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明上述图1-图8各实施例的功能。

具有一组(至少一个)程序模块42a的程序/实用工具40a，可以存储在例如系统存储器28a中，这样的程序模块42a包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42a通常执行本发明所描述的上述图1-图8各实施例中的功能和/或方法。

计算机设备12a也可以与一个或多个外部设备14a(例如键盘、指向设备、显示器24a等)通信，还可与一个或者多个使得用户能与该计算机设备12a交互的设备通信，和/或与使得该计算机设备12a能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22a进行。并且，计算机设备12a还可以通过网络适配器20a与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20a通过总线18a与计算机设备12a的其它模块通信。应当明白，尽管图中未示出，可以结合计算机设备12a使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器16a通过运行存储在系统存储器28a中的程序，从而执行各种功能应用以及数据处理，例如实现上述实施例所示的视图层级的控制方法。

本发明还提供一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如上述实施例所示的视图层级的控制方法。

本实施例的计算机可读介质可以包括上述图10所示实施例中的系统存储器28a中的RAM30a、和/或高速缓存存储器32a、和/或存储系统34a。

随着科技的发展，计算机程序的传播途径不再受限于有形介质，还可以直接从网络下载，或者采用其他方式获取。因此，本实施例中的计算机可读介质不仅可以包括有形的介质，还可以包括无形的介质。

本实施例的计算机可读介质可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims (19)

1.一种视图层级的控制方法，其特征在于，所述方法包括：

若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到所述第一类型组件的属性信息；所述封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

根据所述全局状态机接收到的所述第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新；

若需要，更新所述全局状态机中的所述最大层级的数值；

向所述封装体中的各所述第一类型组件发送更新后的所述最大层级的数值，以供对应的所述第一类型组件检测自身的真实层级的数值是否小于所述最大层级的数值，若是，根据对应的占位组件的信息，在所述第二类型组件中渲染并显示所述第一类型组件对应的所述占位组件。

2.根据权利要求1所述的方法，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，若封装体中的原生组件的属性发生变化时，检测全局状态机是否接收到所述原生组件的属性信息，包括：

若所述封装体中的原生组件被挂载时，检测所述全局状态机中是否接收到所述原生组件的标识与被配置的在所述WebView组件的坐标系中的真实层级的数值的对应关系；

对应地，根据所述全局状态机接收到的所述原生组件的属性信息和已存储的其他原生组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，包括：

判断接收到的所述真实层级的数值是否大于已存储的最大层级的数值，若是，确定所述全局状态机中的最大层级的数值需要更新；否则不需要更新；

对应地，更新所述全局状态机中的所述最大层级的数值，包括：

采用所述真实层级的数值更新所述全局状态机中所述最大层级的数值。

3.根据权利要求1所述的方法，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，若封装体中的原生组件的属性发生变化时，检测全局状态机是否接收到所述原生组件的属性信息，包括：

若所述封装体中的原生组件被卸载时，检测所述全局状态机中是否接收到所述原生组件发送的所述原生组件的标识；

对应地，根据所述全局状态机接收到的所述原生组件的属性信息和已存储的其他原生组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，包括：

从所述全局状态机中删除所述原生组件的标识以及对应的所述真实层级的数值构成的键值对；

判断所述真实层级的数值是否为已存储的其他原生组件的最大层级的数值，若是，确定所述全局状态机中的最大层级的数值需要更新；否则不需要更新；

对应地，更新所述全局状态机中的所述最大层级的数值，包括：

重新从所述全局状态机中各所述原生组件的真实层级的数值中获取最大值，作为所述全局状态机中的所述最大层级的数值。

4.一种视图层级的控制方法，其特征在于，所述方法包括：

若当前第一类型组件的属性发生变化时，获取所述当前第一类型组件的属性信息；

向全局状态机发送所述当前第一类型组件的属性信息，以供视图层级的控制装置根据所述全局状态机接收到的所述当前第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

在所述全局状态机中的最大层级的数值更新后，接收所述视图层级的控制装置发送的更新后的所述最大层级的数值；

检测自身的真实层级的数值是否小于所述最大层级的数值；

若是，根据对应的占位组件的信息，在第二类型组件中渲染并显示所述当前第一类型组件对应的所述占位组件。

5.根据权利要求4所述的方法，其特征在于，根据对应的占位组件的信息，在第二类型组件中渲染并显示所述第一类型组件对应的所述占位组件之前，所述方法还包括：

接收为所述当前第一类型组件配置的所述占位组件的信息。

6.根据权利要求4所述的方法，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，对应地，所述当前第一类型组件为当前原生组件，若当前第一类型组件的属性发生变化时，获取所述当前第一类型组件的属性信息，包括：

若所述当前原生组件被挂载时，获取所述当前原生组件的标识、与被配置的在所述WebView组件的坐标系中的真实层级的数值的对应关系。

7.根据权利要求4所述的方法，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，对应地，所述当前第一类型组件为当前原生组件，若当前原生组件的属性发生变化时，获取所述当前原生组件的属性信息，包括：

若所述当前原生组件被卸载时，获取所述当前原生组件的标识。

8.根据权利要求6或者7所述的方法，其特征在于，获取所述当前原生组件的被配置的在所述WebView组件的坐标系中的真实层级的数值，具体包括：

接收为所述当前原生组件配置的在所述WebView组件的坐标系中的真实层级的数值。

9.一种视图层级的控制装置，其特征在于，所述装置包括：

检测模块，用于若封装体中的第一类型组件的属性发生变化时，检测全局状态机是否接收到所述第一类型组件的属性信息；所述封装体采用需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成；

所述检测模块，还用于根据所述全局状态机接收到的所述第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新；

更新模块，用于若根据所述检测模块的检测，需要更新时，更新所述全局状态机中的所述最大层级的数值；

发送模块，用于向所述封装体中的各所述第一类型组件发送更新后的所述最大层级的数值，以供对应的所述第一类型组件检测自身的真实层级的数值是否小于所述最大层级的数值，若是，根据对应的占位组件的信息，在所述第二类型组件中渲染并显示所述第一类型组件对应的所述占位组件。

10.根据权利要求9所述的装置，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时：

所述检测模块，用于若所述封装体中的原生组件被挂载时，检测所述全局状态机中是否接收到所述原生组件的标识与被配置的在所述WebView组件的坐标系中的真实层级的数值的对应关系；

对应地，所述检测模块，还用于判断接收到的所述真实层级的数值是否大于已存储的最大层级的数值，若是，确定所述全局状态机中的最大层级的数值需要更新；否则不需要更新；

所述更新模块，用于采用所述真实层级的数值更新所述全局状态机中所述最大层级的数值。

11.根据权利要求9所述的装置，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时：

所述检测模块，用于若所述封装体中的原生组件被卸载时，检测所述全局状态机中是否接收到所述原生组件发送的所述原生组件的标识；

对应地，所述检测模块，还用于从所述全局状态机中删除所述原生组件的标识以及对应的所述真实层级的数值构成的键值对；

判断所述真实层级的数值是否为已存储的其他原生组件的最大层级的数值，若是，确定所述全局状态机中的最大层级的数值需要更新；否则不需要更新；

所述更新模块，用于重新从所述全局状态机中各所述原生组件的真实层级的数值中获取最大值，作为所述全局状态机中的所述最大层级的数值。

12.一种第一类型组件，其特征在于，所述组件包括：

获取模块，用于若当前第一类型组件的属性发生变化时，获取所述当前第一类型组件的属性信息；

发送模块，用于向全局状态机发送所述当前第一类型组件的属性信息，以供视图层级的控制装置根据所述全局状态机接收到的所述当前第一类型组件的属性信息和已存储的其他第一类型组件的属性信息，检测所述全局状态机中的最大层级的数值是否需要更新，若需要，进行更新；

所述获取模块，还用于在所述全局状态机中的最大层级的数值更新后，接收所述视图层级的控制装置发送的更新后的所述最大层级的数值；

检测模块，用于检测自身的真实层级的数值是否小于所述最大层级的数值；

渲染模块，用于若所述检测模块检测所述真实层级的数值小于所述最大层级的数值时，根据对应的占位组件的信息，在第二类型组件中渲染并显示所述当前第一类型组件对应的所述占位组件。

13.根据权利要求12所述的组件，其特征在于，所述获取模块，还用于接收为所述当前第一类型组件配置的所述占位组件的信息。

14.根据权利要求12所述的组件，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，对应地，所述当前第一类型组件为当前原生组件；

所述获取模块，用于若所述当前原生组件被挂载时，获取所述当前原生组件的标识、与被配置的在所述WebView组件的坐标系中的真实层级的数值的对应关系。

15.根据权利要求12所述的组件，其特征在于，所述第一类型组件为原生组件，所述第二类型组件为WebView组件时，对应地，所述当前第一类型组件为当前原生组件；

所述获取模块，用于若所述当前原生组件被卸载时，获取所述当前原生组件的标识。

16.根据权利要求14或者15所述的组件，其特征在于，所述获取模块，用于接收为所述当前原生组件配置的在所述WebView组件的坐标系中的真实层级的数值。

17.一种视图层级的控制系统，其特征在于，所述系统包括：视图层级的控制装置、需要控制视图层级的至少一个第一类型组件与第二类型组件封装而成的封装体、以及全局状态机；所述全局状态机中存储各所述第一类型组件的属性信息；所述视图层级的控制装置，基于所述全局状态机中的各所述第一类型组件的属性信息，实现对所述封装体内各组件的视图层级控制；

所述视图层级的控制装置采用如上权利要求9-11任一所述的视图层级的控制装置，各所述第一类型组件采用如上权利要求12-16任一所述的第一类型组件。

18.一种计算机设备，其特征在于，所述设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-3中任一所述的方法；或者实现如权利要求4-8中任一所述的方法。

19.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-3中任一所述的方法；或者实现如权利要求4-8中任一所述的方法。

Images