CN108121761A - 一种网页页面加载方法及装置 - Google Patents

Abstract

本发明公开了一种网页页面加载方法及装置。该方法包括：将应用程序中所有的功能业务页面下载至本地；通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。本发明有效解决多个html页面进行切换时，需要从服务器获取资源而导致的流量消耗过多的问题，同时使得页面的加载速度得到有效提升，提高用户的使用体验。

Description

一种网页页面加载方法及装置

技术领域

本发明涉及网络技术领域，尤其涉及一种网页页面加载方法及装置。

背景技术

目前应用程序往往包含多个html页面，当用户在html页面之间进行切换时，需要移动终端向服务器发出http请求，获取请求页面所对应的html文件。可知，当多次向服务器发送http请求，不仅增加服务器端的访问负担，同时致使应用程序消耗的流量迅速增加。另外，由于应用程序支持单页面的框架中集成的东西很多，对用户来说，有些无用的内容势必会占用移动终端的内存，造成移动终端的运行速度变慢，影响用户的使用体验。

发明内容

本发明所要解决的技术问题在于提供一种网页页面加载方法及装置，用以解决现有技术中应用程序html页面之间切换时，导致流量消耗大并且网页加载速度慢的问题。

为实现上述发明目的，本发明采用下述的技术方案：

依据本发明的一个方面，提供一种网页页面加载方法，包括：

将应用程序中所有的功能业务页面下载至本地；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。

可选的，页面控制组件包括主控制组件；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载，包括：

通过主控制组件控制导航页面在应用程序中进行加载。

可选的，页面控制组件还包括列表组件；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载，包括：

通过主控制组件加载列表组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载。

可选的，页面控制组件还包括详情组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，方法还包括：

当检测到列表页面中的标题内容被触控时，通过列表组件加载详情组件；

通过详情组件控制与标题内容对应的详情页面在导航页面中进行加载。

可选的，页面控制组件还包括交互组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，方法还包括：

通过列表组件控制其他功能业务页面的交互区域在导航页面中进行加载；

当检测到交互区域被触控时，通过列表组件加载交互组件；

通过交互组件将与交互组件对应的功能业务页面在导航页面中进行加载。

依据本发明的一个方面，提供一种网页页面加载装置，包括：

下载单元，用于将应用程序中所有的功能业务页面下载至本地；

加载单元，用于通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。

可选的，页面控制组件包括主控制组件；

加载单元，具体用于通过主控制组件控制导航页面的加载。

可选的，页面控制组件还包括列表组件；加载单元，具体用于：

通过主控制组件加载列表组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载。

可选的，加载单元，还用于：

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，若检测到列表页面中的标题内容被触控，通过列表组件加载详情组件；

通过详情组件控制与标题内容对应的详情页面在导航页面中进行加载。

可选的，加载单元，还用于：

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，通过列表组件控制其他功能业务页面的交互区域在导航页面中进行加载；

当检测到交互区域被触控时，通过列表组件加载交互组件；

通过交互组件将与交互组件对应的功能业务页面在导航页面中进行加载。

本发明具有以下有益效果：

本发明所提供的网页页面加载方法及装置，通过将所有页面加载至本地，通过组件控制的方式即可实现页面之间的切换。因此，本发明有效解决多个html页面进行切换时，需要从服务器获取资源，而导致的流量消耗过多的问题，同时使得页面的加载速度得到有效提升，提高用户的使用体验。另外，本发明只需配置需要的组件，而无需在每个页面中集成过多的东西，即用什么配置什么，有效避免多余的东西来占用和浪费程序的内存。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1为本发明实施例中所提供的网页页面加载方法的流程图；

图2为本发明一具体实施例中网页页面加载方法的流程图；

图3为本发明一具体实施例中应用程序导航页面的显示效果图；

图4为本发明一具体实施例中应用程序中详情页面的显示效果图；

图5为本发明一具体实施例中应用程序中发布页面的显示效果图；

图6为本发明实施例中所提供的网页页面加载装置的原理框图。

具体实施方式

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

本发明实施例提供一种网页页面加载方法，如图1所示，具体包括如下

步骤101，将应用程序所有的功能业务页面下载至本地；

在该步骤中，当应用程序下载至本地后，所有的页面资源，包括所有的功能业务页面以及控制页面进行加载的页面控制组件都是保存在本地的。而当程序有更新时，将更新的功能业务页面重新保存至本地。

步骤102，通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序的显示界面中进行加载。

在该步骤中，根据不同功能业务页面配置多个页面控制组件。本发明根据功能业务页面的不同，配置相应的页面控制组件。各个页面控制组件用于控制相应功能业务页面的加载。

可选的，这里页面控制组件至少包括以下至少一种：主控制组件、列表组件、详情组件以及交互组件。其中，控制组件是整个组件的基类index.jx，作为应用程序的入口。在应用程序启动时，实现导航页面中组件的控制。列表组件则用于控制列表页面的显示。详情组件则用于控制页面详情的显示。交互组件则用于控制交互页面的显示，这里的交互页面包括但不限于交互页面以及评论页面等。

其中，当页面控制组件为主控制组件时，通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序的显示界面中进行加载，包括：

通过主控制组件控制导航页面在应用程序的显示界面中进行加载。

这里，导航页面并非指应用程序的主界面，是指应用程序的入口页面，即index.html。导航页面类似页面目录，所有的功能业务页面都挂载在目录上。当需要访问某个功能业务页面时，需要通过导航页面进行访问。这里，导航页面index.html可以挂载的所有功能业务页面，例如列表页面、详情页面以及布局页面、评论页面等。

具体地，在应用程序启动时，在导航页面中预先挂载所有的功能业务页面，由页面控制组件控制相应的其他功能业务页面在导航界面中进行加载显示。当应用程序启动后，导航页面作为程序的入口开始加载。而是当每次客户端请求index.html这个入口文件的时候才检测文件是否有更新的，并当检测到文件有更新后，则从服务器中获取所需更新的页面资源。

其中，当页面控制组件还包括列表组件，通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载，包括：

通过主控制组件加载列表组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载。

具体的，在一实施例中，应用程序的主页页面采用列表的形式，因此在启动时，在导航页面中，通过主控制组件加载列表组件；而列表组件控制将列表页面在导航页面中进行加载。其中，导航页面中预设列表页面加载位置，当列表控制组件获取相应列表页面后，将列表页面以及导航页面的指定位置进行显示。这样，应用程序的主页页面加载完成，用户可以触控列表页面进行相关页面的获取。

进一步的，通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，方法还包括：

当检测到列表页面中的标题内容被触控时，通过列表组件加载详情组件；通过详情组件控制与标题内容对应的详情页面在导航页面中进行加载。

上述提及，主页页面采用列表的形式，列表中加载标题内容。当用户触控某一标题内容时，可以加载标题内容对应的列表详情。这里，通过详情组件实现详情页面的加载。

进一步的，通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，方法还包括：

通过列表组件控制其他功能业务页面的交互区域在导航页面中进行加载：

当检测到交互区域被触控时，通过列表组件加载交互组件；

通过交互组件将与交互组件对应的功能业务页面在导航页面中进行加载。

具体的，在一实施例中，应用程序的主页页面采用列表的形式，列表组件控制将列表页面和交互区域在导航页面中进行加载。这里的交互区域为交互按键所在的位置。其中，导航页面中预设列表页面的交互按键的加载位置。这样，应用程序的主页页面加载完成，用户可以交互按键来实现进行相关交互页面的获取。

基于上述可知，本发明实施例中，通过将所有页面加载至本地，通过组件控制的方式即可实现页面之间的切换。因此，本发明有效解决多个html页面进行切换时，需要从服务器获取资源，而导致的流量消耗过多的问题，同时使得页面的加载速度得到有效提升，提高用户的使用体验。另外，本发明只需配置需要的组件，而无需在每个页面中集成过多的东西，即用什么配置什么，有效避免多余的东西来占用和浪费程序的内存。

本发明一具体实施例所提供的网页页面加载方法，如图2所示，具体包括如下：

步骤201，应用程序功能的入口为index.html，这个html会引入index.js(程序的入口js)。

步骤202，index.js通过requireJS工具加载列表组件。

步骤203，列表组件将列表页面和发布按钮拼接到index.html中并加载显示。

步骤204，检测用户触控的是发布按钮还是列表内容：当检测触控的是发布按钮时，则执行步骤205；当检测触控的是列表内容时，则执行步骤206；

步骤205，列表组件利用requireJS工具加载发布组件，发布组件将发布页面拼接到index.html中并加载显示。

步骤206，列表组件利用现有requireIS工具加载详情组件，详情组件将详情页面拼接到index.html中并加载显示。

如图3～5所示，本发明一具体实施例中应用程序显示界面的效果图。图3中为应用程序主页页面的显示效果图。其中，该主页页面中将index.html每个页面结构中每个标题内容以及每个标题对应的详情内容，都作为主页页面的一个部分。当在主页点击该标题内容时，获取用户点击的标题，如“XXX调查送大礼”，则通过详情组件获取该网页的详情内容的显示数据，将原标题内容的显示页面隐藏，将详情内容页面作为该index.html的显示内容，参见图4。在用户点击该详情内容的关闭按钮时，则详情组件将详情内容页面隐藏，将标题内容显示。当在主页点击发布按钮时，通过加载发布组件，发布组件控制发布页面在index.html的显示区域进行显示；当在发布页面检测到关闭操作，则发布组件控制发布页面隐藏，在主页页面中继续显示标题内容。

可知，现有技术需要从server重新加载新的html作为发布页面或者列表界面，而这是耗时耗服务资源的方式。本发明中无需从server另外加载html页面，仅仅是通过js组件向已有的index.html中拼接内容，并控制每个页面的显示和隐藏，因此省去了向server请求文件资源的时间。

本发明实施例提供一种网页页面加载装置，如图6所示，具体包括如下：

下载单元，用于将应用程序所有的功能业务页面下载至本地；

加载单元，用于通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。

当应用程序下载至本地后，所有的页面资源，包括导航页面以及所有的功能业务页面均保存至本地。当应用程序启动后，导航页面和控制组件作为程序的入口开始加载。

可选的，页面控制组件包括主控制组件；

加载单元，具体用于通过主控制组件控制导航页面的加载。

可选的，页面控制组件还包括列表组件；加载单元，具体用于：

通过主控制组件加载列表组件；

通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载。

可选的，加载单元，还用于，通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，若检测到列表页面中的标题内容被触控，通过列表组件加载详情组件；通过详情组件控制与标题内容对应的详情页面在导航页面中进行加载。

可选的，加载单元，还用于，通过列表组件控制与列表组件对应的列表页面在导航页面中进行加载之后，通过列表组件控制其他功能业务页面的交互区域在导航页面中进行加载；

当检测到交互区域被触控时，通过列表组件加载交互组件；通过交互组件将与交互组件对应的功能业务页面在导航页面中进行加载。

这里，对于各个单元的具体实施过程于方法实现过程中类似，因此，这里对于各个单元的具体实现不在进行介绍，详见方法实施例的描述。

本发明所提供的网页页面加载装置，该加载单元通过将所有页面加载至本地，通过组件控制的方式即可实现页面之间的切换。因此，本发明在进行页面切换时，无需与服务器进行交互，有效避免流量消耗过多的问题，同时由于资源都是本地，因此页面的加载速度得到有效提升，减少用户的等待时间，提高用户的使用体验。另外，本发明无需在每个页面中集成过多的东西，即用什么配置什么页面和组件，有效避免多余的东西来占用和浪费程序的内存。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。

虽然通过实施例描述了本申请，本领域的技术人员知道，本申请有许多变形和变化而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种网页页面加载方法，其特征在于，包括：

将应用程序中所有的功能业务页面下载至本地；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。

2.如权利要求1所述的方法，其特征在于，所述页面控制组件包括主控制组件；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载，包括：

通过主控制组件控制导航页面在所述应用程序中进行加载。

3.如权利要求2所述的方法，其特征在于，所述页面控制组件还包括列表组件；

通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载，包括：

通过主控制组件加载所述列表组件；

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载。

4.如权利要求3所述的方法，其特征在于，所述页面控制组件还包括详情组件；

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载之后，还包括：

当检测到所述列表页面中的标题内容被触控时，通过所述列表组件加载所述详情组件；

通过所述详情组件控制与所述标题内容对应的详情页面在所述导航页面中进行加载。

5.如权利要求3所述的方法，其特征在于，所述页面控制组件还包括交互组件；

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载之后，还包括：

通过所述列表组件控制其他功能业务页面的交互区域在所述导航页面中进行加载；

当检测到所述交互区域被触控时，通过所述列表组件加载交互组件；

通过所述交互组件将与所述交互组件对应的功能业务页面在所述导航页面中进行加载。

6.一种网页页面加载装置，其特征在于，包括：

下载单元，用于将应用程序中所有的功能业务页面下载至本地；

加载单元，用于通过不同的功能业务页面所对应的页面控制组件控制相应的功能业务页面在应用程序中进行加载。

7.如权利要求6所述的网页页面加载装置，其特征在于，所述页面控制组件包括主控制组件；

所述加载单元，具体用于通过主控制组件控制导航页面的加载。

8.如权利要求7所述的网页页面加载装置，其特征在于，所述页面控制组件还包括列表组件；所述加载单元，具体用于：

通过主控制组件加载所述列表组件；

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载。

9.如权利要求8所述的网页页面加载装置，其特征在于，所述加载单元，还用于：

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载之后，若检测到所述列表页面中的标题内容被触控，通过所述列表组件加载所述详情组件；

通过所述详情组件控制与所述标题内容对应的详情页面在所述导航页面中进行加载。

10.如权利要求8所述的网页页面加载装置，其特征在于，所述加载单元，还用于：

通过所述列表组件控制与所述列表组件对应的列表页面在所述导航页面中进行加载之后，通过所述列表组件控制其他功能业务页面的交互区域在所述导航页面中进行加载；

当检测到所述交互区域被触控时，通过所述列表组件加载交互组件；

通过所述交互组件将与所述交互组件对应的功能业务页面在所述导航页面中进行加载。