[发明专利]一种页面组件动态布局方法、装置及客户端

说明书

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

技术领域

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

背景技术

随着移动互联网的日益兴起，用户对在手机、平板等移动终端设备上通过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页面上实现动态布局的技术问题，大大提高作业人员页面布局的便利性。

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

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

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

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