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

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

Construction method, web application interface and operation method of mobile web application interface

【技术实现步骤摘要】
移动端Web应用界面构建方法、Web应用界面及其操作方法
本专利技术涉及信息
，尤其是涉及一种基于移动设备浏览器的Web应用界面构建方法、Web应用界面及其操作方法。
技术介绍
目前，移动端应用软件APP开发有两个主流的方向：原生App以及移动WebApp。原生App开发成本大，需要针对不同的操作系统开发不同的APP，并且需要下载安装，更新维护不方便，但原生App界面切换流畅，用户使用体验好。WebApp开发成本低，无需下载且跨平台，维护更新方便，但WebApp用户体验不太好，具体体现在加载页面、界面切换、操作的流畅度、程序的执行效率等几方面，与原生APP都有较大的差距。现有技术中的WebApp开发，主要基于HTML5(以下简称H5)技术，H5技术框架因具备统一丰富的标签体系、多设备跨平台、自适应网页设计等特点，对开发移动端APP具有独特的技术优势，这也是WebApp比较原生App具有开发成本低、无需下载且跨平台、容易维护更新的原因所在。但WebApp具备的缺点也尤其明显，主要是页面加载慢、界面切换不流畅等两方面问题，导致用户体验不好，如果解决了这两个缺点，WebApp不但拥有了原生App的大部分优点，而且开发成本会大大降低。因此，现有技术急需一种基于移动设备浏览器端的界面无缝切换技术，来解决WebApp页面加载慢、界面切换不流畅等问题。
技术实现思路
为了解决上述技术问题，本专利技术提供了一种用于构建移动端Web应用界面的方法，包括：架构生成步骤、基于单页应用页面框架，对当前站点网页进行整体界面框架布局，得到含有所有子页面界面框架布局信息的网站单页面应用架构，所述子页面为单页的层；内容生成步骤、利用预设的站点界面元素布局和子页面访问逻辑，分别对所述网站单页面应用架构进行内容布局和子页面间跳转布局，得到网站单页应用逻辑内容；界面生成步骤、构建用于标记转场前后子网页面位置的无限递推页面访问模型，并将其写入所述网站单页应用逻辑内容中，得到网站单页面应用的界面内容。优选地，所述架构生成步骤，包括：根据所述当前站点网页的脚本文档，对所述当前站点网页内所有子页面进行功能分类，将功能分类结果编辑到所述单页应用页面框架中，构建页面应用主架构；在所述页面应用主架构中，对每个所述子页面进行命名处理，并根据所述当前站点网页的CSS信息对各子页面的样式进行封装处理，完成各子页面主架构的构建；对每个子页面主架构进行布局测试，并形成相应的功能模块，从而形成为所述网站单页面应用架构。优选地，所述功能包括：定义新子页面类、定义页面转场类、打开新子页面类和返回调用页面类；所述命名处理包括：子页面命名、页面布局类命名和页面功能方法类命名。优选地，所述内容生成步骤，包括：将完成各子页面主架构构建处理的所述页面应用主架构进行程序化逻辑编辑处理；对每个子页面涉及的所述功能进行定义，并将所述站点界面元素布局写入逻辑编辑处理结果内的相应子页面位置处，得到子页面具体布局内容；建立每个子页面的句柄，在所述子页面具体布局内容中，对所述子页面访问逻辑进行编码，得到所述网站单页应用逻辑内容，其中，不同子页面的句柄数组形成为所述子页面访问逻辑。优选地，在所述界面生成步骤，包括：确定子页面转场三要素，其中，所述子页面转场三要素包括：转场模式、转场后子页面句柄和转场前子页面句柄；根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内。优选地，在根据所述子页面转场三要素建立访问方法递推函数，并将所述访问方法递推函数写入所述网站单页应用逻辑内容中的每个子页面层结构内步骤，还包括：为每个子页面设置用于打开和退出该页面的转场模式。优选地，在建立访问方法递推函数步骤中，包括：确定所述递推函数的参数并将每个参数用数组表示，所述参数包括被调用的父页面位置、被调用的转场模式以及用于指示转场前后子页面跳转方向的调用顺序。另一方面，本专利技术还提供了一种移动端Web应用界面，所述应用界面利用如上述所述的方法构建。此外，本专利技术还提供了一种用于操作移动端Web应用的方法，通过移动设备开启含有如上述所述的Web应用界面的应用，对当前站点首次访问并渲染加载，将当前站点网页的界面加载结果存储在所述移动设备的HTML5缓存空间；所述移动设备接收待访问子页面的网址，利用所述界面加载结果，进行无二次渲染加载方式的页面切换操作，以从当前子页面跳转并显示所述待访问子页面。优选地，在从当前页面切换显示所述待访问子页面步骤，还包括：利用所述Web应用界面内的无限递推页面访问模型，对所述待访问子页面的转场三要素进行标记，并保存被调用的父页面、所述父页面的转场模式以及调用顺序。与现有技术相比，上述方案中的一个或多个实施例可以具有如下优点或有益效果：本专利技术提出了一种用于构建移动端Web应用界面的方法、移动端Web应用界面和用于操作移动端Web应用的方法。本专利技术的技术方案先通过将多个子页面组装成一个大的单页面的方式，创建网站单页面应用的主体架构；而后，在完成子页面元素填充后，建立网页分割DOM模型，用来模拟浏览页面时的多网页跳转逻辑；最后，将切割的小子页面类内建立无限递推访问模型来实现不同子页面间自定义的无缝切换显示效果。这样，本专利技术解决了现有移动设备WebApp页面加载慢、界面切换不流畅等问题，实现访问者用户如同原生APP的体验感受，同时，也降低了开发成本，缩减了App的开发周期。本专利技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。附图说明附图用来提供对本专利技术的进一步理解，并且构成说明书的一部分，与本专利技术的实施例共同用于解释本专利技术，并不构成对本专利技术的限制。在附图中：图1是本申请实施例的用于构建移动端Web应用界面的方法的步骤图。图2是本申请实施例的用于构建移动端Web应用界面的方法的具体流程图。图3是本申请实施例的用于操作移动端Web应用的方法的步骤图。图4是本申请实施例的用于操作移动端Web应用的方法中渲染加载过程的原理示意图。具体实施方式以下将结合附图及实施例来详细说明本专利技术的实施方式，借此对本专利技术如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本专利技术中的各个实施例以及各实施例中的各个特征可以相互结合，所形成的技术方案均在本专利技术的保护范围之内。目前，移动端应用软件APP开发有两个主流的方向：原生App以及移动WebApp。原生App开发成本大，需要针对不同的操作系统开发不同的APP，并且需要下载安装，更新维护不方便，但原生App界面切换流畅，用户使用体验好。WebApp开发成本低，无需下载且跨平台，维护更新方便，但WebApp用户体验不太好，具体体现在加载页面、界面切换、操作的流畅度、程序的执行效率等几方面，本文档来自技高网...

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

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


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


3.根据权利要求2所述的方法，其特征在于，
所述功能包括：定义新子页面类、定义页面转场类、打开新子页面类和返回调用页面类；
所述命名处理包括：子页面命名、页面布局类命名和页面功能方法类命名。


4.根据权利要求2或3所述的方法，其特征在于，所述内容生成步骤，包括：
将完成各子页面主架构构建处理的所述页面应用主架构进行程序化逻辑编辑处理；
对每个子页面涉及的所述功能进行定义，并将所述站点界面元素布局写入逻辑编辑处理结果内的相应子页面位置处，得到子页面具体布局内容；
建立每个子页面的句柄，在所述子页面具体布局内容中，对所述子页面访问逻辑进行编码，得到所述网站单页应用逻辑内容，其中，不同子页...

【专利技术属性】
技术研发人员：苗润莲，毛维娜，毛卫南，范立焱，呂佳途，谢志虎，
申请(专利权)人：北京市科学技术情报研究所，
类型：发明
国别省市：北京;11