CN114579231A - 页面展示方法、装置及电子设备 - Google Patents

Abstract

本申请实施例公开了页面展示方法、装置及电子设备，所述方法包括：接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；根据所述操作指令触发用户界面更新事件，并投放到所述第二设备的屏幕中进行展示。通过本申请实施例，能够在适用于投放多种页面的同时，提升投屏后的展示效果，提升用户体验。

Description

页面展示方法、装置及电子设备

技术领域

本申请涉及投屏技术领域，特别是涉及页面展示方法、装置及电子设备。

背景技术

投屏技术可以把一个终端设备(如手机等移动终端)的屏幕画面投放到其他显示设备(如电视机，外接的显示器等)上显示。例如，正在手机里面播放的视频，可以通过投屏的方式，投放到电视机上进行播放，等等。

从技术实现角度而言，投屏可以有多种实现方式。例如，一种方式是系统镜像的方式，也即，一些移动终端操作系统可以支持这种系统镜像功能，通过该功能，可以将移动终端屏幕中展示的内容逐帧同步给其他显示设备，使得其他显示设备屏幕上展示的内容与移动终端屏幕上展示的内容完全一致。但是这种方案无法体现外接设备的大屏优势，并且，由于移动终端设备与其他显示设备的屏幕尺寸长宽比等会有明显的不同，因此，也可能导致其他显示设备在展示镜像内容的过程中会留有黑边或白边等现象。

另一种投屏的实现方式是直接进行视频流的投放。这种方式通常在具体的应用程序(App)中实现。例如，移动终端设备中安装的视频播放类的App等。通过这种App播放某视频内容的过程中，可以为用户提供投屏功能，用户发起投屏之后，可以将该App中当前正在播放的视频流的地址提供给外接显示设备，其他显示设备可以使用自身系统中的播放器加载视频流并进行播放。这种方式可以避免产生黑边或者白边等问题，但是，这种方式只能在外接显示设备上展示播放页面，如果用户需要向外接显示设备投放其他视频内容，则需要将之前发起的投屏结束，并回到移动终端的首页等列表页面中选择播放其他视频内容后重新发起投屏，过程比较繁琐，用户体验不佳。

发明内容

本申请提供了页面展示方法、装置及电子设备，能够在适用于投放多种页面的同时，提升投屏后的展示效果，提升用户体验。

本申请提供了如下方案：

一种页面展示方法，通过第一设备中的目标应用程序客户端执行以下处理：

接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；

在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；

接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；

根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

一种页面展示方法，包括：

第一设备中的目标应用程序客户端接收到将目标页面投放到第二设备进行展示的请求后后，生成用于在所述第一设备侧展示的第一页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；其中，所述第一设备通过第三设备连接到所述第二设备；

所述第三设备中的目标应用程序客户端根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面；

通过所述第一设备中的所述目标应用程序客户端，接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令，并发送给所述第三设备；

所述第三设备中的所述目标应用程序客户端接收到所述操作指令后，根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

一种页面展示装置，所述装置应用于第一设备中的目标应用程序客户端，包括：

页面生成单元，用于接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；

展示单元，用于在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；

操作指令接收单元，用于接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；

界面更新单元，用于根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述任一项所述的方法的步骤。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述任一项所述的方法的步骤。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，在需要从第一设备向第二设备投放某目标页面的内容时，可以根据第二设备的屏幕参数信息进行适配，生成适合在第二设备中展示的第二页面，然后再投放到第二设备中展示。同时，第一设备中不再展示上述目标页面中的具体页面内容，而是展示出用于对遥控器中的按键进行模拟的第一页面，使得用户可以在观看第二设备屏幕的过程中，通过第一设备中展示出的遥控器模拟页面发出对第二页面的操作指令，相应的，第一设备可以根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。通过这种方式，由于第二页面是根据第二设备的屏幕参数信息生成的，可以更好的与第二设备屏幕适配，因此，避免产生“黑边”、“白边”等现象，提升投屏后的展示效果。另外，由于是通过第一设备与第二设备之间的连接，将第一设备中生成的第二页面投放到第二设备中展示，不依赖页面的网络地址等，因此，可以实现对多种页面的投放。例如，在视频内容类的应用程序场景下，除了可以投放播放页面，还可以投放诸如客户端首页、搜索页、频道页等其他的非播放页面，从而使得用户在需要在不同的视频资源之间进行切换播放时，也可以观看第二设备屏幕的状态下，通过第一设备中模拟出的遥控器页面执行简单的上下左右、确认、返回等操作即可，因此，可以提升用户体验。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1是本申请实施例提供的系统架构的示意图；

图2是本申请实施例提供的另一系统架构的示意图；

图3是本申请实施例提供的第一方法的流程图；

图4是本申请实施例提供的技术架构示意图；

图5是本申请实施例提供的第二方法的流程图；

图6是本申请实施例提供的装置的示意图；

图7是本申请实施例提供的电子设备的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，提供了新的投屏实现方案，在该方案中，可以将第一设备(例如，手机等移动设备)中的多种页面(包括播放页面或者客户端首页、列表页等非播放页面)投放到第二设备(例如，外接的显示器、电视机等)的屏幕中进行展示。其中，可以使用第一设备操作系统提供的系统镜像能力，将第一设备中绘制的界面生成多个图像帧，并通过第一设备与第二设备之间的连接，提供给第二设备进行展示。但是，与传统的系统镜像不同的是，传统的系统镜像通常是在操作系统中发起的，对于具体界面中展示的是什么内容，操作系统是不关心的，其所做的事情仅仅是将第一设备的界面生成镜像数据(类似于“快照”)，并提供给第二设备进行展示。而本申请实施例中的投屏流程可以是在具体第一设备中的应用程序(例如，视频内容相关的应用程序)客户端中发起的，对于具体需要投放的目标页面中展示的是什么页面内容，应用程序是可以获知的，另外，应用程序还可以通过第一设备的操作系统等，获取到第二设备的屏幕参数信息，因此，可以根据具体第二设备的屏幕参数信息进行适配，生成适合于在第二设备中展示的第二页面。

例如，假设需要将应用程序首页的内容展示到第二设备的屏幕中，在第一设备中展示该首页时，由于第一设备的屏幕比较小，因此，通常是以每行两个资源位的方式展示出多个视频资源的链接内容(每个资源位对应一个视频资源)。而在本申请实施例中，在将该页面展示到第二设备屏幕上之前，可以根据第二设备的屏幕参数信息(例如，包括尺寸、分辨率、长宽比等)，对具体内容进行重新排版布局。例如，由于第二设备的屏幕尺寸通常比较大，因此，每行可以展示出更多的资源位，根据屏幕尺寸所属的不同区间范围，每行展示出的资源位的数量还可以不同，等等。在生成上述更适合于在第二设备中展示的页面之后，再通过系统镜像等技术能力，将该页面投放到第二设备的屏幕中进行展示，从而可以更有效地发挥出第二设备地大屏优势，使得用户可以在一屏中浏览到更多的内容，同时又不会由于信息过于拥挤产生辨识度低等问题。

另外，在第一设备侧，可以展示出用于对遥控按键进行模拟的页面，也即，第一设备中不再展示具体的客户端首页等页面内容，而是可以作为遥控器来使用。换言之，虽然本申请实施例中可以使用系统镜像技术实现将页面投放到另一个设备上，但是，投放之后，第一设备屏幕中展示的内容与第二设备屏幕中展示的内容是不同的。原来在第一设备屏幕中展示的客户端首页等页面，在重新进行排版布局之后，展示到第二设备屏幕中，第一设备中则展示出模拟遥控器的页面。这样，用户可以使用第一设备展示出的页面中的上下左右等方向按键、确认键等，对第二设备屏幕中展示出的页面进行控制操作。

可见，在本申请实施例中，可以将应用程序的客户端首页等非播放页面投放到第二设备中进行展示，并且，根据第二设备的屏幕参数进行了排版布局，使其更适合在第二设备的屏幕中进行展示，避免出现黑边等现象，同时也更好地发挥出第二设备的大屏优势。另外，如果用户需要切换到其他的视频资源进行播放，则直接通过第一设备中的遥控器页面执行退出当前视频的操作，从而使得第二设备屏幕可以返回到上一级的列表页等页面进行展示，并通过第一设备中的遥控器页面对第二设备屏幕展示的上述列表页中的其他视频资源进行选择即可。

另外，如果投放到第二设备展示的页面中包括多个页面元素，则为了能够通过第一设备中展示的遥控页面，对第二设备展示的页面中的多个页面元素进行控制，还可以在第一设备的应用程序客户端实现对第二设备中展示的页面进行UI(用户界面)焦点定位的功能，以使得在通过第一页面中的方向键发出操作指令的过程中，能够定位到具体方向上的下一个页面元素，对此，后文中会有详细介绍。

具体从系统架构角度而言，在一种实现方式下，如图1所示，可以涉及到第一设备以及第二设备，第一设备可以是手机、平板电脑等移动终端设备，第二设备可以是显示屏、电视机等大屏设备。其中，第一设备与第二设备之间可以通过有线(例如，通过物理接口进行有线连接)、无线(例如，通过无线局域网，或者蓝牙等近距离连接)等方式进行连接。第一设备中可以安装具体应用程序的客户端，并在该客户端中预先实现页面适配、UI(用户界面)焦点定位等功能。当用户通过上述客户端发起向第二设备的投屏请求后，该客户端可以从服务端或者从该客户端本地缓存确定出该应用程序某个目标页面(例如，可以是客户端首页，或者，搜索结果页等当前正在浏览的搜索结果页面、频道页、播放页，等等)的页面内容，并且可以通过第一设备的操作系统获取到第二设备的屏幕参数信息。这样，在具体将上述目标页面投放到第二设备进行展示之前，可以对具体的页面内容进行排版布局，生成与第二设备的屏幕参数信息相适配的第二页面，并将基于该第二页面生成的多帧图像提供给第二设备进行展示，从而使得第二设备中可以展示出诸如应用程序客户端首页、频道页、搜索页等非播放页面。另外，第一设备中可以生成用于进行遥控模拟的第一页面，并进行展示，使得用户可以通过对第一设备中的第一页面中的遥控页面元素，实现对第二设备中展示的第二页面中执行遥控操作，包括在第二页面中的多个页面元素之间切换焦点，或者，进入/退出播放页等等。

其中，页面适配、UI焦点定位功能可以是在第一设备中具体应用程序的客户端中来实现。具体实现时，一种可选的方式下，可以预先实现页面适配、UI焦点定位等功能对应的SDK(Software Development Kit，软件开发工具包)。可以在应用程序客户端代码中使用这种SDK来实现对应的功能。这样，对于应用程序客户端而言，在需要进行页面适配时，可以从服务端或者本地缓存等获取到需要投放的目标页面的页面内容，并在端侧，利用该页面适配SDK提供的功能，进行具体的排版布局，生成与第二设备屏幕参数适配的第二页面。另外，如果第二页面中包括多种第二页面元素，则还可以利用上述UI焦点定位SDK，计算出多个第二页面元素之间的相对位置关系信息并进行保存，这样，在通过第一设备中发出的上下左右等方向控制指令，可以确定出下一个获得焦点的是哪个具体的第二页面元素。

另外，考虑到在实际应用中，具体的第二设备可能是普通的显示器，其可能不具备无线连接能力，此时，第一设备需要通过有线的方式与该第二设备进行连接。而在本申请实施例中，由于用户需要通过第一设备对第二设备中展示的页面元素进行遥控操作，因此，如果设备之间采用有线的方式连接，则意味着用户在使用上述功能的过程中，其可移动范围会受限于连接线的长度，这可能会给用户带来不便。

因此，在另一种实现方式下，如图2所示，还可以在第一设备与第二设备之间提供第三设备，该第三设备也可以是另一个手机或者平板电脑等移动终端设备，其中也可以安装有相同的应用程序的客户端。其中，第三设备与第二设备之间可以通过有线、无线等多种方式连接，第一设备与第三设备由于同为手机等移动终端设备，通常都能够支持无线连接，因此，两者之间可以通过无线方式连接。此时，在向第二设备进行投屏时，第一设备中可以继续展示出用于对遥控器进行模拟的第一页面，但是，关于第二页面的生成，UI焦点定位等，可以在第三设备中来进行，第一设备仅用于向第三设备发送指令，由第三设备向第二设备提供并更新具体的图像帧数据。这样，即使第二设备不支持无线连接，也可以通过借助于第三设备的方式，使得用户在操作第一设备的过程中可以更自由的活动。并且，由于该方案对第三设备的性能要求不高，因此，可以使用比较旧的闲置设备来实现，从而还可以达到“废物利用”的效果。

其中，在上述图2所示的架构中，同样可以通过页面适配、UI焦点定位等功能对应的SDK来实现对应的功能，但此时与图1所示不同的是，在该图2所示的架构中，具体的页面适配、UI焦点定位等功能对应的SDK可以在第三设备的应用程序客户端中使用，另外，在第一设备的应用程序客户端与第三设备的应用程序客户端还可以分别实现设备间通信相关的SDK，以使得第一设备侧发出的控制指令，第三设备侧可以进行接收，等等。

下面对本申请实施例提供的具体实现方案进行详细介绍。

实施例一

首先，该实施例一针对前述图1所示的架构，从第一设备中的应用程序客户端的角度，提供了一种页面展示方法，参见图3，该方法可以通过第一设备中的目标应用程序客户端执行以下处理：

S301：接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素。

其中，具体实现时，第一设备与第二设备之间可以通过有线、无线等方式进行连接。在第一设备的应用程序客户端页面中，可以提供发起投屏的操作选项，例如，可以在客户端首页等页面中提供该操作选项。这样，用户可以通过该操作选项发起向第二设备进行页面投放的请求。

关于目标页面，可以默认为应用程序客户端首页，也即，无论用户发起请求时，应用程序正在展示哪个页面，都默认将客户端首页作为需要投放到第二设备展示的目标页面。或者，另一种方式下，也可以直接将客户端中当前正在展示的页面作为需要投放到第二设备展示的目标页面，例如，可以是频道页，搜索页，播放页，等等。

在收到上述请求后可以生成两个页面，分别是用于在所述第一设备的屏幕中展示的第一页面，以及用于在第二设备的屏幕中展示的第二页面。其中，第一页面中可以包括用于对遥控按键进行模拟的至少一个第一页面元素，例如，具体可以包括上下左右等多个方向键，还可以包括“确认”键、“返回”键等。也就是说，第一设备中不再展示具体应用程序客户端的首页等页面，而是仅作为遥控器来使用，用户在第一设备中操作时，不再是点选具体的视频资源链接等，而是对前述方向键或者“确认”键、“返回”键等进行操作。

而关于第二页面，具体可以是在应用程序客户端中的目标页面基础上进行重新的排版布局后生成的，或者，也可以在重新排版布局的同时，去掉一些不适合在第二设备中展示的内容，或者，增加一些其他内容，等等。具体在生成第二页面时，可以是根据第二设备的屏幕参数信息来进行的，以使得生成的第二页面适于在第二设备中展示，例如，不再产生黑边或者白边，具体资源位的大小、每行中展示的资源位数量也更合理，等等。

其中，关于第二设备的屏幕参数信息，可以通过多种方式获得。例如，可以预先在客户端中进行固定设置(也即，具体生成的第二页面可以专用于与某种固定屏幕参数的第二设备进行适配)。或者，为了提升方案的通用性，还可以通过所述第一设备的操作系统提供的通知消息，确定所述第二设备的屏幕参数信息。也就是说，在第一设备与第二设备建立了连接的情况下，第一设备的操作系统可以感知到第二设备的屏幕参数信息，包括尺寸、分辨率、长宽比等等。因此，第一设备中的应用程序客户端可以从该操作系统中获取到关于第二用户的屏幕参数信息。

另外，还可以确定出待投放到所述第二设备的屏幕中进行展示的目标页面关联的多个页面元素，例如，对于视频内容类应用程序的客户端首页而言，具体的页面元素可以是具体视频资源的链接，等等。也就是说，具体需要将哪个页面投放到第二设备中展示，以及该页面中关联哪些具体的页面元素，都可以是已知的。这样，在获取到具体第二设备的屏幕参数信息后，就可以对所述多个页面元素的排版布局方式进行适配处理，生成与所述第二设备的屏幕参数信息相适配的第二页面。

例如，具体实现时，具体的目标页面中可以包括多个资源位，用于承载所述多个页面元素。在默认状态下，这种目标页面中每行可能最多只展示两个资源位，这是因为，第一设备的屏幕通常比较小，不适合在同一行中展示更多的资源位。但是，在本申请实施例中，在需要将该目标页面投放到第二设备中进行展示时，可以对同一行内展示的资源位数量进行重新确定。也就是说，具体生成的第二页面中也可以包括多个资源位，用于承载所述多份链接内容；其中，具体对排版布局方式进行适配时，具体就可以包括对第二页面中同一行内展示的资源位的数量进行适配。例如，如果第二设备的屏幕尺寸大于某阈值，可以每行展示8个资源位，如果小于某阈值，则每行展示6个资源位，等等。

其中，具体实现时，具体的应用程序可以包括视频内容类应用程序，例如，可以是视频平台等，用于发布一些影视剧、网络综艺等类型的视频。或者，也可以是一些短视频平台，包括一些用户创作内容，等等。此时，具体目标页面中的页面元素可以是具体的视频资源的链接等。

S302：在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示。

在生成具体的第一页面以及第二页面之后，就可以在当前的第一设备中展示该第一页面，并将第二页面投放到所述第二设备的屏幕中进行展示。其中，在具体对第二页面进行投放展示时，可以有多种方式，例如，一种方式下，可以在所述第一设备中生成与所述第二设备的屏幕相适配的第二页面并进行界面绘制(该过程可以在第一设备后台进行，不需要进行前台的渲染展示)，之后，可以将所述第一设备中的界面绘制结果生成多个图像帧，并通过所述第一设备与所述第二设备之间建立的连接，将所述图像帧数据提供所述第二设备进行展示。也就是说，可以利用系统镜像技术，将具体的图像帧数据提供给第二设备，第二设备只需要对图像帧进行展示即可，而不需要依赖于第二设备中的播放器等程序。

S303：接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令。

在将第二页面投放到第二设备的屏幕中进行展示之后，第一设备中展示有第一页面，其中包括用于对遥控按键进行模拟的第一页面元素，例如，包括上下左右方向键、确认键、退出键等，这样，用户可以通过在第一设备的上述第一页面发出对第二设备中展示的第二页面的控制指令。具体的控制指令可以包括通过上述方向键在不同的第二页面元素之间移动焦点，或者通过确认键进入当前获得焦点的页面元素对应的操作承接页(例如，某个具体的视频资源对应的播放页等)，或者通过退出键将当前正在展示的页面(例如，正在播放的播放页)进行退出，等等。

S304：根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

接收到具体的操作指令之后，第一设备可以根据具体的操作指令对待投放的页面内容进行刷新。例如，在执行移动焦点操作指令的过程中，可以将获得焦点的第二页面元素的展示属性进行更新，包括添加背景色等突出显示方式，同时，也可以将失去焦点的第二页面元素的展示属性进行更新，包括去掉背景色，等等。或者，由于具体的遥控按键还可以包括确认键，因此，如果接收到对获得操作焦点的当前第二页面元素进行确认的操作指令后，则可以将该第二页面元素对应的操作承接页面(例如，目标视频资源对应的播放页)，确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容，之后，可以重新进行适配之后投放到第二设备进行展示。或者，具体的遥控按键还可以包括退出键，此时，如果接收到对所述第二页面进行退出的操作指令后，则可以将所述第二页面对应的上一级页面确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容。例如，当前正在第二设备中展示的第二页面是一个播放页，则可以通过上述方式退出该播放页，使得第二设备中可以返回到上一级页面展示，例如，上一级页面可以是客户端首页，或者频道页，或者搜索页，等等，具体可以根据之前的页面跳转情况而定。

其中，由于本申请实施例中根据第二设备的屏幕参数进行了排版布局方式的适配，因此，对于不同的第二设备而言，具体生成的第二页面的排版布局情况可能是不同的。而第一页面中的第一页面元素通常可以包括上下左右等方向控制按键，确认按键等，因此，为了能够通过第一设备中第一页面对第二设备中的第二页面中的多个第二页面元素进行操作，还可以在生成具体与第二设备屏幕适配的第二页面之后，对该第二页面中多个第二页面元素之间的相对位置关系进行计算并保存，以便实现对第二页面中的界面焦点进行定位的功能。这样，在接收到通过第一设备发出的上下左右等方向操作指令后，可以根据所述相对位置关系信息，确定获得操作焦点的当前第二页面元素在所述指定方向上的下一个第二页面元素，并修改所述当前第二页面元素以及所述下一个第二页面的展示属性后，对所述第二页面进行刷新展示。例如，具体的第二页面元素可以是具体资源位中展示的视频资源的链接，具体在进行适配时，对于不同尺寸的第二设备而言，页面中每一行中的资源位数量可能是不同的，因此，在获取上述相对位置关系时，可以对各个资源位进行编号，并确定出各个视频资源与资源位编号之间的对应关系，另外，可以根据具体每一行中资源位的数量信息，确定出各个资源位所在的行，以及上下左右等方向上相邻的资源位的编号，等等。这样，在第一设备中通过方向控制按键发出操作指令后，可以根据上述相对位置关系，确定出第二设备中展示的页面中对应方向的下一个页面元素是哪一个，进而可以将该下一个页面元素的展示属性进行更新，包括添加背景色等等，并对页面进行重新绘制后，将对应的图像帧发送给第二设备进行展示，等等。

需要说明的是，如前文所述，本申请实施例中，可以在具体应用程序的客户端程序中引用预先生成的SDK的方式，以使得具体客户端具有页面适配、UI焦点定位等功能。其中，如图4所示，具体的SDK可以包括页面适配SDK，以及UI焦点SDK。其中，具体实现时，页面适配SDK也可以称为“响应式SDK”，其作用就是可以在第一设备与第二设备之间进行数据桥接，并且，可以根据第二设备的屏幕参数信息，进行页面排版布局方式的适配。UI焦点SDK的作用就是进行第二页面中第二页面元素之间相对位置关系的计算以及保存，并通过从第一设备接收到到的操作指令(包括通过方向键、确认/返回键等接收到的指令)来触发UI更新事件，之后通过响应式SDK进行页面适配。另外，在图2所示的架构下，还涉及到设备间通信相关的SDK，实现第一设备与第三设备之间的指令传输。通过上述方式，可以将应用程序中的客户端首页、频道页、搜索页、播放页等多种页面，进行与第二设备屏幕参数的适配之后，生成更适合在第二设备中展示的页面，并投放到第二设备的屏幕中进行展示，同时可以在第一设备中展示模拟遥控的页面。

总之，通过本申请实施例，在需要从第一设备向第二设备投放某目标页面的内容时，可以根据第二设备的屏幕参数信息进行适配，生成适合在第二设备中展示的第二页面，然后再投放到第二设备中展示。同时，第一设备中不再展示上述目标页面中的具体页面内容，而是展示出用于对遥控器中的按键进行模拟的第一页面，使得用户可以在观看第二设备屏幕的过程中，通过第一设备中展示出的遥控器模拟页面发出对第二页面的操作指令，相应的，第一设备可以根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。通过这种方式，由于第二页面是根据第二设备的屏幕参数信息生成的，可以更好的与第二设备屏幕适配，因此，避免产生“黑边”、“白边”等现象。另外，由于是通过第一设备与第二设备之间的连接，将第一设备中生成的第二页面投放到第二设备中展示，不依赖页面的网络地址等，因此，可以实现对多种页面的投放。例如，在视频内容类的应用程序场景下，除了可以投放播放页面，还可以投放诸如客户端首页、搜索页、频道页等其他的非播放页面，从而使得用户在需要在不同的视频资源之间进行切换播放时，也可以观看第二设备屏幕的状态下，通过第一设备中模拟出的遥控器页面执行简单的上下左右、确认、返回等操作即可，因此，可以提升用户体验。

实施例二

该实施例二是针对图2所示架构下的实现方式，提供了一种页面展示方法，参见图5，该方法可以包括：

S501：第一设备中的目标应用程序客户端接收到将目标页面投放到第二设备进行展示的请求后后，生成用于在所述第一设备侧展示的第一页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；其中，所述第一设备通过第三设备连接到所述第二设备；

S502：所述第三设备中的目标应用程序客户端根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面；

S503：通过所述第一设备中的所述目标应用程序客户端，接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令，并发送给所述第三设备；

S504：所述第三设备中的所述目标应用程序客户端接收到所述操作指令后，根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

关于该实施例二，具体的页面适配、UI焦点定位等都可以在第三设备中来进行，用户可以在第一设备中进行操作，发出的操作指令会发送给第三设备，由第三设备来触发UI更新事件，完成具体的焦点定位、页面适配等，并将具体的图像帧提供给第二设备进行展示。关于该实施例二中其他的具体实现细节可以参见前述实施例一以及本说明书中其他部分的记载，这里不再赘述。

需要说明的是，本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，可以在符合所在国的适用法律法规要求的情况下(例如，用户明确同意，对用户切实通知，等)，在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。

与前述实施例一相对应，本申请实施例还提供了一种页面展示装置，所述装置应用于第一设备中的目标应用程序客户端，参见图6，该装置可以包括：

页面生成单元601，用于接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；

展示单元602，用于在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；

操作指令接收单元603，用于接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；

界面更新单元604，用于根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

其中，所述目标页面中包括多个第二页面元素；

所述页面生成单元具体可以用于：

通过所述第一设备的操作系统提供的通知消息，确定所述第二设备的屏幕参数信息；

根据所述第二设备的屏幕参数信息，对所述目标页面关联的多个第二页面元素的排版布局方式进行适配处理，生成与所述第二设备的屏幕参数信息相适配的第二页面。

其中，所述第二页面中包括多个资源位，用于承载所述多个第二页面元素；

所述排版布局方式包括：所述第二页面中同一行内展示的资源位的数量。

具体的，所述目标应用程序包括视频内容类应用程序，所述多个第二页面元素包括：多个视频资源的链接内容。

其中，所述目标页面包括所述视频类应用程序的客户端首页、频道页、搜索页或者播放页。

另外，所述第一页面中模拟的遥控按键包括方向控制按键，所述操作指令包括按照指定方向，在所述第二页面中的不同第二页面元素之间移动操作焦点的指令；

所述装置还可以包括：

相对位置关系获取单元，用于获取并保存所述第二页面中多个第二页面元素之间的相对位置关系信息；

所述界面更新单元具体可以用于：

根据所述相对位置关系信息，确定获得操作焦点的当前第二页面元素在所述指定方向上的下一个第二页面元素，并修改所述第二页面中当前第二页面元素以及所述下一个第二页面的展示属性。

其中，所述第一页面中模拟的遥控按键还包括确认按键；

所述界面更新单元具体可以用于：

接收到对获得操作焦点的当前第二页面元素进行确认的操作指令后，将该第二页面元素对应的操作承接页面，确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容。

另外，所述第一页面中模拟的遥控按键还包括返回按键；

所述界面更新单元具体可以用于：

接收到对所述第二页面进行返回的操作指令后，将所述第二页面对应的上一级页面确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容。

具体的，所述页面生成单元具体可以用于：

在所述第一设备中生成与所述第二设备的屏幕相适配的第二页面并进行界面绘制；

此时，所述展示单元具体可以用于：

将所述第一设备中的界面绘制结果生成多个图像帧，并通过所述第一设备与所述第二设备之间建立的连接，将所述图像帧数据提供所述第二设备进行展示。

另外，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述方法实施例中任一项所述的方法的步骤。

以及一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述方法实施例中任一项所述的方法的步骤。

其中，图7示例性的展示出了电子设备的架构，例如，设备700可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理，飞行器等。

参照图7，设备700可以包括以下一个或多个组件：处理组件702，存储器704，电源组件706，多媒体组件708，音频组件710，输入/输出(I/O)的接口712，传感器组件714，以及通信组件716。

处理组件702通常控制设备700的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件702可以包括一个或多个处理器720来执行指令，以完成本公开技术方案提供的方法的全部或部分步骤。此外，处理组件702可以包括一个或多个模块，便于处理组件702和其他组件之间的交互。例如，处理部件702可以包括多媒体模块，以方便多媒体组件708和处理组件702之间的交互。

存储器704被配置为存储各种类型的数据以支持在设备700的操作。这些数据的示例包括用于在设备700上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器704可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件706为设备700的各种组件提供电力。电源组件706可以包括电源管理系统，一个或多个电源，及其他与为设备700生成、管理和分配电力相关联的组件。

多媒体组件708包括在设备700和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件708包括一个前置摄像头和/或后置摄像头。当设备700处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件710被配置为输出和/或输入音频信号。例如，音频组件710包括一个麦克风(MIC)，当设备700处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器704或经由通信组件716发送。在一些实施例中，音频组件710还包括一个扬声器，用于输出音频信号。

I/O接口712为处理组件702和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件714包括一个或多个传感器，用于为设备700提供各个方面的状态评估。例如，传感器组件714可以检测到设备700的打开/关闭状态，组件的相对定位，例如所述组件为设备700的显示器和小键盘，传感器组件714还可以检测设备700或设备700一个组件的位置改变，用户与设备700接触的存在或不存在，设备700方位或加速/减速和设备700的温度变化。传感器组件714可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件714还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件714还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件716被配置为便于设备700和其他设备之间有线或无线方式的通信。设备700可以接入基于通信标准的无线网络，如WiFi，或2G、3G、4G/LTE、5G等移动通信网络。在一个示例性实施例中，通信部件716经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件716还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备700可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器704，上述指令可由设备700的处理器720执行以完成本公开技术方案提供的方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

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

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的页面展示方法、装置及电子设备，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (13)

1.一种页面展示方法，其特征在于，通过第一设备中的目标应用程序客户端执行以下处理：

接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；

在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；

接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；

根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

2.根据权利要求1所述的方法，其特征在于，

所述目标页面中包括多个第二页面元素；

所述根据所述第二设备的屏幕参数信息，生成与所述第二设备的屏幕相适配的第二页面，包括：

通过所述第一设备的操作系统提供的通知消息，确定所述第二设备的屏幕参数信息；

根据所述第二设备的屏幕参数信息，对所述目标页面关联的多个第二页面元素的排版布局方式进行适配处理，生成与所述第二设备的屏幕参数信息相适配的第二页面。

3.根据权利要求2所述的方法，其特征在于，

所述第二页面中包括多个资源位，用于承载所述多个第二页面元素；

所述排版布局方式包括：所述第二页面中同一行内展示的资源位的数量。

4.根据权利要求2所述的方法，其特征在于，

所述目标应用程序包括视频内容类应用程序，所述多个第二页面元素包括：多个视频资源的链接内容。

5.根据权利要求4所述的方法，其特征在于，

所述目标页面包括所述视频类应用程序的客户端首页、频道页、搜索页或者播放页。

6.根据权利要求2所述的方法，其特征在于，

所述第一页面中模拟的遥控按键包括方向控制按键，所述操作指令包括按照指定方向，在所述第二页面中的不同第二页面元素之间移动操作焦点的指令；

所述方法还包括：

获取并保存所述第二页面中多个第二页面元素之间的相对位置关系信息；

所述根据所述操作指令触发用户界面更新事件，包括：

根据所述相对位置关系信息，确定获得操作焦点的当前第二页面元素在所述指定方向上的下一个第二页面元素，并修改所述第二页面中当前第二页面元素以及所述下一个第二页面的展示属性。

7.根据权利要求6所述的方法，其特征在于，

所述第一页面中模拟的遥控按键还包括确认按键；

所述根据所述操作指令触发用户界面更新事件，包括：

接收到对获得操作焦点的当前第二页面元素进行确认的操作指令后，将该第二页面元素对应的操作承接页面，确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容。

8.根据权利要求6所述的方法，其特征在于，

所述第一页面中模拟的遥控按键还包括返回按键；

所述根据所述操作指令触发用户界面更新事件，包括：

接收到对所述第二页面进行返回的操作指令后，将所述第二页面对应的上一级页面确定为新的目标页面，并将该新的目标页面关联的页面内容确定为新的待投放页面内容。

9.根据权利要求1至8任一项所述的方法，其特征在于，

所述生成与所述第二设备的屏幕相适配的第二页面，包括：

在所述第一设备中生成与所述第二设备的屏幕相适配的第二页面并进行界面绘制；

所述将所述第二页面投放到所述第二设备的屏幕中进行展示，包括：

将所述第一设备中的界面绘制结果生成多个图像帧，并通过所述第一设备与所述第二设备之间建立的连接，将所述图像帧数据提供所述第二设备进行展示。

10.一种页面展示方法，其特征在于，包括：

第一设备中的目标应用程序客户端接收到将目标页面投放到第二设备进行展示的请求后后，生成用于在所述第一设备侧展示的第一页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；其中，所述第一设备通过第三设备连接到所述第二设备；

所述第三设备中的目标应用程序客户端根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面；

通过所述第一设备中的所述目标应用程序客户端，接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令，并发送给所述第三设备；

所述第三设备中的所述目标应用程序客户端接收到所述操作指令后，根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

11.一种页面展示装置，其特征在于，所述装置应用于第一设备中的目标应用程序客户端，包括：

页面生成单元，用于接收到将目标页面投放到第二设备进行展示的请求后，生成用于在所述第一设备的屏幕中展示的第一页面，并根据所述第二设备的屏幕参数信息以及所述目标页面关联的页面内容，生成与所述第二设备的屏幕参数信息相适配的第二页面，所述第一页面包括用于对遥控按键进行模拟的至少一个第一页面元素；

展示单元，用于在所述第一设备侧展示所述第一页面，并将所述第二页面投放到所述第二设备的屏幕中进行展示；

操作指令接收单元，用于接收通过所述第一页面中的所述第一页面元素执行的对所述第二页面进行操作的操作指令；

界面更新单元，用于根据所述操作指令触发用户界面更新事件，并重新与所述第二设备的屏幕参数信息适配后，投放到所述第二设备的屏幕中进行展示。

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

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

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行权利要求1至10任一项所述的方法的步骤。

Images