CN111221530A - 移动端Web应用界面构建方法、Web应用界面及其操作方法 - Google Patents

Abstract

本发明公开了一种用于构建移动端Web应用界面的方法，包括：基于单页应用页面框架，对当前站点网页进行整体界面框架布局，得到含有所有子页面界面框架布局信息的网站单页面应用架构，子页面为单页的层；利用预设的站点界面元素布局和子页面访问逻辑，分别对网站单页面应用架构进行内容布局和子页面间跳转布局，得到网站单页应用逻辑内容；构建用于标记转场前后子网页面位置的无限递推页面访问模型，并将其写入网站单页应用逻辑内容中，得到网站单页面应用的界面内容。本发明提高了移动端Web应用的页面加载速度，降低了开发成本，缩减了Web应用的开发周期，使得界面切换更流畅。

Description

移动端Web应用界面构建方法、Web应用界面及其操作方法

技术领域

本发明涉及信息技术领域，尤其是涉及一种基于移动设备浏览器的Web应用界面构建方法、Web应用界面及其操作方法。

背景技术

目前，移动端应用软件APP开发有两个主流的方向：原生App以及移动Web App。原生App开发成本大，需要针对不同的操作系统开发不同的APP，并且需要下载安装，更新维护不方便，但原生App界面切换流畅，用户使用体验好。Web App开发成本低，无需下载且跨平台，维护更新方便，但Web App用户体验不太好，具体体现在加载页面、界面切换、操作的流畅度、程序的执行效率等几方面，与原生APP都有较大的差距。

现有技术中的Web App开发，主要基于HTML5(以下简称H5)技术，H5技术框架因具备统一丰富的标签体系、多设备跨平台、自适应网页设计等特点，对开发移动端APP具有独特的技术优势，这也是Web App比较原生App具有开发成本低、无需下载且跨平台、容易维护更新的原因所在。但Web App具备的缺点也尤其明显，主要是页面加载慢、界面切换不流畅等两方面问题，导致用户体验不好，如果解决了这两个缺点，Web App不但拥有了原生App的大部分优点，而且开发成本会大大降低。

因此，现有技术急需一种基于移动设备浏览器端的界面无缝切换技术，来解决WebApp页面加载慢、界面切换不流畅等问题。

发明内容

为了解决上述技术问题，本发明提供了一种用于构建移动端Web应用界面的方法，包括：架构生成步骤、基于单页应用页面框架，对当前站点网页进行整体界面框架布局，得到含有所有子页面界面框架布局信息的网站单页面应用架构，所述子页面为单页的层；内容生成步骤、利用预设的站点界面元素布局和子页面访问逻辑，分别对所述网站单页面应用架构进行内容布局和子页面间跳转布局，得到网站单页应用逻辑内容；界面生成步骤、构建用于标记转场前后子网页面位置的无限递推页面访问模型，并将其写入所述网站单页应用逻辑内容中，得到网站单页面应用的界面内容。

优选地，所述架构生成步骤，包括：根据所述当前站点网页的脚本文档，对所述当前站点网页内所有子页面进行功能分类，将功能分类结果编辑到所述单页应用页面框架中，构建页面应用主架构；在所述页面应用主架构中，对每个所述子页面进行命名处理，并根据所述当前站点网页的CSS信息对各子页面的样式进行封装处理，完成各子页面主架构的构建；对每个子页面主架构进行布局测试，并形成相应的功能模块，从而形成为所述网站单页面应用架构。

优选地，所述功能包括：定义新子页面类、定义页面转场类、打开新子页面类和返回调用页面类；所述命名处理包括：子页面命名、页面布局类命名和页面功能方法类命名。

优选地，所述内容生成步骤，包括：将完成各子页面主架构构建处理的所述页面应用主架构进行程序化逻辑编辑处理；对每个子页面涉及的所述功能进行定义，并将所述站点界面元素布局写入逻辑编辑处理结果内的相应子页面位置处，得到子页面具体布局内容；建立每个子页面的句柄，在所述子页面具体布局内容中，对所述子页面访问逻辑进行编码，得到所述网站单页应用逻辑内容，其中，不同子页面的句柄数组形成为所述子页面访问逻辑。

优选地，在所述界面生成步骤，包括：确定子页面转场三要素，其中，所述子页面转场三要素包括：转场模式、转场后子页面句柄和转场前子页面句柄；根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内。

优选地，在根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内步骤，还包括：为每个子页面设置用于打开和退出该页面的转场模式。

优选地，在建立访问方法递推函数步骤中，包括：确定所述递推函数的参数并将每个参数用数组表示，所述参数包括被调用的父页面位置、被调用的转场模式以及用于指示转场前后子页面跳转方向的调用顺序。

另一方面，本发明还提供了一种移动端Web应用界面，所述应用界面利用如上述所述的方法构建。

此外，本发明还提供了一种用于操作移动端Web应用的方法，通过移动设备开启含有如上述所述的Web应用界面的应用，对当前站点首次访问并渲染加载，将当前站点网页的界面加载结果存储在所述移动设备的HTML5缓存空间；所述移动设备接收待访问子页面的网址，利用所述界面加载结果，进行无二次渲染加载方式的页面切换操作，以从当前子页面跳转并显示所述待访问子页面。

优选地，在从当前页面切换显示所述待访问子页面步骤，还包括：利用所述Web应用界面内的无限递推页面访问模型，对所述待访问子页面的转场三要素进行标记，并保存被调用的父页面、所述父页面的转场模式以及调用顺序。

与现有技术相比，上述方案中的一个或多个实施例可以具有如下优点或有益效果：

本发明提出了一种用于构建移动端Web应用界面的方法、移动端Web应用界面和用于操作移动端Web应用的方法。本发明的技术方案先通过将多个子页面组装成一个大的单页面的方式，创建网站单页面应用的主体架构；而后，在完成子页面元素填充后，建立网页分割DOM模型，用来模拟浏览页面时的多网页跳转逻辑；最后，将切割的小子页面类内建立无限递推访问模型来实现不同子页面间自定义的无缝切换显示效果。这样，本发明解决了现有移动设备Web App页面加载慢、界面切换不流畅等问题，实现访问者用户如同原生APP的体验感受，同时，也降低了开发成本，缩减了App的开发周期。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例共同用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本申请实施例的用于构建移动端Web应用界面的方法的步骤图。

图2是本申请实施例的用于构建移动端Web应用界面的方法的具体流程图。

图3是本申请实施例的用于操作移动端Web应用的方法的步骤图。

图4是本申请实施例的用于操作移动端Web应用的方法中渲染加载过程的原理示意图。

具体实施方式

以下将结合附图及实施例来详细说明本发明的实施方式，借此对本发明如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本发明中的各个实施例以及各实施例中的各个特征可以相互结合，所形成的技术方案均在本发明的保护范围之内。

目前，移动端应用软件APP开发有两个主流的方向：原生App以及移动Web App。原生App开发成本大，需要针对不同的操作系统开发不同的APP，并且需要下载安装，更新维护不方便，但原生App界面切换流畅，用户使用体验好。Web App开发成本低，无需下载且跨平台，维护更新方便，但Web App用户体验不太好，具体体现在加载页面、界面切换、操作的流畅度、程序的执行效率等几方面，与原生APP都有较大的差距。

现有技术中的Web App开发，主要基于HTML5(以下简称H5)技术，H5技术框架因具备统一丰富的标签体系、多设备跨平台、自适应网页设计等特点，对开发移动端APP具有独特的技术优势，这也是Web App比较原生App具有开发成本低、无需下载且跨平台、容易维护更新的原因所在。但Web App具备的缺点也尤其明显，主要是页面加载慢、界面切换不流畅等两方面问题，导致用户体验不好，如果解决了这两个缺点，Web App不但拥有了原生App的大部分优点，而且开发成本会大大降低。

因此，为了解决上述所述的Web App页面加载慢、界面切换不流畅等问题，本发明提出了一种利用H5技术，将Web App从B/S结构模拟重构成由“移动网页应用客户端+服务器数据”两部分构成的C/S结构的应用程序，Web App应用内由所有UI元素、部分数据内容、逻辑框架构成的Web App界面加载结果均通过H5缓存在移动终端(例如：手机)内的缓存空间内。在对Web App进行访问并进行后续的多次操作时，只需要在首次访问时一次性的在手机终端上进行渲染加载。

在对本发明技术方案进行说明之前，需要先对浏览器在取得网页界面内容之后所涉及的渲染页面的基本流程。图4是本申请实施例的用于操作Web应用的方法中渲染加载过程的原理示意图。如图4所示，浏览器渲染页面的基本过程包括如下四个步骤。第一步，获得当前站点网页HTML文档，并对其进行解析，从而构建DOM Tree结构。DOM是文档对象化模型(Document Object Model)，DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTMLtree树状结构和对应访问方法。第二步，当前站点网页HTML文档内设定好的网页样式(CSS)信息，生成样式对象模型CSSOM。第三步，将DOM Tree结构和样式对象模型CSSOM整合成渲染树RenderTree结构。第四步，对渲染树RenderTree结构进行渲染和展示。

在现有的Web APP技术中，每打开一个页面或者回退页面，都需按以上四个步骤重新启动浏览器的一个新页面实例，以进行加载渲染。又由于移动端相较于PC端在宽带、内存等方面都具有不足的相应差距，访问速度受手机终端上网的限制使得网页加载速度慢。进一步，因为，Web APP加载的数据存储在移动端浏览器的缓存时间有限，所以如果网页加载次数多，则会容易出现卡死错乱的现象，用户体验比较差。为了发挥Web APP技术中H5技术有限的缓存容量，提高程序执行的效率，从根本上优化用户体验，本发明把传统的多网页随机重复加载，设计成可将单个大网页(站点主页)及其子页面类(主页内例如登录、查询、数据播放等不同功能的子页面)所构成的界面内容进行一次性加载，并且将移动端加载好的网页界面内容数据永久保存在H5缓存中，通过建立并实施子页面访问模型(无限递推页面访问模型)，在调用中采用无限递推方法，实现界面无延迟流畅的无缝切换和转场。

需要说明的是，在本发明实施例中，Web应用界面构建方法应用于移动端设备中，各个网站开发者都能够利用本发明所述的方法建立能够用于移动端设备的Web应用界面，在后续网站访问者对该网站站点的Web应用进行网站访问和实施相应应用操作时，都能够达到初次使用进行一次性加载、并且在后续操作过程中实现界面无延迟流畅的无缝切换和转场。其中，本发明实施例所述的网站站点为例如淘宝、爱奇艺等能够自主进行网页开发的站点对象。

图1是本申请实施例的用于构建移动端Web应用界面的方法的步骤图。如图1所示，下面对本发明所述的基于移动端浏览器的Web应用界面构建方法进行说明。

步骤S110基于单页应用页面框架，根据当前站点网页的脚本文档，对当前站点网页进行整体界面框架布局，得到含有所有子页面界面框架布局信息的网站单页面应用架构，其中，子页面为单页的层。其中，单页应用页面框架是利用基于HTML5(以下简称H5)技术构建的网页静态框架，具有统一丰富的标签体系、多设备跨平台、自适应网页设计等特点。在步骤S110中，需要将当前站点网站所涉及的所有子页面以层div的形式进行组合，构成为基于H5技术架构的网站单页面应用架构。步骤S120利用预设的站点界面元素布局和子页面访问逻辑，分别对步骤S110生成的网站单页面应用架构进行内容布局和子页面间跳转布局，得到(两种布局处理完成后的)网站单页应用逻辑内容。步骤S130构建用于标记转场前后子网页面位置的无限递推页面访问模型，并将该模型写入步骤S120所构建的网站单页应用逻辑内容中，得到网站单页面应用的界面内容。

图2是本申请实施例的用于构建移动端Web应用界面的方法的具体流程图。下面结合图1和图2，对本发明实施例所述的移动端Web应用界面构建方法进行详细说明。

首先，步骤S201中，根据当前站点网页的脚本文档，对当前站点网页内所有页面进行(属性)功能分类，将功能分类结果编辑到单页应用页面框架中，构建页面应用主架构。具体地，首先，需要根据单页应用页面框架SPA(single-page application)中定义出简单的初步整体结构。其中，该页面框架的主页面只有一个。然后，由于当前站点网页中所涉及的每个子页面都对应有相应的一种或几种(属性)功能，因此，需要将当前站点网页内所有层子页面按照(属性)功能划分，针对每个层子页面都需定义出该子页面所涉及的多种功能模块类。最后，通过脚本文档中的DOM接口将每个层子页面对应的一种或几种功能模块类，编辑到初步整体结构中相对应的层子页面中进行组装，形成为整个页面应用框架，即页面应用主架构。这样，完成了项目文件架构的创建过程，以进入到步骤S202。其中，每个子页面层所涉及的多种(属性)功能模块类包括：定义新子页面类、定义页面转场类、打开新子页面类、返回调用页面类等。本发明实施例中的(属性)功能模块类不限于此，本领域技术人员可根据实际需求进行相应的设置。

步骤S201所述的创建项目文件架构过程所构建的页面应用主架构，主要应用在后续的浏览器渲染页面基本过程中的根据当前站点网页HTML文档来构建DOM Tree结构的阶段，目的是完成构建关于站点页面的静态架构，从而使得访问者在输入当前站点的html时，能够利用步骤S201构建好的页面应用主架构提供一种解析站点html并构建DOM树的架构模型，以便在访问者对当前站点网页进行后续操作(例如：用户登录、查询、浏览一则新闻等)时，Web应用可迅速配置关于当前站点的网页展示信息。

步骤S202在页面应用主架构中，对每个层子页面进行命名处理，并根据当前站点网页的CSS框架信息对各子页面的样式框架进行封装处理，完成各子页面主架构的构建。步骤S202是在创建网站单页面应用架构中，实现对基本文档结构的定义过程。定义基本文档结构主要是将整个项目文档进行详细的目录划分，主要先对每个子页面div进行命名(可以理解为，将每个子页面div作为目录中的子标题索引)，然后针对每个子页面div进行样式框架的构建，从而为每个子页面div创建了相应的文档。在步骤S202中，首先，需要在步骤S201所创建的页面应用主架构中，对每个子页面div进行子页面(文档)命名、页面布局类命名处理和页面功能方法类命名处理。其中，子页面(文档)命名是对子页面本身进行命名，如可将一个div子页面文档命名为PageOne。页面布局类命名处理和页面功能方法类命名处理过程是要分别对每个子页面div文档内的子页面布局类文件、页面功能方法类文件进行spa类命名。在后续的样式框架封装处理中，需要将相应子页面上显示的布局元素，如标题、按钮、下拉框等等编辑到页面布局类文件中。页面功能方法类文件指的是可存储上述页面布局类文件内布局元素的功能实现方法信息的文件。此处的页面功能是指所有子页面布局元素的实现方法，例如：子页面本身、以及构成子页面界面展示结构的各布局元素的功能函数(即每种布局元素的功能含义，也就是上述属性功能)。在后续的样式框架封装处理中，需要将例如布局元素功能函数等信息编辑到页面功能方法类文件中。shell是每个子页面文档结构的核心部分，也是容器，在对每个子页面div进行子页面命名处理时，主要是对每个子页面的shell模块进行命名处理，以在后续构建子页面文档时能够将用于调用页面元素的标记写入shell容器中。

举例来说，在对子页面文档进行命名时，是创建每个子页面div文档的可属于spa类的(spa.page.class)文件名称。例如，将一个div子页面命名为PageOne。进一步，由于每个子页面文档都对应有css、js文件，对于子页面的shell模块来说，css、js的文件名称都一一对应相应的子页面类(spa.page.class)来命名。比如：shell模块的页面布局类命名就用spa.shell.css等来标记；shell模块的页面功能方法类命名就用spa.shell.js等来标记。对于div子页面文档命名为PageOne后，该子页面布局类文件命名为spa.PageOne.css，该子页面的功能方法类文件命名为spa.PageOne.js。

在完成针对每个子页面的文档命名处理后，进一步需要根据当前站点网页脚本文档中的CSS信息对每个子页面的样式进行封装处理。具体地，CSS信息包括CSS布局元素信息和CSS框架信息，利用脚本文件内的CSSOM调用接口，一方面需要将针对不同子页面的CSS框架信息作为样式框架信息分别封装到相应的子页面内，还需要将针对不同子页面的CSS布局元素信息作为样式细节内容信息分别封装到相应的子页面内。其中，CSS框架信息包括页眉标题栏、中间内容栏和页脚状态栏这三个部分，以在完成封装后，可得到每个子页面的包括页面样式框架和页面样式布局细节在内的子页面样式实例，从而完成各个子页面主架构的构建。

步骤S202所述的定义基本文档结构过程所构成的在页面应用主架构基础上的各子页面主架构，主要应用在后续的浏览器渲染页面基本过程中的根据当前站点网页HTML文档内设定好的网页样式(CSS)信息来生成样式对象模型CSSOM阶段，目的是完成构建关于站点子页面层的样式布局，当然也包括在上一步中定义的每个功能模块类的具体实现js函数。

而后，进入到步骤S203中。步骤S203对每个子页面主架构进行布局测试，并形成相应的功能模块(子页面文档布局)，从而形成为网站单页面应用架构。在基本文档结构定义创建好后，接下来，就是针对每个子页面进行整体的布局和样式编码。具体地，将当前创建好的子页面主架构内的页面样式框架放入spa文档(spa.html)，即将子页面的头文件、主体内容、脚文件等子页面布局框架放入spa文档，生成html代码字符串，而后，将子页面主架构内的样式布局细节信息都放入layout文档(layout.html)，即将子页面的标题、按钮、下拉框等body信息放入layout文档，生成html代码字符串，在经过这两类文档测试后实现布局测试，形成为针对每个子页面的shell模块，通过initModule操作将每个shell模块添加到相对应子页面类的文档主体容器中。这样，创建完成了在对每个子页面主架构进行布局测试后的网站单页面应用架构，形成为了可用于创建渲染树RenderTree结构的架构。

步骤S203所述的通用布局和样式编码过程所构成的网站单页面应用架构，主要应用在后续的浏览器渲染页面基本过程中的将DOM Tree结构和样式对象模型CSSOM整合成渲染树RenderTree结构阶段，目的是将文档中各个子页面主架构(封装处理模块)分别进行布局测试，而后将测试结果形成html代码字符串，形成为相应的功能模块，从而完成网页应用客户端的创建。

为了实现访问者操作界面的流畅性，本发明实施例通过上述步骤S201～步骤S203将所有页面按照功能进行分类，将每一类按照模块进行搭建，用户在操作的时候，所有页面静态框架已经搭建并启动隐藏，实际内容根据功能动态依类创建，这样即提高了程序运行效率，显示页面又很流畅，提高了用户良好的体验度。此外，本发明实施例通过上述步骤将单页应用页面框架从基于B/S样式的结构转换成基于C/S的结构。

DOM全称为“文档对象模型”(Document Object Model)，它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作。DOM以树形结构组织HTML文档，文档中每个标签或元素都是一个节点，各个节点之间都存在着关系。如果以上步骤S110是布局框架的话，那么步骤S120就是具体的布局细节部分，此步骤主要的工作就是根据DOM对象的节点属性、方法和事件，建立单网页多DOM节点访问模型，实现模拟多网页的逻辑。

在完成上述网站单页面应用架构创建操作后，进入到步骤S204中。步骤S204将完成各子页面主架构构建处理的页面应用主架构进行程序化逻辑编辑处理，建立网页基本的程序化结构。其中，主要结构如下：

而后，进入到步骤S205中。步骤S205对每个子页面涉及的属性功能进行定义，并将预设的站点界面元素布局写入逻辑编辑处理结果内的相应子页面位置处，得到子页面具体布局内容。在本发明实施例中，站点界面元素布局是从脚本文件中提取到的，是针对整个站点网页中涉及到的各类元素或标签等信息而构建的布局模型，由各个子页面的元素或标签布局内容构成。具体需要为自定义<body>部分的每一层div，设计相应的细节信息，由于每层的细节信息设计过程是类似的，故此处以第一层div为例进行说明。在一个实施例中，自定义<body>部分的第一层div，首先，确定步骤S201生成的第一层子页面的自定义类，也就是说，需要为第一层子页面对应的多种属性功能类设计相应的过程函数，得到针对第一层子页面的功能自定义类；而后，将通过步骤S203封装并测试好的第一个子页面文档布局(div-css布局)以及同一个子页面的自定义类进行组装，构成为第一个子页面层div的子页面具体结构；而后，利用站点界面元素布局中的针对第一层子页面div的子页面元素或标签布局内容，设计子页面具体子页面中的具体布局内容。

这样，利用步骤S205首先为每个“子页面自定义类”设计页面中具体实现不同属性功能的相应的过程函数，而后将这些功能函数添加到上述步骤S203中已经实现的RenderTree结构，进一步利用子页面元素或标签布局内容对RenderTree进行渲染和展示的页面。

此后，在完成子页面具体布局内容及属性功能定义后，进入到步骤S206中。步骤S206建立每个子页面的句柄，在子页面具体布局内容中，对子页面访问逻辑进行编码，得到网站单页应用逻辑内容。其中，不同子页面的句柄数组形成为上述子页面访问逻辑。由于每个子页面都具有相应的操作功能如登录操作用途的子页面、信息编辑操作的子页面、查询操作的子页面等等，每个子页面之间的跳转都根据相应的操作功能而实现具有一定规律的跳转，例如：从登录操作用途的子页面跳转到登录成功提示的子页面。这些跳转规律(子页面访问逻辑)是网站开发者根据不同子页面的操作功能而设定的，是由每个子页面的句柄数组按照子页面访问逻辑排列出来的。

在对上述子页面访问逻辑进行编码过程中，包括如下步骤：首先，对于建立每个子页面内的定义新子页面类的实例；然后，调用页面转场类函数；接着，根据当前子页面的页面转场类函数的参数类别(该类别选自抛出、弹出、滑动等转场模式中的一种)，调用打开新子页面窗口函数，同时调用用于记录当前子页面句柄的函数；最后，定义根据访问者操作来调用当前子页面内返回调用页面类函数，以达到返回调用子页面的效果。这样，便完成了将每个子页面作为DOM节点的方法，来完成针对每个子页面的页面访问逻辑的编码过程，构建了多DOM点访问模型，实现模拟传统子页面操作浏览的目的，从而实现了对某一子页面进行显示时其他子页面隐藏的效果，进一步实现了对转场后的子页面进行显示时对父页面进行隐藏的效果。

由此利用上述步骤S204～步骤S206完成了对各个子页面具体内容的布局和实际跳转逻辑模拟的方式来生成针对当前网站单页应用的逻辑内容的创建，此时，进入到步骤S207中。

通过以上两个步骤S110和步骤S120建立了每个子页面的具体内容布局情况，只是网页的一个个具体显示内容，要实现用户像原生App那样随意调用和转场浏览，需要建立无限递推页面访问模型，来真正实现多界面无缝切换。步骤S207需要先确定子页面转场三要素。其中，子页面转场三要素包括：转场模式、转场后子页面句柄和转场前子页面句柄。进一步，此处的转场模式包括：打开子页面转场模式和退出子页面转场模式。

而后，进入到步骤S208中。步骤S208根据子页面转场三要素，建立访问方法递推函数(将其作为无限递推页面访问模型)，并将访问方法递推函数编写成代码后，将其分别写入网站单页应用逻辑内容中的每个子页面层结构内。具体地，确定递推函数的参数，并将每个参数用数组表示。其中，递推函数的参数包括：被调用的父页面位置、被调用的父页面的转场模式以及用于指示转场前后子页面跳转方向的调用顺序。递推函数中构成调用顺序的数组是遵循先进后出原则的，也就是说，该递推函数在接收到访问者输入的转场后的子页面位置信息后，利用递推函数中的调用顺序和被调用父页面的转场模式，完成按照预先设置好的被调用父页面的转场模式方式来执行跳转操作。另外，还需要利用被调用的父页面位置参数、被调用子页面的转场模式参数和调用顺序参数，在跳转操作执行的同时，保存这些参数信息，以能够立即根据访问者需求返回被调用父页面。

由此，本发明实施例所述的递推函数主要实现打开和返回两项功能。具体地，首先，根据访问者用户输入的需要调用的子页面，利用新的子页面转场模式打开页面，以及利用父页面转场模式退出该页面；然后，在转场操作的同时，保存被调用的父页面、转场模式以及调用顺序；最后，根据被调用的父页面、被调用的父页面的转场模式以及调用顺序根据访问者需求立即返回被调用页面。

另外，在上述构建访问方法递推函数之后，步骤S209还需要由网站开发者为每个子页面设置用于打开和退出当前子页面的转场模式。需要说明的是，在本发明实施例中，无论是打开还是退出该子页面，每种操作的转场模式都需要选自：淡出、抛出、弹出、滑动、翻动等等模式中的一种。其中，类似原生APP的转场模式效果，这些模式具体转场方式分别为：淡出(默认)，具体是指淡出到下一子页面；抛出，抛出当前子页面，引入下一子页面；弹出，像弹出窗口那样转到下一子页面；滑动，从左向右或从下到上滑动到下一子页面；翻动，从后向前翻动到下一子页面。本发明实施例中的转场模式不限于此，本领域技术人员可根据实际需求进行相应的配置。

在步骤S209中，根据具体功能特点为每个子页面配置合适的转场模式，满足网站访问者的操作习惯，最终提高用户的良好体验。此处的“功能特点”具体是指用户根据子页面所承载的具体操作功能特点，选择合适的转场模式，比如对于基本处理过程的功能，选择的转场模式就是从左向右滑动到下一页；对于编辑或设置一类的功能，就选择从后向前翻动到下一页；对于展示具体视频或图片等内容细节的功能就选择像弹出窗口那样转到下一页，等等，本发明对此不作具体限定。

这样，通过上述步骤S207～步骤S209将完成了为每个子页面创建了能实现跳转打开和返回功能的无限递推页面访问函数，为访问者根据自定义的实际跳转需求建立了快速递推的页面访问逻辑的通道。进一步，通过上述步骤S201～步骤S209完成了用于实现基于移动设备Web应用界面无缝切换技术的网站单页面应用界面内容，以利用该内容作为构建移动端Web App的界面部分。

另外，基于上述移动端Web应用界面的构建方法，本发明还提出了一种移动端Web应用界面。移动端Web应用界面利用上述移动端Web应用界面构建方法而创建。此外，本发明也提出了一种移动端Web应用，这种应用含有利用上述移动端Web应用界面构建方法所构成的应用界面。移动端Web应用安装在当前网站访问者所配置的移动端设备(例如：手机、平板电脑等)中。

更进一步地说，本发明基于上述移动端Web应用界面构建方法所创建的移动端Web应用界面、以及上述移动端Web应用，还提出了一种用户操作移动端Web应用的方法，该方法能够通过移动设备对上述移动端Web应用进行操作。图3是本申请实施例的用于操作移动端Web应用的方法的步骤图。参考图3，该操作方法包括如下步骤：

步骤S301通过移动设备开启含有上述移动端Web应用界面的应用(移动端Web应用)，对当前站点进行首次访问，在获得用户输入的当前站点的html信息后，利用上述步骤S201～步骤S209所创建的网站单页面应用界面内容，对该信息进行解析并渲染加载，而后，将当前站点网页的界面加载结果存储在移动设备的HTML5缓存空间内，从而进入到步骤S302中。

步骤S302移动设备接收当前站点内的待访问子页面的网址，利用缓存空间内的界面加载结果，进行无二次渲染加载方式的页面切换操作，以从当前子页面跳转并显示访问者想要访问的当前站点内的待访问子页面。由于本发明实施例所创建的网站单页面应用界面内容是将所有子网页进行组合构造成为的单个大网页，并含有所有子网页布局情况和子网页间跳转逻辑，因此，本发明实施例，将移动端Web应用内所创建的包括：所有的UI元素、部分数据内容、逻辑框架的网站单页面应用界面内容，通过H5技术存储在访问者移动终端的HTML5缓存空间内。实际访问的时候，只需要一次性从如手机终端上对当前移动端Web应用进行渲染加载，并将界面加载结果存储在HTML5缓存空间内，使得后续对移动端Web应用的操作都无需再次进行渲染加载过程，直接利用应用界面内部的无限递推页面访问模型，实现不同子页面间的无加载操作的跳转或返回切换。

另外，上述步骤S302在实施页面切换操作时，还利用移动端Web应用界面内的无限递推页面访问模型，对待访问子页面的转场三要素进行标记，并保存被调用的父页面、父页面的转场模式以及调用顺序。由此，实现无限地推访问，使得访问者能利用标记好的被调用的父页面、父页面的转场模式以及调用顺序立即返回到父页面。

本发明公开了一种用于构建移动端Web应用界面的方法、移动端Web应用界面和用于操作移动端Web应用的方法。本发明的技术方案先通过将多个子页面组装成一个大的单页面的方式，创建网站单页面应用的主体架构；而后，在完成子页面元素填充后，建立网页分割DOM模型，用来模拟浏览页面时的多网页跳转逻辑；最后，将切割的小子页面类内建立无限递推访问模型来实现不同子页面间自定义的无缝切换显示效果。这样，本发明解决了现有移动设备Web App页面加载慢、界面切换不流畅等问题，实现访问者用户如同原生APP的体验感受，同时，也降低了开发成本，缩减了App的开发周期。

虽然本发明所披露的实施方式如上，但所述的内容只是为了便于理解本发明而采用的实施方式，并非用以限定本发明。任何本发明所属技术领域内的技术人员，在不脱离本发明所揭露的精神和范围的前提下，可以在实施的形式上及细节上作任何的修改与变化，但本发明的专利保护范围，仍须以所附的权利要求书所界定的范围为准。

Claims (10)

1.一种用于构建移动端Web应用界面的方法，其特征在于，包括：

架构生成步骤、基于单页应用页面框架，对当前站点网页进行整体界面框架布局，得到含有所有子页面界面框架布局信息的网站单页面应用架构，所述子页面为单页的层；

内容生成步骤、利用预设的站点界面元素布局和子页面访问逻辑，分别对所述网站单页面应用架构进行内容布局和子页面间跳转布局，得到网站单页应用逻辑内容；

界面生成步骤、构建用于标记转场前后子网页面位置的无限递推页面访问模型，并将其写入所述网站单页应用逻辑内容中，得到网站单页面应用的界面内容。

2.根据权利要求1所述的方法，其特征在于，所述架构生成步骤，包括：

根据所述当前站点网页的脚本文档，对所述当前站点网页内所有子页面进行功能分类，将功能分类结果编辑到所述单页应用页面框架中，构建页面应用主架构；

在所述页面应用主架构中，对每个所述子页面进行命名处理，并根据所述当前站点网页的CSS信息对各子页面的样式进行封装处理，完成各子页面主架构的构建；

对每个子页面主架构进行布局测试，并形成相应的功能模块，从而形成为所述网站单页面应用架构。

3.根据权利要求2所述的方法，其特征在于，

所述功能包括：定义新子页面类、定义页面转场类、打开新子页面类和返回调用页面类；

所述命名处理包括：子页面命名、页面布局类命名和页面功能方法类命名。

4.根据权利要求2或3所述的方法，其特征在于，所述内容生成步骤，包括：

将完成各子页面主架构构建处理的所述页面应用主架构进行程序化逻辑编辑处理；

对每个子页面涉及的所述功能进行定义，并将所述站点界面元素布局写入逻辑编辑处理结果内的相应子页面位置处，得到子页面具体布局内容；

建立每个子页面的句柄，在所述子页面具体布局内容中，对所述子页面访问逻辑进行编码，得到所述网站单页应用逻辑内容，其中，不同子页面的句柄数组形成为所述子页面访问逻辑。

5.根据权利要求1～4中任一项所述的方法，其特征在于，所述界面生成步骤，包括：

确定子页面转场三要素，其中，所述子页面转场三要素包括：转场模式、转场后子页面句柄和转场前子页面句柄；

根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内。

6.根据权利要求5所述的方法，其特征在于，在根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内步骤，还包括：

为每个子页面设置用于打开和退出该页面的转场模式。

7.根据权利要求5或6所述的方法，其特征在于，在建立访问方法递推函数步骤中，包括：

确定所述递推函数的参数并将每个参数用数组表示，所述参数包括被调用的父页面位置、被调用的转场模式以及用于指示转场前后子页面跳转方向的调用顺序。

8.一种移动端Web应用界面，其特征在于，所述应用界面利用如权利要求1～7中任一项所述的方法构建。

9.一种用于操作移动端Web应用的方法，其特征在于，

通过移动设备开启含有如权利要求8所述的Web应用界面的应用，对当前站点首次访问并渲染加载，将当前站点网页的界面加载结果存储在所述移动设备的HTML5缓存空间；

所述移动设备接收待访问子页面的网址，利用所述界面加载结果，进行无二次渲染加载方式的页面切换操作，以从当前子页面跳转并显示所述待访问子页面。

10.根据权利要求9所述的方法，其特征在于，在从当前页面切换显示所述待访问子页面步骤，还包括：

利用所述Web应用界面内的无限递推页面访问模型，对所述待访问子页面的转场三要素进行标记，并保存被调用的父页面、所述父页面的转场模式以及调用顺序。

Images