CN106371844B - 一种用原生用户界面组件展示网页的方法及*** - Google Patents

一种用原生用户界面组件展示网页的方法及*** Download PDF

Info

Publication number
CN106371844B
CN106371844B CN201610799828.7A CN201610799828A CN106371844B CN 106371844 B CN106371844 B CN 106371844B CN 201610799828 A CN201610799828 A CN 201610799828A CN 106371844 B CN106371844 B CN 106371844B
Authority
CN
China
Prior art keywords
node
elements
document
entity
object model
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201610799828.7A
Other languages
English (en)
Other versions
CN106371844A (zh
Inventor
刘永生
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing QIYI Century Science and Technology Co Ltd
Original Assignee
Beijing QIYI Century Science and Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing QIYI Century Science and Technology Co Ltd filed Critical Beijing QIYI Century Science and Technology Co Ltd
Priority to CN201610799828.7A priority Critical patent/CN106371844B/zh
Publication of CN106371844A publication Critical patent/CN106371844A/zh
Application granted granted Critical
Publication of CN106371844B publication Critical patent/CN106371844B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明实施例提供了一种用原生用户界面组件展示网页的方法及***，涉及计算机技术领域。本发明可以将在服务器侧将针对网页的HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于原生应用的性能和用户体验优势，通过将针对网页的HTML文档转换为XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验。

Description

一种用原生用户界面组件展示网页的方法及***
技术领域
本发明涉及计算机技术领域，特别是涉及一种用原生用户界面组件展示网页的方法及***。
背景技术
随着计算机及互联网技术的不断发展，网页浏览已经逐渐成为生活中不可分割的一部分，人们对智能手机网页加载的性能和体验的要求也越来越高。
目前，开发人员使用富文本编辑工具手动编辑展示性网页，并生成非结构化数据，这些非结构化数据上传到后台***之后以HTML(Hyper Text Markup Language，超文本标记语言)文档进行存储，在Android(安卓***)/IOS(iPhone OS操作***)客户端应用中用网页窗口组件(Webview组件)展示给用户。
在发明人应用在先技术时，发现在先技术在Android/IOS客户端页面中使用网页窗口组件展示HTML文档，由于网页窗口组件作为一个内嵌浏览器，其具有和正常浏览器同样功能庞大、特性完备的网页展示功能，网页窗口组件和一个独立浏览器一样对CPU、内存和电量等设备资源消耗较大，同时它作为页面的内嵌组件，它依赖宿主环境的网络加载能力，所以在Android/IOS客户端页面中使用网页窗口组件展示HTML文档的方法，存在明显的性能和用户体验问题，例如：图片加载慢，需要较长时间才能展示出来；上下滚动、缩放、左右滑动切换手势交互体验差；CPU、内存和电量的设备资源消耗较大。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的用原生用户界面组件展示网页的方法和相应的用原生用户界面组件展示网页的***。
依据本发明的一个方面，提供了一种用原生用户界面组件展示网页的方法，包括：
在服务器侧将针对网页的第一HTML文档转换为XML文档；
接收访问所述网页的操作指令；
根据所述操作指令向服务器发送针对所述网页的网页请求；
接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；
使用原生用户界面组件将所述XML文档进行渲染展示。
优选地，所述在服务器侧将针对网页的第一HTML文档转换为XML文档的步骤，包括：
将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；
将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。
优选地，所述将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档的步骤，包括：
对所述第二HTML文档进行解析，生成文档对象模型树和样式树；
对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；
如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；
如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；
对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；
对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；
根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。
优选地，所述对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的步骤，包括：
根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。
优选地，所述将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的步骤，包括：
对所述第一HTML文档进行解析，生成文档对象模型树和样式树；
从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；
如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；
如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；
如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；
如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
根据本发明的另一方面，提供了一种用原生用户界面组件展示网页的***，包括：
所述***包括：服务器和客户端；
所述服务器包括：
转换模块，用于在服务器侧将针对网页的第一HTML文档转换为XML文档；
所述客户端包括：
接收模块，用于接收访问所述网页的操作指令；
发送模块，用于根据所述操作指令向服务器发送针对所述网页的网页请求；
返回模块，用于接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；
展示模块，用于使用原生用户界面组件将所述XML文档进行渲染展示。
优选地，所述用于在服务器侧将针对网页的第一HTML文档转换为XML文档的转换模块，包括：
预处理模块，用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；
文档转换模块，用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。
优选地，所述用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档的文档转化模块，包括：
第二解析模块，用于对所述第二HTML文档进行解析，生成文档对象模型树和样式树；
判断模块，用于对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；
容器元素转换模块，用于如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；
实体元素转换模块，用于如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；
布局属性转换模块，用于对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；
绘制属性转换模块，用于对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；
反向编译模块，用于根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。
优选地，所述用于对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的判断模块，包括：
判断模块，用于根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。
优选地，所述用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的预处理模块，包括：
第一解析模块，用于对所述第一HTML文档进行解析，生成文档对象模型树和样式树；
元素类型判断模块，用于从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；
容器元素子节点列表判断模块，用于如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；
容器元素预处理模块，用于如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；
实体元素子节点列表判断模块，用于如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；
实体元素预处理模块，用于如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
相对在先技术，本发明具备如下优点：
一种用原生用户界面组件展示网页的方法及***，可以将在服务器侧将针对网页的第一HTML文档转换为XML(Extensible Markup Language，可扩展标记语言)文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于在先技术网页应用的程序代码是运行在浏览器中，在用户访问时才被浏览器的渲染引擎解释处理，而且网页应用要通过浏览器来调用***和设备的API(Application ProgrammingInterface，应用程序编程接口)，并且由运行在操作***之上的浏览器来分配和管理网页所需的设备资源，因此其存在性能和用户体验差的问题；而原生应用在执行程序代码时是直接运行在Android/IOS操作***之上，由操作***为应用分配内存、CPU、Wifi/GSM等设备资源，所以，技术上讲，直接运行在操作***之上的原生应用，其性能和用户体验会优于运行在独立浏览器中的网页应用。所以本发明实施例通过将针对网页的HTML文档转换为XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的图片加载慢，上下滚动、缩放、左右滑动切换等手势交互体验差，CPU、内存、电量等设备资源消耗较大的性能和用户体验问题，达到了在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验的效果。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了根据本发明用原生用户界面组件展示网页的方法的步骤流程图；
图1A示出了根据本发明的HTML文档和XML文档的信息分类图；
图1B示出了根据本发明的转换方法示意图；
图1C示出了网页应用和原生应用的对比图；
图2示出了根据本发明把HTML文档转换成XML文档并用原生用户界面组件展示XML文档的方法的步骤流程图；
图3示出了根据本发明用原生用户界面组件展示网页的***的结构框图；
图4示出了根据本发明把HTML文档转换成XML文档并用原生用户界面组件展示XML文档的***的结构框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
实施例一
参照图1，示出了根据本发明一个实施例的一种用原生用户界面组件展示网页的方法实施例的步骤流程图，具体可以包括如下步骤：
步骤100，在服务器侧将针对网页的第一HTML文档转换为XML文档。
开发人员使用富文本编辑器手动编辑展示性网页，并生成非结构化数据，这些非结构化数据上传到后台***之后以HTML文档进行存储；
其中，富文本编辑器(Rich Text Editor,简称RTE)是一种文本编辑器，它提供类似于Microsoft Word的编辑功能，可以编写成HTML文档并设置各种文本格式；非结构化数据是指不方便用数据库二维逻辑表来表现的数据，包括所有格式的办公文档、文本、图片、XML、HTML、各类报表等。
参照图1A，示出了根据本发明的HTML文档和XML文档的信息分类图；
在发明人针对同样的用户界面效果，分析网页用户界面和原生用户界面及其对应的文档的内容、特征及异同，对比发现，对于同样的用户界面效果，表示网页用户界面的HTML文档和表示原生用户界面的XML文档，其中包含的信息都可以进行如下的分类：
(1)元素标签，包含容器标签和实体标签；
(2)样式属性，包含布局属性和绘制属性；
(3)数据，如段落文字内容，图片文件URL(Uniform Resource Locator，统一资源定位符)值，链接URL值等。
容器标签：HTML文档或XML文档中的节点的元素类型是容器元素的标签，如HTML文档中的<body>、<div>、<p>标签和XML文档中的<RelativeLayout>、<LinearLayout>标签，所述标签相当于容器，作用是为其子元素提供定位布局的功能。一般来说，容器标签自身没有展示效果，即用户感知不到有容器标签的存在，但所述容器标签的子孙后代元素，在界面上的展示位置及尺寸，都是参照于容器标签确定的几何坐标系。
实体标签：HTML文档或XML文档中的节点的元素类型是实体元素的标签，如HTML文档中的<img>、<input>、<button>、<a>和XML文档中的<ImageView>、<EditText>、<button>，用于在界面上某个位置和区域展示一个图片、文本输入框、按钮等用于呈现的信息，用户可见可交互的组件；实体标签在界面上展示的位置和尺寸，依赖祖先节点上的容器标签以及自身和兄弟节点上的布局属性的设置。
布局属性：实体标签需要在界面上的某个位置，以某个宽高尺寸的区域进行展示，实体标签“间距”、“位置”和“尺寸”等几何信息有关的样式属性即布局属性。如HTML文档中margin/padding/top/left/width/height、text-align等CSS(Cascading Style Sheets，层叠样式表)属性，XML文档中的android:layout_margin/paddingLeft/Top、android:layout_width/height、android:layout_centerHorizontal、android:orientation等几何样式属性；容器标签一般自带一些有默认值的布局属性，实体标签如果不设置布局属性，其最终展示在界面上的几何属性值由其祖先节点上的容器标签、兄弟节点的布局属性、自身内容及***默认值共同决定。
绘制属性：决定实体标签自身外观的非几何样式属性，比如登录按钮的背景颜色background-color、文字颜色color、边框圆角半径border-radius、文字加粗/倾斜/下划线/删除线效果等样式属性。
总之，无论是网页用户界面的HTML文档，还是原生用户界面的XML文档，除去文档中的数据之外，它们本质都是一个由标签节点组成的树形结构，每个节点有自身的元素类型，所述元素类型包括：容器标签节点上的容器元素和实体标签节点上的实体元素，并设置有布局相关和绘制相关的样式属性。
根据上述分类，按照如下的方法对HTML文档中的信息逐类进行转换，最终我们可以实现把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档：
把HTML文档中的容器元素转换为XML文档中的容器元素；
把HTML文档中的实体元素转换为XML文档中的实体元素，并复制HTML文档中的数据内容到XML文档中；
把HTML文档的布局属性转换为XML文档中的布局属性；
把HTML文档的绘制属性转换为XML文档中的绘制属性。
将HTML文档中由网页窗口组件渲染的容器元素转换为由原生用户界面组件渲染的容器元素，需要一个从HTML文档中的容器元素转换到XML文档中的容器元素的布局容器转换表；
将HTML文档中由网页窗口组件渲染的实体元素转换为由原生用户界面组件渲染的实体元素，需要一个从HTML文档中的实体元素转换到XML文档中的实体元素的实体元素转换表；
将HTML文档中由网页窗口组件渲染的布局属性转换为由原生用户界面组件渲染的布局属性，需要一个从HTML文档中的布局属性转换到XML文档中的布局属性的布局属性转换表；
将HTML文档中由网页窗口组件渲染的绘制属性转换为由原生用户界面组件渲染的绘制属性，需要一个从HTML文档中的绘制属性转换到XML文档中的绘制属性的绘制属性转换表。
在把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档之前，将所述HTML文档作为第一HTML文档；
将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；
参照图1B，示出了根据本发明的转换方法示意图；
根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表可将HTML文档中的容器元素、实体元素、布局属性和绘制属性的转换为XML文档中的容器元素、实体元素、布局属性和绘制属性；
将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。
步骤110，接收访问所述网页的操作指令。
用户在原生应用的网页上点击控件，客户端接收用户访问所述网页的操作指令，该原生应用也可以描述为Native APP。
步骤120，根据所述操作指令向服务器发送针对所述网页的网页请求。
根据所述操作指令，在原生应用中创建TCP(Transmission Control Protocol，传输控制协议)链接；
根据所述TCP链接向服务器发送HTTP(Hyper Text Transfer Protocol，超文本传输协议)请求；
所述服务器中存储着针对所述网页的由HTML文档转化后的XML文档。
根据所述HTTP请求访问服务器中转化后的XML文档。
步骤130，接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回。
客户端接收服务器针对所述网页请求返回的XML文档。
步骤140，使用原生用户界面组件将所述XML文档进行渲染展示。
使用原生用户界面组件将客户端接收到的XML文档进行渲染，展示在原生应用的网页上。
参照图1C，示出了网页应用和原生应用的对比图；
原生应用中的程序代码，是用编译型语言，比如IOS***上是Object-C/swift，安卓***是Java开发，然后应用被编译成二进制或字节码形式的可执行文件后才安装在移动设备上，所以原生应用在执行时是直接运行在Android/IOS操作***之上，由操作***为应用分配内存、CPU、Wifi/GSM等设备资源；而网页应用，该网页应用也可以描述为Web App，是用解释型语言，比如HTML、CSS、Javascript开发，代码是运行在网页浏览器中，该网页浏览器也可以描述为Web Browser，在用户访问时才被网页浏览器的渲染引擎和Javascript引擎动态解释处理，而且应用要通过网页浏览器来调用操作***和设备的API，该操作***和设备也可以描述为Operating System和Device，并且由运行在操作***之上的网页浏览器来分配和管理网页所需的设备资源。所以，技术上讲，直接运行在操作***之上的原生应用，其性能和用户体验会优于运行在独立浏览器中的网页应用。
因此，相对在先技术，本发明实施例具备如下优点：
本发明实施例可以将在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于直接开发XML文档的成本高、工作量大，而开发HTML文档的成本低、速度快，通过开发HTML文档，再将所述HTML文档转化成XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的图片加载慢，上下滚动、缩放、左右滑动切换等手势交互体验差，CPU、内存、电量等设备资源消耗较大的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验，且能带来更低的开发成本和更快的开发速度。
实施例二
参照图2，示出了根据本发明一个实施例的把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档并用原生用户界面组件展示XML文档的方法实施例的步骤流程图，具体可以包括如下步骤：
在把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档之前，将所述HTML文档作为第一HTML文档；
步骤200，将第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素。
优选地，步骤200包括：
子步骤201，对所述第一HTML文档进行解析，生成文档对象模型树(DOMTree)和样式树(CSSOMTree)。
其中，所述第一HTML文档中的文档对象模型树和样式树的节点一一对应，且节点之间具有父子层级结构。
子步骤202，从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素。
从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素elem，调用window.getComputedStyle(elem)获取其关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；
比如“<p style＝"text-align:center；">天气一热，</p>”，<p>标签的显示属性值为block，默认是块容器元素；
比如“<span style＝"font-family:arial；color:red；">来自<strong>星星</strong>的你</span>”，<span>标签的显示属性值为inline，默认是行内元素。
子步骤203，如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据。
通过elem.childNodes读取容器元素elem的子节点列表childNodes，如果所述列表childNodes不为空，逐个遍历列表中的每一项childNode；
判断childNode的nodeName属性是否是“#text”；
比如“<p style＝"text-align:center；">天气一热，</p>”，容器元素的子节点列表中直接包含“天气一热”。
子步骤204，如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
如果childNode.nodeName＝＝“#text”，则所述容器元素直接包含文本数据；
比如“<p style＝"text-align:center；">天气一热，</p>”，即容器元素直接包含文本数据，通过调用<span>标签创建一个新的实体元素，并把所述文本数据“天气一热”填入所述实体元素“<span>”中，删除所述容器元素“</p>”中的文本数据“天气一热”，将“<pstyle＝"text-align:center；">天气一热，</p>”转换为“<p style＝"text-align:center；"><span>天气一热，</span></p>”。
如果所述第一HTML文档中的容器元素不直接包含文本数据，则不作处理。
子步骤205，如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素。
通过elem.childNodes读取元素的子节点列表，通过childNode.nodeName读取每一个子节点的节点名称；
判断elem子节点列表childNodes中是否既包含#text类型的子节点，又包含非“#text”类型的子节点；
比如“<span style＝"font-family:arial；color:red；">来自<strong>星星</strong>的你</span>”，实体元素既直接包含文本数据“来自”、“星星”“的你”，又包含实体元素<strong>。
子步骤206，如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
如果元素elem子节点列表childNodes中既包含#text类型的子节点，又包含非#text类型的子节点,则所述实体元素既直接包含文本数据和包含实体元素；
比如“<span style＝"font-family:arial；color:red；">来自<strong>星星</strong>的你</span>”，即实体元素既直接包含文本数据又包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据“来自”、“的你”，将<span style＝"font-family:arial；color:red；">来自<strong>星星</strong>的你</span>”转换成“<spanstyle＝"font-family:arial；color:red；"><span>来自</span><strong>星星</strong><span>的你</span></span>”。
如果所述第一HTML文档中的实体元素不包含其他实体元素，则不作处理。
步骤210，将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。
优选地，步骤210包括：
子步骤211，对所述第二HTML文档进行解析，生成文档对象模型树和样式树。
子步骤212，对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素。
其中，根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。
子步骤213，如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点(ViewGroup节点)，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树(ViewTree)中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点。
其中，布局容器转换表示例如表1：
表1
其中，上述布局容器转换表的第一列为HTML文档中的容器元素，上述布局容器转换表的第二列为XML文档的容器元素，上述布局容器转换表的第三列为转换后的XML文档的容器元素附带的布局属性。
容器元素的类型包括：垂直排列、水平排列、相对定位、绝对定位，所述容器元素的类型是由匹配该容器元素的CSS规则决定的，比如display:block/inline，position:relative/absolute决定。如果某个HTML文档中的元素没有设置布局容器相关的CSS规则，则由元素标签的默认display属性值决定，比如<div>、<p>标签默认是块容器元素，<span>、<em>标签默认是行内容器元素，比如display:inline。
在进行容器元素转换时，将所述布局容器转换表第一列中的HTML文档的容器元素转换成所述布局容器转换表第二列中的XML文档的容器元素。
子步骤214，如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点(View节点)，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中。
其中，实体元素转换表示例如表2
表2
其中，上述实体元素转换表的第一列为HTML文档中的实体元素，上述实体元素转换表的第二列为XML文档的实体元素，上述实体元素转换表的第三列为HTML文档和XML文档中的实体元素的具体描述。
一个HTML文档中的实体元素是没有子孙后代元素的叶子元素，它们直接关联待展示的数据内容，所述数据内容包括文本、图片URL、链接URL；
在进行实体元素转换时，将所述实体元素转换表第一列中的HTML文档的实体元素转换成所述实体元素转换表第二列中的XML文档的实体元素。
由于实体元素直接负责展示数据内容，所以在转换实体元素时需要把HTML文档中的实体元素的数据内容同步复制给XML文档中的实体元素。实体元素的数据内容一般通过某个特定的属性关联，或者直接作为元素的内容嵌入：比如HTML文档中用于展示图片的Img元素，其src属性指示图片文件的URL，与之对应的XML文档ImageView的android:src属性；对于HTML文档中用于展示文本的<span>、<em>、<strong>等元素，文本数据直接作为元素内容嵌入；除链接<A>以外的其他实体元素的数据内容同步复制规则类似；
对于HTML文档中的实体元素的数据内容是链接时，所述链接包含两个数据:文本数据和跳转地址URL，链接是一个点击后可以发生页面跳转的元素，外观上是一个带下划线的文本，且所述HTML文档中链接在XML文档中没有直接对应的实体元素，但是所述链接和按钮控件<Button>的行为类似，都是可点击的文本数据，所述按钮控件<Button>默认带有灰色背景，并且点击后默认没有跳转行为，所以在把链接转换为按钮控件<Button>时，除了把文本数据复制到按钮控件<Button>，还要设置透明背景样式属性和删除线样式属性，同时把点击后的跳转地址URL通过自定义属性html:href传递给<Button>元素，由后续的自定义属性处理过程注册点击事件监听程序，实现用户点击后让页面跳转的动作。
子步骤215，对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上。
其中，布局属性转换表示例如表3
表3
其中，上述布局属性转换表的第一列为HTML文档中的布局属性，上述布局属性转换表的第二列为XML文档的布局属性，上述布局属性转换表的第三列为HTML文档和XML文档中的布局属性的具体描述。
所述布局属性包括：尺寸、间距、位置和水平方向对齐，HTML文档中的布局属性和XML文档中的布局属性直接对应，所以在进行布局属性转换时，将所述布局属性转换表第一列中的HTML文档的布局属性转换成所述布局属性转换表第二列中的XML文档的布局属性。
子步骤216，对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上。
其中，绘制属性转换表示例如表4
表4
其中，上述绘制属性转换表的第一列为HTML文档中的绘制属性，上述绘制属性转换表的第二列为XML文档的绘制属性，上述绘制属性转换表的第三列为HTML文档和XML文档中的绘制属性的具体描述。
绘制属性包括：背景色、文字颜色、字体大小、字体系列、字体加粗、字体倾斜、边框圆角角度、下划线和删除线，绘制属性转换的可行性与复杂度，不尽相同。
在进行实体元素转换时，将所述绘制属性转换表第一列中的HTML文档的绘制属性转换成所述绘制属性转换表第二列中的XML文档的绘制属性。
背景色、文字颜色、字体大小、字体系列、字体加粗、字体倾斜效果的绘制属性直接根据制属性转换表进行转换；
对于边框圆角角度，在原生用户界面上，需要额外生成一个元素实体，该实体元素带有corners前缀，并在上述实体元素上的android:background属性中引用<corners>元素，比如对于第二HTML文档中“border-radius:5px”，
需要额外生成一个实体元素<corners android:radius＝”5dp”/>，并在上述实体元素上的android:background属性中引用<corners>元素，其中上述示例中的“5dp”是边框圆角的具体角度大小，可根据实际情况来确定；
对于文字下划线和删除线效果，在原生用户界面上，要使用原生用户界面API调用的方式进行转换，比如第二HTML文档中的下划线效果“text-decoration:underline”，在原生用户界面要调用textview.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG)来实现；比如第二HTML文档中的删除线效果“text-decoration:line-through”，在原生用户界面要调用textview.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG)来实现。
子步骤217，根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。
经过子步骤212到子步骤216，得到针对XML格式的视图树，然后从该视图树根节点开始递归遍历，反向编译包含内联样式数据的XML文档。该反向编译过程与将XML文档经过解析器解析为视图树的过程相反，逆向编译得到XML文档。
步骤220，接收访问所述网页的操作指令。
本发明实施例的步骤220与实施例一的步骤110原理类似，在此不再详述。
步骤230，根据所述操作指令向服务器发送针对所述网页的网页请求。
本发明实施例的步骤230与实施例一的步骤120原理类似，在此不再详述。
步骤240，接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回。
本发明实施例的步骤240与实施例一的步骤130原理类似，在此不再详述。
步骤250，使用原生用户界面组件将所述XML文档进行渲染展示。
本发明实施例的步骤250与实施例一的步骤140原理类似，在此不再详述。
相对在先技术，本发明实施例具备如下优点：
本发明实施例可以将在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于直接开发XML文档的成本高、工作量大，而开发HTML文档的成本低、速度快，通过开发HTML文档，再将所述HTML文档转化成XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的图片加载慢，上下滚动、缩放、左右滑动切换等手势交互体验差，CPU、内存、电量等设备资源消耗较大的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验，且能带来更低的开发成本和更快的开发速度。
实施例三
参照图3，示出了根据本发明一个实施例的一种用原生用户界面组件展示网页的***实施例的结构框图，具体可以包括如下模块：
所述***包括：服务器和客户端；
所述服务器300包括：
转换模块301，用于在服务器侧将针对网页的第一HTML文档转换为XML文档。
开发人员使用富文本编辑器手动编辑展示性网页，并生成非结构化数据，这些非结构化数据上传到后台***之后以HTML文档进行存储；
在把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档之前，将所述HTML文档作为第一HTML文档；
预处理模块，用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；
文档转换模块，用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档。
所述客户端310包括：
接收模块311，用于接收访问所述网页的操作指令。
发送模块312，用于根据所述操作指令向服务器发送针对所述网页的网页请求。
返回模块313，用于接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回。
展示模块314，用于使用原生用户界面组件将所述XML文档进行渲染展示。
相对在先技术，本发明实施例具备如下优点：
本发明实施例可以将在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于直接开发XML文档的成本高、工作量大，而开发HTML文档的成本低、速度快，通过开发HTML文档，再将所述HTML文档转化成XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的图片加载慢，上下滚动、缩放、左右滑动切换等手势交互体验差，CPU、内存、电量等设备资源消耗较大的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验，且能带来更低的开发成本和更快的开发速度。
实施例四
参照图4，示出了根据本发明一个实施例的把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档并用原生用户界面组件展示XML文档的***实施例的结构框图，具体可以包括如下模块：
所述***包括：服务器和客户端；
所述服务器400包括：
在把表示网页用户界面的HTML文档转换成表示原生用户界面的XML文档之前，将所述HTML文档作为第一HTML文档。
预处理模块401，用于将第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素。
优选地，预处理模块401包括：
第一解析模块4011，用于对所述第一HTML文档进行解析，生成文档对象模型树和样式树。
元素类型判断模块4012，用于从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；
容器元素子节点列表判断模块4013，用于如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据。
容器元素预处理模块4014，用于如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
实体元素子节点列表判断模块4015，用于如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素。
实体元素预处理模块4016，用于如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
文档转换模块402，用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档；
优选地，文档转换模块402包括：
第二解析模块4021，用于对所述第二HTML文档进行解析，生成文档对象模型树和样式树；
判断模块4022，用于对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；
其中，根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素；
容器元素转换模块4023，用于如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；
实体元素转换模块4024，用于如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；
布局属性转换模块4025，用于对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；
绘制属性转换模块4026，用于对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；
反向编译模块4027，用于根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档。
所述客户端410包括：
接收模块411，用于接收访问所述网页的操作指令。
发送模块412，用于根据所述操作指令向服务器发送针对所述网页的网页请求。
返回模块413，用于接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回。
展示模块414，用于使用原生用户界面组件将所述XML文档进行渲染展示。
相对在先技术，本发明实施例具备如下优点：
本发明实施例可以将在服务器侧将针对网页的第一HTML文档转换为XML文档；接收访问所述网页的操作指令，根据所述操作指令向服务器发送针对所述网页的网页请求，接收所述服务器返回的XML文档，使用原生用户界面组件将所述XML文档进行渲染展示。由于直接开发XML文档的成本高、工作量大，而开发HTML文档的成本低、速度快，通过开发HTML文档，再将所述HTML文档转化成XML文档，使用原生用户界面组件将所述XML文档进行渲染展示，由此解决了使用网页窗口组件展示HTML文档带来的图片加载慢，上下滚动、缩放、左右滑动切换等手势交互体验差，CPU、内存、电量等设备资源消耗较大的性能和用户体验问题，在保证和网页窗口组件同样展示效果的同时，使用原生用户界面组件展示能带来更好的性能和用户体验，且能带来更低的开发成本和更快的开发速度。
对于***实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
在此提供的算法和显示不与任何特定计算机、虚拟***或者其它设备固有相关。各种通用***也可以与基于在此的示教一起使用。根据上面的描述，构造这类***所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的用原生用户界面组件展示网页的方法及***设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (6)

1.一种用原生用户界面组件展示网页的方法，其特征在于，包括：
在服务器侧将针对网页的第一HTML文档转换为XML文档；其中，所述在服务器侧将针对网页的所述第一HTML文档转换为所述XML文档的步骤至少包括：将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；将所述第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档；所述生成XML文档的步骤，包括：对所述第二HTML文档进行解析，生成文档对象模型树和样式树；对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档；
接收访问所述网页的操作指令；
根据所述操作指令向服务器发送针对所述网页的网页请求；
接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；
使用原生用户界面组件将所述XML文档进行渲染展示。
2.如权利要求1所述的方法，其特征在于，所述对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的步骤，包括：
根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。
3.如权利要求1所述的方法，其特征在于，所述将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的步骤，包括：
对所述第一HTML文档进行解析，生成文档对象模型树和样式树；
从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；
如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；
如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；
如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；
如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
4.一种用原生用户界面组件展示网页的***，其特征在于，包括：
所述***包括：服务器和客户端；
所述服务器包括：
转换模块，用于在服务器侧将针对网页的第一HTML文档转换为XML文档；其中，所述用于在服务器侧将针对网页的第一HTML文档转换为XML文档的转换模块，包括：
预处理模块，用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素；
文档转换模块，用于将第二HTML文档中由网页窗口组件渲染的容器元素、实体元素、布局属性和绘制属性，分别根据布局容器转换表、实体元素转换表、布局属性转换表和绘制属性转换表，转换为由原生用户界面组件渲染的容器元素、实体元素、布局属性和绘制属性，从而生成XML文档；所述生成XML文档的文档转换模块，包括：
第二解析模块，用于对所述第二HTML文档进行解析，生成文档对象模型树和样式树；
判断模块，用于对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型；所述元素类型包括：容器元素和实体元素；
容器元素转换模块，用于如果所述文档对象模型节点是容器元素，根据文档对象模型节点的关联的样式节点中的显示属性值和位置属性值，在布局容器转换表中查找到对应的XML文档的容器元素记录，转换生成XML文档中的视图组节点，并根据文档对象模型节点把所述视图组节点加入到对应的XML文档的视图树中的父节点的子节点列表中，如果无父节点，所述XML文档中的视图组节点为视图树的根节点；
实体元素转换模块，用于如果所述文档对象模型节点是实体元素，根据实体元素的标签在实体元素转换表中查找到对应的XML文档实体元素记录，转换生成XML文档中的视图节点，复制HTML文档中的数据内容到XML文档中的视图节点，并根据文档对象模型节点把所述视图节点加入到对应的XML文档的视图树中的父节点的子节点列表中；
布局属性转换模块，用于对于样式树中每一个文档对象模型节点对应的布局属性和布局属性值，根据布局属性转换表，转换生成对应的视图组节点或视图节点中的布局属性，并复制布局属性值，将转换后的布局属性和布局属性值加入到视图树中对应的视图组节点或视图节点上；
绘制属性转换模块，用于对于样式树中每一个文档对象模型节点对应的绘制属性和绘制属性值，根据绘制属性转换表，转换生成对应的视图组节点或视图节点中的绘制属性，并复制绘制属性值，将转换后的绘制属性和绘制属性加入到视图树中对应的视图组节点或视图节点上；
反向编译模块，用于根据所述视图树，从根节点开始递归遍历，反向编译包含内联样式数据的XML文档；
所述客户端包括：
接收模块，用于接收访问所述网页的操作指令；
发送模块，用于根据所述操作指令向服务器发送针对所述网页的网页请求；
返回模块，用于接收所述服务器返回的XML文档；所述XML文档由服务器根据所述网页请求返回；
展示模块，用于使用原生用户界面组件将所述XML文档进行渲染展示。
5.如权利要求4所述的***，其特征在于，所述用于对于所述文档对象模型树中的每一个文档对象模型节点，判断所述文档对象模型节点的元素类型的判断模块，包括：
判断模块，用于根据所述文档对象模型节点中的元素，读取元素的子节点列表，如果所述子节点列表为空或没有元素节点，则所述元素为实体元素；如果所述子节点列表不为空或有元素节点，则所述元素为容器元素。
6.如权利要求4所述的***，其特征在于，所述用于将所述第一HTML文档进行预处理，获得第二HTML文档；所述第二HTML文档中的实体元素只包含数据内容，不包含其他实体元素，以及容器元素不直接包含数据内容，只包含实体元素或容器元素的预处理模块，包括：
第一解析模块，用于对所述第一HTML文档进行解析，生成文档对象模型树和样式树；
元素类型判断模块，用于从根元素开始遍历文档对象模型树，对于所述文档对象模型树的每一个元素，获取所述元素关联的样式节点，通过读取所述样式节点的显示属性值，判断所述元素的元素类型；所述元素类型包括：容器元素和实体元素；
容器元素子节点列表判断模块，用于如果所述元素类型为容器元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据；
容器元素预处理模块，用于如果所述容器元素直接包含文本数据，则在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据；
实体元素子节点列表判断模块，用于如果所述元素类型为实体元素，则通过读取所述元素的子节点列表，判断所述元素的子节点列表是否直接包含文本数据和包含实体元素；
实体元素预处理模块，用于如果所述实体元素直接包含文本数据和包含实体元素，则把外层的实体元素默认为容器元素，在所述容器元素中通过调用<span>标签创建一个新的实体元素，并把所述文本数据填入所述实体元素中，删除所述容器元素中的文本数据。
CN201610799828.7A 2016-08-31 2016-08-31 一种用原生用户界面组件展示网页的方法及*** Active CN106371844B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610799828.7A CN106371844B (zh) 2016-08-31 2016-08-31 一种用原生用户界面组件展示网页的方法及***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610799828.7A CN106371844B (zh) 2016-08-31 2016-08-31 一种用原生用户界面组件展示网页的方法及***

Publications (2)

Publication Number Publication Date
CN106371844A CN106371844A (zh) 2017-02-01
CN106371844B true CN106371844B (zh) 2019-10-22

Family

ID=57900303

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610799828.7A Active CN106371844B (zh) 2016-08-31 2016-08-31 一种用原生用户界面组件展示网页的方法及***

Country Status (1)

Country Link
CN (1) CN106371844B (zh)

Families Citing this family (33)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107015740A (zh) * 2017-03-16 2017-08-04 北京猎豹移动科技有限公司 移动终端屏幕的控制方法、装置以及移动终端
CN107066618B (zh) * 2017-05-09 2020-06-05 灯塔财经信息有限公司 一种网页页面转换后显示方法和装置
CN109033061B (zh) * 2017-06-09 2020-09-04 北大方正集团有限公司 排版方法和排版装置
CN107368561B (zh) * 2017-07-07 2020-06-02 北京小米移动软件有限公司 页面的绘制方法、装置及终端
CN107436927B (zh) * 2017-07-10 2019-12-17 长城计算机软件与***有限公司 一种ui组件的应用方法和***
CN109426499A (zh) * 2017-08-30 2019-03-05 武汉斗鱼网络科技有限公司 一种web页面扩充方法及装置
CN108037967A (zh) * 2017-11-27 2018-05-15 深圳市丰巢科技有限公司 一种基于多父子结构的菜单加载方法以及电子设备
CN108255801A (zh) * 2018-01-19 2018-07-06 深圳市富途网络科技有限公司 一种Android TextView两端对齐的实现方法
CN108279932B (zh) * 2018-01-22 2021-05-25 北京奇艺世纪科技有限公司 一种移动终端动态配置用户界面方法和装置
CN108415702B (zh) * 2018-01-22 2021-05-25 北京奇艺世纪科技有限公司 一种移动终端应用界面动态渲染方法和装置
CN110309454B (zh) * 2018-03-06 2023-07-11 腾讯科技（深圳）有限公司 一种界面显示方法、装置、设备及存储介质
CN110457656B (zh) * 2018-05-08 2022-05-24 阿里巴巴集团控股有限公司 一种文档展示方法、装置和机器可读介质
CN111831387B (zh) * 2018-05-14 2024-01-02 创新先进技术有限公司 一种页面处理方法、装置及设备
CN109032722B (zh) * 2018-06-27 2021-09-28 广州视源电子科技股份有限公司 更新ui组件的显示效果的方法、装置及设备、介质
CN110750248B (zh) * 2018-07-23 2023-06-02 贵州白山云科技股份有限公司 一种用于传递现有组件的扩展信息的方法及装置
CN109117231A (zh) * 2018-08-16 2019-01-01 福建天泉教育科技有限公司 Android应用的界面布局方法、存储介质
CN109408372A (zh) * 2018-09-26 2019-03-01 平安普惠企业管理有限公司 公共组件测试方法、装置、计算机设备和存储介质
CN109634579B (zh) * 2018-10-29 2023-08-22 平安科技（深圳）有限公司 代码生成方法、装置、计算机装置及存储介质
CN109710863A (zh) * 2018-11-27 2019-05-03 平安科技（深圳）有限公司 信息转换方法、装置、计算机设备及存储介质
CN111506848A (zh) * 2019-01-30 2020-08-07 阿里巴巴集团控股有限公司 网页处理方法、装置、设备及可读存储介质
CN109814866B (zh) * 2019-01-31 2022-02-08 天津字节跳动科技有限公司 页面应用转化为原生应用的处理方法和装置
CN110543265A (zh) * 2019-07-22 2019-12-06 北京达佳互联信息技术有限公司 页面标题栏的生成方法、装置、电子设备及存储介质
CN112463269B (zh) * 2019-09-06 2022-03-15 青岛海信传媒网络技术有限公司 用户界面显示方法及显示设备
CN110708235B (zh) * 2019-10-12 2021-07-06 腾讯科技（深圳）有限公司 消息生成方法、装置、存储介质和计算机设备
CN111078337B (zh) * 2019-11-27 2023-08-29 用友网络科技股份有限公司 样式调整方法、***及计算机可读存储介质
CN111309424B (zh) * 2020-02-12 2023-09-22 中国平安人寿保险股份有限公司 一种页面还原方法及相关设备
CN111241793B (zh) * 2020-02-17 2023-12-08 湖南快乐阳光互动娱乐传媒有限公司 解析富文本编辑器内容给原生客户端渲染的方法、***及介质
CN111626031B (zh) * 2020-06-02 2023-08-08 浪潮软件股份有限公司 一种大数据前端表格组件的实现方法
CN111966354A (zh) * 2020-08-17 2020-11-20 Oppo（重庆）智能科技有限公司 一种页面显示方法、装置及计算机可读存储介质
CN112380482B (zh) * 2020-12-07 2022-08-16 四川长虹电器股份有限公司 可动态配置标签页的装置
CN114816609B (zh) * 2021-01-29 2024-05-28 抖音视界有限公司 展示窗口的方法、装置、电子设备及计算机可读存储介质
CN113360106B (zh) * 2021-06-30 2022-12-09 建信金融科技有限责任公司 一种网页打印方法和装置
CN115061688B (zh) * 2022-08-17 2022-11-04 统信软件技术有限公司 一种页面效果展示方法、计算设备及存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101197849A (zh) * 2007-12-21 2008-06-11 腾讯科技（深圳）有限公司 将互联网页面转换为无线应用协议页面的转换方法和装置
CN101216838A (zh) * 2008-01-15 2008-07-09 中兴通讯股份有限公司 基于web标记的xml界面配置文件分发***及方法
CN102156742A (zh) * 2011-04-19 2011-08-17 北京神州数码思特奇信息技术股份有限公司 支持手机使用自带浏览器展示结构化文档的方法及中间件
CN102163233A (zh) * 2011-04-18 2011-08-24 北京神州数码思特奇信息技术股份有限公司 一种网页标记语言格式转换方法及***
CN102646039A (zh) * 2012-02-29 2012-08-22 河海大学 基于XML Schema的软件界面生成***及方法
CN102662984A (zh) * 2012-03-14 2012-09-12 南京新与力文化传播有限公司 基于html的多平台消息处理方法
CN105095449A (zh) * 2015-07-27 2015-11-25 福州盈展信息技术有限公司 一种将html网页转换为移动终端页面的方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101197849A (zh) * 2007-12-21 2008-06-11 腾讯科技（深圳）有限公司 将互联网页面转换为无线应用协议页面的转换方法和装置
CN101216838A (zh) * 2008-01-15 2008-07-09 中兴通讯股份有限公司 基于web标记的xml界面配置文件分发***及方法
CN102163233A (zh) * 2011-04-18 2011-08-24 北京神州数码思特奇信息技术股份有限公司 一种网页标记语言格式转换方法及***
CN102156742A (zh) * 2011-04-19 2011-08-17 北京神州数码思特奇信息技术股份有限公司 支持手机使用自带浏览器展示结构化文档的方法及中间件
CN102646039A (zh) * 2012-02-29 2012-08-22 河海大学 基于XML Schema的软件界面生成***及方法
CN102662984A (zh) * 2012-03-14 2012-09-12 南京新与力文化传播有限公司 基于html的多平台消息处理方法
CN105095449A (zh) * 2015-07-27 2015-11-25 福州盈展信息技术有限公司 一种将html网页转换为移动终端页面的方法

Also Published As

Publication number Publication date
CN106371844A (zh) 2017-02-01

Similar Documents

Publication Publication Date Title
CN106371844B (zh) 一种用原生用户界面组件展示网页的方法及***
US20130326333A1 (en) Mobile Content Management System
US20050160065A1 (en) System and method for enhancing resource accessibility
US20100205524A1 (en) Extensible stylesheet designs using meta-tag information
US20210149842A1 (en) System and method for display of document comparisons on a remote device
US9053199B2 (en) Uniquely identifying script files by appending a unique identifier to a URL
CN110309451A (zh) 一种web预加载页面的生成方法及装置
US20150227276A1 (en) Method and system for providing an interactive user guide on a webpage
CN105094786A (zh) 基于JavaScript定制页面的方法及***
EP3156919A1 (en) Methods for transforming a server side template into a client side template and devices thereof
CA2714228C (en) Complex input to image transformation for distribution
US10671801B2 (en) Markup code generator
Harper et al. Sadie: Structural semantics for accessibility and device independence
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
US10198408B1 (en) System and method for converting and importing web site content
Macaulay Introduction to web interaction design: With Html and Css
CN105740239A (zh) 一种网页上文字的翻译方法及***
Artail et al. Device-aware desktop web page transformation for rendering on handhelds
CN115659087B (zh) 页面渲染方法、设备及存储介质
US20210397663A1 (en) Data reduction in a tree data structure for a wireframe
Johnson Programming in HTML5 with JavaScript and CSS3
Mahdavi et al. Web transcoding for mobile devices using a tag-based technique
Sodnik et al. The future of web
Sun et al. Design and implementation of 3D effect web page based on JavaScript technology
Xiaoshu Optimized development of web front-end development technology

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant