CN105549806A - 混合型客户端界面实现方法及其*** - Google Patents

Abstract

本发明涉及数据显示技术，公开了一种混合型客户端界面实现方法及其***。本发明中，将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示，然后将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。此外，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。

Description

混合型客户端界面实现方法及其***

技术领域

本发明涉及数据显示技术，特别涉及混合型客户端界面实现方法及其***。

背景技术

为了更好的适应不同的需求，可以在一个客户端界面中嵌入多个页面片段来提升客户端界面的灵活度。

通常，一个webview组件用于承载一个页面片段。那么如图1所示，如果要实现不连续的页面片段在同一客户端界面显示，则必须要使用多个webview组件。然而，本发明的发明人发现，webview组件本身比较消耗资源(加载页面、获取数据、渲染页面)，如果过多的使用webview组件必会带来性能、体验上的下降，例如消耗内存造成卡或是加载时间长等等。

发明内容

本发明的目的在于提供一种混合型客户端界面实现方法及其***，在确保客户端界面的灵活度的同时，不会影响客户端的用户体验。

为解决上述技术问题，本发明的实施方式公开了一种混合型客户端界面实现方法，该客户端界面中包括至少两个页面片段和至少一个本地组件，该方法包括以下步骤：

生成一个浏览器组件和至少一个本地组件；

将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧；

将本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。

本发明的实施方式还公开了一种混合型客户端界面实现***，该客户端界面中包括至少两个页面片段和至少一个本地组件，该***包括：

生成模块，用于生成一个浏览器组件和至少一个本地组件；

组合模块，用于将至少两个页面片段组合成一个页面；

加载模块，用于控制生成模块生成的浏览器组件加载和显示组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧；以及

叠加模块，用于将生成模块生成的本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。

本发明实施方式与现有技术相比，主要区别及其效果在于：

在本发明中，将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示，然后将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。

进一步地，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。

进一步地，更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力。

进一步地，能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。

附图说明

图1是现有的客户端界面的结构示意图；

图2是现有的客户端界面实现方法的流程示意图；

图3是本发明第一实施方式中一种混合型客户端界面实现方法的流程示意图；

图4A-4C分别是本发明第一实施方式中一种混合型客户端界面的结构示意图；

图5是本发明第二实施方式中一种混合型客户端界面的结构示意图；

图6是本发明第二实施方式中一种混合型客户端界面实现方法的流程示意图；

图7是本发明第三实施方式中一种混合型客户端界面实现***的结构示意图。

具体实施方式

在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请各权利要求所要求保护的技术方案。

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明的实施方式作进一步地详细描述。

本发明第一实施方式涉及一种混合型客户端界面实现方法。图3是该混合型客户端界面实现方法的流程示意图。该客户端界面中包括至少两个页面片段和至少一个本地组件。可以理解，本地组件是在客户端本地实现界面的预制组件，包括编辑组件(Memo)、下拉框组件(Combobox)、多选框组件、单选框组件、输入框组件(Edit)、标签组件(Label)等等，但不包括浏览器组件。

该方法包括以下步骤：

在步骤301中，生成一个浏览器组件和至少一个本地组件。

此后进入步骤302，将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧。例如，如图4A所示，页面片段1和页面片段2分别在本地组件2的上下侧；或是如图4B所示，页面片段1、页面片段2和页面片段3分别在本地组件2的上侧、下侧和右侧；又或是如图4C所示，页面片段1、页面片段2和页面片段3分别在本地组件2的左侧、右侧和下侧等等。

优选地，各页面片段具有不同业务内容。能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。

此外，可以理解，在本发明的其他实施方式中，各页面片段也可以是相同业务内容。

此后进入步骤303，将本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。在本发明的一个优选例中，将本地组件叠加于浏览器组件上方的指定位置是指：将浏览器组件中显示的页面作为背景，本地组件叠加在浏览器组件之上(遮盖掉浏览器组件的一部分)。

此后结束本流程。

在本实施方式中，将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示，将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。

本发明第二实施方式涉及一种混合型客户端界面实现方法。

第二实施方式在第一实施方式的基础上进行了改进，主要改进之处在于：根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。具体地说：

在步骤303之后还包括以下步骤：

根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小。

可以理解，在本发明的其他实施方式中，也可以根据浏览器组件中页面片段的位置和/或大小来调整本地组件的位置，或者可以同时调整本地组件的位置和浏览器组件中页面片段的位置和/或大小。

优选地，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小的步骤中包括以下子步骤：

判断本地组件的位置与页面片段的位置是否重叠或是否符合预定义的阈值；

若本地组件的位置与页面片段的位置重叠或不符合预定义的阈值，则对页面片段的位置和/或大小进行相应调整。

可以理解，与传统的直接将本地组件和浏览器组件加载的网页页面一个个排布到客户端界面上不同，由于本实施方式将多个页面片段组合成一个页面，并由浏览器组件加载和显示，然后在该浏览器组件上方叠加本地组件，因此需要对页面片段的位置和/或大小以及本地组件的位置进行调整，以使其均匀分布(例如页面片段与组件间隙在一范围内，不能太大，也不能太小)。

可选地，调整参数包括坐标和尺寸等等。可以理解，必要时，在调整其中一个页面片段的同时，调整与该页面片段相关联的其他页面片段。当然，在本发明的其他实施方式中，也可以使用其他参数对页面片段和本地组件进行调整。

作为可选实施方式，该方法还可以包括以下步骤：

需要更新客户端界面时，将至少两个页面片段组合成一个新的页面，并由浏览器组件加载和显示。

更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力

此外，可以理解，可以只对其中的部分页面片段进行更新，也可以对所有页面片段进行更新。必要时，根据已叠加的本地组件调整页面片段的位置和/或大小，或甚至是重新叠加本地组件于浏览器组件上方。

优选地，若页面的url(统一资源定位)地址不变，但是内容发生变更了，这样客户端会去检查加载的内容是否和缓存里的一致，如果不一致则进行更新；若页面变更后url发生变化，那客户端会去重新加载新的资源。

如图1所示，客户端界面上具有四个区块，每个区块表示一个可视化的页面组件(view)，其可以由native组件(本地组件)或由webview组件(浏览器组件)加载页面来实现，可以看到图1分别示出了native1、webview1、native2、webview2组件。其中，webview组件为客户端上的用于加载页面的可视化组件，在webview组件中加载的html中的内容(在html动态区块中的页面片段)的位置可以通过js(javascript脚本语言)来控制，并且native组件也可以通过js来控制html中的内容(位置、大小、背景等等)。这样，可以任意的控制客户端界面上不同区块的位置。

通常是将各页面组件按顺序布局到客户端界面上，如图2所示，先渲染native1组件，放到布局中；接着使用webview1组件加载h5(html5)页面片段，加载到布局；然后渲染native2组件，放到布局中；最后使用webview2组件加载h5页面片段，加载到布局以形成客户端界面。这样，如果有n个h5页面片段，客户端就需要创建n个webview组件，加载n个页面片段，初始化和渲染n个页面片段。由于webview组件本身就比较消耗资源，所以这样的做法有比较严重的性能问题，目前我们只能尽量的少使用webview组件来减少性能的影响，因此失去了不少灵活性。

而在本发明的一个优选例中，使用单个webview组件来承载任意个、任意位置的html动态区块(例如图5中所示的html动态区块1、html动态区块2)中的页面片段，native组件叠加于其上以形成客户端界面。具体地，如图5和图6所示，客户端先将一个webview组件加载的页面作为背景放在客户端界面里；然后客户端根据业务规则将不同的native组件(例如native1组件和native2组件)定位到屏幕的固定位置(遮盖掉webview组件的一部分)；最后如有必要或者改变，native组件可以根据当前的位置通知webview组件中的页面片段进行调整(位置，大小等)。

表1通常方法与本发明方法的比较

我们将上述通常方法与本发明方法在表1中进行了比较，可以看到，本发明方法能够很好的提高客户端的灵活度又不失性能。

也就是说，客户端通过一个背景的webview组件来加载响应的h5页面片段集合(即由这些h5页面片段组合的一个页面)，并把由这些h5页面片段组合的一个页面添加到客户端界面(例如手机视图window)的最底层。n个h5页面片段都在一个html的页面当中，它们的布局是可以随native组件的位置进行相应调整。因此，只需要加载和渲染一次html就可以了。客户端渲染native组件，按照位置约定覆盖到背景(即最底层)的webview组件上，重复该步骤依次添加native组件到响应的位置上。

然后，native组件和h5页面片段进行通讯，从而判断h5页面片段的位置是否要进行相应的调整。可以理解，h5页面片段可以通过jsbridge的应用编程接口(ApplicationProgrammingInterface，简称“API”)与native组件进行通讯，native组件可以通过webview组件的相关API与h5页面片段进行通讯，从而可以实现native组件和h5页面片段的双向通讯。具体地，可以把覆盖在webview组件上的native组件的位置传递给h5页面片段，将native组件的位置和当前的h5页面片段位置进行比较；如果需要调整，则通过javascript操作当前的h5页面片段，进行调整。

因为native组件是覆盖在webview组件的上面，native组件的位置可能和html动态区块的位置有些重叠或者不是非常合适，所以根据native组件的位置可以动态的跳转h5页面片段的坐标和长宽等。具体过程主要如下：

1.计算当前native组件的位置信息；

2.通过webview组件的API，把对应的native组件信息及相应的位置信息报告给webview组件中的h5页面片段；

3.得到native组件的相关信息后，使用js对比当前的h5页面片段的位置信息，计算出需要改变的尺寸或坐标；

4.通过js操作h5页面片段，进行相应的位置和大小调整。

由上可以看到，webview组件和native组件通常视为一个层面上的页面组件，若要显示在native组件两侧的页面片段时，往往需要利用多个webview组件加载多个页面片段来实现与native组件的混合。而在本发明中，使用单个webview组件加载由多个页面片段组合的一个页面，并将native组件叠加于该单个webview组件上方，能够在视觉上达到同样的效果，并且同时保证了客户端界面的灵活度和性能，具有很大的优势。

以上仅为本发明的一个优选例，可以根据实际情况使用其他浏览器组件对其他类型和版本的页面进行加载，并将本地组件叠加于浏览器组件上方，以实现页面片段与本地组件的混合。此外，可以根据需要在客户端界面上显示任意数量的本地组件和页面片段，不限于上述的两个和上述的布局。

本发明的各方法实施方式均可以以软件、硬件、固件等方式实现。不管本发明是以软件、硬件、还是固件方式实现，指令代码都可以存储在任何类型的计算机可访问的存储器中(例如永久的或者可修改的，易失性的或者非易失性的，固态的或者非固态的，固定的或者可更换的介质等等)。同样，存储器可以例如是可编程阵列逻辑(ProgrammableArrayLogic，简称“PAL”)、随机存取存储器(RandomAccessMemory，简称“RAM”)、可编程只读存储器(ProgrammableReadOnlyMemory，简称“PROM”)、只读存储器(Read-OnlyMemory，简称“ROM”)、电可擦除可编程只读存储器(ElectricallyErasableProgrammableROM，简称“EEPROM”)、磁盘、光盘、数字通用光盘(DigitalVersatileDisc，简称“DVD”)等等。

本发明第三实施方式涉及一种混合型客户端界面实现***。图7是该混合型客户端界面实现***的结构示意图。该客户端界面中包括至少两个页面片段和至少一个本地组件，该***包括：

生成模块，用于生成一个浏览器组件和至少一个本地组件。

组合模块，用于将至少两个页面片段组合成一个页面。优选地，各页面片段具有不同业务内容。能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。此外，可以理解，在本发明的其他实施方式中，各页面片段也可以是相同业务内容。

加载模块，用于控制生成模块生成的浏览器组件加载和显示组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧。以及

叠加模块，用于将生成模块生成的本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。

在本实施方式的混合型客户端界面实现***中，组合模块将至少两个页面片段组合成一个页面，加载模块控制生成模块生成的浏览器组件加载和显示上述页面，然后叠加模块将生成模块生成的本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。

第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。

本发明第四实施方式涉及一种混合型客户端界面实现***。

第四实施方式在第三实施方式的基础上进行了改进，主要改进之处在于：调整模块根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。具体地说：

该***还包括调整模块，用于根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小。

可以理解，在本发明的其他实施方式中，也可以根据浏览器组件中页面片段的位置和/或大小来调整本地组件的位置，或者可以同时调整本地组件的位置和浏览器组件中页面片段的位置和/或大小。

优选地，上述调整模块进一步包括：

判断子模块，用于判断本地组件的位置与页面片段的位置是否重叠或是否符合预定义的阈值；以及

调整子模块，用于若判断子模块确认本地组件的位置与页面片段的位置重叠或不符合预定义的阈值，则对页面片段的位置和/或大小进行相应调整。

可选地，调整参数包括坐标和尺寸等等。可以理解，必要时，在调整其中一个页面片段的同时，调整与该页面片段相关联的其他页面片段。当然，在本发明的其他实施方式中，也可以使用其他参数对页面片段和本地组件进行调整。

作为可选实施方式，该***还包括更新模块，用于需要更新客户端界面时，将至少两个页面片段组合一个新的页面，并由浏览器组件加载和显示。

更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力。

此外，可以理解，可以只对其中的部分页面片段进行更新，也可以对所有页面片段进行更新。必要时，根据已叠加的本地组件调整页面片段的位置，或甚至是重新叠加本地组件于浏览器组件上。

第二实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第二实施方式互相配合实施。第二实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第二实施方式中。

需要说明的是，本发明各设备实施方式中提到的各模块都是逻辑模块，在物理上，一个逻辑模块可以是一个物理模块，也可以是一个物理模块的一部分，还可以以多个物理模块的组合实现，这些逻辑模块本身的物理实现方式并不是最重要的，这些逻辑模块所实现的功能的组合才是解决本发明所提出的技术问题的关键。此外，为了突出本发明的创新部分，本发明上述各设备实施方式并没有将与解决本发明所提出的技术问题关系不太密切的模块引入，这并不表明上述设备实施方式并不存在其它的模块。

需要说明的是，在本专利的权利要求和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

虽然通过参照本发明的某些优选实施方式，已经对本发明进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims (10)

1.一种混合型客户端界面实现方法，其特征在于，该客户端界面中包括至少两个页面片段和至少一个本地组件，该方法包括以下步骤：

生成一个浏览器组件和至少一个本地组件；

将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧；

将本地组件叠加于所述浏览器组件上方的指定位置，以形成所述客户端界面。

2.根据权利要求1所述的混合型客户端界面实现方法，其特征在于，所述将本地组件叠加于所述浏览器组件上方的指定位置的步骤之后还包括以下步骤：

根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小。

3.根据权利要求2所述的混合型客户端界面实现方法，其特征在于，根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小的步骤中包括以下子步骤：

判断所述本地组件的位置与所述页面片段的位置是否重叠或是否符合预定义的阈值；

若所述本地组件的位置与所述页面片段的位置重叠或不符合预定义的阈值，则对所述页面片段的位置和/或大小进行相应调整。

4.根据权利要求1所述的混合型客户端界面实现方法，其特征在于，该方法还包括以下步骤：

需要更新所述客户端界面时，将至少两个页面片段组合成一个新的页面，并由所述浏览器组件加载和显示。

5.根据权利要求1至4中任一项所述的混合型客户端界面实现方法，其特征在于，所述页面片段具有不同业务内容。

6.一种混合型客户端界面实现***，其特征在于，该客户端界面中包括至少两个页面片段和至少一个本地组件，该***包括：

生成模块，用于生成一个浏览器组件和至少一个本地组件；

组合模块，用于将至少两个页面片段组合成一个页面；

加载模块，用于控制所述生成模块生成的浏览器组件加载和显示所述组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧；以及

叠加模块，用于将所述生成模块生成的本地组件叠加于所述浏览器组件上方的指定位置，以形成所述客户端界面。

7.根据权利要求6所述的混合型客户端界面实现***，其特征在于，该***还包括调整模块，用于根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小。

8.根据权利要求7所述的混合型客户端界面实现***，其特征在于，所述调整模块包括：

判断子模块，用于判断所述本地组件的位置与所述页面片段的位置是否重叠或是否符合预定义的阈值；以及

调整子模块，用于若所述判断子模块确认所述本地组件的位置与所述页面片段的位置重叠或不符合预定义的阈值，则对所述页面片段的位置和/或大小进行相应调整。

9.根据权利要求6所述的混合型客户端界面实现***，其特征在于，该***还包括更新模块，用于需要更新所述客户端界面时，将至少两个页面片段组合一个新的页面，并由所述浏览器组件加载和显示。

10.根据权利要求6至9中任一项所述的混合型客户端界面实现***，其特征在于，所述页面片段具有不同业务内容。