CN114942814A - 页面组件的聚焦方法、***、终端设备及介质 - Google Patents

Abstract

本发明公开了一种页面组件的聚焦方法、***、终端设备以及计算机可读存储介质，该页面组件的聚焦方法包括：将预设的预设待展示页面中的元素进行组件划分得到UI组件组；从所述UI组件组中确定预聚焦组件组；根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对所述目标聚焦组件进行聚焦。本发明能够针对页面组件的进行自动寻焦，实现页面组件的高效控制。

Description

页面组件的聚焦方法、***、终端设备及介质

技术领域

本发明涉及控制技术领域，尤其是涉及一种页面组件的聚焦方法、***、终端设备以及计算机可读存储介质。

背景技术

目前关于机顶盒在页面控制方面的焦点控制逻辑，一般都是基于操作真实的DOM对页面焦点进行操作控制，页面中各个组件无法进行复用。并且，在进行焦点控制时需要由人工预先定义好寻焦的路径。

可见，在相关技术中，对于无规则排布页面无法进行智能化寻焦，进而导致无法针对机顶盒所展示的页面进行自动寻焦操作控制。

发明内容

本发明的主要目的在于提供一种页面组件的聚焦方法、***、终端设备以及计算机可读存储介质，旨在针对页面组件的进行自动寻焦，实现页面组件的高效控制。

为实现上述目的，本发明提供一种页面组件的聚焦方法，所述页面组件的聚焦包括：

将预设的预设待展示页面中的元素进行组件划分得到UI组件组；

从所述UI组件组中确定预聚焦组件组；

根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对目标聚焦组件进行聚焦。

可选地，在所述从所述UI组件组中确定预聚焦组件组的步骤之前，包括：

在页面加载后获取服务器数据，并根据所述服务器数据生成虚拟页面节点对象列表；

针对所述虚拟页面节点对象列表进行数据驱动渲染，以将节点数据在页面进行展示得到真实页面节点对象；

根据预设WEB开发框架react构建虚拟页面节点对象生成逻辑，并通过所述虚拟页面节点对象生成逻辑，针对所述虚拟页面节点对象列表进行遍历得到所述虚拟页面节点的属性变量的赋值，以根据所述真实页面节点对象和所述属性变量赋值确定预聚焦组件组。

可选地，所述从所述UI组件组中确定预聚焦组件组的步骤，还包括：

根据所述属性变量的赋值和所述真实页面节点对象，通过所述虚拟页面节点对象生成逻辑获取所述UI组件组中的预聚焦组件组。

可选地，所述根据当前展示页面获取用户触发的键值的步骤，包括：

基于当前展示页面，通过全局事件分发器获取由用户触发遥控器产生的键值。

可选地，所述键值包括：方向键值，在所述根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，还包括：

确定UI组件组预先注册按键事件时绑定的回调函数，以在调用所述回调函数时获取所述回调函数对应的组件信息，其中，所述回调函数与通过预设WEB开发框架react预先编写的ref属性相对应；

根据所述回调函数和所述UI组件组预先注册的聚焦事件类型将所述键值分发至预聚焦组件组，以在所述键值为所述方向键值时，基于所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

可选地，在所述根据所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，还包括：

从所述预聚焦组件组中移除已聚焦组件；

所述根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤，包括：

根据所述方向键值，针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。

可选地，所述根据所述键值，针对移除已聚焦组件的预聚焦组件组数组进行遍历查找得到满足预设聚焦条件的目标聚焦组件的步骤之后，还包括：

获取前聚焦组件和所述目标聚焦组件之间的距离参数；

将所述距离参数和所述目标聚焦组件存储至预设对象，并将所述预设对象存储至预设数组；

针对所述预设数组中最小的距离参数所对应的目标聚焦组件进行焦点化处理。

为实现上述目的，本发明还提供一种页面组件的聚焦***，所述页面组件的聚焦***，包括：

组件划分模块，用于将预设的预设待展示页面中的元素进行组件划分得到UI组件组；

确定模块，用于从所述UI组件组中确定预聚焦组件组；

获取模块，用于根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件，以对目标聚焦组件进行聚焦。

其中，本发明页面组件的聚焦***的各个功能模块各自在运行时均实现如上所述的页面组件的聚焦方法的步骤。

为实现上述目的，本发明还提供一种终端设备，所述终端设备包括：存储器、处理器和存储在所述存储器上并可在所述处理器上运行的页面组件的聚焦程序，所述页面组件的聚焦程序被所述处理器执行时实现如上所述的页面组件的聚焦方法的步骤。

此外，为实现上述目的，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有页面组件的聚焦程序，所述页面组件的聚焦程序被处理器执行时实现如上所述的页面组件的聚焦方法的步骤。

此外，为实现上述目的，本发明还提供计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现如上所述的页面组件的聚焦方法的步骤。

本发明提供一种页面组件的聚焦、***、终端设备、计算机可读存储介质以及计算机程序产品，通过将预设的预设待展示页面中的元素进行组件划分得到UI组件组；从所述UI组件组中确定预聚焦组件组；根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对目标聚焦组件进行聚焦。

相比于现有技术中机顶盒页面控制方式，在本实施例中，在将UI组件进行划分得到UI组件组后，预先从UI组件组中确定预聚焦组件组，并根据用户触发的方向键值从该预聚焦组件组中确定目标聚焦组件，以针对该目标聚焦组件进行处理。因此，本发明对机顶盒展示的页面组件进行智能自动寻焦，实现页面焦点的高效精准聚焦，进而对聚焦组件进行相应控制，提升用户体验。在此基础上，本发明还能够提升UI组件的复用性。

附图说明

图1为本发明实施例方案涉及的硬件运行环境的结构示意图；

图2为本发明页面组件的聚焦方法一实施例的流程示意图；

图3为本发明页面组件的聚焦方法一实施例涉及到的页面组件划分示意图；

图4为本发明页面组件的聚焦方法一实施例涉及到的预聚焦组件组获取流程示意图；

图5为本发明页面组件的聚焦方法一实施例涉及到的预聚焦组件组自动寻焦第一流程示意图；

图6为本发明页面组件的聚焦方法一实施例涉及到的预聚焦组件组自动寻焦第二流程示意图；

图7为本发明页面组件的聚焦***一实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。

需要说明的是，本发明实施例终端设备可以是用于实现页面组件聚焦的终端设备，该终端设备具体可以是智能手机、个人计算机和服务器等。

如图1所示，该设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作***、网络通信模块、用户接口模块以及页面组件的聚焦程序。操作***是管理和控制设备硬件和软件资源的程序，支持页面组件的聚焦程序以及其它软件或程序的运行。在图1所示的设备中，用户接口1003主要用于与客户端进行数据通信；网络接口1004主要用于与服务器建立通信连接；而处理器1001可以用于调用存储器1005中存储的页面组件的聚焦程序，并执行以下操作：

将预设的预设待展示页面中的元素进行组件划分得到UI组件组；

从所述UI组件组中确定预聚焦组件组；

根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对所述目标聚焦组件进行聚焦。

进一步地，在所述从所述UI组件组中确定预聚焦组件组的步骤之前，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

在页面加载后获取服务器数据，并根据所述服务器数据生成虚拟页面节点对象列表；

针对所述虚拟页面节点对象列表进行数据驱动渲染，以将节点数据在页面进行展示得到真实页面节点对象；

根据预设WEB开发框架react构建虚拟页面节点对象生成逻辑，并通过所述虚拟页面节点对象生成逻辑，针对所述虚拟页面节点对象列表进行遍历得到所述虚拟页面节点的属性变量的赋值，以根据所述真实页面节点对象和所述属性变量赋值确定预聚焦组件组。

进一步地，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

根据所述属性变量的赋值和所述真实页面节点对象，通过所述虚拟页面节点对象生成逻辑获取所述UI组件组中的预聚焦组件组。

进一步地，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

基于当前展示页面，通过全局事件分发器获取由用户触发遥控器产生的键值。

进一步地，所述键值包括：方向键值，在所述根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

确定UI组件组预先注册按键事件时绑定的回调函数，以在调用所述回调函数时获取所述回调函数对应的组件信息，其中，所述回调函数与通过预设WEB开发框架react预先编写的ref属性相对应；

根据所述回调函数和所述UI组件组预先注册的聚焦事件类型将所述键值分发至预聚焦组件组，以在所述键值为所述方向键值时，基于所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

进一步地，在所述根据所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

从所述预聚焦组件组中移除已聚焦组件；

处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

根据所述方向键值，针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。

进一步地，在所述根据所述键值，针对移除已聚焦组件的预聚焦组件组数组进行遍历查找得到满足预设聚焦条件的目标聚焦组件的步骤之后，处理器1001还可以用于调用存储器1005中存储的页面组件的聚焦程序，还执行以下操作：

获取前聚焦组件和所述目标聚焦组件之间的距离参数；

将所述距离参数和所述目标聚焦组件存储至预设对象，并将所述预设对象存储至预设数组；

针对所述预设数组中最小的距离参数所对应的目标聚焦组件进行焦点化处理。

参照图2，图2为本发明页面组件的聚焦方法第一实施例的流程示意图。

在本实施例中，提供了界面切换方法的实施例，需要说明的是，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以不同于此处的顺序执行所示出或描述的步骤。

在本实施例中基于数据驱动模式来渲染页面进行展示。在本实施例中针开源框架react进行改造，通过改造后的react对机顶盒展示的页面进行数据驱动控制。本实施例中基于数据驱动模式下的页面操作控制方法能够抽离UI层和页面控制逻辑，其中UI层只关注展示层面的代码编写，此时UI组件具备可复用性；而页面控制逻辑交由数据驱动实现，对键盘互动程中产生新的生命周期状态进行控制。

在此基础上，焦点逻辑的控制只需要交给改造后的react进行统一处理即可，改造后的react框架集成了焦点解决方案，能够统一处理页面层的控制逻辑。而UI组件只需要在页面节点打上预聚焦属性即可。进而，UI组件组内部进行自动寻焦算法。另外，针对UI组件组之间的页面控制的焦点逻辑可由业务侧进行人为化制定来提高互动的效率。

步骤S10，将预设待展示页面中的元素进行组件划分得到UI组件组；

终端设备需要预先针对在机顶盒上展示的页面进行设计，包括：对页面上的元素进行组件划分，进而将划分完成的组件按照视觉排布或者业务关联性进行组合。在本实施例中可使用react框架对划分完成的组件进行UI组件等代码编写。

具体地，例如，如图3所示，终端设备首先获取产品需求并设计出效果图。在此基础上。一方面，在无特殊规则或者要求的情况下，可将UI组件按照视觉效果从上往下进行排布；另一方面，可按照业务规定对UI组件进行分组，比如，组件组合1、组件组合2和组件组合3等。在本实施例中不对UI组件的划分方式做具体限定，可根据实际业务情况进行灵活体调整。

步骤S20，从所述UI组件组中确定预聚焦组件组；

在开源框架react的基础上，保留原有虚拟页面节点业务逻辑，对该开源框架react的虚拟页面节点生成方法重新进行构建得到虚拟页面节点对象的ref方式，以通过该虚拟页面节点对象的ref方式预先确定UI组件组中的预聚焦组件组。

需要说明的是，在本实施例中，相比与原有的开源框架react的节点生成方法，在本实施例中预先确定预聚焦组件组，提升了自动寻焦效率。

步骤S30，获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对所述目标聚焦组件进行控制。

终端设备在从UI组件组中获取预聚焦组件组，若是检测到用户触发的键值，将进一步根据该键值从各个预聚焦组件组中确定与用户键值对应且满足预设聚焦条件的目标聚焦组件，以进一步针对该目标聚焦组件进行控制处理。

需要说明的是，在本实施例中，终端设备根据用户通过遥控器触发的键值确定用户实际想要控制的组件，实现了用户针对各组件的自定义寻焦，提升了界面焦点控制的灵活性，提升了用户体验，避免了机顶盒页面控制的局限性。

在本实施例中，终端设备需要预先针对在机顶盒上展示的页面进行设计，包括：对页面上的元素进行组件划分，进而将划分完成的组件按照视觉排布或者业务关联性进行组合。在开源框架react的基础上，保留原有虚拟页面节点业务逻辑，对该开源框架react的虚拟页面节点生成方法重新进行构建得到虚拟页面节点对象的ref方式，以通过该虚拟页面节点对象的ref方式预先确定UI组件组中的预聚焦组件组。若是检测到用户触发的方向键值，将进一步根据该方向键值从各个预聚焦组件组中确定与用户方向键值对应的，且满足预设聚焦条件的目标聚焦组件，以进一步针对该目标聚焦组件进行控制处理。

相比于现有技术中机顶盒页面控制方式，在本实施例中，在将UI组件进行划分得到UI组件组后，预先从UI组件组中确定预聚焦组件组，并根据用户触发的方向键值从该预聚焦组件组中确定目标聚焦组件，以针对该目标聚焦组件进行处理。因此，本发明对机顶盒展示的页面组件进行智能自动寻焦，同时能够进行人为控制进行焦点聚焦，进而提升了用户体验。在此基础上，本发明还提升了UI组件的复用性。

基于本发明页面组件的聚焦方法的第一实施例，提出本发明页面组件的聚焦方法的第二实施例。

在本实施例中，在上述步骤S10，“从所述UI组件组中确定预聚焦组件组”之前，还包括：

步骤S40，在页面加载后获取服务器数据，并根据所述服务器数据生成虚拟页面节点对象列表；

步骤S50，针对所述虚拟页面节点对象列表进行数据驱动渲染，以将节点数据在页面进行展示得到真实页面节点对象；

步骤S60，根据预设WEB开发框架react，构建虚拟页面节点对象生成逻辑，并通过所述虚拟页面节点对象生成逻辑，针对所述虚拟页面节点对象列表进行遍历得到虚拟页面节点的属性变量赋值，以根据所述真实页面节点对象和所述属性变量赋值确定预聚焦组件组。

为了实现对UI组件进行聚焦，需要在进行组件组装时预先给UI组件的页面节点打上预聚焦的属性变量，并给各个属性变量进行赋值。

需要说明的是，在本实施例中，对开源框架react的虚拟页面节点生成方法进行重写得到虚拟页面节点对象生成逻辑，该虚拟页面节点对象生成逻辑具体可以为：执行虚拟页面节点对象的ref方式，以通过该虚拟页面节点对象的ref方式，在针对虚拟页面节点对象列表执行完渲染逻辑之后，返回虚拟页面节点对象列表进行遍历，收集虚拟页面节点对象上绑定的属性变量的赋值。在该虚拟页面节点对象的ref方式中，通过两个列表分别用来存储真实的页面节点对象和页面节点对象自定义的属性变量的赋值。

具体地，例如，如图4所示，在页面进行加载后请求服务器数据，并根据服务器数据生成虚拟页面节点列表，进而对所述虚拟页面节点对象列表进行数据驱动渲染得到真实页面节点对象。在此基础上，根据虚拟页面节点对象列表，通过重写的虚拟页面节点生成逻辑，针对虚拟页面节点对象列表进行遍历得述虚拟页面节点的属性变量的赋值。

进一步地，在上述步骤S20中，“从所述UI组件组中确定预聚焦组件组”，可以包括：

步骤S201，根据所述属性变量的赋值和所述真实页面节点对象，通过所述虚拟页面节点对象生成方式获取所述UI组件组中的预聚焦组件组。

终端设备在确定虚拟页面节点对象列表中虚拟页面节点对象属性变量的赋值，以及对虚拟页面节点对象列表进行数据驱动渲染得到真实页面节点对象后，将进一步根据虚拟页面节点对象属性变量的赋值和真实页面节点对象确定，通过虚拟页面节点对象的ref方式从UI组件组中确定预聚焦组件组。

需要说明的是，在本实施例中，通过虚拟页面节点对象的ref方式，可将真实页面节点对象和该页面节点绑定的属性变量的赋值，一并传输到这个方法中。

进一步地，在上述步骤S30中，“根据当前展示页面获取用户触发的方向键值”，可以包括：

步骤S301，基于机顶盒的当前展示页面，通过全局事件分发器获取由用户触发遥控器产生的方向键值。

用户通过遥控器的按键触发相应键值后，终端设备通过页面的全局事件分发器捕获由用户触发的键值，在本实施例中，键值包括方向键值和非方向键值，只在检测到该键值为方向键值时，才会根据方向键值从预聚焦组件组中确定目标聚焦组件。

进一步地，在上述步骤S30，“根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件”之前，还可以包括：

步骤S70，确定UI组件组预先注册按键事件时绑定的回调函数，以在调用所述回调函数时获取所述回调函数对应的组件信息，其中，所述回调函数与通过预设WEB开发框架react预先编写的ref属性相对应；

步骤S80，根据所述回调函数和UI组件组预先注册的聚焦事件类型将所述方向键值分发至预聚焦组件组，以在所述键值为所述方向键值时，根据所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

在获取到用户触发的键值后，为了根据该键值确定用户实际确定的页面组件，终端设备将进一步将捕获的键值分发至当前锁定的UI组件组预先注册按键事件时绑定的回调函数。在本实施例中可通过回调函数统一将UI组件的渲染结果通知相应的业务逻辑。

进而，由于UI组件组对象能够通过预先注册的监听聚集焦点事件类型和失去焦点事件类型接收到键值，并在识别出当前键值为方向键值后能够处理UI组件的显示焦点态逻辑、失去焦点态逻辑或者业务个性化处理。因此，在本实施例中，根据回调函数和UI组件组预先注册的聚焦事件类型，将键值分发至预聚焦组件组，以在确定键值为方向键值时，从预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

进一步地，在上述步骤S30，“根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件”之前，还可以包括：

步骤S90，从所述预聚焦组件组中移除已聚焦组件；

终端设备在预聚焦组件组内部进行自动寻焦之前，需要预先移除预聚焦组件组中的已聚焦组件。

具体地，例如，通过UI组件的下标索引值，从预聚焦组件组的页面节点对象列表中剔除已聚焦的组件页面节点对象，其中，下标索引值默认为0。

上述步骤S30中，“根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件”，可以包括：

步骤S302，根据所述方向键值，针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。

终端设备在确定键值为方向键值后，将进一步根据用户通过遥控器触发的方向键值，对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。若是预聚焦组件组内部找不到满足预设聚焦条件的组件，终端可以不做任何处理，也可以通过人为锁定的方式对下个预聚焦组件组进行遍历查询操作。

终端设备针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件的步骤，如图6所示，具体包括：

首先识别用户通过遥控器触发的方向键值，根据该方向键值判断当前的方向键：

若方向键为上箭头，同时预聚焦组件的bottom值要小于等于当前聚焦组件top值，满足以下3种情况的任一情况都符合视觉范围内的下一步进行上移的组件。

条件1、当前聚焦组件的left值小于预聚焦组件的left值且当前聚焦组件的right值要大于预聚焦组件的left值；

条件2、当前聚焦组件的left值要小于预聚焦组件的right值且当前聚焦组件的right值要大于预聚焦组件的right值；

条件3、当前聚焦组件的left值要大于预聚焦组件的left值且当前聚焦组件的right要小于预聚焦组件的right值。

若方向键为下箭头，同时预聚焦组件的top值要小于等于当前聚焦组件bottom值，满足以下3种情况的任一情况都符合视觉范围内的下一步下移的组件

条件1、当前聚焦组件的left值小于预聚焦组件的left值且当前聚焦组件的right值要大于预聚焦组件的left值；

条件2、当前聚焦组件的left值要小于预聚焦组件的right值且当前聚焦组件的right值要大于预聚焦组件的right值；

条件3、当前聚焦组件的left值要大于预聚焦组件的left值且当前聚焦组件的right要小于预聚焦组件的right值。

若方向键为左箭头，同时预聚焦组件的right值要小于等于当前聚焦组件left值，满足以下3种情况的任一情况都符合视觉范围内的下一步左移的组件：

条件1、当前聚焦组件的top值小于预聚焦组件的top值且当前聚焦组件的bottom值要大于预聚焦组件的top值；

条件2、当前聚焦组件的top值要小于预聚焦组件的bottom值且当前聚焦组件的bottom值要大于预聚焦组件的bottom值；

条件3、当前聚焦组件的top值要大于预聚焦组件的top值且当前聚焦组件的bottom要小于预聚焦组件的bottom值。

若方向键为右箭头，同时预聚焦组件的left值要小于等于当前聚焦组件right值，满足以下3种情况的任一情况都符合视觉范围内的下一步右移的组件。

条件1、当前聚焦组件的top值小于预聚焦组件的top值且当前聚焦组件的bottom值要大于预聚焦组件的top值；

条件2、当前聚焦组件的top值要小于预聚焦组件的bottom值且当前聚焦组件的bottom值要大于预聚焦组件的bottom值；

条件3、当前聚焦组件的top值要大于预聚焦组件的top值且当前聚焦组件的bottom要小于预聚焦组件的bottom值。

在此基础上，终端将从预聚焦组件组中获取满足上述聚焦条件的目标聚焦组件。

进一步地，在上述步骤S30，“根据所述键值，针对移除已聚焦组件的预聚焦组件组数组进行遍历查找得到满足预设聚焦条件的目标聚焦组件”之后，还包括：

步骤A，获取前聚焦组件和所述目标聚焦组件之间的距离参数；

步骤B，将所述距离参数和所述目标聚焦组件存储至预设对象，并将所述预设对象存储至预设数组；

步骤C，针对所述预设数组中最小的距离参数所对应的目标聚焦组件进行焦点化处理。

终端设备在从预聚焦组件组中确定满足上述聚焦条件的目标聚焦组件后，需要进一步确定前聚焦组件和所述目标聚焦组件之间的距离参数，进而将该距离参数以及对应的目标聚焦组件保存至预设的同一对象中，并将该对象保存至预设数组中，以从该数组中获取最小的距离参数所对应的目标聚焦组件，并对该目标聚焦组件进行焦点化处理。

关于获取前聚焦组件和所述目标聚焦组件之间的距离参数的步骤，具体包括：

若方向键为上键、左键或右键：

依照笛卡尔坐标系标出相应的位置X，Y。设置目标聚焦组件的left值为目标聚焦组件的X1值，目标聚焦组件的top值为目标组件的Y1值，当前聚焦组件的left值为目标预聚焦组件的X2值，当前聚焦组件的bottom值为预聚焦组件的Y2值，通过

得出算出两点之间的距离算出两组件之间的距离参数。

若方向键为下键：

设置目标聚焦组件的left值为目标组件的X1值，目标聚焦组件的top值为目标组件的Y1值，当前聚焦组件的left值为当前预聚焦组件的X2值，当前聚焦组件的top值为当前聚焦组件的Y2值，通过

得出算出两点之间的距离算出两个组件之间的距离参数。

在此基础上，进一步将该距离参数以及对应的目标聚焦组件保存至预设的同一对象中，并将该对象保存至预设数组中，以从该数组中获取最小的距离参数所对应的目标聚焦组件，并对该目标聚焦组件进行焦点化处理。

在本实施例中，在页面进行加载后请求服务器数据，并根据服务器数据生成虚拟页面节点列表，进而对所述虚拟页面节点对象列表进行数据驱动渲染得到真实页面节点对象。在此基础上，根据虚拟页面节点对象列表，通过重写的虚拟页面节点生成逻辑，针对虚拟页面节点对象列表进行遍历得述虚拟页面节点的属性变量的赋值。进一步据虚拟页面节点对象属性变量的赋值和真实页面节点对象确定，通过虚拟页面节点对象生成逻辑从UI组件组中确定预聚焦组件组。用户通过遥控器的按键触发相应键值后，终端设备通过页面的全局事件分发器捕获由用户触发的键值。为了根据该方向键值确定用户实际确定的页面组件，终端设备将进一步将捕获的键值分发至当前锁定的UI组件组预先注册按键事件时绑定的回调函数。终端设备在预聚焦组件组内部进行自动寻焦之前，需要预先移除预聚焦组件组中的已聚焦组件。对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。若是预聚焦组件组内部找不到满足预设聚焦条件的组件，终端可以不做任何处理，也可以通过人为锁定的方式对下个预聚焦组件组进行遍历查询操作。

在本发明中，针对在机顶盒上展示的页面进行焦点逻辑控制，提升了展示页面中部分展示模块的复用性，同时针对机顶盒端EPG的兼容性进行统一的解决方案，对于规则或者无规则化的页面组件进行智能化寻焦，同时兼具对特殊业务要求进行人为控制焦点聚焦。本发明用户能够对于不规则模块进行智能聚焦，同时满足了即可自动寻焦又可人为定义寻焦路径的业务场景，并且避免了大屏端机顶盒因遥控器限制所导致的复杂操作，提升了用户体验。

此外，本发明实施例还提出一种页面组件的聚焦***，参照图7，图7为本发明页面组件的聚焦一实施例的功能模块示意图。如图7所示，本发明页面组件的聚焦***，包括：

组件划分模块10，用于将预设待展示页面中的元素进行组件划分得到UI组件组；

确定模块20，用于从所述UI组件组中确定预聚焦组件组；

获取模块30，用于根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对所述目标聚焦组件进行聚焦。

进一步地，所述页面组件的聚焦***，包括：

虚拟页面节点对象列表生成模块，用于在页面加载后获取服务器数据，并根据所述服务器数据生成虚拟页面节点对象列表；

数据驱动渲染模块，用于针对所述虚拟页面节点对象列表进行数据驱动渲染，以将节点数据在页面进行展示得到真实页面节点对象；

遍历模块，用于根据预设WEB开发框架react，构建虚拟页面节点对象生成逻辑，并通过所述虚拟页面节点对象生成逻辑，针对所述虚拟页面节点对象列表进行遍历得到所述虚拟页面节点的属性变量的赋值，以根据所述真实页面节点对象和所述属性变量赋值确定预聚焦组件组。

进一步地，所述确定模块20，包括：

预聚焦组件组获取单元，用于根据所述属性变量的赋值和所述真实页面节点对象，通过所述虚拟页面节点对象生成方式获取所述UI组件组中的预聚焦组件组。

进一步地，所述获取模块30，包括：

键值获取模块，用于基于当前展示页面，通过全局事件分发器获取由用户触发遥控器产生的键值。

进一步地，所述键值包括：方向键值，所述页面组件的聚焦***，包括：

回调函数确定模块，用于以在调用所述回调函数时获取所述回调函数对应的组件信息，其中，所述回调函数与通过预设WEB开发框架react预先编写的ref属性相对应；

键值分发模块，用于根据所述回调函数和所述UI组件组预先注册的聚焦事件类型将所述键值分发至预聚焦组件组，以在所述键值为所述方向键值时，基于所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

进一步地，所述页面组件的聚焦***，包括：

移除模块，用于从所述预聚焦组件组中移除已聚焦组件；

所述获取模块30，包括：

遍历查找单元，用于根据所述方向键值，针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。

进一步地，所述页面组件的聚焦***，包括：

距离参数获取模块，用于获取前聚焦组件和所述目标聚焦组件之间的距离参数；

存储模块，用于将所述距离参数和所述目标聚焦组件存储至预设对象，并将所述预设对象存储至预设数组；

焦点化处理模块，用于针对所述预设数组中最小的距离参数所对应的目标聚焦组件进行焦点化处理。

本发明页面组件的聚焦***的各个功能模块的具体实施方式与上述页面组件的聚焦方法各实施例基本相同，在此不做赘述。

此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有页面组件的聚焦程序，所述页面组件的聚焦程序被处理器执行时实现如上所述的页面组件的聚焦方法的步骤。

本发明页面组件的聚焦***和计算机可读存储介质的各实施例，均可参照本发明页面组件的聚焦方法各个实施例，此处不再赘述。

此外，本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现如以上页面组件的聚焦方法的任一项实施例所述的页面组件的聚焦方法的步骤。

本发明计算机程序产品的具体实施例与上述页面组件的聚焦方法的各实施例基本相同，在此不作赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种页面组件的聚焦方法，其特征在于，所述页面组件的聚焦方法应用于机顶盒，所述页面组件的聚焦方法包括：

将预设待展示页面中的元素进行组件划分得到UI组件组；

从所述UI组件组中确定预聚焦组件组；

根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中确定满足预设聚焦条件的目标聚焦组件，以对所述目标聚焦组件进行聚焦。

2.如权利要求1所述的页面组件的聚焦方法，其特征在于，在所述从所述UI组件组中确定预聚焦组件组的步骤之前，还包括：

在页面加载后获取服务器数据，并根据所述服务器数据生成虚拟页面节点对象列表；

针对所述虚拟页面节点对象列表进行数据驱动渲染，以将节点数据在页面进行展示得到真实页面节点对象；

根据预设WEB开发框架react，构建虚拟页面节点对象生成逻辑，并通过所述虚拟页面节点对象生成逻辑，针对所述虚拟页面节点对象列表进行遍历得到虚拟页面节点的属性变量赋值，以根据所述真实页面节点对象和所述属性变量赋值确定预聚焦组件组。

3.如权利要求2所述的页面组件的聚焦方法，其特征在于，所述从所述UI组件组中确定预聚焦组件组的步骤，包括：

根据所述属性变量赋值和所述真实页面节点对象，通过所述虚拟页面节点对象生成逻辑获取UI组件组中的预聚焦组件组。

4.如权利要求1所述的页面组件的聚焦方法，其特征在于，所述根据当前展示页面获取用户触发的键值的步骤，包括：

基于机顶盒的当前展示页面，通过预设全局事件分发器获取由用户触发遥控器产生的键值。

5.如权利要求4所述的页面组件的聚焦方法，其特征在于，所述键值包括：方向键值，在所述根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，还包括：

确定UI组件组预先注册按键事件时绑定的回调函数，以在调用所述回调函数时获取所述回调函数对应的组件信息，其中，所述回调函数与通过预设WEB开发框架react预先编写的ref属性相对应；

根据所述回调函数和所述UI组件组预先注册的聚焦事件类型将所述键值分发至预聚焦组件组，以在所述键值为所述方向键值时，基于所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件。

6.如权利要求5所述的页面组件的聚焦方法，其特征在于，在所述根据所述方向键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤之前，还包括：

从所述预聚焦组件组中移除已聚焦组件；

所述根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件的步骤，包括：

根据所述方向键值，针对移除已聚焦组件的预聚焦组件组进行遍历查找得到满足预设聚焦条件的目标聚焦组件。

7.如权利要求6所述的页面组件的聚焦方法，其特征在于，在所述根据所述键值，针对移除已聚焦组件的预聚焦组件组数组进行遍历查找得到满足预设聚焦条件的目标聚焦组件的步骤之后，还包括：

获取当前聚焦组件和所述目标聚焦组件之间的距离参数；

将所述距离参数和所述目标聚焦组件存储至预设对象，并将所述预设对象存储至预设数组；

针对所述预设数组中最小距离参数所对应的目标聚焦组件进行焦点化处理。

8.一种页面组件的聚焦***，其特征在于，所述页面组件的聚焦***包括：

组件划分模块，用于将预设的预设待展示页面中的元素进行组件划分得到UI组件组；

确定模块，用于从所述UI组件组中确定预聚焦组件组；

获取模块，用于根据当前展示页面获取用户触发的键值，并根据所述键值从所述预聚焦组件组中获取满足预设聚焦条件的目标聚焦组件，以对目标聚焦组件进行聚焦。

9.一种终端设备，其特征在于，所述终端设备包括存储器、处理器和存储在所述存储器上并可在所述处理器上运行的页面组件的聚焦程序，所述页面组件的聚焦程序被所述处理器执行时实现如权利要求1至7中任一项所述的页面组件的聚焦方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有页面组件的聚焦程序，所述页面组件的聚焦程序被处理器执行时实现如权利要求1至7中任一项所述的页面组件的聚焦方法的步骤。

Images