CN107368487A - 一种页面组件动态布局方法、装置及客户端 - Google Patents

Abstract

本申请提供一种页面组件动态布局方法、装置及客户端。所述方法包括：客户端基于触发的请求页面向服务器发起页面内容请求；客户端查询页面响应内容中是否存在预设标记符；若存在，则加载设置的自定义组件解析引擎对自定义组件的标签进行解析；客户端根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染，将渲染后的自定义组件添加到请求页面的相应位置。利用本申请实施例可以实现在原生WebView上Native组件的动态布局，解决了现有技术中Native组件无法在HTML页面上实现动态布局的技术问题，提高作业人员页面布局的便利性。

Description

一种页面组件动态布局方法、装置及客户端

技术领域

本申请属于计算机数据处理技术领域，尤其涉及一种页面组件动态布局方法、装置及客户端。

背景技术

随着移动互联网的日益兴起，用户对在手机、平板等移动终端设备上通过APP的Web页面进行新闻阅读、视频观看、在线购物、即时通信等的需求越来越复杂和多样化。APP的快速迭代成了许多APP移动厂商面临的严峻考考验，因此，在移动APP开发领域，动态化技术俨然已成为众多APP移动厂商的开发研究重点。

在目前的移动APP开发领域，实现页面动态布局的动态化技术主要为采用WebView组件，它可以利用成熟的完整的WebKit开源内核可以实现客户端的浏览器功能。如上所述，为了满足用户需求，增强用户体验，目前很多开放的APP已经不再停留使用原生的WebView组件，已经开始使用类似Facebook的ReactNative技术实现页面的动态布局。React Native脱离了传统Hybrid App的思路，基于HTML、CSS、JavaScript重新定义了一套规则。可以在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<img>等。UI方面React Native提供跨平台的类似Flexbox的布局系统，还支持CSS子集，另外还可以用JSX或者普通JavaScript语言，还有CoffeeScript和TypeScript来开发移动终端APP。

ReactNative技术提供了许多React Native开源组件，如表单、摄像机、导航控件等等，可以为移动应用开发者提供帮助。目前市面上的应用大都使用ReactNative类似的技术进行动态布局，主要包括：使用React.js(Web平台)技术编写ReactNative布局页面，然后通过react-Native.js解析引擎进行解析，最后通过Native层的解析引擎完成页面的布局。

目前HTML页面在移动终端页面中仍占据重要地位，但这种ReactNative动态性技术的实现不遵从W3C标准，完全是独立实现了语法、解析等步骤。该方法与现有的WebKit内核不兼容，无法打开现有的页面(例如直接打开百度、google页面)，而且，该技术的实现对于页面的开发人员学习成本更高，无法使用原有的HTML技术去实现在原生WebView上Native组件的动态布局。

发明内容

本申请目的在于提供一种页面组件动态布局方法、装置及客户端，可以通过在HTML页面基础上Native自定义组件的标签，完成HTML页面上Native组件的渲染，实现在原生WebView上Native组件的动态布局，解决了现有技术中Native组件无法在HTML页面上实现动态布局的技术问题，大大提高作业人员页面布局的便利性。

本申请提供一种页面组件动态布局方法、装置及客户端是这样实现的：

一种页面组件动态布局方法，所述方法包括：

客户端基于触发的请求页面向服务器发起页面内容请求；

服务器接收到所述页面内容请求后，确定所述请求页面中是否包含使用自定义组件的标签；若是，则在返回给客户端的页面响应内容中设置预设标记符；

所述客户端根据接收的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；若存在，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

所述客户端根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

所述客户端将所述渲染后的自定义组件添加到所述请求页面的相应位置。

一种页面组件动态布局方法，所述方法包括：

基于触发的请求页面向服务器发起页面内容请求；

基于接收的服务器返回的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；

若所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

将所述渲染后的自定义组件添加到所述请求页面的相应位置。

一种页面组件动态布局方法，所述方法包括：

存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

一种页面组件动态布局装置，所述装置包括：

页面请求模块，用于基于触发的请求页面向服务器发起页面内容请求；

接收处理模块，用于接收服务器返回的页面响应内容，根据所述页面响应内容打开请求页面，并查询所述页面响应内容中是否存在预设标记符；

页面解析模块，用于若查找到所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

页面渲染模块，用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

动态布局模块，用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

一种页面组件动态布局装置，所述装置包括：

自定义组件模块，用于存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

页面请求处理模块，用于根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

一种页面浏览客户端，所述客户端包括：

第一处理单元，被设置成，用于基于触发的请求页面向服务器发起页面内容请求；还用于接收服务器返回的页面相应内容，并根据所述页面响应内容打开请求页面，以及根据所述页面相应内容对请求页面进行渲染；

第二处理单元，被设置成，用于加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；还用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；还用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

本申请提供的终端应用页面的调试方法、装置及客户端，可以通过在HTML页面基础上自定义Native组件的标签，实现在原生WebView上Native组件的动态布局。作业人员可以在用户浏览的web页面中设计添加Native自定义组件的标签，页面服务器一侧对预先设置的自定义组件进行信息抽取，计算CSS-Layout、数据、事件等得到Native自定义组件的解析信息。这样，用户的发起的请求页面中如果包含了自定义组件的标签，页面服务器则可以在该请求页面的页面响应内容上设置标记符。相应的，客户端WebView打开HTML页面后如有发现有所述标记符，则可以注入Native组件解析引擎完成CSS-Layout、数据、事件等信息的解析。然后可以调用平台相关的渲染引擎模块在客户端进行Native组件渲染，渲染后的组件可以直接添加到原始WebView上，完成请求页面的Native组件的动态布局。本申请实施方案可以实现在HTML页面上添加Native组件标签，在用户浏览的页面上将HTML原有的标签替换为Native渲染的组件，从而既保持了不侵入原生WebView同时又达到较好的页面动态布局实践，使得基于HTML语言的页面组件动态布局可以大大提高作业人员的便利性。

附图说明

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

图1是本申请提供的一种页面组件动态布局方法一种实施例的方法流程示意图；

图2是本申请提供的一种页面组件动态布局方法一种实施例的方法流程示意图；

图3是本申请提供的一种页面组件动态布局方法一种实施例的方法流程示意图；

图4是本申请提供的一种页面组件动态布局装置一种实施例的模块结构示意图；

图5是本申请提供的一种页面组件动态布局装置一种实施例的模块结构示意图。

具体实施方式

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

下面结合附图对本申请所述的页面组件动态布局方法、装置及客户端进行详细的说明。图1是本申请提供的页面组件动态布局方法的一种实施例的方法流程示意图。虽然本申请提供了如下述实施例或附图所示的方法操作步骤或装置结构，但基于常规或者无需创造性的劳动在所述方法或装置中可以包括更多或者更少的操作步骤或模块结构。在逻辑性上不存在必要因果关系的步骤或结构中，这些步骤的执行顺序或装置的模块结构不限于本申请实施例提供的执行顺序或模块结构。所述的方法或模块结构的在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法或模块结构连接进行顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

具体的如图1所示，本申请提供的一种页面组件动态布局方法中的一种实施例可以包括：

S1：客户端基于触发的请求页面向服务器发起页面内容请求。

当用户在客户端点击一个在线或者离线的HTML页面的时候，客户端会进入WebView页面，向服务器发起用户点击触发的请求页面的页面内容请求。所述的触发的页面请求具体的可以包括客户端中厂商应用(APP)或浏览器中触发的应用，如用户打开的在线购物APP首页，或者通过浏览器打开的在线搜索页面等。本申请中所述的客户端可以包括使用iOS、Android、YunOS等系统的移动终端，可以包括但不限于移动通讯终端、PDA、平板、POS机、车载电脑等。当然，实施本申请方案的非移动终端，如可以页面浏览的自助服务终端、PC电脑等也属于本申请所述的客户端的范围之内。

一般的，客户端发起的页面内容请求可以包括如页面数据、页面层结构、事件信息等。如果用户触发的请求页面中包括了页面组件，那么相应的页面请求内容中可以包括该页面组件的相关信息，如页面组件与服务器的消息交互内容、页面组件名称、类型等属性信息等。本申请实施例中客户端的请求页面中可以包括设计人员根据预先设计需要替换为自定义组件的自定义标签信息，那么，所述的页面内容请求中可以包括使用自定义组件的标签的相关信息。所述自定义组件可以包括Native组件。

本申请实施例中，用户触发客户端页面时客户端可以向服务器发起该页面的内容请求。

S2：服务器接收到所述页面内容请求后，确定所述请求页面中是否包含使用自定义组件的标签；若是，则在返回给客户端的页面响应内容中设置预设标记符。

本申请实施方案中，作业人员可以根据应用场景需求预先在基于HTML基础Native自定义组件的标签。具体的例如原生webkit渲染出来的页面，对大列表、输入框等方面均有性能或体验问题，本实施例中可以将WebView上无法实现或者设计人员认为性能较差的组件标签进行抽取、分组，抽象成页面的自定义的Native组件标签，例如ListView。本实施例所述Native自定义组件标签的可以对应一个或多个Native组件。另外，所述的抽取是针对渲染引擎的，抽取后成为渲染引擎所支持的标签。所述的计算，是对页面自定义组件进行数据、样式的计算，以确定客户端引擎能够根据数据和样式进行渲染出来。设计人员可以预先对所有可以使用到的自定义组件标签进行开发和设计。

所述自定义组件标签可以用于请求页面的渲染。本申请实施例中可以对Native自定义组件的信息抽取，具体的可以包括：在页面渲染之前，完成对HTML描述文件的预处理，将Native自定义组件的标签进行抽取，计算其CSS-Layout、数据、event(事件)等信息，形成Native自定义组件的解析信息。然后，可以将抽取计算的Native自定义组件的解析信息传给Native组件引擎。

这样，页面布局设计作业人员可以在页面中布局使用自定义组件的标签，服务器接收到客户端发送的页面内容请求后查找该客户端的页面内容请求中是否使用了自定义组件的标签。如果客户端请求的页面中包含了预先定义设置的自定义组件的标签，则可以在服务器响应给客户端的页面响应内容中设置预设标记符。例如本实施例中可以在返回给客户端的页面响应内容头上打入预设标记符，例如“CustomNativeComponent”。当然，所述预设标记符具体的可以由作业人员自定义设置，可以用于客户端识别请求页面的响应中包含自定义组件的标签，以便进行自定义组件的解析、渲染等处理。所述服务器处理完所述客户端的页面内容请求后，将本次请求页面完整的HTML页面响应内容返回给所述客户端。这样，用户客户端的WebView打开HTML页面时可以根据页面响应内容中的标记符可以得知需要对HTML页面中自定义组件进行解析、渲染处理。

服务器接收到客户端的页面内容请求后，确定所述请求页面中是否包含使用自定义组件的标签；若是，则在返回给客户端的页面响应内容中设置预设标记符。

S3：所述客户端根据接收的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；若存在，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析。

在本申请实施例中，客户端WebView接收到服务器反馈的页面响应内容后会打开HTML请求页面，此时如果发现页面响应内容中存在所述预设标记符，可以表示该打开的HTML请求页面中包含Native自定义组件。那么，客户端可以加载用于解析自定义组件的解析引擎对该HTML请求页面中的Native自定义组件的标签进行解析。如本实施例中如果发现响应头上存在预设标记符“CustomNativeComponent”，那么此时客户端将会注入Native组件解析引擎Core.js对请求页面中的Native自定义组件标签进行解析。

需要说明的是，本申请实施例中所述的解析具体的可以包括解析HTML中原自定义标签的信息。在后续处理中可以根据解析获取的标签信息选择相应的native组件，进行native组件渲染后将native组件替换掉原标签内容。所述的自定义组件解析引擎可以包括页面端的core.js，主要是对页面中使用到的自定义标签进行抽取出来，和计算其相应数据。下述中的渲染引擎可以包括客户端引擎，主要是根据页面端引擎core.js带回的自定义标签信息，进行客户端native组件的渲染。因此，本实施例所述对所述请求页面中的自定义组件的标签进行解析可以包括：

对请求页面中自定义组件的标签进行信息抽取，以确定渲染引擎选择相应的自定义组件的标签信息。

本实施例中，如前所述，在定义设置Native自定义组件时可以对Native自定义组件的标签信息抽取，如计算其CSS-Layout、数据、event(事件)等信息，形成Native自定义组件的解析信息。然后，可以将抽取计算的Native自定义组件的解析信息传给Native组件引擎。因此，客户端加载的自定义组件解析引擎可以根据预先定义设置的自定义组件的解析信息解析页面中的自定义组件的标签。

S4：所述客户端根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染。

当所述自定义组件解析引擎解析页面中的自定义组件标签，完成CSS-Layout、数据、event(事件)等计算后可以获取该自定义组件标签的标签信息后。然后可以根据抽取计算得到的标签信息选择该自定义组件标签位置相应的自定义Native组件，然后调用平台相关的自定义组件渲染引擎进行Native自定义组件的渲染。本实施例中所述的平台相关通常是指，针对iOS、Android等，系统的UI组件库是不同的，因此，在iOS和Android端的渲染引擎，渲染部分有所不同。这里的自定义组件渲染引擎可以仅处理自定义标签，渲染成native组件。其他内容，因为通常情况下系统webkit已经做了相关渲染处理，自定义组件渲染引擎可以不用处理。当然，其他的一些实施方式上，也可以包括利用所述自定义组件渲染引擎完成页面其他内容的渲染。所述的自定义组件渲染引擎可以包括Native组件动态布局引擎，可以实现在iOS、Android以及浏览器端等实现Native自定义组件的渲染功能。

客户端可以根据返回的页面响应内容对请求页面进行渲染处理，如果需要渲染Native组件，则调用自定义组件渲染引擎对请求页面中解析完成的自定义组件进行渲染。

S5：所述客户端将所述渲染后的自定义组件添加到所述请求页面的相应位置。

本实施例完成Native自定义组件渲染后，可以将渲染后的现Native自定义组件直接添加到原生WebView上，替换掉原标签内容，完成现Native自定义组件的动态布局。当然，请求页面中可以包括一个或者多个Native自定义组件的标签，所述客户端可以利用解析引擎和渲染引擎分别对所有标签中的Native自定义组件进行解析和渲染，然后将渲染后的Native自定义组件添加到相应的请求页面中的标签中。

本申请实施例可以通过在HTML页面上添加现Native自定义组件的标签，在客户端上通过自定义组件解析引擎和渲染引擎实现基于原生WebView的Native组件动态化布局。本申请实施方案可以在需要最佳用户体验的页面上将HTML原有的标签替换为Native渲染后的组件，实现在HTML页面中不入侵原生WebView的情况下的页面组件动态化布局，使得基于HTML语言的页面组件动态布局可以大大提高作业人员的便利性。

上述实施例中所述的页面组件动态布局方法可以适用于客户端一侧HTML页面中自定义组件(包括但不限于Native组件)的动态布局。因此，本申请还提供一种客户端可以实施的页面组件动态布局方法。图2是本申请提供的一种页面组件动态布局方法一种实施例的方法流程示意图，具体的如图2所示，所述方法可以包括：

S201：基于触发的请求页面向服务器发起页面内容请求；

S202：基于接收的服务器返回的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；

S203：若所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

S204：根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

S205：将所述渲染后的自定义组件添加到所述请求页面的相应位置。

本申请实施例提供的页面组件动态布局方法可以用于客户端页面上页面组件的动态布局，用户浏览的页面上将页面中原有的不能直接解析或者性能较差需要修改的标签替换为选取的自定义组件，可以大大提高作业人员的便利性。

当然，上述实施方案具体的应用场景中所述触发的请求页面可以包括用户在客户端中触发的终端应用如浏览器或指定应用(APP)的HTML页面。以及，在页面渲染之前，可以对HTML描述文件进行预处理，包括对自定义的Native组件标签进行信息抽取，计算Css-layout、event等标签信息，然后自定义组件引擎可以基于信息抽取计算的组件信息对自定义组件进行解析。在一些基于HTML页面进行组件动态布局的实施例中，所述自定义组件可以包括Native组件，相应的，所述设置的自定义组件解析引擎可以包括Native组件解析引擎core.js。所述对所述请求页面中的自定义组件的标签进行解析包括：对请求页面中自定义组件的标签进行信息抽取，以确定渲染引擎选择相应的自定义组件的标签信息。

相应的，本申请还提供一种可以适用于服务器一侧的页面组件动态布局方法。在所述方法中，服务器一侧可以实现作业人员自定义Native组件，获取Native组件的解析信息，并传给各个客户端的解析引擎。并且，在确定客户端的页面内容请求中是否包含使用自定义组件的标签，若是则在页面相应上设置标记符，告知客户端需要对加载自定义组件解析引擎和渲染引擎进行Native组件处理。图3是本申请提供的一种页面组件一种页面组件动态布局方法如图3所示，所述方法可以包括：

S301：存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

S302：根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

上述实施例提供的可以用于客户端或者服务器一侧额页面组件动态布局方法中，所述涉及到的页面预处理、自定义组件类型如Native组件、具体的自定义组件解析处理过程等可以参照本申请其他实施例的相关描述，在此不做赘述。

基于本申请所述的页面组件动态布局方法，本申请提供一种页面组件动态布局装置。所述装置可以用于客户端一侧上基于原生WebView实现Native组件动态化布局。图4是本申请提供的一种页面组件动态布局装置一种实施例的模块结构示意图，如图4所示，所述装置可以包括：

页面请求模块101，可以用于基于触发的请求页面向服务器发起页面内容请求；

接收处理模块102，可以用于接收服务器返回的页面响应内容，根据所述页面响应内容打开请求页面，并查询所述页面响应内容中是否存在预设标记符；

页面解析模块103，可以用于若查找到所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

页面渲染模块104，可以用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

动态布局模块105，可以用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

当然，所述的页面解析模块、页面渲染模块除可以对自定义组件进行解析、渲染外，还可以调用或加载其他引擎对HTML请求页面进行相应的解析、渲染出来。

一种具体的应用场景的实施例中，如前所述，所述的页面解析模块103具体的对所述请求页面的标签进行解析可以包括：

对请求页面中自定义组件的标签进行信息抽取，以确定渲染引擎选择相应的自定义组件的标签信息。

当然，上述实施方案具体的应用场景中所述触发的请求页面可以包括用户在客户端中触发的终端应用如浏览器或指定应用(APP)的HTML页面。以及，在页面渲染之前，可以对HTML描述文件进行预处理，包括对自定义的Native组件标签进行信息抽取，计算Css-layout、event等标签信息。在一些基于HTML页面进行组件动态布局的实施例中，所述自定义组件可以包括Native组件，相应的，所述设置的自定义组件解析引擎可以包括Native组件解析引擎core.js。

基于本申请所述的页面组件动态布局方法，本申请提供一种页面组件动态布局装置。所述装置可以用于服务器一侧上基于原生WebView实现Native组件动态化布局。图5是本申请提供的一种页面组件动态布局装置一种实施例的模块结构示意图，如图5所示，所述装置可以包括：

自定义组件模块201，可以用于存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

页面请求处理模块202，可以用于根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

上述实施例提供的装置可以通过在HTML页面基础上Native自定义组件的标签，完成HTML页面上Native组件的渲染，实现在原生WebView上Native组件的动态布局，解决了现有技术中Native组件无法在HTML页面上实现动态布局的技术问题，大大提高作业人员页面布局的便利性。

如前所述，本申请提供的页面组件动态布局方法或装置可以用于终端客户端上，如无线客户端，实现在HTML页面布局处理作业中基于原生WebView的Native组件动态化布局。因此，本申请还提供一种页面浏览客户端，可以包括但不限于使用iOS、Android、YunOS系统的客户端，实现浏览器端在HTML页面基础上自定义Native组件的动态布局。具体的，本申请一种实施例提供的页面浏览客户端中，所述客户端可以包括：

第一处理单元，被设置成可以用于基于触发的请求页面向服务器发起页面内容请求；还可以用于接收服务器返回的页面相应内容，并根据所述页面响应内容打开请求页面，以及根据所述页面相应内容对请求页面进行渲染；

第二处理单元，被设置成可以用于加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；还用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；还用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

另外，本申请所述客户端的另一种实施例中，服务器可以在页面相应内容的头中加入是否使用自定义组件标签的预设标记符，以指示客户端进行自定义组件标签处理。这样可以加快页面的渲染以及方便客户端做性能统计或优化等。因此，本申请所述装置的另一种实施例中，所述第二处理单元还可以被设置成，

基于查询所述页面响应内容中存在服务器根据请求页面中使用自定义组件标签而设置的预设标记符加载引擎进行自定义组件的解析和渲染。

本申请提供的终端应用页面的调试方法、装置及客户端，可以通过在HTML页面基础上自定义Native组件的标签，实现在原生WebView上Native组件的动态布局。作业人员可以在用户浏览的web页面中设计添加Native自定义组件的标签，页面服务器一侧对预先设置的自定义组件进行信息抽取，计算CSS-Layout、数据、事件等得到Native自定义组件的解析信息。这样，用户的发起的请求页面中如果包含了自定义组件的标签，页面服务器则可以在该请求页面的页面响应内容上设置标记符。相应的，客户端WebView打开HTML页面后如有发现有所述标记符，则可以注入Native组件解析引擎完成CSS-Layout、数据、事件等信息的解析。然后可以调用平台相关的渲染引擎模块在客户端进行Native组件渲染，渲染后的组件可以直接添加到原始WebView上，完成请求页面的Native组件的动态布局。本申请实施方案可以实现在HTML页面上添加Native组件标签，在用户浏览的页面上将HTML原有的标签替换为Native渲染的组件，从而既保持了不侵入原生WebView同时又达到较好的页面动态布局实践，使得基于HTML语言的页面组件动态布局可以大大提高作业人员的便利性。

尽管本申请内容中提到自定义Native组件、组件标签信息抽取、页面或组件解析、渲染等的信息定义、数据处理、信息交互之类的描述，但是，本申请并不局限于必须是完全标准或者所提及的方式的信息定义、数据处理、信息交互情况。本申请中各个实施例所涉及的上述描述仅是本申请中的一些实施例中的应用，在某些标准、方法的基础上略加修改后的实施方式也可以实行上述本申请各实施例的方案。当然，在符合本申请上述各实施例的中所述的处理方法步骤的其他无创造性的变形，仍然可以实现相同的申请，在此不再赘述。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

上述实施例阐明的装置、单元或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现。当然，也可以将实现某功能的模块由多个子模块或子单元组合实现。

本申请中所述的方法、装置或模块可以以计算机可读程序代码方式实现控制器按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、MicrochipPIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

本申请所述装置中的部分模块可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构、类等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的硬件的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，也可以通过数据迁移的实施过程中体现出来。该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本申请的全部或者部分可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、移动通信终端、多处理器系统、基于微处理器的系统、可编程的电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims (13)

1.一种页面组件动态布局方法，其特征在于，所述方法包括：

客户端基于触发的请求页面向服务器发起页面内容请求；

服务器接收到所述页面内容请求后，确定所述请求页面中是否包含使用自定义组件的标签；若是，则在返回给客户端的页面响应内容中设置预设标记符；

所述客户端根据接收的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；若存在，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

所述客户端根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

所述客户端将所述渲染后的自定义组件添加到所述请求页面的相应位置。

2.一种页面组件动态布局方法，其特征在于，所述方法包括：

基于触发的请求页面向服务器发起页面内容请求；

基于接收的服务器返回的页面响应内容打开所述请求页面，并查询所述页面响应内容中是否存在预设标记符；

若所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

将所述渲染后的自定义组件添加到所述请求页面的相应位置。

3.如权利要求2所述的一种页面组件动态布局方法，其特征在于，所述对所述请求页面中的自定义组件的标签进行解析包括：

对请求页面中自定义组件的标签进行信息抽取，以确定渲染引擎选择相应的自定义组件的标签信息。

4.如权利要求2所述的一种页面组件动态布局方法，其特征在于，

所述触发的请求页面为用户触发的终端应用的HTML页面。

5.如权利要求3或4所述的一种页面组件动态布局方法，其特征在于，所述自定义组件包括Native组件，所述设置的自定义组件解析引擎包括Native组件解析引擎core.js。

6.一种页面组件动态布局方法，其特征在于，所述方法包括：

存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

7.一种页面组件动态布局装置，其特征在于，所述装置包括：

页面请求模块，用于基于触发的请求页面向服务器发起页面内容请求；

接收处理模块，用于接收服务器返回的页面响应内容，根据所述页面响应内容打开请求页面，并查询所述页面响应内容中是否存在预设标记符；

页面解析模块，用于若查找到所述页面响应内容中存在预设标记符，则加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；

页面渲染模块，用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；

动态布局模块，用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

8.如权利要求7所述的一种页面组件动态布局装置，其特征在于，所述的页面解析模块的对所述请求页面的标签进行解析包括：

对请求页面中自定义组件的标签进行信息抽取，以确定渲染引擎选择相应的自定义组件的标签信息。

9.如权利要求7所述的一种页面组件动态布局装置，其特征在于，所述触发的请求页面为用户触发的终端应用的HTML页面。

10.如权利要求8或9所述的一种页面组件动态布局装置，其特征在于，所述自定义组件包括Native组件，所述设置的自定义组件解析引擎包括Native组件解析引擎core.js。

11.一种页面组件动态布局装置，其特征在于，所述装置包括：

自定义组件模块，用于存储用户定义设置的自定义组件及所述自定义组件的解析信息，并将所述解析信息发送给客户端的自定义组件解析引擎；

页面请求处理模块，用于根据接收到的客户端的页面内容请求返回相应的页面相应内容；若所述判断客户端的请求页面中使用所述自定义组件的标签，则在返回给所述客户端的页面响应内容中设置预设标记符。

12.一种页面浏览客户端，其特征在于，所述客户端包括：

第一处理单元，被设置成，用于基于触发的请求页面向服务器发起页面内容请求；还用于接收服务器返回的页面相应内容，并根据所述页面响应内容打开请求页面，以及根据所述页面相应内容对请求页面进行渲染；

第二处理单元，被设置成，用于加载设置的自定义组件解析引擎，对所述请求页面中的自定义组件的标签进行解析；还用于根据对所述自定义组件的标签解析得到的标签信息选择相应的自定义组件，并调用设置的自定义组件渲染引擎对所述自定义组件进行渲染；还用于将所述渲染后的自定义组件添加到所述请求页面的相应位置。

13.如权利要12所述一种页面浏览客户端，其特征在于，所述第二处理单元还被设置成，

基于查询所述页面响应内容中存在服务器根据请求页面中使用自定义组件标签而设置的预设标记符加载引擎进行自定义组件的解析和渲染。