CN110609965B - 一种页面显示方法、装置和存储介质 - Google Patents

Abstract

本申请实施例公开了一种页面显示方法、装置和存储介质。本申请实施例采用获取网页信息；对网页信息进行解析，获取网页风格信息；根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；根据网页信息及调整后的原生页面，生成并显示目标页面。该方案可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果。

Description

一种页面显示方法、装置和存储介质

技术领域

本申请涉及网络技术领域，具体涉及一种页面显示方法、装置和存储介质。

背景技术

应用程序通常包括原生应用程序、网页应用程序和混合应用程序。其，中混合应用程序集成了原生应用程序和网页应用程序两者的功能，通常是在原生应用的基础上内嵌内嵌用于显示网页的浏览器，一部分采用了原生应用程序，一部分采用了网页(即web)应用程序。所以混合应用的一部分在操作系统上运行，一部分在web上运行，可兼容多平台而使用。随着而开发平台的不断扩展以及业务功能的逐渐复杂化，混合应用程序以其跨平台的优势得到了广泛应用。

发明内容

本申请实施例提供一种页面显示方法、装置和存储介质，可以提群组加入速度。

本申请实施例提供一种页面显示方法，包括：

获取网页信息；

对所述网页信息进行解析，获取网页风格信息；

根据所述网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；

根据所述网页信息及调整后的原生页面，生成并显示目标页面。

相应的，本申请实施例还提供了一种页面显示装置，包括：

获取单元，用于获取网页信息；

解析单元，用于对所述网页信息进行解析，获取网页风格信息；

调整单元，用于根据所述网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；

处理单元，用于根据所述网页信息及调整后的原生页面，生成并显示目标页面。

相应的，本申请实施例还提供一种存储介质，所述存储介质存储有指令，所述指令被处理器执行时实现本申请实施例提供的页面显示方法。

本申请实施例采用获取网页信息；对网页信息进行解析，获取网页风格信息；根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；根据网页信息及调整后的原生页面，生成并显示目标页面。该方案可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果。

附图说明

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

图1是本申请实施例提供的信息交互系统的场景示意图。

图2是本申请实施例提供的页面显示方法的流程示意图。

图3是本申请实施例提供的页面显示方法的场景示意图。

图4是本申请实施例提供的页面显示的数据结构示意图。

图5是本申请实施例提供的页面显示方法的信令流程示意图。

图6是本申请实施例提供的页面显示方法的系统架构示意图。

图7是本申请实施例提供的页面显示方法的应用实例示意图。

图8是本申请实施例提供的页面显示装置的结构示意图。

图9是本申请实施例提供的页面显示装置的另一种结构示意图。

图10是本申请实施例提供的页面显示装置的又一种结构示意图。

图11是本申请实施例提供的页面显示装置的又一种结构示意图。

图12是本申请实施例提供的页面显示装置的又一种结构示意图。

图13是本申请实施例提供的终端的结构示意图。

具体实施方式

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

本申请实施例提供一种信息交互系统，该系统包括本申请实施例任一提供的页面显示装置，该页面显示装置可以集成在终端等设备中，其中该终端可以为手机、或平板电脑等。此外，该系统还可以包括其他设备，比如，还可以包括服务器、路由器等设备。

参考图1，本申请实施例提供了一种信息交互系统，包括：终端11和服务器12，终端11与服务器12通过网络13连接。其中，网络13中包括路由器、网关等等网络实体，图中并为示意出。终端11可以通过有线网络或无线网络与服务器12进行信息交互，比如可以从服务器12下载应用(如即时通讯应用)和/或应用更新数据包和/或与应用相关的数据信息或业务信息。其中，终端11可以为手机、平板电脑、笔记本电脑等设备，图1是以终端11为手机为例。该终端11中可以安装有各种用户所需的应用，比如具备娱乐功能的应用(如即时通讯应用，音频播放应用，游戏应用)，又如具备服务功能的应用(如地图导航应用、购物应用等)。

基于上述图1所示的系统，以购物应用为例，终端11可以通过网络13从服务器12中按照需求下载购物应用、购物应用更新数据包、和/或与购物应用相关的数据信息或业务信息。该购物应用可以从服务器12中获取网页信息，并能将获取的网页信息转换成网页加载到应用中进行显示，此类应用也可成为混合应用。采用本申请实施例，当检测到终端11中所安装的应用需加载网页进行显示时，终端11可以通过网络13从服务器11中获取对应的网页信息，然后终端11对获取到的网页信息进行解析，从中获取网页风格信息，并可根据网页风格信息调整应用中原生页面的显示风格，得到调整后的原生页面。最后，终端11可根据网页信息及调整后的原生页面，生成并显示目标页面，从而得到应用当前界面。

上述图1示例仅为实现本申请实施例的一个系统架构实例，本申请实施例并不限于上述图1所示的系统结构，基于该系统架构，提出本申请各个实施例。

在一实施例中，提供了一种页面显示方法，可以由终端的处理器执行，如图2所示，该页面显示方法包括：

201、获取网页信息。

具体的，可以从服务器获取网页信息。实际应用中，终端中安装有一应用程序，该应用程序可以是混合应用程序。在用户使用该应用程序的过程中，若需要打开一网页，则应用程序会通过终端向服务器发送网页信息获取请求，服务器在接收到该请求后，可以响应该请求并向终端返回对应的网页信息。

其中，该服务器可以是与客户端(即上述应用程序)对应的单纯的服务器。客户端可以通过向该服务器发出信息获取请求，以使该服务器可以基于接收到的请求执行相应操作，从与该服务器关联的资源库中查找获取匹配的信息反馈给客户端。

在一些实施方式中，该服务器可以是专门为各客户端提供数据资源的第三方服务器。比如，web服务器(web server)，其可以向发出请求的客户端提供数据文件。

在一些实施方式中，该服务器还可以是由多台服务器组成的云端服务器，以保证数据资源在云端服务器中不容易丢失或损坏，便于在客户端需要获取数据资源时能够轻松从该云端服务器查找获取。

本申请实施例中，服务器与终端可通过网络协议进行数据信息的交互，比如，超文本传输协议(HTTP，hyper text transfer protocol)，HTTP是一个客户端和服务器端请求和应答的标准。客户端是终端用户，服务器端是网站，在连网的状态下，客户端可通过使用web浏览器发起一个到服务器上指定端口的HTTP请求应答的服务器上存储着有网络资源，网络资源可以是超文本标记语言(HTML，hyper text mark-up language)文件和图像。其中，web浏览器是在应用内，专门用来浏览内部/外部网页的界面例如，终端中安装的应用可通过内嵌web浏览器向web服务器发送HTTP请求，以从服务器获取网页信息。当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应(如HTML页面)到应用内嵌的web浏览器进行显示。

其中，网页信息用于构成网页的信息。网页是一个包含HTML标签的文本文件，它可以存放在世界某个角落的某一台计算机中，需要通过网页浏览器来阅读。网页信息可以包括但不限于感知信息(如文本、图像、动画、声音、视频、表格、导航栏和/或交互式表单)、互动媒体(如交互式文本、互动插图、按钮和/或超链接)、内部信息(如注释、元信息、样式信息和/或脚本)等多种信息元素。

202、对网页信息进行解析，获取网页风格信息。

本申请实施例中，网页信息可以为HTML文件。具体的，可以对该网页信息进行解析，读取接收到的HTML二进制数据，按指定编码格式将字节转换为HTML字符。然后按照预设规则从中筛选出对应信息，以获取网页风格信息。需要说明的是，网页风格信息指可以表示网页某种或某些显示特征的信息。

例如，在一些实施例中，网页信息包括多个不同类型的元素属性信息。则，步骤“对所述网页信息进行解析，获取网页风格信息”，可以包括以下流程：

提取多个不同类型的元素属性信息对应的关键词，得到关键词集合；

基于预设关键词对关键词集合进行遍历，获取与预设关键词匹配的目标关键词；

获取目标关键词对应的元素属性信息，作为网页风格信息。

其中，多个不同类型的元素属性信息可以包括但不限于颜色、字号、字体、及元素尺寸等。例如，以颜色为例，通常提取的关键词可以为“color”；以字体为例，通常提取的关键词可以为“font”。进一步可以提取多个不同类型的元素属性信息的关键词，以得到关键词集合。

预设关键词可以由应用开发人员进行设定，例如将预设关键词设置为“color”，则遍历关键词集合时，终端可以从关键词集合中匹配到与预设关键词“color”匹配的目标关键词。最后获取该目标关键词对应的元素属性信息，并将该元素属性信息作为网页风格信息。

203、根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面。

本申请实施例中，应用中内嵌了浏览器的页面可称为web浏览页。其中，web浏览页的界面布局可分为两部分：原生(native)层和网页(web)层。原生层可以运行原生页面，原生页面的数据存储在终端本地，不需要连接网络；而网页则在浏览器内核中运行，需要终端连接网络后从服务器下载。本实施例中，应用可以根据即将浏览网页的网页风格信息，来动态更换web浏览页的显示风格。

其中，native层一般指除网页内容外，应用提供给用户的额外交互方式和视觉。用户通过native层可以查看标题、刷新、分享、失败重试、退出网页等信息。参考图3，在一些实施例中，native层可包括以下组成部分：

左图a中，标志1：沉浸式通知栏背景；

左图a中，标志2～4：标题栏元素，标题字体与图标按钮；

中间图b，中标志5～6：更多菜单栏元素，背景和菜单字体；

右图c中，标志7～8：网页加载失败的显示页，示意图和文字字体。

此外，native层还可包括刷新和/或进度条等元素。

另外，web层指的是用于显示整个网页内容的部分(左图a所示的标志9)，即webview视图控件。显示的内容都依赖于所浏览的网页，native层不会添加其他显示元素在上面。本方案更换的webview显示元素主要是背景，即当网页未加载完成时，用户看到的内容。

可选地，步骤“根据网页风格信息调整本地原生页面的显示风格”，可以包括以下流程：

获取网页风格信息对应的风格调整信息；

根据风格调整信息对原生页面的显示风格进行调整。

其中，原生页面包括native层中的通知栏、标题栏、更多菜单栏、网页加载失败的显示页和/或进度条等元素。可通过获取的风格调整信息，对原生页面的显示风格进行调整。

在一些实施例中，步骤“获取网页风格信息对应的风格调整信息”，可以包括以下流程：

确定原生页面当前的初始风格信息；

获取网页风格信息和初始风格信息之间的差异信息，作为风格调整信息。

具体的，可以将当前原生页面的初始风格信息，与网页信息的网页风格信息之间的差异信息，作为风格调整信息，对原生页面的显示风格进行调整。从而将原生页面的显示风格调整为与网页信息的显示风格一致。

其中，元素属性的差异信息，如颜色差异信息、字号差异信息、字体差异信息、及图像尺寸差异信息中的一种或多种。以颜色为例，则该差异信息可以为颜色的颜色值(即RGB)之间的差值。

在一些实施例中，风格调整信息包括多个颜色调整参数，初始风格信息包括多个初始颜色参数。步骤“根据风格调整信息对原生页面的显示风格进行调整”，可以包括以下流程：

确定每个初始颜色参数对应在原生页面上的位置信息；

基于该位置信息，从多个颜色调整参数中选取目标颜色调整参数调整相应的初始颜色参数，以对原生页面的显示风格进行调整。

其中，位置信息也即原生页面中的元素所在的位置。确定每个初始颜色参数对应在原生页面上的位置信息，也即确定原生页面中的颜色分布。然后，基于所确定的位置信息，从多个颜色调整参数中选取跟该位置信息匹配的目标颜色调整参数，对处于该位置的元素的初始颜色参数进行调整，以实现对原生页面的显示风格进行调整。

可选地，步骤“根据网页风格信息调整本地原生页面的显示风格”，可以包括以下流程：

计算网页风格信息与样本风格信息集合中多个预设风格信息之间的差异，得到多个差异信息；

根据多个差异信息，从样本风格信息集合中选取目标风格信息，并基于所述目标风格信息调整原生页面的显示风格。

其中，该预设风格信息可以为应用中预先设定的显示风格方案，形成方案池(即样本风格信息集合)。具体实施时，可将页面显示所需的元素打包成一个统一的数据结构(参考图4)。以颜色值(RGB)为键值，一个显示风格方案即为一份具体的数据。

具体的，通过计算网页风格信息与多个预设风格信息之间的差异信息，可以从多个预设风格信息中选取差异信息最小的一个，作为目标风格信息。然后基于目标风格信息调整原生页面的显示风格，即各个元素可根据所选定的显示风格方案中的数据改变自身的显示风格。从而将原生页面的显示风格与网页显示风格的差异缩小到最小，实现风格统一。

本申请实施例中，为实现应用界面风格在整体上的统一，主要是针对页面的背景颜色显示进行调整。也即，在一些实施例中，网页风格信息包括颜色信息，预设风格信息包括预设颜色信息。步骤“计算网页风格信息与多个预设风格信息之间的差异，得到多个差异信息”，包括：

计算颜色信息与多个预设颜色信息之间的颜色空间距离，得到多个颜色空间距离，并将颜色空间距离作为差异信息。

则，步骤“根据多个差异信息，从样本风格信息集合选取目标风格信息，并基于目标风格信息调整所述原生页面的显示风格”，包括：

从多个颜色空间距离中确定最小颜色空间距离；

从多个预设颜色信息中，选取最小颜色空间距离对应的目标颜色信息；

基于目标颜色信息对原生页面的显示风格进行调整。

具体实施过程中，每一种显示风格方案都有一个键值来区别其他方案。由于每一种方案都应该有一个主色调，显示时所有元素都应该与主色调协调。因此，可直接采用颜色值作为键值来标识每一显示风格方案。当需改变页面整体的显示风格时，只需要给定一颜色值，终端根据该颜色值遍历方案池中所有的显示风格方案，并计算出与各个方案的颜色空间距离。原生页面将选取距离最小的方案来应用，达到与预期颜色值最相似的显示风格。

需要说明的是，RGB空间是面向硬件的，实际应用中在RGB空间上进行颜色相似度判断有些复杂。因此，可以将颜色从RGB空间转换成HSV空间，以降低计算的复杂程度。空间转换算法如下：

max＝max(R,G,B)；//min的值等于R、G、B中的最大值

min＝min(R,G,B)；//min的值等于R、G、B中的最小值

V＝max(R,G,B)；//V的值等于R、G、B中的最大值

S＝(max-min)/max；

if(R＝max)H＝(G-B)/(max-min)*60；

if(G＝max)H＝120+(B-R)/(max-min)*60；

if(B＝max)H＝240+(R-G)/(max-min)*60；

if(H<0)H＝H+360；

根据以上算法，便可得到HSV的值。接着，将HSV空间坐标系转换成三维坐标系(x,y,z)，然后在三维坐标系计算出欧式距离(即distance)：

x＝V*S*cosH；

y＝V*S*sinH；

z＝1-V；

再根据公式distance＝Math.sqrt((x1–x2)^2+(y1–y2)^2+(z1–z2)^2)，将上述颜色信息和预设颜色信息各自转换成的HSV的值代入该公式，即可计算的得到颜色空间距离。

在本申请实施例中，显示风格本身也支持云端动态下发更新，当设计完成一套新的显示风格后，通过服务器下发到安装了应用程序的终端，添加到上述方案池内作为备选显示风格方案。也即，在一些实施例中，该方法还可以包括：

接收云端服务器发送的样本风格信息；

将所述样本风格信息添加至样本风格信息集合中，以从样本风格信息集合中选取目标风格信息来调整所述原生页面的显示风格。

例如，原有方案池(即样本风格信息集合)中有默认的显示风格方案1，显示风格方案2，及显示风格方案3。当云端服务器主动向终端下发新的样本风格信息(假设有2套样本风格信息)时，可以将其下发的样本风格信息作为显示风格方案4和显示风格方案5的形式存储在终端本地，与原有的显示风格方案1至3共同构成方案池。

其中，添加样本风格信息时，可以是在获取网页信息之前添加，也可以是在执行该页面显示方法的过程中添加，对其添加时序不做具体限定。

在本申请实施例中，更换显示风格采用的方式可分为应用调用和网页调用。其中：

1)应用调用

当应用需要打开一个网页来浏览时，如果明确知道要打开的网页使用的风格信息，以颜色为例，可以加入一个颜色值参数，如”black”或者定义用于表示黑色的值“#000000”，并传给web浏览页。原生页面获取该参数后，在方案池中选择最佳方案并且应用。

在确定网页使用的风格信息时，可以通过判断该网页的来源确定其所使用的风格信息。具体实施时，可预先采集各种来源(如不同网页应用)的网页常规使用的风格信息，比如网页应用A使用绿色，则将绿色与网页应用A的标识建立关联存储到终端，当检测到来源与网页应用A的网页信息时，直接将绿色作为即将打开的网页使用的风格信息即可。

2)网页调用

具体的，web层(即网页)可以采用原生层支持的指定协议与其实现通信。比如，可以在网页启动时向网页代码注入一个JSBridge，用以原生层和web层通信。在通信的基础上，在原生层中加入一个可以切换显示风格方案的应用程序接口(API，applicationprogram interface)，以供网页调用原生页面提供的API。例如，网页的主色调是黑色，而且希望整个页面都更换这个主色调，那么，web层中的网页代码可以主动调用该API，并且把主色调的颜色值传送到native层。页面将会启动更换显示方案操作，达到一种网页主动修改界面显示的效果。

204、根据网页信息及调整后的原生页面，生成并显示目标页面。

具体实施时，需要对网页信息进行解析将其转换成页面，并与原生页面共同进行显示。也即，步骤“根据网页信息及调整后的原生页面，生成并显示目标页面”，可以包括以下流程：

在调整后的原生页面上生成网页显示接口；

通过网页显示接口将网页信息转换成网页页面；

将网页页面与调整后的原生页面结合显示，得到目标页面。

其中，该网页显示接口具体可以为webview视图控件。通过该网页显示接口调用终端浏览器内核将网页信息转换成网页页面，以与调整显示风格后的原生页面结合显示，得到目标页面。

具体的，在将网页信息转换成网页页面时，首先调用内嵌浏览器内核API接口解析HTML结构，完成文档对象模型(DOM，document object model)的构建。然后执行样式重新计算，将层叠样式表(CSS，cascading style sheets)附着于文档对象模型上，以创建渲染树(CSSOM，cascading style sheets object model)。渲染树是一些被渲染对象的集，每个渲染对象都包含了与之对应的计算过样式的文档对象模型，对于每个渲染元素来说，位置都经过计算，形成布局文件。然后通过将布局文件将渲染树显示在webview视图控件上，并将图片等外部资源加载到相应位置进行显示，从而实现将网页信息转换成网页页面。

由上可知，本申请实施例采用从服务器获取网页信息；对网页信息进行解析，获取网页风格信息；根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；根据网页信息及调整后的原生页面，生成并显示目标页面。该方案可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果。

在一实施例中，提供了一种页面显示方法，参考图5和图6，该页面显示方法包括：

301、终端向服务器发送网页信息获取请求，该信息获取请求包括网页标识。

其中，该网页标识可以是网址，即统一资源定位符(URL，uniform resourcelocator)。

302、服务器根据网页信息获取请求获取该网页标识对应的网页信息。

具体的，服务器根据该网页标识，从资源库中查找到对应的网页信息，以供发送给终端。其中，该网页信息可以为HTML文件。网页信息可以包括但不限于感知信息(如文本、图像、动画、声音、视频、表格、导航栏和/或交互式表单)、互动媒体(如交互式文本、互动插图、按钮和/或超链接)、内部信息(如注释、元信息、样式信息和/或脚本)等多种信息元素。

303、服务器向终端发送获取的网页信息。

304、终端对接收到的网页信息进行解析，获取网页风格信息。

具体的，可以对该网页信息进行解析，读取接收到的HTML二进制数据，按指定编码格式将字节转换为HTML字符。然后按照预设规则从中筛选出对应信息，以获取网页风格信息。需要说明的是，网页风格信息指可以表示网页某种或某些显示特征的信息。

例如，该网页风格信息可以为背景颜色信息、字号信息、字体信息、及元素尺寸信息等。

305、终端中应用网页层基于原生层支持的第一指定协议，向原生层发送调用请求消息。

具体的，网页层可以采用原生层支持的指定协议与其实现通信。比如，可以在网页启动时向网页代码注入一个JSBridge，用以原生层和网页层通信。

306、终端中应用原生层根据调用请求消息，基于网页层支持的第二指定协议，向网页层反馈调用响应消息。

同样的，原生层可以采用网页层支持的指定协议与其实现通信，针对接收到的调用请求消息反馈相应的调用响应消息。

307、终端中应用网页层根据该调用响应消息，调用原生层中对应的API接口，并向原生层发送网页风格信息，其中，该API接口用于调整原生页面的显示风格。

308、终端通过该API接口获取网页风格信息与方案池中的多个预设风格信息之间的差异，得到多个差异信息。

309、终端通过该API接口，根据多个差异信息从方案池中选取目标风格信息，并基于目标风格信息调整原生页面的显示风格，得到调整后的原生页面。

310、终端将网页信息转换成网页页面，并与调整后的原生页面结合显示，得到目标页面。

具体的，终端可以调用系统浏览器内核将网页信息转换成网页页面，以与调整显示风格后的原生页面结合显示，得到目标页面。

其中，在将网页信息转换成网页页面时，首先调用内嵌浏览器内核API接口解析HTML结构，完成文档对象模型的构建。然后执行样式重新计算，将层叠样式表附着于文档对象模型上，以创建渲染树。渲染树是一些被渲染对象的集，每个渲染对象都包含了与之对应的计算过样式的文档对象模型，对于每个渲染元素来说，位置都经过计算，形成布局文件。然后通过将布局文件将渲染树显示在webview视图控件上，并将图片等外部资源加载到相应位置进行显示，从而实现将网页信息转换成网页页面。

例如，参考图7，图7为本申请实施例提供的应用实例示意图。结合上述图3所示内容，假设本地原生页面的“更多菜单栏元素”的背景色为黑色。则当应用从服务器获取网页信息时，对该网页信息进行解析，从中确定网页颜色属性中的主色调信息。然后，网页代码可以通过与应用原生层之间的通信渠道(如JS Bridge)调用原生层中的颜色调整API接口，并将该主色调信息的RGB值发送给原生层，以通过该颜色调整API接口对原生层中的背景颜色进行调整。比如，网页的主色调是白色，而且希望整个页面都更换这个主色调，那么网页代码可以主动调用该颜色调整API接口，将该图中“更多菜单栏元素”的背景色由黑色调整为白色进行显示。

由上可知，本申请实施例提供的方案，可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果；另外，可适应不同的网页浏览，达到较佳的页面展示效果。

为了便于更好的实施本申请实施例提供的页面显示方法，在一实施例中还提供了一种页面显示装置。其中名词的含义与上述页面显示方法中相同，具体实现细节可以参考方法实施例中的说明。

在一实施例中，还提供了一种页面显示装置，如图8所示，该页面显示装置可以包括：获取单元401、解析单元402、调整单元403、以及处理单元404，如下：

获取单元401，用于从服务器获取网页信息；

解析单元402，用于对所述网页信息进行解析，获取网页风格信息；

调整单元403，用于根据所述网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；

处理单元404，用于根据所述网页信息及调整后的原生页面，生成并显示目标页面。

其中，网页信息用于构成网页的信息。网页是一个包含HTML标签的文本文件，它可以存放在世界某个角落的某一台计算机中，需要通过网页浏览器来阅读。网页信息可以包括但不限于感知信息(如文本、图像、动画、声音、视频、表格、导航栏和/或交互式表单)、互动媒体(如交互式文本、互动插图、按钮和/或超链接)、内部信息(如注释、元信息、样式信息和/或脚本)等多种信息元素。

在对所述网页信息进行解析时，读取接收到的HTML二进制数据，按指定编码格式将字节转换为HTML字符。然后按照预设规则从中筛选出对应信息，以获取网页风格信息。

在一些实施例中，参考图9，该调整单元403可以包括第一获取子单元4031和调整子单元4032，如下：

第一获取子单元4031，用于获取所述网页风格信息对应的风格调整信息；

调整子单元4032，用于根据所述风格调整信息对所述原生页面的显示风格进行调整。

在一些实施例中，第一获取子单元4031可以用于：

确定所述原生页面当前的初始风格信息；

获取所述网页风格信息和所述初始风格信息之间的差异信息，作为所述风格调整信息。

在一些实施例中，所述风格调整信息包括多个颜色调整参数，所述初始风格信息包括多个初始颜色参数；调整子单元4032可以用于：

确定每个初始颜色参数对应在所述原生页面上的位置信息；

基于所述位置信息，从所述多个颜色调整参数中选取目标颜色调整参数调整相应的初始颜色参数，以对所述原生页面的显示风格进行调整。

在一些实施例中，参考图10，该调整单元404可包括计算子单元4033和处理子单元4034，如下：

计算子单元4033，用于计算所述网页风格信息与样本风格信息集合中多个预设风格信息之间的差异，得到多个差异信息；

处理子单元4034，用于根据所述多个差异信息，从样本风格信息集合中选取目标风格信息，并基于所述目标风格信息调整所述原生页面的显示风格。

在一些实施例中，所述网页风格信息包括颜色信息，所述预设风格信息包括预设颜色信息；

计算子单元4033可以用于：

计算所述颜色信息与多个预设颜色信息之间的颜色空间距离，得到多个颜色空间距离，并将所述颜色空间距离作为差异信息；

则处理子单元4034可以用于：

从多个颜色空间距离中确定最小颜色空间距离；

从多个预设颜色信息中，选取所述最小颜色空间距离对应的目标颜色信息；

基于所述目标颜色信息对所述原生页面的显示风格进行调整。

在一些实施例中，参考图11，该处理单元404，可以包括生成子单元4041、转换子单元4042以及处理子单元4043，如下：

生成子单元4041，用于在调整后的原生页面上生成网页显示接口；

转换子单元4042，用于通过所述网页显示接口将所述网页信息转换成网页页面；

处理子单元4043，用于将所述网页页面与调整后的原生页面结合显示，得到目标页面。

在一些实施例中，所述网页信息包括多个不同类型的元素属性信息，。参考图12，该解析单元402包括提取子单元4021、遍历子单元4022和第二获取子单元4023，如下：

提取子单元4021，用于提取所述多个不同类型的元素属性信息对应的关键词，得到关键词集合；

遍历子单元4022，用于基于预设关键词对所述关键词集合进行遍历，获取与预设关键词匹配的目标关键词；

第二获取子单元4023，用于获取所述目标关键词对应的元素属性信息，作为网页风格信息。

由上可知，本申请实施例页面显示装置，采用获取单元401从服务器获取网页信息；解析单元402对网页信息进行解析，获取网页风格信息；调整单元403根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；处理单元404根据网页信息及调整后的原生页面，生成并显示目标页面。该方案可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果。

参考图13，本申请实施例提供了一种终端500，可以包括一个或者一个以上处理核心的处理器501、一个或一个以上计算机可读存储介质的存储器502、射频(RadioFrequency，RF)电路503、电源504、输入单元505、以及显示单元506等部件。本领域技术人员可以理解，图13中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器501是该终端的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器502内的软件程序和/或模块，以及调用存储在存储器502内的数据，执行终端的各种功能和处理数据，从而对终端进行整体监控。可选的，处理器501可包括一个或多个处理核心；优选的，处理器501可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器501中。

存储器502可用于存储软件程序以及模块，处理器501通过运行存储在存储器502的软件程序以及模块，从而执行各种功能应用以及数据处理。

RF电路503可用于收发信息过程中，信号的接收和发送。

终端还包括给各个部件供电的电源504(比如电池)，优选的，电源可以通过电源管理系统与处理器501逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

该终端还可包括输入单元505，该输入单元505可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

该终端还可包括显示单元506，该显示单元506可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。具体在本实施例中，终端中的处理器501会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器502中，并由处理器501来运行存储在存储器502中的应用程序，从而实现各种功能，如下：

从服务器获取网页信息；

对所述网页信息进行解析，获取网页风格信息；

根据所述网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；

根据所述网页信息及调整后的原生页面，生成并显示目标页面。

由上可知，本申请实施例终端可以采用从服务器获取网页信息；对网页信息进行解析，获取网页风格信息；根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；根据网页信息及调整后的原生页面，生成并显示目标页面。该方案可根据网页实时的显示风格动态调整应用原生页面的显示风格，从而实现网页与应用原生页面的显示风格的统一，提升界面显示效果。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本发明实施例提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本发明实施例所提供的任一种页面显示方法中的步骤。例如，该指令可以执行如下步骤：

获取网页信息；对网页信息进行解析，获取网页风格信息；根据网页风格信息调整本地原生页面的显示风格，得到调整后的原生页面；根据网页信息及调整后的原生页面，生成并显示目标页面。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的指令，可以执行本发明实施例所提供的任一种页面显示方法中的步骤，因此，可以实现本发明实施例所提供的任一种页面显示方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种页面显示方法、装置和存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (11)

1.一种页面显示方法，其特征在于，所述方法包括：

发送网页信息获取请求，并接收针对所述网页信息获取请求而返回的网页信息，所述网页信息包括多种信息元素，所述多种信息元素包括：内部信息、感知信息及互动媒体信息；

分别提取所述内部信息、所述感知信息及所述互动媒体信息对应的关键词，得到关键词集合；

基于预设关键词对所述关键词集合进行遍历，获取与所述预设关键词匹配的目标关键词；

获取所述目标关键词对应的元素属性信息，作为网页风格信息，所述网页风格信息描述所述网页信息对应的网页的显示特征；

基于指定协议实现原生层与web层之间的通信，所述web层基于与所述原生层之间的通信，将所述网页风格信息传入所述原生层；

根据所述网页风格信息，调整本地原生页面的显示风格，得到调整后的原生页面；

在调整后的原生页面上生成网页显示接口；

通过所述网页显示接口将所述网页信息转换成网页页面；

将所述网页页面与调整后的原生页面结合显示，生成目标页面。

2.根据权利要求1所述的页面显示方法，其特征在于，根据所述网页风格信息调整本地原生页面的显示风格，包括：

获取所述网页风格信息对应的风格调整信息；

根据所述风格调整信息对所述原生页面的显示风格进行调整。

3.根据权利要求2所述的页面显示方法，其特征在于，所述获取所述网页风格信息对应的风格调整信息，包括：

确定所述原生页面当前的初始风格信息；

获取所述网页风格信息和所述初始风格信息之间的差异信息，作为所述风格调整信息。

4.根据权利要求3所述的页面显示方法，其特征在于，所述风格调整信息包括多个颜色调整参数，所述初始风格信息包括多个初始颜色参数；

所述根据所述风格调整信息对所述原生页面的显示风格进行调整，包括：

确定每个初始颜色参数对应在所述原生页面上的位置信息；

基于所述位置信息，从所述多个颜色调整参数中选取目标颜色调整参数调整相应的初始颜色参数，以对所述原生页面的显示风格进行调整。

5.根据权利要求1所述的页面显示方法，其特征在于，所述根据所述网页风格信息调整本地原生页面的显示风格，包括：

计算所述网页风格信息与样本风格信息集合中多个预设风格信息之间的差异，得到多个差异信息；

根据所述多个差异信息，从所述样本风格信息集合中选取目标风格信息，并基于所述目标风格信息调整所述原生页面的显示风格。

6.根据权利要求5所述的页面显示方法，其特征在于，所述网页风格信息包括颜色信息，所述预设风格信息包括预设颜色信息；

所述计算所述网页风格信息与样本风格信息集合中多个预设风格信息之间的差异，得到多个差异信息，包括：

计算所述颜色信息与多个预设颜色信息之间的颜色空间距离，得到多个颜色空间距离，并将所述颜色空间距离作为差异信息；

根据所述多个差异信息，从所述样本风格信息集合中选取目标风格信息，并基于所述目标风格信息调整所述原生页面的显示风格，包括：

从多个颜色空间距离中确定最小颜色空间距离；

从多个预设颜色信息中，选取所述最小颜色空间距离对应的目标颜色信息；

基于所述目标颜色信息对所述原生页面的显示风格进行调整。

7.根据权利要求5所述的页面显示方法，其特征在于，所述方法还包括：

接收云端服务器发送的样本风格信息；

将所述样本风格信息添加至所述样本风格信息集合中，以从所述样本风格信息集合中选取目标风格信息来调整所述原生页面的显示风格。

8.一种页面显示装置，其特征在于，包括：

获取单元，用于发送网页信息获取请求，并接收针对所述网页信息获取请求而返回的网页信息，所述网页信息包括多种信息元素，所述多种信息元素包括：内部信息、感知信息及互动媒体信息；

解析单元，用于分别提取所述内部信息、所述感知信息及所述互动媒体信息对应的关键词，得到关键词集合；基于预设关键词对所述关键词集合进行遍历，获取与所述预设关键词匹配的目标关键词；获取所述目标关键词对应的元素属性信息，作为网页风格信息，所述网页风格信息描述所述网页信息对应的网页的显示特征；

调整单元，用于基于指定协议实现原生层与web层之间的通信，所述web层基于与所述原生层之间的通信，将所述网页风格信息传入所述原生层；根据所述网页风格信息，调整本地原生页面的显示风格，得到调整后的原生页面；

处理单元，用于在调整后的原生页面上生成网页显示接口；通过所述网页显示接口将所述网页信息转换成网页页面；将所述网页页面与调整后的原生页面结合显示，生成目标页面。

9.根据权利要求8所述的页面显示装置，其特征在于，所述调整单元包括：

第一获取子单元，用于获取所述网页风格信息对应的风格调整信息；

调整子单元，用于根据所述风格调整信息对所述原生页面的显示风格进行调整。

10.根据权利要求8所述的页面显示装置，其特征在于，所述调整单元包括：

计算子单元，用于计算所述网页风格信息与样本风格信息集合中多个预设风格信息之间的差异，得到多个差异信息；

处理子单元，用于根据所述多个差异信息，从样本风格信息集合中选取目标风格信息，并基于所述目标风格信息调整所述原生页面的显示风格。

11.一种存储介质，其特征在于，所述存储介质存储有指令，所述指令被处理器执行时实现如利要求1-7任一项所述的页面显示方法。