在移动终端的浏览器内加载Web页面的方法及系统与流程

本发明涉及计算机技术领域，特别涉及一种在移动终端的浏览器内加载web(worldwideweb，万维网)页面的方法及系统。

背景技术：

目前，ota(onlinetravelagent，在线旅行社)移动端网站一般采用传统的分页面加载形式，用户从表达搜索意向、浏览搜索结果、选择意向订单以及填写订单信息，每一步流程都需要跳转新的页面，每个页面对应独立的url(uniformresourcelocator，统一资源定位符)。window.location对象用于获得当前页面的地址(url)，并把浏览器重定向到新的页面。

通过分页面加载形式在webapp(基于web的系统和应用)中切换页面时，一方面，由于不同机型、不同浏览器的渲染技术差异，很容易出现白屏卡顿等不流畅的现象，严重影响用户体验；另一方面，用户切换到下一个页面时，可能会因为网络问题加载时间过长造成用户的流失，导致页面的跳失率变高。其中，跳失率是指显示顾客通过相应入口进入，只访问了一个页面就离开的访问次数占该页面总访问次数的比例。

技术实现要素：

本发明要解决的技术问题是为了克服现有技术中window.location页面跳转时存在卡顿、不流畅以及加载时间过长等的缺陷，提供一种在移动终端的浏览器内加载web页面的方法及系统。

本发明是通过下述技术方案来解决上述技术问题的：

一方面，本发明提供一种在移动终端的浏览器内加载web页面的方法，其特点在于，包括以下步骤：

将构成目标web页面的不同元素封装进多个组件中，并将所述组件存储于web服务器；

从所述web服务器获取预设的组件，并加载包括所述预设的组件的初始web页面；

根据访问web页面的不同操作，从所述web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的web页面。

较佳地，通过ajax异步加载技术从所述web服务器获取组件。

较佳地，加载web页面的步骤包括：

按照所述浏览器的模板对获取的组件进行渲染；

加载包括渲染后的组件的web页面。

较佳地，所述方法还包括：记录访问web页面的路径，并根据所述路径从所述web服务器获取目标组件。

较佳地，所述操作的类型包括点击和/或手势。

另一方面，本发明还提供一种在移动终端的浏览器内加载web页面的系统，其特点在于，包括：

封装模块，用于将构成目标web页面的不同元素封装进多个组件中，并将所述组件存储于web服务器；

初始化模块，用于从所述web服务器获取预设的组件，并加载包括所述预设的组件的初始web页面；

处理模块，用于根据访问web页面的不同操作，从所述web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的web页面。

较佳地，所述初始化模块和所述处理模块均用于通过ajax异步加载技术从所述web服务器获取组件。

较佳地，所述初始化模块和所述处理模块均用于通过以下方式加载web页面：

按照所述浏览器的模板对获取的组件进行渲染；

加载包括渲染后的组件的web页面。

较佳地，所述系统还包括记录模块，用于记录访问web页面的路径；

所述处理模块还用于根据所述路径从所述web服务器获取目标组件。

较佳地，所述操作的类型包括点击和/或手势。

在符合本领域常识的基础上，上述各优选条件，可任意组合，即得本发明各较佳实例。

本发明的积极进步效果在于：与现有技术相比，本发明利用单页web框架技术，以组件为单位，将不同元素封装进不同组件，从而在用户进入任务页时只加载最基本的元素，节约流量，提升了移动终端的响应速度；以及根据用户访问web页面的不同操作，通过在web页面中加载不同的元素，使得用户在任务操作过程中不会被页面跳转干扰，大大降低了移动终端web页面间跳转出现的卡顿问题，整个任务流程在一个页面内完成，有效提升了人机交互的效率和舒适度。

附图说明

图1为本发明实施例的在移动终端的浏览器内加载web页面的方法流程图。

图2为本发明实施例的手机中加载的初始机票搜索页面的示意图。

图3为本发明实施例的手机中加载的搜索结果页面的示意图。

图4为本发明实施例的手机中加载的搜索结果页面的另一示意图。

图5为本发明实施例的在移动终端的浏览器内加载web页面的系统的结构框图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

本实施例提供一种在移动终端的浏览器内加载web页面的方法，如图1所示，包括以下步骤：

步骤101、将构成目标web页面的不同元素封装进多个组件中，并将所述组件存储于web服务器。本实施例中的web服务器是指通过特定的接口和服务能够与前端完成数据交互功能的服务器。通过存储代码的方式将组件存储于web服务器中。

另外，本发明中的元素和组件均是web应用的不同维度，类似后端开发中的接口和类，举个例子，若将导航条看作是一个组件的话，导航条中的每个项目即为元素。需要说明的是，本发明中不对元素和组件的划分进行限制，例如，对于导航条来说，也可以将其看作是一个元素。

在可选的一种实施方式中，利用mocha框架(一种javascript测试框架)对代码进行自动化测试和单元测试的覆盖。单元测试即在编码时同时编写测试用例，每写好一个组件则对该组件进行对应功能的测试和ui测试。

步骤102、从所述web服务器获取预设的组件，并加载包括所述预设的组件的初始web页面。其中，预设的组件中包含构成初始web页面的最基本的元素。举个例子，用户希望利用手机中的浏览器搜索机票，当用户进入机票搜索页时，加载的初始机票搜索页面20如图2中所示，只加载了最基本的一些元素，例如始发地、目的地、去程时间、搜索按钮以及一些查询选项(包括我的订单、航班动态、在线选座和发现低价)等。用户可以在图2的初始机票搜索页面中表达机票的搜索意向，例如可以通过选择始发地、目的地和去程时间的方式表达机票的搜索意向。

步骤103、根据访问web页面的不同操作，从所述web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的web页面。其中，所述操作的类型可以为点击，例如单击和双击，也可以为手势，例如向上滑动、向下滑动、向左滑动和向右滑动等。

举个例子，当用户单击图2中的搜索按钮之后，加载的搜索结果页面30如图3所示，共有95条搜索结果，其中，当前页面只显示了3条搜索结果。用户可以通过单击返回按钮31的方式返回到图2中。

在另一个例子中，当用户单击图2中的搜索按钮之后，加载的搜索结果页面40如图4所示，用户可以通过向下滑动的手势41返回到图2中。

在上述例子中，采用本实施例提供的方法可以将包括用户表达机票搜索意向、浏览机票搜索结果、选择意向订单以及填写订单信息的所有流程都整合在一个独立的web页面中实现，具体地，通过用户对web页面的不同操作，加载包括不同元素或组件的web页面，这样用户在任务操作过程中不会被页面跳转所干扰。

在可选的一种实施方式中，通过ajax异步加载技术从所述web服务器获取预设的组件。

在可选的一种实施方式中，加载web页面(包括初始web页面)的步骤包括：

按照所述浏览器的模板对获取的组件进行渲染；

加载包括渲染后的组件的web页面。

在上述步骤101中，从web服务器获取的组件的代码可能是源码，也可能是渲染后的html代码。若为源码，则需要按照移动终端中浏览器的模板对源码进行渲染，即将源码编译成html代码，以使其在移动终端的浏览器内显示。通过在浏览器端请求服务加载数据后根据模板渲染成浏览器元素，减轻了web服务器端的渲染能力，增大了吞吐量。

传统的web应用开发都是前后端融合的，逻辑和表现没有分离，后端直接在网页模板中插值传入数据最终渲染成页面。在本发明可选的一种实施方式中，与restfulapi结合使用，实现了移动终端与web服务器的分离，具体地，基于restfulapi的技术使得后端代码只考虑如何跟数据库交互把对应的值取出来传输给前端，前端通过组件化的方式将数据和表现分离，把从后端拿到的数据插入到对应的组件模板中，并渲染成最终页面。

在可选的一种实施方式中，上述方法还包括：记录访问web页面的路径，并根据所述路径从所述web服务器获取目标组件。具体地，可以利用浏览器historyapi来记录用户访问web页面的路径，以路由为逻辑，在移动终端记录用户浏览轨迹，写入路由链路，从而可以实现用户访问过程中的前进、后退以及跳转等逻辑，扩展了原有浏览器的导航能力。

本实施例还提供一种在移动终端的浏览器内加载web页面的系统50，如图5所示，包括封装模块51、初始化模块52以及处理模块53。下面对各个模块的功能进行详细介绍。

封装模块用于将构成目标web页面的不同元素封装进多个组件中，并将所述组件存储于web服务器。

初始化模块用于从所述web服务器获取预设的组件，并加载包括所述预设的组件的初始web页面。

处理模块用于根据访问web页面的不同操作，从所述web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的web页面。其中，所述操作的类型可以为点击，例如单击和双击，也可以为手势，例如向上滑动、向下滑动、向左滑动和向右滑动等。

在可选的一种实施方式中，所述初始化模块和所述处理模块均用于通过ajax异步加载技术从所述web服务器获取组件。

在可选的一种实施方式中，所述初始化模块和所述处理模块均用于通过以下方式加载web页面：

按照所述浏览器的模板对获取的组件进行渲染；

加载包括渲染后的组件的web页面。

在可选的一种实施方式中，上述在移动终端的浏览器内加载web页面的系统还包括记录模块，用于记录访问web页面的路径。其中，所述处理模块还用于根据所述路径从所述web服务器获取目标组件。

在本发明提供的在移动终端的浏览器内加载web页面的方法及系统中，极大程度地利用了移动终端的本地存储和缓存能力，将数据和资源缓存在移动终端中，较好地避免了资源重复请求，提升了移动终端的整体速度。与传统的window.location页面跳转相比，本发明利用单页web框架技术，以组件为单位，将不同元素封装进不同组件，从而在用户进入任务页时只加载最基本的元素，节约流量，提升了移动终端的响应速度；以及根据用户访问web页面的不同操作，通过在web页面中加载不同的元素，使得用户在任务操作过程中不会被页面跳转干扰，大大降低了移动终端web页面间跳转出现的卡顿问题，整个任务流程在一个页面内完成，有效提升了人机交互的效率和舒适度。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这些仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。