CN107870929A - Hybrid框架下应用页面的翻页方法及系统 - Google Patents

Abstract

本发明公开了一种Hybrid框架下应用页面的翻页方法及系统，该方法包括：根据所述应用页面的具体情况设置采用Native原生开发和Web网页开发的部分；针对所述应用显示的当前页面，分别在Native层面和Web层面做翻页预处理；侦测用户输入的翻页指令；判断所述翻页指令属于Native层面的翻页或Web层面的翻页；根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。由此可以结合Native和Web两个层面，实现移动设备应用页面的翻页效果。

Description

Hybrid框架下应用页面的翻页方法及系统

技术领域

本发明涉及信息处理及显示技术领域，尤其涉及Hybrid框架下应用页面的翻页方法及系统。

背景技术

随着移动互联网技术的发展以及智能移动设备的普及，移动互联网在生活中的重要性越来越明显，移动应用程序的开发也越来越重要。目前移动应用的开发模式主要包括：NativeApp(原生应用)开发，WebApp(网页应用)开发，及混合应用开发，即HybirdApp。HybirdApp介于NativeApp和WebApp之间，兼具NativeApp的良好用户体验的优势和WebApp跨平台开发的优势，成为近年来各大企业青睐的移动应用开发模式。

现有使用安卓操作系统的移动设备通过单个WebView(网络视图)控件显示网页信息时，传统的页面切换方式只是简单的先清空WebView原界面，然后再加载新界面。因此，界面切换没有自然的过渡效果，具有页面过渡比较生硬的问题。另外，在新界面加载显示之前，屏幕界面空白，降低了用户的体验。

而若是在一个移动应用中同时打开多个Webview控件，在所述多个Webview控件中分别加载并显示不同的连续页面。例如第一Webview控件加载并显示第i页面，第二Webview控件预加载第i+1页面，第三Webview控件预加载第i-1页面。在从第i页面向后翻页时调用第二Webview控件，在从第i页面向前翻页时调用第三Webview控件。这种翻页方式容易造成因内存不足，而引发崩溃。

发明内容

有鉴于此，本发明的目的在于提供一种Hybrid框架下应用页面的翻页方法及系统，以解决现有应用页面的翻页效果不理想的问题。

为实现上述目的，本发明提供一种Hybrid框架下应用页面的翻页方法，该方法包括步骤：

根据所述应用页面的具体情况设置采用Native原生开发和Web网页开发的部分；

针对所述应用显示的当前页面，分别在Native层面和Web层面做翻页预处理；

侦测用户输入的翻页指令；

判断所述翻页指令属于Native层面的翻页或Web层面的翻页；及

根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

优选地，所述分别在Native层面和Web层面做翻页预处理的步骤还包括：

在Native层面，将所述当前页面生成一张屏幕截图，在所述应用中显示所述屏幕截图，并在后台加载下一页面。

优选地，所述分别在Native层面和Web层面做翻页预处理的步骤还包括：

在Web层面，将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载所述HTML5页面的内容。

优选地，所述根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面的步骤还包括：

当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来。

优选地，所述根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面的步骤还包括：

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将所述应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分。

本发明提出的Hybrid框架下应用页面的翻页方法，可以结合Native和Web两个层面，实现应用页面的翻页效果。通过该方法，不但减少了WebView控件的创建，节省了内存，而且没有加载白屏，提高了用户的使用体验。

为实现上述目的，本发明还提出一种Hybrid框架下应用页面的翻页系统，该系统包括：

设置模块，用于根据所述应用页面的具体情况设置采用Native原生开发和Web网页开发的部分；

预处理模块，用于针对所述应用显示的当前页面，分别在Native层面和Web层面做翻页预处理；

侦测模块，用于侦测用户输入的翻页指令；

判断模块，用于判断所述翻页指令属于Native层面的翻页或Web层面的翻页；及

显示模块，用于根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

优选地，所述预处理模块还用于：

在Native层面，将所述当前页面生成一张屏幕截图，在所述应用中显示所述屏幕截图，并在后台加载下一页面。

优选地，所述预处理模块还用于：

在Web层面，将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载所述HTML5页面的内容。

优选地，所述显示模块还用于：

当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来。

优选地，所述显示模块还用于：

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将所述应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分。

本发明提出的Hybrid框架下应用页面的翻页系统，可以结合Native和Web两个层面，实现应用页面的翻页效果。通过该系统，不但减少了WebView控件的创建，节省了内存，而且没有加载白屏，提高了用户的使用体验。

附图说明

图1为本发明第一实施例提出的一种Hybrid框架下应用页面的翻页方法的流程图；

图2为本发明第二实施例提出的一种Hybrid框架下应用页面的翻页系统的模块示意图；

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

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白，以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明第一实施例提出一种Hybrid框架下应用页面的翻页方法，应用于移动设备中。在本实施例中，所述应用页面是基于安卓操作系统的应用的显示页面。该方法包括以下步骤：

S102，根据应用页面的具体情况设置采用Native开发和Web开发的部分。

具体地，Native开发的优点为：可以访问本地资源，支持在线与离线；用户体验好；界面效果优质；节省网络流量且打开速度快。缺点为：不可跨平台移植；开发周期长；开发成本高且维护成本也高。Web开发的优点为：实现跨平台；开发周期短；访问方便，无需下载。缺点为：对网络依赖严重，受网速约束；用户体验差；对底层调用能力差。由于两种开发方式各自存在的缺陷，可以根据页面具体情况在不同的部分分别采用适合的方式来进行开发，以扬长避短。

例如，在该应用的不同功能模块间进行页面切换，在打开或关闭页面时，可以采用Native开发来实现翻页效果；在一篇文章的文字页面间进行切换时，可以采用Web开发来实现翻页效果。

S104，针对该应用显示的当前页面，分别在Native层面和Web层面做翻页预处理。

具体地，所述步骤S102进一步包括：

在Native层面，将所述当前页面生成一张屏幕截图，在该应用中显示该屏幕截图，并在后台加载下一页面。例如，所述当前页面为某件产品的介绍页面，可以将该介绍页面生成一张屏幕截图，并在后台加载用户可能会点击的该产品对应的购买页面(下一页面)。

在Web层面，将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载一个HTML5页面的内容，每次翻页实际上是显示整个HTML5页面的一部分内容。当显示所述当前页面时，即将所述HTML5页面中包含所述当前页面的部分进行显示。例如，一篇文章包括三个显示页面的内容，将这三个显示页面(即整篇文章)的内容集中在一个HTML5页面中，分别对应该HTML5页面的第一部分、第二部分和第三部分，在Webview控件中预先加载该HTML5页面的内容。当在应用页面中显示该篇文章第一页面的内容时，实际上显示的是该HTML5页面中对应该第一页面的第一部分。

S106，侦测用户输入的翻页指令。

在本实施例中，用户可以采用下列形式的翻页操作来输入所述翻页指令：

(1)用户点击该应用页面中的某一个链接；

(2)用户点击或触摸该应用页面中的翻页按钮；

(3)用户单击该应用页面的预定位置，例如页面底端或右下角；

(4)用户在触摸屏上进行与翻页指令对应的滑动操作，例如从右向左或从下向上滑动页面；

(5)用户发出与翻页指令对应的预定手势。

值得注意的是，在其他实施例中，本领域技术人员可以想到的其他形式的翻页操作也可以用于本发明。

S108，判断所述翻页指令属于Native层面的翻页或Web层面的翻页。

具体地，当所述翻页指令对应的当前页面和下一页面属于Native开发的部分，则所述翻页操作属于Native层面的翻页。当所述翻页操作对应的当前页面和下一页面属于Web开发的部分，则所述翻页操作属于Web层面的翻页。

例如，假设当前页面为产品介绍页面，用户点击该产品介绍页面中的购买链接进入下一页面，即该产品对应的购买页面，由于所述当前页面和下一页面属于Native开发的部分，则所述翻页指令属于Native层面的翻页。

假设当前页面为一篇文章的第一页面，用户通过滑动操作进入下一页面，即该篇文章的第二页面，由于所述当前页面和下一页面属于Web开发的部分，则所述翻页操作属于Web层面的翻页。

S110，根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

具体地，所述步骤S108进一步包括：

当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来，达到翻页效果。

在本实施例中，所述第一动画效果可以是将所述当前页面的屏幕截图逐渐淡出，所述下一页面逐渐淡入。例如所述当前页面的屏幕截图从上向下淡出，所述下一页面从上向下淡入等。所述第一动画效果还可以是将所述当前页面的屏幕截图从下往上翻出，所述下一页面从原位置淡入。

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将该应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分，达到翻页效果。

在本实施例中，所述第二动画效果可以是平滑移动所述HTML5页面。例如，假设当前页面为一篇文章的第一页面，用户通过从下向上滑动页面的滑动操作进入下一页面，即该篇文章的第二页面，则在该应用中以从下向上平滑移动该篇文章对应的HTML5页面的方式达到翻页效果，从所述第一页面对应的部分移动到所述第二页面对应的部分。

值得注意的是，在其他实施例中，本领域技术人员可以想到的其他形式的第一动画效果和/或第二动画效果也可以用于本发明。

本实施例提出的Hybrid框架下应用页面的翻页方法，可以结合Native和Web两个层面，实现应用页面的翻页效果。通过该方法，不但减少了WebView控件的创建，节省了内存，而且没有加载白屏，提高了用户的使用体验。

如图2所示，本发明第二实施例提出一种Hybrid框架下应用页面的翻页系统200，应用于移动设备中。在本实施例中，所述应用页面是基于安卓操作系统的应用的显示页面。

在本实施例中，所述翻页系统200包括设置模块202、预处理模块204、侦测模块206、判断模块208及显示模块210。

所述设置模块202，用于根据应用页面的具体情况设置采用Native开发和Web开发的部分。

具体地，Native开发的优点为：可以访问本地资源，支持在线与离线；用户体验好；界面效果优质；节省网络流量且打开速度快。缺点为：不可跨平台移植；开发周期长；开发成本高且维护成本也高。Web开发的优点为：实现跨平台；开发周期短；访问方便，无需下载。缺点为：对网络依赖严重，受网速约束；用户体验差；对底层调用能力差。由于两种开发方式各自存在的缺陷，可以根据页面具体情况在不同的部分分别采用适合的方式来进行开发，以扬长避短。

例如，在该应用的不同功能模块间进行页面切换，在打开或关闭页面时，可以采用Native开发来实现翻页效果；在一篇文章的文字页面间进行切换时，可以采用Web开发来实现翻页效果。

所述预处理模块204，用于针对该应用显示的当前页面，分别在Native层面和Web层面做翻页预处理。

具体地，在Native层面，预处理模块204将所述当前页面生成一张屏幕截图，在该应用中显示该屏幕截图，并在后台加载下一页面。例如，所述当前页面为某件产品的介绍页面，可以将该介绍页面生成一张屏幕截图，并在后台加载用户可能会点击的该产品对应的购买页面(下一页面)。

在Web层面，预处理模块204将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载一个HTML5页面的内容，每次翻页实际上是显示整个HTML5页面的一部分内容。当显示所述当前页面时，即将所述HTML5页面中包含所述当前页面的部分进行显示。例如，一篇文章包括三个显示页面的内容，将这三个显示页面(即整篇文章)的内容集中在一个HTML5页面中，分别对应该HTML5页面的第一部分、第二部分和第三部分，在Webview控件中预先加载该HTML5页面的内容。当在应用页面中显示该篇文章第一页面的内容时，实际上显示的是该HTML5页面中对应该第一页面的第一部分。

所述侦测模块206，用于侦测用户输入的翻页指令。

在本实施例中，用户可以采用下列形式的翻页操作来输入所述翻页指令：

(6)用户点击该应用页面中的某一个链接；

(7)用户点击或触摸该应用页面中的翻页按钮；

(8)用户单击该应用页面的预定位置，例如页面底端或右下角；

(9)用户在触摸屏上进行与翻页指令对应的滑动操作，例如从右向左或从下向上滑动页面；

(10)用户发出与翻页指令对应的预定手势。

值得注意的是，在其他实施例中，本领域技术人员可以想到的其他形式的翻页操作也可以用于本发明。

所述判断模块208，用于判断所述翻页指令属于Native层面的翻页或Web层面的翻页。

具体地，当所述翻页指令对应的当前页面和下一页面属于Native开发的部分，则判断模块208判断所述翻页操作属于Native层面的翻页。当所述翻页操作对应的当前页面和下一页面属于Web开发的部分，则判断模块208判断所述翻页操作属于Web层面的翻页。

例如，假设当前页面为产品介绍页面，用户点击该产品介绍页面中的购买链接进入下一页面，即该产品对应的购买页面，由于所述当前页面和下一页面属于Native开发的部分，则所述翻页指令属于Native层面的翻页。

假设当前页面为一篇文章的第一页面，用户通过滑动操作进入下一页面，即该篇文章的第二页面，由于所述当前页面和下一页面属于Web开发的部分，则所述翻页操作属于Web层面的翻页。

所述显示模块210，用于根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

具体地，当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来，达到翻页效果。

在本实施例中，所述第一动画效果可以是将所述当前页面的屏幕截图逐渐淡出，所述下一页面逐渐淡入。例如所述当前页面的屏幕截图从上向下淡出，所述下一页面从上向下淡入等。所述第一动画效果还可以是将所述当前页面的屏幕截图从下往上翻出，所述下一页面从原位置淡入。

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将该应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分，达到翻页效果。

在本实施例中，所述第二动画效果可以是平滑移动所述HTML5页面。例如，假设当前页面为一篇文章的第一页面，用户通过从下向上滑动页面的滑动操作进入下一页面，即该篇文章的第二页面，则在该应用中以从下向上平滑移动该篇文章对应的HTML5页面的方式达到翻页效果，从所述第一页面对应的部分移动到所述第二页面对应的部分。

值得注意的是，在其他实施例中，本领域技术人员可以想到的其他形式的第一动画效果和/或第二动画效果也可以用于本发明。

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

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

以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明，比如作为一个实施例的特征可用于另一实施例而得到又一实施例。凡在运用本发明的技术构思之内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。

Claims (10)

1.一种Hybrid框架下应用页面的翻页方法，应用于移动设备中，该方法包括步骤：

根据所述应用页面的具体情况设置采用Native原生开发和Web网页开发的部分；

针对所述应用显示的当前页面，分别在Native层面和Web层面做翻页预处理；

侦测用户输入的翻页指令；

判断所述翻页指令属于Native层面的翻页或Web层面的翻页；及

根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

2.根据权利要求1所述的Hybrid框架下应用页面的翻页方法，其特征在于，所述分别在Native层面和Web层面做翻页预处理的步骤还包括：

在Native层面，将所述当前页面生成一张屏幕截图，在所述应用中显示所述屏幕截图，并在后台加载下一页面。

3.根据权利要求1所述的Hybrid框架下应用页面的翻页方法，其特征在于，所述分别在Native层面和Web层面做翻页预处理的步骤还包括：

在Web层面，将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载所述HTML5页面的内容。

4.根据权利要求2所述的Hybrid框架下应用页面的翻页方法，其特征在于，所述根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面的步骤还包括：

当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来。

5.根据权利要求3所述的Hybrid框架下应用页面的翻页方法，其特征在于，所述根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面的步骤还包括：

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将所述应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分。

6.一种Hybrid框架下应用页面的翻页系统，应用于移动设备中，其特征在于，该系统包括：

设置模块，用于根据所述应用页面的具体情况设置采用Native原生开发和Web网页开发的部分；

预处理模块，用于针对所述应用显示的当前页面，分别在Native层面和Web层面做翻页预处理；

侦测模块，用于侦测用户输入的翻页指令；

判断模块，用于判断所述翻页指令属于Native层面的翻页或Web层面的翻页；及

显示模块，用于根据判断结果和对应的翻页预处理，采用预定显示方式显示下一页面。

7.根据权利要求6所述的Hybrid框架下应用页面的翻页系统，其特征在于，所述预处理模块还用于：

在Native层面，将所述当前页面生成一张屏幕截图，在所述应用中显示所述屏幕截图，并在后台加载下一页面。

8.根据权利要求6所述的Hybrid框架下应用页面的翻页系统，其特征在于，所述预处理模块还用于：

在Web层面，将包含所述当前页面的多个显示页面的内容集中在一个HTML5页面中，在Webview控件中预先加载所述HTML5页面的内容。

9.根据权利要求7所述的Hybrid框架下应用页面的翻页系统，其特征在于，所述显示模块还用于：

当所述翻页指令属于Native层面的翻页时，配合第一动画效果，隐藏所述当前页面的屏幕截图，并将后台加载的下一页面显示出来。

10.根据权利要求8所述的Hybrid框架下应用页面的翻页系统，其特征在于，所述显示模块还用于：

当所述翻页指令属于Web层面的翻页时，配合第二动画效果，将所述应用中显示的内容从所述当前页面在所述HTML5页面中对应的部分移动到下一页面对应的部分。