CN107066618A

CN107066618A - 一种网页页面转换后显示方法和装置

Info

Publication number: CN107066618A
Application number: CN201710322026.1A
Authority: CN
Inventors: 冯凯; 朱留锋; 荣强; 田淑宁
Original assignee: Lighthouse Financial Information Ltd
Current assignee: LightHouse Technology Co Ltd
Priority date: 2017-05-09
Filing date: 2017-05-09
Publication date: 2017-08-18
Anticipated expiration: 2037-05-09
Also published as: CN107066618B

Abstract

本发明涉及网页显示技术领域，提供了一种网页页面转换后显示方法和装置。其中方法包括：在获取打开网页链接指令后，根据网页内容拉取页面结点数据，根据所述结点数据类型，得到布局文件；根据对应所述网页链接的格式内容，转换得到样式文件；调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象；所述结点数据在加载完所述布局文件和样式文件后，以对应的格式和位置将相应内容显示在窗口中。本发明实施例提供的方法，通过结点数据，展示不同的终端界面结构，使得页面可以以原生的方式展示在客户端中。界面为原生终端体验，性能和效果比HTML5页面打开方式强数倍。

Description

一种网页页面转换后显示方法和装置

【技术领域】

本发明涉及网页显示技术领域，特别是涉及一种网页页面转换后显示方法和装置。

【背景技术】

在Android中，一般网页的打开都是将网页以webview的形式展示在终端中，这样的话终端webview需要初始化、页面需要加载，打开速度会很慢。而且页面性能和效果也会受到webview限制，甚至开发者还需要为页面的展示做很多适配性工作。

上述基于webview实现的，页面内容在各种终端上面展示的效果差，页面打开会有一个加载的过程，用户体验差。页面内容需要在各种终端上面做适配，才能在终端上面展示完美，增加了编程的负担。

鉴于此，克服该现有技术所存在的缺陷是本技术领域亟待解决的问题。

【发明内容】

本发明要解决的技术问题基于webview实现的，页面内容在各种终端上面展示的效果差，页面打开会有一个加载的过程，用户体验差。页面内容需要在各种终端上面做适配，才能在终端上面展示完美，增加了编程的负担。

本发明采用如下技术方案：

本发明第一方面提供了一种网页页面转换后显示方法，在获取打开网页链接指令后，根据网页内容拉取页面结点数据，方法包括：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象；其中，样式文件在内容加载函数加载所述布局文件的过程中被调用；

所述结点数据在加载完所述布局文件和样式文件后，以对应的格式和位置将相应内容显示在窗口中。

优选的，所述根据网页内容拉取页面结点数据，具体包括：

将网页内容中记载的一个或者多个对象，以JSON语言转换为结点数据；其中，网页内容中记载的对象类型包括：文本类型、图片类型、视频类型和Flash类型中的一种或者多种；

其中，以JSON语言转换得到的每一个结点数据的属性为JSON语言中的对象类型。

优选的，所述根据所述结点数据类型，得到布局文件，具体包括：

加载用于生成布局文件的执行程序；

通过加载的所述执行程序遍历各结点数据，并根据各结点数据所包含的对象类型，调用布局库中相应参数生成布局代码；

在遍历完从网页中拉取的所有结点数据后，生成布局文件。

优选的，在微信小程序中，所述布局文件为xml语言描述的文件；在Android***中，所述布局文件为Android控件布局描述方式实现。

优选的，在承载所述网页链接的平台为android***时，所述根据对应所述网页链接的格式内容，转换得到样式文件，具体包括：

解析所述格式内容得到以各结点数据为描述对象的一项或者多项格式内容；

利用xml语言为各描述对象建立style类型数据，并将对应描述对象的一项或者多项格式内容，赋值到所建立的style类型数据中的各item项中；其中，item项包括颜色、边距、位置和显示比例中的一项或者多项。

优选的，所述调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象，具体包括：

所述内容加载函数为setContentView(布局文件地址)，其中，以布局文件的首地址作为所述setContentView的输入参数。

优选的，在承载所述网页链接的平台为微信小程序时，所述根据对应所述网页链接的格式内容，转换得到样式文件，具体包括：

利用CSS语言为各描述对象建立属性簇，并将对应描述对象的一项或者多项格式内容，赋值到所建立的属性簇中相应属性中；

其中，属性簇中的属性包括：颜色、边距、位置和显示比例中的一项或者多项。

第二方面，本发明还提供了一种网页页面转换后显示装置，包括存储器和处理器，其中，处理器和存储器通过主线连接具体的：

所述处理器，用于实现各指令；

所述存储器，用于存储多条指令，所述指令适于由处理器加载并执行：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

优选的，所述处理器加载指令后，还用于：

加载用于生成布局文件的执行程序；

在遍历完从网页中拉取的所有结点数据后，生成布局文件。

第三方面，本发明还提供了一种存储设备，存储设备中存储有多条指令，所述指令适于由处理器加载并执行：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

在本发明中采用使用数据来控制终端界面的方式，首先将页面转化成各个结点数据，页面相关css样式数据转化成各终端相关样式代码。终端内置统一css样式转化代码，在打开页面的时候，先去拉取页面结点数据，通过结点数据，展示不同的终端界面结构。这样页面就可以以原生的方式展示在客户端中。因为页面是以原生的方式展示，所以不需要打开webview，就没有webview初始化过程，没有页面代码加载过程，结点数据可以在用户点击的时候就开始拉取，所以页面代码也不会有加载过程，也不会有各种适配问题。界面为原生终端体验，性能和效果比HTML5页面打开方式强数倍。

【附图说明】

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

图1是本发明实施例提供的一种网页页面转换后显示方法的流程示意图；

图2是本发明实施例提供的一种布局文件生成流程示意图；

图3是本发明实施例提供的一种样式文件生成流程示意图；

图4是本发明实施例提供的另一种样式文件生成流程示意图；

图5是本发明实施例提供的一种网页页面转换后显示装置的结构示意图。

【具体实施方式】

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本发明的描述中，术语“内”、“外”、“纵向”、“横向”、“上”、“下”、“顶”、“底”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明而不是要求本发明必须以特定的方位构造和操作，因此不应当理解为对本发明的限制。

此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

实施例1:

本发明实施例1提供了一种网页页面转换后显示方法，所述显示方法适用于各种操作***的终端设备，包括android***、ios***、pc***和Windows Phone操作***等，除此以外还适用于特定应用场合，例如：微信小程序。如图1所示，本实施例显示方法包括：

在步骤201中，获取打开网页链接指令，根据网页内容拉取页面结点数据。

在本发明实施例中，由于不需要打开webview，就没有webview初始化过程，没有页面代码加载过程，结点数据可以在用户点击网页链接的时候就开始拉取。

其中，列举本发明各实施例中所采用的网页内容为例，其内容包括：

<p>导语：美国空袭叙利亚，全球资本市场各有反应，原油、<a data-seccode＝"2020883269"data-secname＝"黄金">黄金</a>、日元飙升，这些基金有机会。</p>

在步骤202中，根据所述结点数据类型，得到布局文件。

在本发明实施例中，所述布局文件可以是由xml语言编写完成，也可以是由json语言编写完成，在本发明后续的实施例中将侧重从json语言编写角度触发阐述实施例1中各执行步骤的细化实现方式，但是，本领域技术人员均可以在相应实施例公开的json语言实现方式基础上，经过合理的推理，在无需创造性劳动的情况下，将相应的基于json语言实现的方式转移到由xml语言实现，两者均在本发明的保护范围内。

在步骤203中，根据对应所述网页链接的格式内容，转换得到样式文件。

其中，对应所述网页链接的格式内容可以被编辑在上述网页内容中，也可以以单独的格式文件存在，例如基于CSS架构实现的，且以.css后缀名存在的格式文件。

所述样式文件通常以xml语言编写完成，样式文件中记录有与布局文件中所包含的对象类型或者对象内容相对应的属性项。所述属性项可以是默认格式的，例如：微信小程序中通常对于网页的显示是采用默认格式完成；所述属性项还可以是由原本就对应网页的.css后缀名的格式文件转换得到，上述两种方式均在本执行步骤所包含的范围内。

在步骤204中，调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象；其中，样式文件在内容加载函数加载所述布局文件的过程中被调用。

其中，显示窗口对象为了显示网页内容而创建的，可以是在用户点击网页链接的时候便生成；还可以是母程序在执行到相应需要显示网页内容的时候创建。

在步骤205中，所述结点数据在加载完所述布局文件和样式文件后，以对应的格式和位置将相应内容显示在窗口中。

其中，相应内容为从网页内容中拉取的结点数据在服务器上和本地主机上存储的媒体内容，所述媒体内容包括图片内容、视频内容或者文字内容。除此以外，相应内容还包括直接从网页内容中拉取的文字内容等。

本发明实施例提供的方法，能够在打开页面的时候，先去拉取页面结点数据。通过结点数据，展示不同的终端界面结构，使得页面就可以以原生的方式展示在客户端中。因为页面是以原生的方式展示，所以不需要打开webview，就没有webview初始化过程。界面为原生终端体验，性能和效果比HTML5页面打开方式强数倍。

实施例2:

本发明实施例是对于实施例1中如何完成结点数据拉取的实现方法的细化，具体使用了各个终端***都适用的描述语言(例如：JSON语言)，所述各终端***包括：Android***、IOS***、WINCE***、WINPhone等等。在本发明实施例，对应于实施例1中步骤201中的所述根据网页内容拉取页面结点数据，具体实现为：

将网页内容中记载的一个或者多个对象，以JSON语言转换为结点数据；

其中，网页内容中记载的对象类型包括：文本类型、图片类型、视频类型和Flash类型中的一种或者多种；

以微信小程序的网页代码为例，其网页内容示例如下：

<p>导语：美国空袭叙利亚，全球资本市场各有反应，原油、

<a data-seccode＝"2020883269"data-secname＝"黄金">黄金</a>、日元飙升，这些基金有机会。</p>

其数据结点表现为：

[{"type":"text","text":"导语：美国空袭叙利亚，全球资本市场各有反应,原油、"},{"type":"a","text":"黄金","attr":{"data-seccode":"2020883269","data-secname":"黄金"}}，{"type":"text","text":"、日元飙升，这些基金有机会。"},{"type":"img","attr":{"src":"http://www.upchina.com/upload/topic/2017-04-08/1491618524443057267.GIF","title":"1491618524443057267.GIF","alt":"1.GIF"}}]。

其中，"导语：美国空袭叙利亚，全球资本市场各有反应,原油、"对应的对象类型为"text"类型(即文本类型)；而其中，"http://www.upchina.com/upload/topic/2017-04-08/1491618524443057267.GIF"所对应的对象类型为"img"类型(即图片类型)。

对应上述微信小程序的网页代码，在以JSON语言转换得到的结点数据表现为：

其中，parseHtmlNode:[Object,Object,Object,Object,Object,Object]指代了所包含的结点个数，对于每一个Object均对应一Type属性项，以及用于承载各Object的内容项，例如：文本类型的内容则承载在Text项中，包括：Text:”导语：美国空袭叙利亚，全球资本市场各有反应，原油、”。

而经过Json编程语言梳理过的结点数据，能够更便捷的被本发明实施例所提出的用于生成布局文件的执行程序所调取和识别。避免了原本HTML文件中过多非结点数据的存在，给所述执行程序的执行效率造成影响。

实施例3:

本发明实施例可用于实施例1所述方法，为步骤202中，根据所述结点数据类型，得到布局文件，提供了一种细化的实现方式，如图2所示，包括：

在步骤301中，加载用于生成布局文件的执行程序。

所述用于生成布局文件的执行程序为本发明实施例所提出，其实现原理是利用for循环，将步骤201中生成多个结点数据进行数据类型识别，并且根据自身布局库中存储有的对应于各数据类型的布局数据，与相应结点数据复合生成布局文件。

现以微信小程序为例，本发明实施例提供了一组用于生成布局文件的执行程序代码，如下：

上述用于生成布局文件的执行程序代码。

在步骤302中，通过加载的所述执行程序遍历各结点数据，并根据各结点数据所包含的对象类型，调用布局库中相应参数生成布局代码。

其中，布局代码作用更多的是为各结点数据生成其在样式文件中关联代码，除此以外，所述布局代码还涉及对整体布局的参数设置，例如：

android:layout_width＝"match_parent"

android:layout_height＝"match_parent"

android:orientation＝"vertical"

其中，layout_width、layout_height和orientation参数设置了用于页面内容显示所对应的布局界面的基本要素。

在步骤303中，在遍历完从网页中拉取的所有结点数据后，生成布局文件。

在微信小程序中，所述布局文件为xml语言描述的文件；在Android***中，所述布局文件为Android控件布局描述方式实现。

以Android控件布局描述方式实现为例，展示实施例1中所展示的网页内容，对应的布局文件如下：

<LinearLayout xmlns:android＝"http://schemas.android.com/apk/res/android"

xmlns:tools＝"http://schemas.android.com/tools"

android:layout_width＝"match_parent"

android:layout_height＝"match_parent"

android:orientation＝"vertical"

android:paddingBottom＝"20dp"

<TextView

android:id＝"@+id/div"

style＝"@style/blue_btn_style"

android:text＝"导语：美国空袭叙利亚，全球资本市场各有反应，原油、"

/>

<TextView

android:id＝"@+id/a"

style＝"@style/a"

android:text＝"黄金"

/>

<TextView

android:id＝"@+id/div"

style＝"@style/div"

android:text＝"日元飙升，这些基金有机会。"

/>

<ImageView

android:id＝"@+id/img"

style＝"@style/img"

android:src＝"http://www.upchina.com/upload/topic/2017-04-08/1491618524443057267.GIF"/>

</LinearLayout>

实施例4:

本发明实施例可用于实施例1所述方法，在承载所述网页链接的平台为android***时，步骤203中所述根据对应所述网页链接的格式内容，转换得到样式文件，如图3所示，具体实现为：

在步骤401中，解析所述格式内容得到以各结点数据为描述对象的一项或者多项格式内容。

在步骤402中，利用xml语言为各描述对象建立style类型数据，并将对应相应描述对象的一项或者多项格式内容，赋值到所建立的style类型数据中的各item项中。

其中，item项包括颜色、边距、位置和显示比例中的一项或者多项。

以Android***中的页面显示为例，其转化后的样式文件如下：

<？xml version＝"1.0"encoding＝"utf-8"？>

<item name＝"android:TextAlign">justify</item>

</style>

<item name＝"android:TextAlign">justify</item>

</style>

</style>

</style>

</resources>

其中，每一个style name其均对应布局文件中一结点数据，其中item均为各结点数据下的属性项。

实施例5:

本发明实施例，在承载所述网页链接的平台为微信小程序时，所述根据对应所述网页链接的格式内容，转换得到样式文件，如图4所示，具体包括：

在步骤501中，解析所述格式内容得到以各结点数据为描述对象的一项或者多项格式内容；

在步骤502中，利用CSS语言为各描述对象建立属性簇，并将对应相应描述对象的一项或者多项格式内容，赋值到所建立的属性簇中相应属性中；

以微信小程序代码为例，会根据数据结点来判断当前界面需要展示的内容界面需要的样式是：

.news_txt div{margin-bottom:12px；text-align:justify；}

.news_txt a{color:#106fbc；position:relative；}

.news_txt b{font-weight:bold；}

.news_txt img{width:100％；display:block；padding:5px；}

转化成微信小程序需要的样式：

.news_txt.div{margin-bottom:12px；text-align:justify；}

.news_txt.a{color:#106fbc；position:relative；}

.news_txt.b{font-weight:bold；}

.news_txt.img{width:100％；display:block；padding:5px；}

其中微信小程序中news_txt为一CSS语言中class类型的对象。

实施例6:

本发明实施例以Android***为例，阐述了如何实现实施例1中步骤204的方法内容，所述调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象，具体包括：

所述内容加载函数为(布局文件地址)，其中，以布局文件的首地址作为所述setContentView的输入参数。

以程序代码举例如下：

实施例7：

本发明实施例还提供了一种网页页面转换后显示装置1，如图5所示，包括存储器和处理器，其中，处理器和存储器通过主线连接具体的：

所述处理器，用于实现各指令；

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

结合本发明实施例存在一种优选的实现方案，所述处理器加载指令后，还用于：

加载用于生成布局文件的执行程序；

在遍历完从网页中拉取的所有结点数据后，生成布局文件。

值得说明的是，上述装置内的处理器和存储器，由于与本发明的处理方法实施例1-6基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

实施例8：

本发明实施例还提供了一种存储设备，存储设备中存储有多条指令，所述指令适于由处理器加载并执行：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

存储设备可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁盘或光盘等

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims

1.一种网页页面转换后显示方法，其特征在于，在获取打开网页链接指令后，根据网页内容拉取页面结点数据，方法包括：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

2.根据权利要求1所述的网页页面转换后显示方法，其特征在于，所述根据网页内容拉取页面结点数据，具体包括：

3.根据权利要求1或2所述的网页页面转换后显示方法，其特征在于，所述根据所述结点数据类型，得到布局文件，具体包括：

加载用于生成布局文件的执行程序；

在遍历完从网页中拉取的所有结点数据后，生成布局文件。

4.根据权利要求3所述的网页页面转换后显示方法，其特征在于，在微信小程序中，所述布局文件为xml语言描述的文件；在Android***中，所述布局文件为Android控件布局描述方式实现。

5.根据权利要求1或2所述的网页页面转换后显示方法，其特征在于，在承载所述网页链接的平台为android***时，所述根据对应所述网页链接的格式内容，转换得到样式文件，具体包括：

利用xml语言为各描述对象建立style类型数据，并将对应相应描述对象的一项或者多项格式内容，赋值到所建立的style类型数据中的各item项中；其中，item项包括颜色、边距、位置和显示比例中的一项或者多项。

6.根据权利要求4所述的网页页面转换后显示方法，其特征在于，所述调用显示窗口对象的内容加载函数，并以所述布局文件作为所述内容加载函数的加载对象，具体包括：

7.根据权利要求1或2所述的网页页面转换后显示方法，其特征在于，在承载所述网页链接的平台为微信小程序时，所述根据对应所述网页链接的格式内容，转换得到样式文件，具体包括：

利用CSS语言为各描述对象建立属性簇，并将对应相应描述对象的一项或者多项格式内容，赋值到所建立的属性簇中相应属性中；

8.一种网页页面转换后显示装置，其特征在于，包括存储器和处理器，其中，处理器和存储器通过主线连接具体的：

所述处理器，用于实现各指令；

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；

9.根据权利要求8所述的网页页面转换后显示装置，其特征在于，所述处理器加载指令后，还用于：

加载用于生成布局文件的执行程序；

在遍历完从网页中拉取的所有结点数据后，生成布局文件。

10.一种存储设备，其特征在于，存储设备中存储有多条指令，所述指令适于由处理器加载并执行：

根据所述结点数据类型，得到布局文件；

根据对应所述网页链接的格式内容，转换得到样式文件；