CN109800044B - 一种html5双屏应用的方法、装置及电子设备 - Google Patents

Abstract

本申请公开了一种HTML5双屏应用的方法、装置、电子设备及计算机可读存储介质，其中，该方法包括：在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，所述第一应用加载在第一窗口中，所述第一窗口显示于所述主屏，所述第二窗口显示于所述副屏；在所述第二窗口中加载并显示第二应用；对所述第一应用及所述第二应用进行监听，若监听到预设的交互事件，则触发所述第一应用和/或所述第二应用基于所述交互事件显示相应的页面；其中，所述第一应用及所述第二应用均为超文本HTML5.0应用，所述第一窗口及所述第二窗口均为浏览器窗口。通过本申请方案，可实现双屏显示HTML5.0应用，使得双屏显示的应用场景更为广泛。

Description

一种HTML5双屏应用的方法、装置及电子设备

技术领域

本申请属于显示控制技术领域，尤其涉及一种HTML5双屏应用的方法、装置、电子设备及计算机可读存储介质。

背景技术

虽然安卓(Android)原生系统支持对多屏应用的编程，并且安卓原生系统的系统层提供了相应的接口，但对于超文本HTML5.0应用而言，由于其依赖于浏览器接口，而浏览器中还不存在双屏操作的相应接口。因而，对于HTML5.0应用而言，其内容无法直接映射到副屏，无法直接实现双屏显示。

发明内容

有鉴于此，本申请提供了一种HTML5双屏应用的方法、装置、电子设备及计算机可读存储介质，可实现HTML5.0应用的双屏显示，使得双屏显示的应用场景更为广泛。

本申请的第一方面提供了一种HTML5双屏应用的方法，上述方法应用于具备有主屏及副屏的电子设备，上述方法包括：

在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏；

在上述第二窗口中加载并显示第二应用；

对上述第一应用及上述第二应用进行监听，若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面；

其中，上述第一应用及上述第二应用均为超文本HTML5.0应用，上述第一窗口及上述第二窗口均为浏览器窗口。

本申请的第二方面提供了一种HTML5双屏应用的装置，上述装置应用于具备有主屏及副屏的电子设备，上述装置包括：

创建单元，用于在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏；

加载单元，用于在上述第二窗口中加载并显示第二应用；

监听单元，用于对上述第一应用及上述第二应用进行监听；

显示单元，用于若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面；

其中，上述第一应用及上述第二应用均为超文本HTML5.0应用，上述第一窗口及上述第二窗口均为浏览器窗口。

本申请的第三方面提供了一种电子设备，上述电子设备包括主屏、副屏、存储器、处理器以及存储在上述存储器中并可在上述处理器上运行的计算机程序，上述处理器执行上述计算机程序时实现如上第一方面的方法的步骤。

本申请的第四方面提供了一种计算机可读存储介质，上述计算机可读存储介质存储有计算机程序，上述计算机程序被处理器执行时实现如上第一方面的方法的步骤。

本申请的第五方面提供了一种计算机程序产品，上述计算机程序产品包括计算机程序，上述计算机程序被一个或多个处理器执行时实现如上述第一方面的方法的步骤。

由上可见，在本申请方案中，在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏，然后在上述第二窗口中加载并显示第二应用，接着对上述第一应用及上述第二应用进行监听，若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面，其中，上述第一应用及上述第二应用均为超文本HTML5.0应用，上述第一窗口及上述第二窗口均为浏览器窗口。通过本申请方案，可实现HTML5.0应用的双屏显示，使得双屏显示的应用场景更为广泛。

附图说明

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

图1是本申请实施例提供的HTML5双屏应用的方法的实现流程示意图；

图2是本申请实施例提供的HTML5双屏应用的方法中，第一应用及第二应用的交互时序示意图；

图3是本申请实施例提供的HTML5双屏应用的装置的结构框图；

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

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

为了说明本申请上述的技术方案，下面通过具体实施例来进行说明。

实施例一

下面对本申请实施例提供的一种HTML5双屏应用的方法进行描述，请参阅图1，本申请实施例中的HTML5双屏应用的方法应用于具备有主屏及副屏的电子设备，上述方法包括：

在步骤101中，在第一应用启动后，若接收到应用创建指令，则创建第二窗口；

在本申请实施例中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏。可选地，上述步骤101具体包括：

A1、在上述主屏上通过WebView控件创建第一窗口，并在上述第一窗口中加载并显示第一应用；

在本申请实施例中，WebView控件是安卓系统下浏览器窗口的实现控件，由安卓系统提供。利用一个WebView控件可以创建一个浏览器窗口，浏览器窗口只能独立运行，多个浏览器窗口之间没有直接通信的机制。上述第一应用为HTML5.0应用，上述HTML5.0应用需要依赖于浏览器窗口才能够运行，因而上述WebView控件所提供的第一窗口实际提供了上述第一应用的运行的基础。由于上述第一窗口显示于主屏，因而上述第一应用实际为在主屏中全屏显示。

A2、在上述第一应用加载完成后，若接收到应用创建指令，则调用window.open接口；

在本申请实施例中，若接收到了应用创建指令，则认为用户当前想要进行应用程序的双屏显示。具体地，上述window.open接口为浏览器所提供的标准接口，可用于创建一个窗口，该新创建的窗口与原窗口之间为父子关系。具体地，安卓系统所内置的浏览器无法正常响应window.open接口，因为安卓系统中对此接口的响应处理逻辑为在当前窗口直接打开页面，此时只有一个窗口，也即，仅仅实现了页面的跳转。而在本申请实施例中，是需要新创建一个浏览器窗口，因而，为了规避上述问题，避免安卓系统在调用上述接口时仅实现页面的跳转，此处需要研发人员重新实现系统浏览器的钩子函数，允许window.open接口在副屏WebView中打开新的窗口。

A3、基于上述window.open接口在上述副屏上创建第二窗口。

在本申请实施例中，安卓系统还提供了双屏接口，可以将WebView控件显示在第二屏甚至第N屏，此即为安卓的多屏显示技术。该多屏显示技术可以在副屏同时显示WebView控件。基于多屏显示技术及window.open接口，浏览器可在副屏创建一个新的窗口，该新的窗口即为第二窗口，上述第二窗口为上述第一窗口的子窗口；也即是说，上述第二窗口显示在副屏中依赖于安卓系统提供的Android Native技术。具体地，在第一窗口创建了第二窗口后，该第一窗口为父窗口，其将会保存window.open接口所返回的子窗口对象；同时，第二窗口作为子窗口，其也有一个window.opener指向父窗口的引用对象，也即，子窗口也会保存父窗口对象；在上述过程中，第一窗口通过子窗口对象引用广播事件到第二窗口中，而第二窗口也可以通过父窗口对象引用广播事件到第一窗口中，也即，上述子窗口对象及父窗口对象可作为上述支撑库的通信使用。具体地，对于广播事件来说，在HTML5.0应用中，广泛使用一种事件的注册、监听、广播机制，其类似于软件设计模式中的订阅观察者模式，可实现对某事件进行监听，当事件被触发(即收到事件广播)后可触发相应的逻辑动作。也即是说，上述广播事件为告知所有此事件的监听者，此事件已触发。而对于子窗口对象、父窗口对象这样的引用对象来说，其类似于快捷方式的概念，此对象并非真实的原始对象，只是指向原始对象的一个快捷方式。

在步骤102中，在上述第二窗口中加载并显示第二应用；

在本申请实施例中，上述第二窗口也是通过WebView控件而创建的，也即，上述第二窗口也为浏览器窗口。上述第二应用可以加载并显示于第二窗口中，具体地，上述第二应用也为HTML5.0应用。由于上述第二窗口显示于副屏，因而上述第二应用实际为在副屏中全屏显示。可选地，上述第一应用与上述第二应用可以为同一应用，也可以为不同应用，此处不作限定。

在步骤103中，对上述第一应用及上述第二应用进行监听，若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面；

在本申请实施例中，可对上述第一应用及第二应用进行监听，用以检测上述第一应用及第二应用之间是否发生了预设的交互事件。具体地，可分别在上述第一应用及上述第二应用中加载预设的支撑库，通过上述支撑库对上述第一应用及第二应用进行监听，其中，上述预设的支撑库用于HTML5.0应用之间的双向事件通信。上述支撑库具体为ScreenPipe支撑库，其在主屏与副屏之间约定了某些特殊的交互事件，一旦监听到有约定的特殊的交互事件被触发，则上述ScreenPipe支撑库将会通知主屏的第一应用及副屏的第二应用作出相应的动作响应。通过上述步骤101至103，已经可以将第一应用及第二应用这两个HTML5.0应用双屏显示于设备上，具体地，上述第一应用及第二应用所显示的内容可以根据业务需求进行调整，上述主屏与副屏之间，可以有三种显示模式，具体为：双屏同显模式、双屏异显模式及双屏多应用模式。对于双屏同显模式，其为安卓系统自带的功能，可通过安卓系统的设置，将主屏及副屏配置为此模式，即可实现主副屏显示同一UI，并支持响应交互；也即是说，在这种情况下，第一应用及第二应用可以根据业务需求显示同样的内容。而对于双屏异显模式，其为第一应用及第二应用显示不同内容，但是所显示的内容是基于同一风格UI所实现的，也即，在ScreenPipe支撑库的支撑下，由第一应用及第二应用共同完成具体业务功能。而对于双屏多应用模式，上述第一应用及第二应用只是由窗口创建时的父子关系而确定，也即是说，并不限制第二应用一定要依赖第一应用运行，第一应用及第二应用可以是业务功能或UI完全不同的应用，在不产生资源抢占冲突的情况下，可以为独立运行的双应用，例如，在主屏完成交易的过程中，在副屏播放广告视频等，此处不作限定。

可选地，上述预设的交互事件包括状态同步事件、页面跳转事件、页面返回事件及可扩展的自定义事件；

其中，上述状态同步事件用于同步第一应用及第二应用的状态量；

上述页面跳转事件用于触发第一应用和/或第二应用的页面跳转动作；

上述页面返回事件用于触发第一应用和/或第二应用的页面返回动作；

上述可扩展的自定义事件用于触发第一应用和/或第二应用的页面响应相应的动作，相应的动作由第一应用和第二应用之间根据业务需求来约定，可以是同步、跳转、返回及其他动作。

在本申请实施例中，上述ScreenPipe支撑库提供了以下核心接口以供支撑第一应用及第二应用间的通信，具体为：on(name,cb)接口，用于注册监听某事件(即参数中的name)，在接收到事件广播时触发相应的回调函数(即参数中的cb)；off(name)接口，用于注销监听某事件(即参数中的name)；fire(name,param,to)接口，用于触发某事件,其参数依次为事件名、事件参数、事件目标ID。并且，ScreenPipe支撑库根据一些高频使用场景，还提供了三类默认事件，分别为onScreenPipeSyncVariable，也即状态同步事件，用于同步第一应用及第二应用的状态量；onScreenPipeRouterRedirect，也即页面跳转事件，用于触发第一应用和/或第二应用的页面跳转动作；onScreenPipeRouterBack，用于触发第一应用和/或第二应用的页面返回动作。具体地，对于上述页面跳转/返回动作，可以是触发上述第一应用及第二应用同时触发跳转/返回动作，也可以是触发上述第一应用及第二应用在不同时刻触发跳转/返回动作，还可以是仅触发上述第一应用或第二应用触发跳转/返回动作，此处不作限定。在触发上述第一应用及第二应用均执行上述跳转/返回动作的情况下，可以是触发第一应用及第二应用跳转/返回至同一页面，也可以是触发第一应用及第二应用跳转/返回至不同页面，此处不作限定。上述所有事件都支持参数负载，即，允许传递数据参数到另一端应用。可选地，除了上述预设的交互事件之外，ScreenPipe支撑库还支持应用间广播自定义事件，以满足更丰富的应用场景需要，也即，上述预设的交互事件还可以包括可扩展的自定义事件，用于触发第一应用和/或第二应用的页面响应相应的动作，其中，上述相应的动作由第一应用和第二应用之间根据业务需求来约定，可以是同步、跳转、返回及其他动作，此处不作限定。通过上述ScreenPipe支撑库，可满足了第一应用及第二应用间的状态同步、事件广播、页面跳转等事件处理，基于此核心机制结合现代化框架的响应式数据和路由系统实现，可以扩展出更多的场景功能。

为了更好的说明书上述ScreenPipe支撑库，下面以第一应用通知第二应用显示A页面为例，示出第一应用及第二应用的交互过程：

B1、主屏的HTML5.0应用(即第一应用)调用ScreenPipe支撑库的fire接口，此接口会向第二应用广播事件onScreenPipeRouterRedirect，该事件中会指明要跳转的页面路径(即A页面)，调用示例为：

fire('onScreenPipeRouterRedirect','./a',2)

在本申请实施例中，上述参数中的'onScreenPipeRouterRedirect'为第一应用及第二应用所约定的页面跳转事件，已经在加载ScreenPipe库过程中建立了监听。

上述参数中的'./a'为要跳转的页面地址，第二应用中在此假定示例中需要首先获取A页面的内容。

上述参数中的2为参数标识事件的广播方向，也即表示其为第一应用向第二应用的广播。

B2、主屏HTML5.0应用(即第一应用)调用此接口后，由于第一窗口启动过程中已经保存了子窗口对象，通过此子窗口对象可以通过标准浏览器API dispatchEvent广播事件，示例伪代码如下：

在本申请实施例中，childWindow即为之前保存的子窗口对象，其指向第二窗口。

B3、副屏HTML5.0应用(即第二应用)在加载ScreenPipe支撑库的过程中，已经监听双屏应用交互过程中约定的一系列事件、包括'onScreenPipeRouterRedirect'事件。所以此事件被触发后，第二应用会捕获到此事件，并且解析该事件所传递的参数，即解析获得需要跳转的页面地址'./a'。

B4、副屏HTML5.0应用(即第二应用)响应约定的事件动作，调用标准浏览器API，跳转页面到'./a'，在副屏HTML5.0应用(即第二应用)中显示A页面，实现如显示签名、显示广告等业务内容。

需要注意的是，上述第二应用也可以向第一应用发起同样请求，整个流程与上述步骤B1至B4类似，此处不再赘述。

可选地，上述方法还包括：

在第一应用启动后，若在预设的时间段内未接收到应用创建指令，则触发上述副屏进入熄屏状态，或者，触发上述副屏显示预设的待机页面，或者，触发上述副屏映射上述主屏所显示的页面，直至接收到应用创建指令为止。

在本申请实施例中，若在第一应用启动后，迟迟未能接收到到应用创建指令，也即，用户当前不需要在副屏显示特定的界面，则可以触发上述副屏进入熄屏状态，用以节约能源；或者，还可以触发上述副屏显示预设的待机界面，例如，显示壁纸页面、时间页面等；或者，还可以触发上述副屏映射上述主屏所显示的页面，即使得副屏与主屏显示同样的页面，此处不作限定。在这种情况下，上述主屏与普通应用无异。

为了更好的说明本申请实施例所提供的技术方案，下面示出主屏与副屏的交互时序过程，请参阅图2：

首先，第一应用在启动后，若接收到了应用创建指令，则基于该应用创建指令通过window.open接口启动第二应用，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于主屏，上述第二应用加载在第二窗口中，上述第二窗口显示于副屏；

随后，第一应用及第二应用均加载预设的支撑库，通过该支撑库，可以对预设的交互事件进行监听，当监听到预设的交互事件时，向第一应用和/或第二应用发起广播，例如，第一应用可以向第二应用广播页面跳转事件消息，第二应用可以向第一应用广播状态同步事件消息；使得第一应用及第二应用基于接收到的事件消息显示相应界面。

进一步地，还可以在上述支撑库中自定义事件消息，此处不作限定。

由上可见，通过本申请实施例，在最底层通过安卓的多屏显示技术实现在主屏及副屏显示WebView控件，用以支撑上层的HTML5.0应用；同时，主屏通过其WebView控件加载显示第一应用，副屏通过其WebView控件加载显示第二应用，构建了多应用形态；在构建好多应用形态后，通过已封装好的支撑库在第一应用及第二应用之间约定交互事件，使得后续一旦监听到已约定的交互事件即可触发上述第一应用和/或第二应用响应相应的动作，实现第一应用及第二应用之间的双向事件通信。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

实施例二

本发明实施例提供了一种HTML5双屏应用的装置，该装置应用于具备有主屏及副屏的电子设备，如图3所示，本发明实施例中的HTML5双屏应用的装置300包括：

创建单元301，用于在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏；

加载单元302，用于在上述第二窗口中加载并显示第二应用；

监听单元303，用于对上述第一应用及上述第二应用进行监听；

显示单元304，用于若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面；

其中，上述第一应用及上述第二应用均为超文本HTML5.0应用，上述第一窗口及上述第二窗口均为浏览器窗口。

可选地，上述创建单元301包括：

第一应用加载子单元，用于在上述主屏上通过WebView控件创建第一窗口，并在上述第一窗口中加载并显示第一应用；

接口调用子单元，用于在上述第一应用加载完成后，若接收到应用创建指令，则调用window.open接口；

第二窗口创建子单元，用于基于上述window.open接口在上述副屏上创建第二窗口。

可选地，监听单元303，具体用于分别在上述第一应用及上述第二应用中加载预设的支撑库，通过上述支撑库对上述第一应用及第二应用进行监听，其中，上述预设的支撑库用于HTML5.0应用之间的双向事件通信。

可选地，上述装置300还包括：

对象保存单元，用于保存上述window.open接口所返回的对象，以便上述支撑库的通信使用。

可选地，上述预设的交互事件包括状态同步事件、页面跳转事件及页面返回事件；

其中，上述状态同步事件用于同步第一应用及第二应用的状态量；

上述页面跳转事件用于触发第一应用和/或第二应用的页面跳转动作；

上述页面返回事件用于触发第一应用和/或第二应用的页面返回动作。

可选地，上述显示单元304还用于，在第一应用启动后，若在预设的时间段内未接收到应用创建指令，则触发上述副屏进入熄屏状态，或者，触发上述副屏显示预设的待机页面，或者，触发上述副屏映射上述主屏所显示的页面，直至接收到应用创建指令为止。

由上可见，通过本申请实施例，在最底层通过安卓的多屏显示技术实现在主屏及副屏显示WebView控件，用以支撑上层的HTML5.0应用；同时，主屏通过其WebView控件加载显示第一应用，副屏通过其WebView控件加载显示第二应用，构建了多应用形态；在构建好多应用形态后，通过已封装好的支撑库在第一应用及第二应用之间约定交互事件，使得后续一旦监听到已约定的交互事件即可触发上述第一应用及第二应用响应相应的动作，实现第一应用及第二应用之间的双向事件通信。

实施例三

本发明实施例提供一种电子设备，请参阅图4，本发明实施例中的电子设备包括：主屏401、副屏402、存储器403，一个或多个处理器404(图4中仅示出一个)及存储在存储器403上并可在处理器上运行的计算机程序。其中：存储器403用于存储软件程序以及模块，处理器404通过运行存储在存储器403的软件程序以及单元，从而执行各种功能应用以及数据处理，以获取上述预设事件对应的资源。具体地，处理器404通过运行存储在存储器403的上述计算机程序时实现以下步骤：

在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，上述第一应用加载在第一窗口中，上述第一窗口显示于上述主屏，上述第二窗口显示于上述副屏；

在上述第二窗口中加载并显示第二应用；

对上述第一应用及上述第二应用进行监听，若监听到预设的交互事件，则触发上述第一应用和/或上述第二应用基于上述交互事件显示相应的页面；

其中，上述第一应用及上述第二应用均为超文本HTML5.0应用，上述第一窗口及上述第二窗口均为浏览器窗口。

假设上述为第一种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第二种可能的实施方式中，上述在第一应用启动后，若接收到应用创建指令，则创建第二窗口，包括：

在上述主屏上通过WebView控件创建第一窗口，并在上述第一窗口中加载并显示第一应用；

在上述第一应用加载完成后，若接收到应用创建指令，则调用window.open接口；

基于上述window.open接口在上述副屏上创建第二窗口。

在上述第二种可能的实施方式作为基础而提供的第三种可能的实施方式中，上述对上述第一应用及上述第二应用进行监听，包括：

分别在上述第一应用及上述第二应用中加载预设的支撑库，通过上述支撑库对上述第一应用及第二应用进行监听，其中，上述预设的支撑库用于HTML5.0应用之间的双向事件通信。

在上述第三种可能的实施方式作为基础而提供的第四种可能的实施方式中，在调用window.open接口后，处理器404通过运行存储在存储器403的上述计算机程序时实现以下步骤：

保存上述window.open接口所返回的对象，以便上述支撑库的通信使用。

在上述第一种可能的实施方式作为基础，或者上述第二种可能的实施方式作为基础，或者上述第三种可能的实施方式作为基础，或者上述第四种可能的实施方式作为基础而提供的第五种可能的实施方式中，上述预设的交互事件包括状态同步事件、页面跳转事件及页面返回事件；

其中，上述状态同步事件用于同步第一应用及第二应用的状态量；

上述页面跳转事件用于触发第一应用和/或第二应用的页面跳转动作；

上述页面返回事件用于触发第一应用和/或第二应用的页面返回动作。

在上述第一种可能的实施方式作为基础，或者上述第二种可能的实施方式作为基础，或者上述第三种可能的实施方式作为基础，或者上述第四种可能的实施方式作为基础而提供的第六种可能的实施方式中，处理器404通过运行存储在存储器403的上述计算机程序时实现以下步骤：

在第一应用启动后，若在预设的时间段内未接收到应用创建指令，则触发上述副屏进入熄屏状态，或者，触发上述副屏显示预设的待机页面，或者，触发上述副屏映射上述主屏所显示的页面，直至接收到应用创建指令为止。

进一步，如图4所示，上述电子设备还可包括：一个或多个输入设备405(图4中仅示出一个)和一个或多个输出设备406(图4中仅示出一个)。主屏401、副屏402、存储器403、处理器404、输入设备405和输出设备406通过总线407连接。

应当理解，在本发明实施例中，所称处理器404可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备405可以包括键盘、触控板、指纹采传感器(用于采集用户的指纹信息和指纹的方向信息)、麦克风等，输出设备406可以包括扬声器等。

存储器403可以包括只读存储器和随机存取存储器，并向处理器404提供指令和数据。存储器403的一部分或全部还可以包括非易失性随机存取存储器。例如，存储器403还可以存储设备类型的信息。

由上可见，通过本申请实施例，在最底层通过安卓的多屏显示技术实现在主屏及副屏显示WebView控件，用以支撑上层的HTML5.0应用；同时，主屏通过其WebView控件加载显示第一应用，副屏通过其WebView控件加载显示第二应用，构建了多应用形态；在构建好多应用形态后，通过已封装好的支撑库在第一应用及第二应用之间约定交互事件，使得后续一旦监听到已约定的交互事件即可触发上述第一应用及第二应用响应相应的动作，实现第一应用及第二应用之间的双向事件通信。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将上述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的系统实施例仅仅是示意性的，例如，上述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

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

上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，上述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，上述计算机程序包括计算机程序代码，上述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。上述计算机可读介质可以包括：能够携带上述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，上述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

以上上述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (8)

1.一种HTML5双屏应用的方法，其特征在于，所述方法应用于具备有主屏及副屏的电子设备，所述方法包括：

在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，所述第一应用加载在第一窗口中，所述第一窗口显示于所述主屏，所述第二窗口显示于所述副屏；

在所述第二窗口中加载并显示第二应用；

对所述第一应用及所述第二应用进行监听，若监听到预设的交互事件，则触发所述第一应用和/或所述第二应用基于所述交互事件显示相应的页面；

其中，所述第一应用及所述第二应用均为超文本HTML5.0应用，所述第一窗口及所述第二窗口均为浏览器窗口；

所述在第一应用启动后，若接收到应用创建指令，则创建第二窗口，包括：

在所述主屏上通过WebView控件创建第一窗口，并在所述第一窗口中加载并显示第一应用；

在所述第一应用加载完成后，若接收到应用创建指令，则调用window.open接口；

基于所述window.open接口在所述副屏上创建第二窗口。

2.如权利要求1所述的方法，其特征在于，所述对所述第一应用及所述第二应用进行监听，包括：

分别在所述第一应用及所述第二应用中加载预设的支撑库，通过所述支撑库对所述第一应用及第二应用进行监听，其中，所述预设的支撑库用于HTML5.0应用之间的双向事件通信。

3.如权利要求2所述的方法，其特征在于，在调用window.open接口后，所述方法还包括：

保存所述window.open接口所返回的对象，以便所述支撑库的通信使用。

4.如权利要求1至3任一项所述的方法，其特征在于，所述预设的交互事件包括状态同步事件、页面跳转事件、页面返回事件及可扩展的自定义事件；

其中，所述状态同步事件用于同步第一应用及第二应用的状态量；

所述页面跳转事件用于触发第一应用和/或第二应用的页面跳转动作；

所述页面返回事件用于触发第一应用和/或第二应用的页面返回动作；

所述可扩展的自定义事件用于触发第一应用和/或第二应用的页面响应相应的动作，相应的动作由第一应用和第二应用之间根据业务需求来约定，可以是同步、跳转、返回及其他动作。

5.如权利要求1至3任一项所述的方法，其特征在于，所述方法还包括：

在第一应用启动后，若在预设的时间段内未接收到应用创建指令，则触发所述副屏进入熄屏状态，或者，触发所述副屏显示预设的待机页面，或者，触发所述副屏映射所述主屏所显示的页面，直至接收到应用创建指令为止。

6.一种HTML5双屏应用的装置，其特征在于，所述装置应用于具备有主屏及副屏的电子设备，所述装置包括：

创建单元，用于在第一应用启动后，若接收到应用创建指令，则创建第二窗口，其中，所述第一应用加载在第一窗口中，所述第一窗口显示于所述主屏，所述第二窗口显示于所述副屏；

加载单元，用于在所述第二窗口中加载并显示第二应用；

监听单元，用于对所述第一应用及所述第二应用进行监听；

显示单元，用于若监听到预设的交互事件，则触发所述第一应用和/或所述第二应用基于所述交互事件显示相应的页面；

其中，所述第一应用及所述第二应用均为超文本HTML5.0应用，所述第一窗口及所述第二窗口均为浏览器窗口；

所述创建单元包括：

第一应用加载子单元，用于在所述主屏上通过WebView控件创建第一窗口，并在所述第一窗口中加载并显示第一应用；

接口调用子单元，用于在所述第一应用加载完成后，若接收到应用创建指令，则调用window.open接口；

第二窗口创建子单元，用于基于所述window.open接口在所述副屏上创建第二窗口。

7.一种电子设备，包括主屏、副屏、存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述方法的步骤。

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

Images