CN106354355A - 用户界面布局方法、装置及系统 - Google Patents

Abstract

本发明提供一种用户界面布局方法、装置及系统，该方法包括：获取包含至少两个网页视图的布局信息；根据布局信息，生成包含至少两个网页视图的用户界面。本发明提供的用户界面布局方法、装置及系统，能够确保用户界面局部滚动的连贯、不卡顿，操作流畅，从而提高了用户界面的操作性。

Description

用户界面布局方法、装置及系统

技术领域

本发明涉及移动通信技术领域，尤其涉及一种用户界面布局方法、装置及系统。

背景技术

随着智能移动终端的发展，移动应用的数量也越来越多，现阶段移动应用的开发主要分为原生(Native)应用程序(Application，简称APP)、网页(Web)APP和混合(Hybrid)APP三大类。Native APP是一种基于本地操作系统并使用原生程序编写运行的第三方应用程序，也称为本地APP。Web APP是基于网页浏览器并使用网页开发语言编写运行的第三方应用程序。Hybrid APP是介于Native APP和Web APP两者之间的APP，同时使用网页开发语言和原生程序语言的第三方应用程序。由于Hybrid App兼具了Native App的所有优势，也兼具了Web App跨平台开发低成本的优势，因此，Hybrid App是现阶段移动应用的开发最主要的应用程序。

目前，Hybrid App通常分为多视图(View)混合型、单View混合型和Web主体型三大类。多View混合型是本地视图(Native View)和网页视图(Web View)分别在不同的页面(page)中展示，交替出现，其中，Native View和Web View分别为加载显示网页的控制组件。Native View和Web View之间相互独立，没有交互，多View混合型的移动应用的主体通常是Native App，Web App只是起到补充作用，即在需要的时候，将Web View当成一个独立的View运行起来，在Web View内完成相关的展示操作。单View混合型是在同一个page内同时包括Native View和Web View，Native View和Web View互相是覆盖(层叠)关系，Native View和Web View之间通常需要交互。Web主体型在一个page内只包括一个Web View，Web主体型移动应用的主体是Web View，主要以网页开发语言编写，穿插Native功能的Hybrid App开发类型。由于Web主体型移动应用的主体是Web View，且可以穿插Native的功能，整体开发难度降低，并且基本可以实现跨平台。因此，Web主体型是现阶段Hybrid App最主要的类型。

然而，采用目前的Web主体型Hybrid App，对于存在用户界面(UserInterface，简称UI)局部滚动等操作时，需要加载网页(Web)开发语言，使得UI局部滚动不连贯、卡顿，操作不流畅，从而降低了UI的操作性，影响了使用效果。

发明内容

本发明提供一种用户界面布局方法、装置及系统，能够确保UI局部滚动的连贯、不卡顿，操作流畅，从而提高了UI的操作性。

本发明第一方面提供的用户界面布局方法，包括：

获取包含至少两个网页视图的布局信息；

根据所述布局信息，生成包含所述至少两个网页视图的UI。

结合第一方面，在第一方面第一种可能的实现方式中，所述方法还包括：

捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

结合第一方面，在第一方面第二种可能的实现方式中，当第一网页视图与第二网页视图通信时，所述方法还包括：

调用所述第一网页视图中的用户代码；

根据映射表查询到所述第二网页视图；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；

将所述用户代码传递到所述第二网页视图中；

其中，所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图。

结合第一方面第二种可能的实现方式，在第一方面第三种可能的实现方式中，当所述第一网页视图与所述第二网页视图通信时，所述方法还包括：

调用所述第一网页视图中的DOM操作代码；

根据所述映射表查询到所述第二网页视图；

将所述DOM操作代码传递到所述第二网页视图中。

结合第一方面第二种可能的实现方式和第一方面第三种可能的实现方式其中一种可能的实现方式，在第一方面第四种可能的实现方式中，所述方法还包括：

获取所述至少两个网页视图的远程调用信息；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数；

根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表。

本发明第二方面提供的用户界面布局装置，包括：

布局分析模块，用于从配置文件中获取包含至少两个网页视图的布局信息，根据所述布局信息，生成包含所述至少两个网页视图的UI。

结合第二方面，在第二方面第一种可能的实现方式中，所述布局分析模块还用于捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

结合第二方面，在第二方面第二种可能的实现方式中，所述装置还包括：

远程调用模块，用于当第一网页视图与第二网页视图通信时，调用所述第一网页视图中的用户代码，根据映射表查询到所述第二网页视图，并将所述用户代码传递到所述第二网页视图中；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图。

结合第二方面第二种可能的实现方式，在第二方面第三种可能的实现方式中，所述远程调用模块还用于当所述第一网页视图与所述第二网页视图通信时，调用所述第一网页视图中的DOM操作代码，根据所述映射表查询到所述第二网页视图，并将所述DOM操作代码传递到所述第二网页视图中。

结合第二方面第二种可能的实现方式和第二方面第三种可能的实现方式其中一种可能的实现方式，在第二方面第四种可能的实现方式中，所述远程调用模块还用于从所述配置文件中获取所述至少两个网页视图的远程调用信息，根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数。

本发明第三方面提供的用户界面布局系统，包括：服务端和网络端；

所述服务端包括：布局分析模块；

所述布局分析模块用于从配置文件中获取包含至少两个网页视图的布局信息，根据所述布局信息，生成包含所述至少两个网页视图的UI，并将所述布局信息发送到所述网络端；

所述网络端包括：布局器；

所述布局器，用于接收所述网络端发送的所述布局信息，根据所述布局信息在所述UI中布局所述至少两个网页视图。

结合第三方面，在第三方面第一种可能的实现方式中，所述布局分析模块还用于捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

结合第三方面，在第三方面第二种可能的实现方式中，所述服务端还包括：

远程调用模块，用于当第一网页视图与第二网页视图通信时，调用所述第一网页视图中的用户代码，根据映射表查询到所述第二网页视图，并将所述用户代码传递到所述第二网页视图中；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图；

所述网络端还包括：

第一调用接口模块，用于提供一个应用程序编程接口，使所述第一网页视图中的用户代码调用所述第一网页视图相对应声明的远程调用函数，并将所述用户代码传递到所述远程调用模块；

第二调用接口模块，用于从所述远程调用模块调用所述用户代码，并将所述用户代码传递到所述第二网页视图。

结合第三方面第二种可能的实现方式，在第三方面第三种可能的实现方式中，所述远程调用模块还用于当所述第一网页视图与所述第二网页视图通信时，调用所述第一网页视图中的DOM操作代码，根据所述映射表查询到所述第二网页视图，并将所述DOM操作代码传递到所述第二网页视图中；

所述第一调用接口模块，还用于提供一个应用程序编程接口，使所述第一网页视图中的用户代码调用所述第一网页视图相对应声明的远程调用函数中的DOM操作代码，并将所述DOM操作代码传递到所述远程调用模块；

所述第二调用接口模块，还用于从所述远程调用模块调用所述DOM操作代码，并将所述DOM操作代码传递到所述第二网页视图。

结合第三方面第二种可能的实现方式和第三方面第三种可能的实现方式其中一种可能的实现方式，在第三方面第四种可能的实现方式中，所述远程调用模块还用于从所述配置文件中获取所述至少两个网页视图的远程调用信息，根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数。

本发明提供的用户界面布局方法、装置及系统，通过获取至少两个WebView的布局信息，生成包含至少两个Web View的UI，可实现基于多Web View模式的Web主体型Hybrid App应用框架，对于UI局部滚动的场景，将滚动部分的UI放在一个Web View中，确保UI局部滚动的连贯、不卡顿，操作流畅，从而提高了UI的操作性。

附图说明

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

图1为现有技术中多View混合型的视图展示示意图；

图2A为现有技术中单View混合型的一种视图展示示意图；

图2B为现有技术中单View混合型的另一种视图展示示意图；

图3为现有技术中Web主体型的视图展示示意图；

图4为现有技术中Web主体型的存在UI局部滚动的页面展示示意图；

图5为本发明实施例一提供的用户界面布局方法流程图；

图6为本发明实施例一提供的多Web View视图展示示意图；

图7为本发明实施例二提供的用户界面布局方法流程图；

图8为本发明实施例二提供的用户界面变化时布局过程示意图；

图9为本发明实施例三提供的用户界面布局方法流程图；

图10为本发明实施例三提供的两个Web View的通信过程示意图；

图11为本发明实施例四提供的用户界面布局方法流程图；

图12为本发明实施例一提供的用户界面布局装置的结构示意图；

图13为本发明实施例二提供的用户界面布局装置的结构示意图；

图14为本发明实施例一提供的用户界面布局系统的结构示意图；

图15为本发明实施例二提供的用户界面布局系统的结构示意图。

具体实施方式

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

应用程序(Application，简称APP)是智能手机或平板电脑等智能移动终端上的应用软件，现阶段APP主要指创建运行在智能手机或平板电脑等智能移动终端的第三方应用程序。随着智能手机和平板电脑等智能移动终端的发展，移动应用的数量越来越多，APP的类型也越来越多。

现阶段APP主要为原生(Native)APP、网页(Web)APP和混合(Hybrid)APP三大类，Native APP是基于智能手机或平板电脑本地操作系统并使用原生程序语言编写运行的第三方应用程序，Native APP是为某种操作系统开发的，比如苹果移动设备操作系统(iOS)、安卓移动设备操作系统(Android)等等。Native APP是在各自的移动设备上运行的，需要客户安装，可以访问手机所有功能，速度快、性能高，但是开发成本高，支持设备非常有限，一般是哪个系统就在哪个平台专属设备上用，比如，iOS的Native APP就只能在苹果(iPhone)平台专属设备上用，Android的Native APP就只能在安卓平台专属设备上用；Web APP是基于智能手机或平板电脑网页浏览器并使用网页开发语言编写运行的第三方应用程序，Web APP可以在各种智能手机或平板电脑的网页浏览器上运行，不需要用户安装，开发成本较低，支持设备广泛，可跨平台使用，比如，Web APP既可以在苹果平台专属设备上用，也可以在安卓平台专属设备上用，但是Web APP对网络要求比较大，访问速度较慢、性能较差；Hybrid App是指介于Native APP和Web APP两者之间的App，使用的是网页(Web)开发语言与原生(Native)程序语言的混合。Hybrid App虽然看上去是一个Native App，但只有一个用户界面(User Interface，简称UI)网页视图(Web View)，里面访问的是一个Web App。Hybrid App是通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用，兼具了Native App的所有优势，也兼具了Web App跨平台开发低成本的优势。

由于Hybrid App兼具了Native App的所有优势，也兼具了Web App跨平台开发低成本的优势，Hybrid App是现阶段移动应用的开发最主要的应用程序。Hybrid App通常分为多视图(View)混合型、单View混合型和Web主体型三大类。图1为现有技术中多View混合型的视图展示示意图，如图1所示，多View混合型是本地视图(Native View)和Web View在不同的页面(page)中交替的场景出现，Native View和Web View分别在page1和page2中展示，交替出现。多View混合型应用混合逻辑相对简单，即在需要的时候，将Web View当成一个独立的View或屏幕(Activity)运行起来，在Web View内完成相关的展示操作。多View混合型模式下，移动应用主体主要是NativeApp，Web技术只是起到补充作用。Native view与Web View之间相互独立，没有交互。图2A为现有技术中单View混合型的一种视图展示示意图，图2B为现有技术中单View混合型的另一种视图展示示意图，如图2A和图2B所示，单View混合型是在同一个Page内同时包括Native View和Web View，Native View和Web View相互之间是覆盖(层叠)的关系。单View混合型模式下，Native View与Web View之间通常需要交互。图3为现有技术中Web主体型的视图展示示意图，如图3所示，Web主体型是一个页面中只有一个Web View，在一个Web View内完成相关的展示操作。Web主体型模式下，移动应用主体主要是Web View，主要使用网页开发语言编写，穿插Native的功能。

然而，图1中多View混合型模式下移动应用主体主要是Native App，Web技术只是起到补充作用，以及图2A和图2B中单View混合型模式下Native View与Web View之间通常需要交互。因此，多View混合型和单View混合型模式下均存在Native view部分，开发难度较大，且无法实现跨平台。图3中Web主体型移动应用的主体是Web View，且可以穿插Native的功能，整体开发难度降低，并且基本可以实现跨平台。但是Web主体型模式下一个页面中只有一个Web View，由于Web View本身是一个Native控件，作为一个整体页面整体滚动，也即一个Web View只能实现UI的整体滚动，对于存在UI局部滚动等操作时，图4为现有技术中Web主体型的存在UI局部滚动的页面展示示意图，如图4所示，一个页面中只有一个Web View，当图4存在虚线中的UI局部滚动等操作时，需要加载网页开发语言，使得UI局部滚动不连贯、卡顿，操作不流畅，从而降低了UI的操作性，影响了使用效果。

本发明所要解决的技术问题是如何基于开发难度低、可以跨平台的应用，实现UI具有较好的操作性，尤其是UI局部滚动时，如何避免UI局部滚动的不连贯、卡顿，操作不流畅。

本发明的主要思想是提供一种用户界面布局方法、装置及系统，根据WebView的布局信息，生成包含多个Web View的UI。一个UI中包含多个WebView，可实现基于多Web View模式的Web主体型Hybrid App应用框架，开发难度低，且可以实现跨平台；同时，采用多个Web View，对于UI局部滚动的场景，将滚动部分的UI放在一个Web View中，确保UI局部滚动的连贯、不卡顿，操作流畅，提高UI的操作性。

图5为本发明实施例一提供的用户界面布局方法流程图。如图5所示，本实施例提供的用户界面布局方法包括：

S501：获取包含至少两个网页视图的布局信息。

具体的，Hybrid App框架主要分为本地(Native)层和网页(Web)层，在Hybrid App框架Native层中，应用程序启动时，布局分析模块从配置文件配置的多个网页视图(Web View)的布局配置信息中获取多个Web View的布局信息。

需要说明的是，配置文件是根据应用程序的特点配置多个Web View的布局配置信息。举例来说，如果应用程序中一个UI包含三个Web View，配置文件根据三个Web View的尺寸和位置等信息，配置三个Web View的布局信息。如果应用程序中一个UI包含四个Web View，配置文件根据四个Web View的尺寸和位置等信息，配置四个Web View的布局信息。

S502：根据布局信息，生成包含至少两个网页视图的UI。

具体的，Hybrid App框架Native层原生开发，提供了布局能力，在HybridApp框架Native层中，布局分析模块根据获取的多个Web View的布局信息，将多个Web View放在一个UI，实现对多个Web View的布局。图6为本发明实施例一提供的多Web View视图展示示意图，如图6所示，一个UI中可包括多个Web View，通过对应用页面的合理划分，分别采用不同的Web View渲染。

同时，布局分析模块将获取的多个Web View的布局信息发送到Web层。Web层中的布局器接收多个Web View的布局信息，根据接收的多个Web View的布局信息在UI中布局至少两个网页视图。

需要说明的是，Web View是一个用来显示网页页面的视图，网页浏览器内核排版渲染出来的画面会在Web View上显示出来，用户通过移动终端网页浏览器所看到的网页内容都是在Web View上显示。网页浏览器内核负责对网页进行加载和显示，是网页浏览器的核心。

其中，Native层的多个Web View的布局生成是由Hybrid App框架提供的，可实现基于多Web View模式的Web主体型Hybrid App应用框架，开发难度低，且可以实现跨平台。同时，一个UI中包括多个Web View后，对于存在UI局部滚动操作时，将UI局部滚动部分放在一个Web View中，当UI局部滚动部分放在一个Web View中后，UI局部滚动就变成了一个Web View的原生滚动，而不需要加载网页开发语言，就使得UI局部滚动不会不连贯和卡顿，且操作流畅，提高了UI的操作性，达到了使用效果最佳。

本实施例提供的用户界面布局方法，通过获取至少两个Web View的布局信息，生成包含至少两个Web View的UI，可实现基于多Web View模式的Web主体型Hybrid App应用框架，对于UI局部滚动的场景，将滚动部分的UI放在一个Web View中，确保UI局部滚动的连贯、不卡顿，操作流畅，从而提高了UI的操作性。

图7为本发明实施例二提供的用户界面布局方法流程图。如图7所示，图7是在图5所示实施例的基础上，进一步地还包括：

S701：捕获UI动态变化信息。

具体的，当UI发生变化时，在Hybrid App框架Native层中，布局分析模块捕获当前UI的动态变化信息。比如用户点击了可输入区，弹出输入法时，使得当前UI发生了变化，则Hybrid App框架Native层中布局分析模块捕获当前UI的动态变化信息。

S702：根据UI动态变化信息重新布局UI。

其中，在上述实施例基础上，Hybrid App框架Native层原生开发能够实现在一个UI中对多个Web View的布局，但是当当前UI变化时，需要捕获当前UI动态变化信息，对当前UI也即多个Web View布局位置重新布局。

具体的，当UI动态变化时，布局分析模块根据捕获的当前UI的动态变化信息，在Hybrid App框架Native层中重新布局UI，也即，在Hybrid App框架Native层中重新布局多个Web View的布局位置。

举例来说，当用户触摸UI的可输入区，比如文本编辑框，系统(IOS或Android)自动弹出输入法软键盘，并显示在屏幕的底部，但是系统无法保证可输入区弹出的输入法软键盘处在合适的位置。图8为本发明实施例二提供的用户界面变化时布局过程示意图。如图8所示，当用户触摸UI的可输入区，弹出输入法软键盘时，导致当前的具体过程为：(a)布局分析模块从配置文件中获取多个Web View的布局信息；(b)布局分析模块根据获取的布局信息，生成包含多个Web View的UI；(c)当用户触摸UI的可输入区，比如文本编辑框，系统弹出输入法软键盘；(d)当输入法软键盘弹出时，当前UI布局发生变化，布局分析模块捕获当前UI动态变化信息；(e)布局分析模块根据当前UI动态变化信息，计算弹出输入法软键盘所占当前UI屏幕的位置高度，得出当前UI剩下屏幕的高度，并将当前UI剩下屏幕的高度与用户触摸点的坐标比较，若果用户触摸点坐标处在弹出输入法键盘覆盖的区域，则将多个Web View构成的UI整体向上移动到用户触摸点坐标在当前UI剩余屏幕高度的中间位置。

本实施例提供的用户界面布局方法，在上述实施例的基础上，通过捕获UI动态变化信息，根据UI动态变化信息重新布局UI，可根据UI动态变化对多个Web View构成的UI重新布局，使得多个Web View构成的UI布局可以随着UI动态变化而变化，确保多个Web View构成的UI布局更准确合理。

图9为本发明实施例三提供的用户界面布局方法流程图。如图9所示，图9是在图5至图8所示实施例的基础上，当第一网页视图与第二网页视图通信时，进一步地还包括：

S901：调用第一网页视图中的用户代码。

其中，在传统Web主体型的Hybrid APP中，通常是只有一个Web View，因此也被称为一个页面一个应用程序(One Page One App，简称OPOA)。但是本实施例在采用了多个Web View的方案时，对开发人员在代码组织和编写方面造成了较大的影响，因此在本实施例中需要解决多个Web View之间的通信，并且基本不改变开发人员在编写用户代码调用的方式，同时消除多个WebView对开发人员带来的影响。

需要说明的是，Web View是一个用来显示网页页面的视图，大部分网页为超文本标记语言(Hypertext Markup Language，简称HTML)格式，目前最主要采用的是应用超文本标记语言的第五次重大修改(HTML5)。HTML是用于描述网页文档的一种标记语言，HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉网页浏览器如何显示其中的内容，比如：文字如何处理，画面如何安排，图片如何显示等。在HTML嵌入Java脚本语言(JavaScript，简称JS)，可以对HTML控件做动态控制，为用户提供更流畅美观的网页浏览效果。JS是一种广泛用于客户端Web开发的脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给网页浏览器由网页浏览器解释运行，常用来给HTML网页添加动态功能，编写JS的代码称为JS代码。

具体的，当多个Web View中的第一网页视图(Web View1)与第二网页视图(Web View2)通信时，在Hybrid App框架Native层中，远程调用模块调用第一网页视图中的用户代码。

S902：根据映射表查询到第二网页视图。

其中，映射表中包含第一网页视图和第一网页视图相对应声明的远程调用函数。

具体的，在Hybrid App框架Native层中，远程调用模块构造有多个网页视图和多个网页视图相对应声明的远程调用函数的映射表。当多个Web View中的第一网页视图(Web View1)与第二网页视图(Web View2)通信时，映射表中包含有Web View1和Web View1相对应声明的远程调用函数的映射表，根据映射表可以查询到Web View1和Web View1相对应声明的远程调用函数的映射表，从而可以查询到与Web View1对应的Web View2。

S903：将用户代码传递到第二网页视图中。

其中，第一网页视图是至少两个网页视图中任一个网页视图，第二网页视图是至少两个网页视图中与第一网页视图相对应的网页视图。

具体的，在Hybrid App框架Native层中，远程调用模块通过查询映射表后，将Web View1中的用户代码传递到Web View2中。

具体的，图10为本发明实施例三提供的两个Web View的通信过程示意图。如图10所示，当多个Web View中的第一网页视图Web View1与第二网页视图Web View2通信时，具体过程为：(1)Native层中远程调用模块从配置文件中获取Web View1信息和Web View1声明的远程调用函数，并构造一个Web View1与Web View1声明的远程调用函数的映射表；(2)Web层中Web View1中用户代码调用第一调用接口模块提供的接口，执行Web View1声明的远程调用函数调用，并通过第一调用接口模块将用户代码传递给远程调用模块；(3)Native层中远程调用模块从第一调用接口模块中调用WebView1中的用户代码，实现将Web View1中的用户代码从JS代码调用到Native代码；(4)Native层中远程调用模块根据构造的映射表，查询到Web View1对应的Web View2，并将Web View1中的用户代码传递给第二调用接口模块，实现将Web View1中的用户代码从Native代码调用到JS代码；(5)Web层Web View2中的用户代码通过第二调用接口模块调用Web View1中的用户代码，并执行用户代码中的声明函数，调用用户代码中的声明函数。

需要说明的是，第一调用接口模块和第二调用接口模块分别是对JS提供封装的一个应用程序编程接口(Application Programming Interface，简称API)，并借助快速开发平台(PhoneGap)实现JS代码到Native代码的调用，或者Native代码到JS代码的调用，其中，PhoneGap是一款开源的开发框架，是一个基于HTML、JS等，创建移动跨平台移动应用程序的快速开发平台。实现JS代码到Native代码的调用和Native代码到JS代码的调用并不仅限于采用开源的PhoneGap，也可以采用其他方案，本实施例在此不再赘述。

Hybrid App使用的是网页开发语言与原生程序语言的混合编写运行，原生程序语言就是开发整个系统时使用的编程语言，编写原生程序语言的代码称为Native代码。

本实施例提供的用户界面布局方法，在上述实施例的基础上，通过调用第一网页视图中的用户代码，根据映射表查询到第二网页视图，将用户代码传递到第二网页视图中，可以实现多个Web View之间的通信，并且基本不改变开发人员在编写用户代码调用的方式，消除多个Web View对开发人员带来的影响。

进一步地，在图9所示实施例中，还包括：

获取至少两个网页视图的远程调用信息。

其中，远程调用信息包括：至少两个网页视图信息和至少两个网页视图信息相对应声明的远程调用函数。

根据远程调用信息，构造至少两个网页视图和至少两个网页视图相对应声明的远程调用函数的映射表。

具体的，远程调用模块从配置文件配置的多个Web View的远程调用配置信息中获取多个Web View的远程调用信息，并根据远程调用信息，构造多个Web View和多个Web View相对应声明的远程调用函数的映射表。

需要说明的是，配置文件是根据应用程序的特点配置多个Web View的远程调用信息。举例来说，应用程序中一个UI包含三个Web View，配置文件根据三个Web View的通信配置远程调用信息。假设三个Web View分别为第一网页视图(Web View1)、第二网页视图(Web View2)和第三网页视图(WebView3)，如果Web View1需要分别与Web View2、Web View3通信，配置文件会将Web View1信息，以及Web View1分别与Web View2、Web View3之间声明的远程调用函数信息作为配置的远程调用信息。如果Web View2需要与Web View3通信，配置文件会将Web View2信息，以及Web View2与WebView3之间声明的远程调用函数信息作为配置的远程调用信息。

图11为本发明实施例四提供的用户界面布局方法流程图。如图11所示，图11是在图5至图10所示实施例的基础上，当第一网页视图与第二网页视图通信时，进一步地还包括：

S1101：调用第一网页视图中的DOM操作代码。

其中，Web层网页浏览器在获取了网页数据后，通过注入JS或者通过其他途径对文档对象模型(HTML Document Object Model，简称DOM)树进行修改，通过对DOM树的修改，修改网页的展示效果和功能，达到定制的目的。在传统Web主体型的Hybrid APP中，通常是只有一个Web View，且一个Web View只能操作自己的DOM，通过JS操作DOM代码实现一个WebView操作自己的DOM。但是本实施例在采用了多个Web View的方案，对开发人员在代码组织和编写方面造成了较大的影响，因此在上述实施例的基础上，本实施例中还需要解决多个Web View之间的通信时一个Web View操作另一个Web View的DOM，并且不改变开发人员在编写用户代码调用的方式。

需要说明的是，DOM是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。DOM是页面上数据和结构的一个树形表示，通过JS可以重构整个HTML文档，进而操作DOM。可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JS就需要获得对HTML文档中所有元素进行访问的入口。HTML文档中所有元素进行访问的入口，以及对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过操作DOM来获得的。

具体的，当多个Web View中的第一网页视图(Web View1)与第二网页视图(Web View2)通信时，在Hybrid App框架Native层中，远程调用模块调用第一网页视图中的DOM操作代码。

S1102：根据映射表查询到第二网页视图。

具体的，在Hybrid App框架Native层中，远程调用模块构造有多个网页视图和多个网页视图相对应声明的远程调用函数的映射表。

S1103：将DOM操作代码传递到第二网页视图中。

具体的，在Hybrid App框架Native层中，远程调用模块通过查询映射表后，将Web View1中的DOM操作代码传递到Web View2中。

具体的，参照图10，当多个Web View中的第一网页视图Web View1与第二网页视图Web View2通信时，具体过程为：(1)Native层中远程调用模块从配置文件中获取Web View1信息和Web View1声明的远程调用函数，并构造一个Web View1与Web View1声明的远程调用函数的映射表；(2)Web层中Web View1中用户代码调用第一调用接口模块提供的接口，执行WebView1声明的远程调用函数调用，操作Web View1声明的远程调用函数中的DOM结构，传入DOM操作代码，并通过第一调用接口模块将DOM操作代码传递给远程调用模块；(3)Native层中远程调用模块从第一调用接口模块中调用Web View1中的DOM操作代码，实现将Web View1中的用户代码从JS代码调用到Native代码；(4)Native层中远程调用模块根据构造的映射表，查询到Web View1对应的Web View2，并将Web View1中的DOM操作代码传递给第二调用接口模块，实现将Web View1中的DOM操作代码从Native代码调用到JS代码；(5)Web层Web View2中的用户代码通过第二调用接口模块调用Web View1中的DOM操作代码，并执行DOM操作代码，操作DOM。

本实施例提供的用户界面布局方法，在上述实施例的基础上，通过调用第一网页视图中的DOM操作代码，根据映射表查询到第二网页视图，将DOM操作代码传递到第二网页视图中，可以实现多个Web View之间的通信时一个Web View操作另一个Web View的DOM，实现一个Web View操作另一个Web View的网页展示效果和功能，并且不改变开发人员在编写用户代码调用的方式。

图12为本发明实施例一提供的用户界面布局装置的结构示意图。如图12所示，本实施例提供的用户界面布局装置，包括：

布局分析模块121，用于从配置文件1211中获取包含至少两个网页视图的布局信息，根据布局信息，生成包含至少两个网页视图的UI。

本实施例的用户界面布局装置用于执行图5所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

进一步地，在图12所示实施例中，布局分析模块121还用于捕获UI动态变化信息。

根据UI动态变化信息重新布局UI。

图13为本发明实施例二提供的用户界面布局装置的结构示意图。如图13所示，在上述实施例的基础上，本实施例提供的用户界面布局装置，还包括：

远程调用模块122，用于当第一网页视图与第二网页视图通信时，调用第一网页视图中的用户代码，根据映射表查询到第二网页视图，并将用户代码传递到第二网页视图中。

其中，映射表中包含第一网页视图和第一网页视图相对应声明的远程调用函数；第一网页视图是至少两个网页视图中任一个网页视图，第二网页视图是至少两个网页视图中与第一网页视图相对应的网页视图。

本实施例的用户界面布局装置用于执行图9所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

进一步地，在图13所示实施例中，程调用模块122还用于当第一网页视图与第二网页视图通信时，调用第一网页视图中的DOM操作代码，根据映射表查询到第二网页视图，并将DOM操作代码传递到第二网页视图中。

进一步地，在图13所示实施例中，远程调用模块122还用于从配置文件1211中获取至少两个网页视图的远程调用信息，根据远程调用信息，构造至少两个网页视图和至少两个网页视图相对应声明的远程调用函数的映射表。

其中，远程调用信息包括：至少两个网页视图信息和至少两个网页视图信息相对应声明的远程调用函数。

图14为本发明实施例一提供的用户界面布局系统的结构示意图。如图14所示，本实施例提供的用户界面布局系统，包括：服务端(Native层)和网络端(Web层)。

服务端包括：布局分析模块141。

布局分析模块141用于从配置文件1411中获取包含至少两个网页视图的布局信息，根据布局信息，生成包含至少两个网页视图的UI，并将布局信息发送到网络端；

网络端包括：布局器142。

布局器142，用于接收网络端发送的布局信息，根据布局信息在UI中布局至少两个网页视图。

需要说明的是，布局分析模块141生成的多个网页视图，以及布局器142布局的多个网页视图均可以标记为网页视图1、网页视图2……网页视图n，也可以标记为第一网页视图、第二网页视图……第n网页视图，本实施例在此不进行限定。其中，n为正整数，表示生成的网页视图的个数。

本实施例中用户界面布局系统的服务端和网络端包括的功能模块用于执行图5所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

进一步地，在图14所示实施例中，布局分析模块141还用于捕获UI动态变化信息。

根据UI动态变化信息重新布局UI。

图15为本发明实施例二提供的用户界面布局系统的结构示意图。如图15所示，在上述实施例的基础上，服务端还包括：

远程调用模块143，用于当第一网页视图与第二网页视图通信时，调用第一网页视图中的用户代码，根据映射表查询到第二网页视图，并将用户代码传递到第二网页视图中。

其中，映射表中包含第一网页视图和第一网页视图相对应声明的远程调用函数；第一网页视图是至少两个网页视图中任一个网页视图，第二网页视图是至少两个网页视图中与第一网页视图相对应的网页视图。

网络端还包括：

第一调用接口模块144，用于提供一个应用程序编程接口，使第一网页视图中的用户代码调用第一网页视图相对应声明的远程调用函数，并将用户代码传递到远程调用模块143；

第二调用接口模块145，用于从远程调用模块143调用用户代码，并将所述用户代码传递到第二网页视图。

本实施例中用户界面布局系统的服务端和网络端包括的功能模块用于执行图9所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

进一步地，在图15所示实施例中，远程调用模块143还用于当第一网页视图与第二网页视图通信时，调用第一网页视图中的DOM操作代码，根据映射表查询到第二网页视图，并将DOM操作代码传递到第二网页视图中。

第一调用接口模块144，还用于提供一个应用程序编程接口，使第一网页视图中的用户代码调用第一网页视图相对应声明的远程调用函数中的DOM操作代码，并将DOM操作代码传递到远程调用模块143；

第二调用接口模块145，还用于从远程调用模块143调用DOM操作代码，并将所述DOM操作代码传递到第二网页视图。

进一步地，在图15所示实施例中，远程调用模块143还用于从配置文件1411中获取至少两个网页视图的远程调用信息，根据远程调用信息，构造至少两个网页视图和至少两个网页视图相对应声明的远程调用函数的映射表。

其中，远程调用信息包括：至少两个网页视图信息和至少两个网页视图信息相对应声明的远程调用函数。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使对应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (15)

1.一种用户界面布局方法，其特征在于，包括：

获取包含至少两个网页视图的布局信息；

根据所述布局信息，生成包含所述至少两个网页视图的用户界面UI。

2.根据权利要求1所述的用户界面布局方法，其特征在于，所述方法还包括：

捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

3.根据权利要求1所述的用户界面布局方法，其特征在于，当第一网页视图与第二网页视图通信时，所述方法还包括：

调用所述第一网页视图中的用户代码；

根据映射表查询到所述第二网页视图；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；

将所述用户代码传递到所述第二网页视图中；

其中，所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图。

4.根据权利要求3所述的用户界面布局方法，其特征在于，当所述第一网页视图与所述第二网页视图通信时，所述方法还包括：

调用所述第一网页视图中的文档对象模型DOM操作代码；

根据所述映射表查询到所述第二网页视图；

将所述DOM操作代码传递到所述第二网页视图中。

5.根据权利要求3或4所述的用户界面布局方法，其特征在于，所述方法还包括：

获取所述至少两个网页视图的远程调用信息；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数；

根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表。

6.一种用户界面布局装置，其特征在于，包括：

布局分析模块，用于从配置文件中获取包含至少两个网页视图的布局信息，根据所述布局信息，生成包含所述至少两个网页视图的用户界面UI。

7.根据权利要求6所述的用户界面布局装置，其特征在于，所述布局分析模块还用于捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

8.根据权利要求6所述的用户界面布局装置，其特征在于，所述装置还包括：

远程调用模块，用于当第一网页视图与第二网页视图通信时，调用所述第一网页视图中的用户代码，根据映射表查询到所述第二网页视图，并将所述用户代码传递到所述第二网页视图中；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图。

9.根据权利要求8所述的用户界面布局装置，其特征在于，所述远程调用模块还用于当所述第一网页视图与所述第二网页视图通信时，调用所述第一网页视图中的文档对象模型DOM操作代码，根据所述映射表查询到所述第二网页视图，并将所述DOM操作代码传递到所述第二网页视图中。

10.根据权利要求8或9所述的用户界面布局装置，其特征在于，所述远程调用模块还用于从所述配置文件中获取所述至少两个网页视图的远程调用信息，根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数。

11.一种用户界面布局系统，其特征在于，包括：服务端和网络端；

所述服务端包括：布局分析模块；

所述布局分析模块用于从配置文件中获取包含至少两个网页视图的布局信息，根据所述布局信息，生成包含所述至少两个网页视图的用户界面UI，并将所述布局信息发送到所述网络端；

所述网络端包括：布局器；

所述布局器，用于接收所述网络端发送的所述布局信息，根据所述布局信息在所述UI中布局所述至少两个网页视图。

12.根据权利要求11所述的用户界面布局系统，其特征在于，所述布局分析模块还用于捕获所述UI动态变化信息；

根据所述UI动态变化信息重新布局所述UI。

13.根据权利要求11所述的用户界面布局系统，其特征在于，所述服务端还包括：

远程调用模块，用于当第一网页视图与第二网页视图通信时，调用所述第一网页视图中的用户代码，根据映射表查询到所述第二网页视图，并将所述用户代码传递到所述第二网页视图中；

其中，所述映射表中包含所述第一网页视图和所述第一网页视图相对应声明的远程调用函数；所述第一网页视图是所述至少两个网页视图中任一个网页视图，所述第二网页视图是所述至少两个网页视图中与所述第一网页视图相对应的网页视图；

所述网络端还包括：

第一调用接口模块，用于提供一个应用程序编程接口，使所述第一网页视图中的用户代码调用所述第一网页视图相对应声明的远程调用函数，并将所述用户代码传递到所述远程调用模块；

第二调用接口模块，用于从所述远程调用模块调用所述用户代码，并将所述用户代码传递到所述第二网页视图。

14.根据权利要求13所述的用户界面布局系统，其特征在于，所述远程调用模块还用于当所述第一网页视图与所述第二网页视图通信时，调用所述第一网页视图中的文档对象模型DOM操作代码，根据所述映射表查询到所述第二网页视图，并将所述DOM操作代码传递到所述第二网页视图中；

所述第一调用接口模块，还用于提供一个应用程序编程接口，使所述第一网页视图中的用户代码调用所述第一网页视图相对应声明的远程调用函数中的文档对象模型DOM操作代码，并将所述DOM操作代码传递到所述远程调用模块；

所述第二调用接口模块，还用于从所述远程调用模块调用所述DOM操作代码，并将所述DOM操作代码到所述第二网页视图。

15.根据权利要求13或14所述的用户界面布局系统，其特征在于，所述远程调用模块还用于从所述配置文件中获取所述至少两个网页视图的远程调用信息，根据所述远程调用信息，构造所述至少两个网页视图和所述至少两个网页视图相对应声明的远程调用函数的映射表；

其中，所述远程调用信息包括：所述至少两个网页视图信息和所述至少两个网页视图信息相对应声明的远程调用函数。