CN109710348A - 页面跳转的方法及装置、计算机设备、存储介质 - Google Patents

Abstract

本发明提供了一种页面跳转的方法及装置、计算机设备、存储介质，其中，该方法包括：若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；根据所述页面资源信息生成所述第二页面；在所述当前显示页面上依次展示所述切换元素和所述第二页面。通过本发明，解决了现有技术中在跳转页面容易出现卡顿和白屏的技术问题，提高了用户的交互体验以及页面流畅度。

Description

页面跳转的方法及装置、计算机设备、存储介质

技术领域

本发明涉及计算机领域，具体而言，涉及一种页面跳转的方法及装置、计算机设备、存储介质。

背景技术

在使用电子产品，在当前页面阅读完成后，需要切换到下一页面，如阅读电子书，浏览浏览器页面，UI界面切换等，跳转页面的应用场景非常广泛。

现有技术中，页面跳转的时候请求资源的带宽和等待时间长，通常是待跳转的页面生成完成后才开始跳转，而且之前的页面的已经消失，这样容易在跳转期间导致界面卡顿，出现白屏情况，用户等待时间较长，同时也影响视觉体验。

针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。

发明内容

本发明实施例提供了一种页面跳转的方法及装置、计算机设备、存储介质，以至少解决现有技术中在跳转页面容易出现卡顿和白屏的技术问题。

根据本发明的一个实施例，提供了一种页面跳转的方法，包括：

若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

根据所述页面资源信息生成所述第二页面；

在所述当前显示页面上依次展示所述切换元素和所述第二页面。

可选地，根据所述页面切换请求获取所述第二页面的页面资源信息包括：

根据所述页面切换请求从服务器中查找资源组件，其中，所述资源组件包括多个div容器，每个div容器存储一个页面的页面资源信息；

从所述资源组件中确定与第二页面对应的目标div容器；

从所述目标div容器中读取所述第二页面的页面资源信息。

可选地，所述切换元素包括预设动画；所述在所述当前显示页面上依次展示所述切换元素和所述第二页面，包括：

在当前页面上播放所述预设动画，其中，所述预设动画用于动态展示翻页的视觉效果；

在所述预设动画播放完成后，展示所述第二页面。

可选地，所述在所述当前显示页面上依次展示所述切换元素和所述第二页面之前，所述方法包括：

判断所述第二页面的显示画面是否符合预设条件，其中，所述预设条件为白屏或者黑屏；

在所述第二页面的显示画面符合预设条件时，删除所述第二页面；在所述第二页面的显示画面不符合预设条件时，保存所述第二页面。

可选地，判断所述第二页面的显示画面是否符合预设条件包括：

判断所述第二页面的像素矩阵中像素值相同的像素点是否超过预设阈值，在所述第二页面的像素矩阵中像素值相同的像素点超过所述预设阈值时，确定符合所述预设条件，在所述第二页面的像素矩阵中像素值相同的像素点未超过所述预设阈值时，确定不符合所述预设条件。

可选地，展示所述第二页面包括：

将所述第二页面的图形帧数据转化为OpenGL指令；

通过GPU硬件执行所述OpenGL指令生成浏览器画面，在浏览器页面显示所述浏览器画面。

根据本发明的另一个实施例，提供了一种页面跳转的装置，包括：

定格模块，用于若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

获取模块，用于根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

生成模块，用于根据所述页面资源信息生成所述第二页面；

展示模块，用于在所述当前显示页面上依次展示所述切换元素和所述第二页面。

可选地，所述获取模块包括：

查找单元，用于根据所述页面切换请求从服务器中查找资源组件，其中，所述资源组件包括多个div容器，每个div容器存储一个页面的页面资源信息；

确定单元，用于从所述资源组件中确定与第二页面对应的目标div容器；

读取单元，用于从所述目标div容器中读取所述第二页面的页面资源信息。

可选地，所述切换元素包括预设动画；所述展示模块包括：

播放单元，用于在当前页面上播放所述预设动画，其中，所述预设动画用于动态展示翻页的视觉效果；

展示单元，用于在所述预设动画播放完成后，展示所述第二页面。

可选地，所述装置包括：

移除模块，用于所述展示模块在展示所述第二页面之后，移除所述第一页面和所述预设动画。

可选地，所述装置包括：

判断模块，用于在所述展示模块在所述当前显示页面上展示所述第二页面之前，判断所述第二页面的显示画面是否符合预设条件，其中，所述预设条件为白屏或者黑屏；

处理模块，用于在所述第二页面的显示画面符合预设条件时，删除所述第二页面；在所述第二页面的显示画面不符合预设条件时，保存所述第二页面。

可选地，所述判断模块包括：

判断单元，用于判断所述第二页面的像素矩阵中像素值相同的像素点是否超过预设阈值；

确定单元，用于在所述第二页面的像素矩阵中像素值相同的像素点超过所述预设阈值时，确定符合所述预设条件，在所述第二页面的像素矩阵中像素值相同的像素点未超过所述预设阈值时，确定不符合所述预设条件。

可选地，所述展示模块包括：

转化单元，用于将所述第二页面的图形帧数据转化为OpenGL指令；

显示单元，用于通过GPU硬件执行所述OpenGL指令生成浏览器画面，在浏览器页面显示所述浏览器画面。

根据本发明的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

本发明通过在接收到页面切换请求并生成待切换的第二页面后，在所述当前显示页面上依次展示所述切换元素和所述第二页面，解决了现有技术中在跳转页面容易出现卡顿和白屏的技术问题，提高了用户的交互体验以及页面流畅度。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是本发明实施例的一种页面跳转的方法的移动终端的硬件结构框图；

图2是根据本发明实施例的页面跳转的方法的流程图；

图3是本发明实施例获取第二页面的页面资源信息的流程图；

图4是本发明实施例以第一页面为背景页面展示第二页面的流程图；

图5是本发明实施例中的页面切换示意图；

图6是根据本发明实施例的页面跳转的装置的结构框图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

实施例1

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在移动终端上为例，图1是本发明实施例的一种页面跳转的方法的移动终端的硬件结构框图。如图1所示，移动终端10可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，可选地，上述移动终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述移动终端的结构造成限定。例如，移动终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的页面跳转的方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至移动终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种页面跳转的方法，图2是根据本发明实施例的页面跳转的方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202，若接收到用于将第一页面切换为第二页面的页面切换请求，则定格第一页面作为当前显示页面；

在本实施例中，第一页面和第二页面是在终端上显示的用户界面，可以是H5页面或其他类型的页面。

步骤S204，根据页面切换请求获取第二页面的页面资源信息和切换元素；

在本实施例中，页面资源信息是用于生成第二页面的相关信息，如主题信息，排版信息，文字，图片等，可以预置在本地或者是从服务器中获取。切换元素是在切换过程中需要用到的元素，用于填充切换过程中的白屏或者卡顿界面。

步骤S206，根据页面资源信息生成第二页面；

步骤S208，在当前显示页面上依次展示切换元素和第二页面。

上述步骤通过在接收到页面切换请求并生成待切换的第二页面后，在当前显示页面上依次展示切换元素和第二页面，解决了现有技术中在跳转页面容易出现卡顿和白屏的技术问题，提高了用户的交互体验以及页面流畅度。

可选地，上述步骤的执行主体可以为终端，如包括一图像显示界面和一处理器的电子终端等，但不限于此。

在本发明实施例中，页面切换请求用于指示从当前页面(第一页面)切换至下一页面(第二页面)，可以通过多种方式触发，如通过物理返回键，虚拟返回键等触发，应用在网页切换等场景时，如用户界面上的返回按钮或者浏览器的返回按钮、安卓物理键返回等，用户发出的跳转页面的指令等。

图3是本发明实施例获取第二页面的页面资源信息的流程图，在本发明实施例的一个示例中，根据页面切换请求获取第二页面的页面资源信息包括：

S302，根据页面切换请求从服务器中查找资源组件，其中，资源组件包括多个div容器，每个div容器存储一个页面的页面资源信息；

S304，从资源组件中确定与第二页面对应的目标div容器；

S306，从目标div容器中读取第二页面的页面资源信息。

通过从服务端读取第二页面的页面资源信息并且缓存，页面资源信息集合封装成一个组件，该组件可以包含多个页面的页面资源信息，每个页面的页面资源信息都是一个隐藏的div容器，并且通过调用组件的get Instance方法导出第二页面的页面资源信息，并读取第二页面的页面资源信息。在获取第二页面的页面资源信息时，还可以第二页面相邻的关联页面的信息，如第三页面的信息，如某个文档包括三页，在调换到第二页面时，同时调出第三页面的信息，可以在第二页面缓存时，加快缓存第三页面。

图4是本发明实施例以第一页面为背景页面展示第二页面的流程图，切换元素包括预设动画；以第一页面为背景页面，展示第二页面，包括：

S402，在当前页面上播放预设动画，其中，预设动画用于动态展示翻页的视觉效果；

S404，在预设动画播放完成后，展示第二页面。

图5是本发明实施例中的页面切换示意图，左图中，当前页面为第一页面，中间的图中，以第一页面为背景页面播放预设动画，该动画时将纸张从右至左的翻页效果，右图中，当前页面为第二页面。

可选的，在当前页面上展示第二页面之后，还包括：移除第一页面和预设动画。

通过触发组件的show函数，传入第二页面对应的参数type(属于页面资源信息)，show会函数根据参数确定待展示的是哪个页面，并且调用dummy History程序的push函数传入状态参数告知当前显示的第一页面，然后调用dummy History程序的on组件，然后对这个组件，根据type参数，动态的给第二页面的div容器添加显示的样式，该样式包含一个预设动画，该预设动画是一个页面切换的动画，即可做到动态从右到左(或上下)滑动效果，同时保持触发事件所在的页面(第一页面)保持不动，并且关联第二页面的头部和预设动画，即预设动画的最后一帧关联第二页面，在预设动画播放完之后，正好显示第二页面，第一页面作为背景图，动画播放完了，就在背景图上展示第二页面。最后，通过dummy History程序的off函数移除第一页面。

在本发明实施例的一个可选实施方式中，在当前显示页面上展示第二页面之前，还包括：判断第二页面的显示画面是否符合预设条件，其中，预设条件为白屏或者黑屏；在第二页面的显示画面符合预设条件时，删除第二页面；在第二页面的显示画面不符合预设条件时，保存第二页面。

预设条件可以是可能会产生卡顿的页面或者是空白页面的情况，在一个示例中，判断第二页面的像素矩阵是否符合预设条件包括：判断第二页面的像素矩阵中像素值相同的像素点是否超过预设阈值，在第二页面的像素矩阵中像素值相同的像素点超过预设阈值时，确定符合预设条件，在第二页面的像素矩阵中像素值相同的像素点未超过预设阈值时，确定不符合预设条件。该预设阈值可以设置为90％，100％等。

在一个示例中，根据页面资源信息生成第二页面的图形帧数据后，该图形帧数据是一个像素矩阵，判断图形帧数据中每个像素点的像素是否相同；根据判断的结果进行浏览器页面的切换:如果相同，则不进行页面切换；如果不同，则进行页面切换。由于一个页面图是由多个像素点组成的，像素值一般是不同的，如果相同，就是空白页(如全黑或者全白)，这样可以避免显示颜色相同且空白的页面，提升了用户的使用体验。

生成第二页面的像素矩阵包括：解析浏览器页面生成图形分层数据，对图形分层数据进行合成处理，生成完整的像素矩阵。完整的像素矩阵是由多个图形层数据构成的，设备在生成像素矩阵时首先对多个图形层分别进行处理，将处理完成的图形分层数据进行合成处理，即可生成完整的像素矩阵。解析浏览器页面生成图像分层数据通常由设备的浏览器内核进行，而合成处理则通常由设备的图形合成器完成。

在本实施例的一个示例中，通过H5页面展示时，展示第二页面包括：将第二页面的图形帧数据转化为OpenGL指令；通过GPU硬件执行OpenGL指令生成浏览器画面，在浏览器页面显示浏览器画面。

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

实施例2

在本实施例中还提供了一种页面跳转的装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图6是根据本发明实施例的页面跳转的装置的结构框图，如图6所示，该装置包括：

定格模块60，用于若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

获取模块62，用于根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

生成模块64，用于根据页面资源信息生成第二页面；

展示模块66，用于在所述当前显示页面上依次展示所述切换元素和所述第二页面。

在本发明实施例的一个可选实施方式中，获取模块包括：查找单元，用于根据所述页面切换请求从服务器中查找资源组件，其中，所述资源组件包括多个div容器，每个div容器存储一个页面的页面资源信息；确定单元，用于从所述资源组件中确定与第二页面对应的目标div容器；读取单元，用于从所述目标div容器中读取所述第二页面的页面资源信息。

在本发明实施例的一个可选实施方式中，所述切换元素包括预设动画；所述展示模块包括：播放单元，用于在当前页面上播放所述预设动画，其中，所述预设动画用于动态展示翻页的视觉效果；展示单元，用于在所述预设动画播放完成后，展示所述第二页面。

在本发明实施例的一个可选实施方式中，装置还包括：移除模块，用于展示模块在当前页面上展示第二页面之后，移除第一页面和预设动画。

在本发明实施例的一个可选实施方式中，装置还包括：判断模块，用于在所述展示模块在所述当前显示页面上展示所述第二页面之前，判断所述第二页面的显示画面是否符合预设条件，其中，所述预设条件为白屏或者黑屏；处理模块，用于在所述第二页面的显示画面符合预设条件时，删除所述第二页面；在所述第二页面的显示画面不符合预设条件时，保存所述第二页面。

在本发明实施例的一个可选实施方式中，所述判断模块包括：判断单元，用于判断所述第二页面的像素矩阵中像素值相同的像素点是否超过预设阈值；确定单元，用于在所述第二页面的像素矩阵中像素值相同的像素点超过所述预设阈值时，确定符合所述预设条件，在所述第二页面的像素矩阵中像素值相同的像素点未超过所述预设阈值时，确定不符合所述预设条件。

在本发明实施例的一个可选实施方式中，所述展示模块包括：转化单元，用于将所述第二页面的图形帧数据转化为OpenGL指令；显示单元，用于通过GPU硬件执行所述OpenGL指令生成浏览器画面，在浏览器页面显示所述浏览器画面。

使用本实施例的装置，通过在接收到页面切换请求并生成待切换的第二页面后，以第二页面为背景页面来展示第二页面，解决了现有技术中在跳转页面容易出现卡顿和白屏的技术问题，提高了用户的交互体验以及页面流畅度。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

实施例3

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

S2，根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

S3，根据页面资源信息生成第二页面；

S4，在所述当前显示页面上依次展示所述切换元素和所述第二页面。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

S2，根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

S3，根据页面资源信息生成第二页面；

S4，在所述当前显示页面上依次展示所述切换元素和所述第二页面。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面跳转的方法，其特征在于，包括：

若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

根据所述页面资源信息生成所述第二页面；

在所述当前显示页面上依次展示所述切换元素和所述第二页面。

2.根据权利要求1所述的方法，其特征在于，根据所述页面切换请求获取所述第二页面的页面资源信息包括：

根据所述页面切换请求从服务器中查找资源组件，其中，所述资源组件包括多个div容器，每个div容器存储一个页面的页面资源信息；

从所述资源组件中确定与第二页面对应的目标div容器；

从所述目标div容器中读取所述第二页面的页面资源信息。

3.根据权利要求1所述的方法，其特征在于，所述切换元素包括预设动画；所述在所述当前显示页面上依次展示所述切换元素和所述第二页面，包括：

在当前页面上播放所述预设动画，其中，所述预设动画用于动态展示翻页的视觉效果；

在所述预设动画播放完成后，展示所述第二页面。

4.根据权利要求1所述的方法，其特征在于，所述在所述当前显示页面上展示所述第二页面之前，所述方法包括：

判断所述第二页面的显示画面是否符合预设条件，其中，所述预设条件为白屏或者黑屏；

在所述第二页面的显示画面符合预设条件时，删除所述第二页面；在所述第二页面的显示画面不符合预设条件时，保存所述第二页面。

5.根据权利要求4所述的方法，其特征在于，判断所述第二页面的显示画面是否符合预设条件包括：

判断所述第二页面的像素矩阵中像素值相同的像素点是否超过预设阈值，在所述第二页面的像素矩阵中像素值相同的像素点超过所述预设阈值时，确定符合所述预设条件，在所述第二页面的像素矩阵中像素值相同的像素点未超过所述预设阈值时，确定不符合所述预设条件。

6.根据权利要求1所述的方法，其特征在于，展示所述第二页面包括：

将所述第二页面的图形帧数据转化为OpenGL指令；

通过GPU硬件执行所述OpenGL指令生成浏览器画面，在浏览器页面显示所述浏览器画面。

7.一种页面跳转的装置，其特征在于，包括：

定格模块，用于若接收到用于将第一页面切换为第二页面的页面切换请求，则定格所述第一页面作为当前显示页面；

获取模块，用于根据所述页面切换请求获取所述第二页面的页面资源信息和切换元素；

生成模块，用于根据所述页面资源信息生成所述第二页面；

展示模块，用于在所述当前显示页面上依次展示所述切换元素和所述第二页面。

8.根据权利要求7所述的装置，其特征在于，所述切换元素包括预设动画；所述展示模块包括：

播放单元，用于在当前页面上播放所述预设动画，其中，所述预设动画用于动态展示翻页的视觉效果；

展示单元，用于在所述预设动画播放完成后，展示所述第二页面。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

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