CN108255916A

CN108255916A - 网页页面呈现的方法、设备、客户端装置和电子设备

Info

Publication number: CN108255916A
Application number: CN201710829229.XA
Authority: CN
Inventors: 翁粤东; 陈俊东; 王文槿; 曾树奇; 李先锋
Original assignee: Guangzhou Dongjing Computer Technology Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2017-09-14
Filing date: 2017-09-14
Publication date: 2018-07-06
Also published as: US20190079908A1; US10747943B2

Abstract

公开了一种网页页面呈现的方法、设备、客户端装置和电子设备。该方法方法包括：接收网页页面数据；基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素；以及至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。根据本公开的一个实施例，可以提升用户使用体验。

Description

网页页面呈现的方法、设备、客户端装置和电子设备

技术领域

本发明涉及互联网技术领域，更具体地，涉及一种用于呈现网页页面的方法、用于呈现网页页面的设备、客户端装置和电子设备。

背景技术

在互联网技术领域，通常有两种方式实现客户端装置的用户界面。第一种方式被称为本地方式(Native方式)。在本地方式中，利用本地的应用程序来实现用户界面。例如，通过平台SDK提供的用户界面框架所实现的用户界面。第二种方式是基于Html的方式。例如，通过在客户端装置中WebView并利用所编写的Html文件所实现的用户界面。

所述客户端装置可以是浏览器，也可以是被安装在用户终端电子设备中的其他应用程序，例如，微博、微信等。

在本地方式中，用户界面是通过原生平台的API来实现的。用户界面的呈现效果好，并且因此用户体验好。但是，对于不同平台，需要分别设计、开发用户界面。此外，在这种方式中，只能通过更新应用程序来实现用户界面的更新。

在基于Html的方式中，所呈现的用户界面是Html页面。用户界面呈现的效果相对较差。因此，用户体验相对较差。但是，通过这种方式，可以动态更新用户界面。

因此，需要提供一种新的技术方案，针对上述现有技术中的至少一个技术问题进行改进。

发明内容

本发明的一个目的是提供一种用于呈现网页页面的新技术方案。

根据本发明的第一方面，提供了一种用于呈现用户界面的方法，包括：接收网页页面数据；基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素；以及至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。

优选地，所述网页页面数据包括信息流数据，以及所述界面信息包括通过内容管理系统下发的动态用户界面模板。

优选地，所述网页页面数据是基于Html的网页数据，以及所述界面信息是基于Html的界面信息。

优选地，所述界面信息包括Html文件中的标签、级联样式表中的样式和网页元素的属性设置中的至少一个。

优选地，所述本地应用的界面元素是基于SDK的用户界面框架实现的本地界面控件。

优选地，所述信息流数据包括从网络上抓取的新闻数据。

优选地，所述信息流数据包括所要使用的模板的标识。

优选地，基于预先设置的对应表，获取本地应用的界面元素，以及所述对应表包含网页页面数据中与页面呈现相关的界面信息与本地应用的界面元素的对应关系。

根据本发明的第二方面，提供了一种用于呈现网页页面的设备，包括：接收网页页面数据；基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素；以及至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。

根据本发明的第三方面，提供了一种客户端装置，包括根据本公开中的实施例的用于呈现网页页面的设备，或者被设置成用于执行根据本公开中的实施例的用于呈现网页页面的方法中的操作。

根据本发明的第四方面，提供了一种电子设备，包括根据本公开中的实施例的客户端装置，或者包括存储器和处理器，其中，所述存储器存储可执行指令，所述可执行指令在所述电子设备运行时控制所述处理器执行根据本公开中的实施例的用于呈现网页页面的方法中的操作。

根据本公开的一个实施例，可以提升用户使用体验。

通过以下参照附图对本发明的示例性实施例的详细描述，本发明的其它特征及其优点将会变得清楚。

附图说明

被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例，并且连同其说明一起用于解释本发明的原理。

图1示出了根据本发明的一个实施例的的方法的示意性流程图。

图2示出了根据本发明的另一个实施例的客户端装置的示意性框图。

图3示出了根据本发明的另一个实施例的电子设备设备的示意性框图。

图4示出了根据本发明的实施例的一个例子的网络的示意图。

图5示出了根据本发明的实施例的一个例子的示意图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

下面，参照附图描述根据本发明的各个实施例和例子。

<方法>

如图1所示，在步骤S1100，接收网页页面数据。

目前，网页页面数据都是基于Html的网页数据。随着互联网技术的发展，也可能出现其他类型的网页数据。本领域技术人员应当理解，网页数据可以包括以Html语言编写的网页文件、对应的CSS文件(级联样式表)和对应的JavaScript文件中的一个或多个。

在步骤S1200，基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素。

服务器可以将网页数据中的信息内容和与与页面呈现相关的界面信息放在一个文件(例如，Html文件)中发送给用户。

所述界面信息是基于Html的界面信息。例如，所述界面信息包括Html文件中的标签、级联样式表中的样式和网页元素的属性设置中的至少一个。

在一个例子中，可以分别将表示信息内容的信息流数据和表示网页页面呈现方式的界面信息发送给客户端装置。在这种情况下，所述网页页面数据包括信息流数据，以及所述界面信息包括通过内容管理系统下发的动态用户界面模板。

这种方式可以与现有的信息流推送方案兼容，并可以利用现有客户端装置中的固定模板。此外，当出现特殊事件时，例如，在国庆节期间，客户端装置可能需要特别的界面来呈现信息流数据，以引起用户的特别关注。通过动态用户界面模板，可以在需要的情况下，向用户呈现不同的用户界面，从而满足特殊事件的要求。此外，信息流数据包括从网络上抓取的新闻数据。将信息流数据与显示模板分开设置的方式有利于数据的处理。

例如，所述信息流数据包括所要使用的模板的标识。当在客户端装置接收到所述信息流数据后，可以基于所述标识确定对应的动态用户界面模板。所述动态用户模板可以是在获取信息流数据之前、之后、在获取信息流数据的同时获取的。

这里，所述本地应用的界面元素例如是基于SDK的用户界面框架实现的本地界面控件。例如，相对于WebView所实现的界面，所述本地界面控件的显示效果更好，用户体验更好。

例如，可以基于预先设置的对应表，获取本地应用的界面元素。所述对应表包含网页页面数据中与页面呈现相关的界面信息与本地应用的界面元素的对应关系。

在步骤S1300，至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。

这里，根据需要，可以仅部分页面元素使用本地应用的界面元素。例如，所使用的本地应用的界面元素是网页页面的主体部分并且是最引起用户注意的部分。通过这种方式，可以兼顾用户体验和处理的复杂度。

在这个实施例中，可以通过网页页面的方式动态地向用户展示不同的用户界面，而不用更新整个应用软件。此外，在呈现用户界面时利用本地应用来呈现网页页面，实现较好的呈现效果，提升用户体验。

<设备>

本领域技术人员应当理解，在电子技术领域中，可以通过软件、硬件以及软件和硬件结合的方式，将上述方法体现在产品中本领域技术人员很容易基于上面公开的方法，产生一种用于呈现网页页面的设备，所述设备包括用于执行根据上述实施例的用于呈现网页页面的方法中的各个操作的装置。例如，所述设备包括：接收网页页面数据；基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素；以及至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。

<客户端装置>

可以在诸如浏览器、微信、微博等的客户端装置(或客户端应用)中实现根据本公开的至少一个实施例。

图2是根据本发明的另一个实施例的客户端装置的示意性框图。如图2所示，客户端装置2000包括网页页面呈现设备2010。网页页面呈现设备2010可以是根据上述实施例的用于呈现网页页面的设备。

此外，如前面所述，也可以基于前面所述的方法产生一种客户端装置，它可以被设计成用于执行参照图1所述的实施例的方案中的步骤。

本领域技术人员公知的是，随着诸如大规模集成电路技术的电子信息技术的发展和软件硬件化的趋势，要明确划分计算机系统软、硬件界限已经显得比较困难了。因为，任何操作可以软件来实现，也可以由硬件来实现。任何指令的执行可以由硬件完成，同样也可以由软件来完成。对于某一机器功能采用硬件实现方案还是软件实现方案，取决于价格、速度、可靠性、存储容量、变更周期等非技术性因素。对于技术人员来说，软件实现方式和硬件实现方式是等同的。技术人员可以根据需要选择软件或硬件来实现上述方案。因此，这里不对具体的软件或硬件进行限制。

<电子设备>

可以在诸如手机、平板电脑等的电子设备中实现上述实施例中的任何一个。例如，所述电子设备可以包括上述实施例中的用于呈现网页页面的设备或者包括上述实施例中的客户端装置。

此外，图3示出了根据本发明的另一个实施例的电子设备的示意性框图。如图3所示，电子设备3000可以包括处理器3010、存储器3020、接口装置3030、通信装置3040、显示装置3050、输入装置3060、扬声器3070、麦克风3080，等等。

处理器3010例如可以是中央处理器CPU、微处理器MCU等。存储器3020例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置3030例如包括USB接口、耳机接口等。

通信装置3040例如能够进行有有线或无线通信。

显示装置3050例如是液晶显示屏、触摸显示屏等。输入装置3060例如可以包括触摸屏、键盘等。用户可以通过扬声器3070和麦克风3080输入/输出语音信息。

图3所示的电子设备仅是解释性的，并且决不是为了要限制本发明、其应用或用途。

在这个实施例中，所述存储器3020用于存储指令，所述指令在所述电子设备3000运行时控制所述处理器3010执行前面参照图1所述的用于呈现网页页面的方法中的操作。本领域技术人员应当理解，尽管在图3中示出了多个装置，但是，本发明可以仅涉及其中的部分装置，例如，处理器3010和存储装置3020等。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作，这是本领域公知，故在此不再详细描述。

<例子>

图4示出了根据本发明的实施例的一个例子的网络的示意图。图5示出了根据本发明的实施例的一个例子的示意图。

如图4所示，电子设备4020、4030通过网络4010连接到服务器4040。电子设备4020、4030例如是诸如智能手机、平板电脑等的用户终端电子设备。服务器4040例如是Web服务器。电子设备4020、4030从服务器4040接收网页页面数据，并利用本公开中的任何一个实施例的方案显示所述网页页面数据。

图5示出了通过本公开中的实施例的方案显示信息流数据的处理。例如，可以在电子设备4020、4030中实现所述处理(例如，通过电子设备4020、4030中的客户端装置实现所述处理)。

如图5所示，客户端装置接收信息流数据。信息流数据例如是通过网络爬虫抓取的新闻数据。信息流数据在“卡片工厂”中被划分为多个卡片。这里，卡片工厂指的是，对信息流数据进行处理，可以将它转换成多个信息卡片的工具装置。这里，每条信息以卡片的形式被处理。每个信息卡片可以通过各种模板被呈现给用户。

在图5中，信息流数据被划分为本地卡片和动态卡片。卡片工厂可以确定是否使用动态卡片。本地卡片是常规的信息流信息，并且通常使用本地模板(例如，本地模板一、本地模板二、本地模板三……、本地模板N)被呈现给用户。动态卡片是针对特殊需求的信息，例如，奥运会期间的信息、关于国庆的信息等。可以使用动态模板来呈现所述动态卡片。

如图5所示，客户端装置还接收通过内容管理服务器CMS动态下发的多个模板文件：模板文件一、模板文件二、模板文件三……、模板文件N。内容管理服务器管理动态用户界面模板的服务器，它可以在线更新客户端装置的用户界面模板。可以从所下发的模板中动态选择模板作为用于呈现动态卡片的模板。

通常，本地模板是基于本地应用的，可以直接利用本地图片、文本、视频等公共组件进行呈现。

动态模板是基于Html的，在正常情况下可以利用WebView进行呈现。然而，在这个例子中，对动态模板进行解析，以得到动态模板中的各个元素，并确定对应的本地控件，以用于呈现动态卡片的信息。例如，通过样式解析模块、属性解析模块、指令解析模块对模板中的样式、元素属性和指令进行处理。接着，利用CSS布局排版模块对所解析的数据进行布局排版。与现有技术不同，这里不是利用WebView进行呈现，而是利用根据上述实施例中的方式，基于所得到的布局排版信息，获取对应的本地图片、文本、视频等本地公共组件，并通过本地控件渲染模块，使用所述本地公共控件，呈现所述动态卡片的信息。

可以将动态模板中的所有界面元素都使用本地界面元素来替换。可选地，可以仅使用本地控件替换部分网页页面中的界面元素。

可以使用本地控件支持Html文件中的如下标签：body、div、label、img、button。

可以使用本地控件支持如下CSS样式：display、width、height、min-height、max-height、min-width、max-width、position(absolute、relative)、align-items(center、flex-end、stretch、flex-start)、align-self(auto、center、flex-end、stretch、flex-start)、justify-content(center、flex-end、space-between、space-around、flex-start)、flex-direction(row、column)、flex-wrap(nowrap、wrap)、flex、top、left、right、bottom、padding、margin、overflow、-webkit、-filter、color、background-color、border-radius、border、opacity、visibility(visible、hidden)、font-size、font-weight(bold)、sa-number-line、sa-ellipsis、text-align(center、right、left、justify)、font-family、text-decoration(line-through、underline)、line-height。

此外，还可以使用本地控件支持如下属性设置：disabled、src、onlongpress、onclick。

本领域技术人员应当理解，上面所列出的内容仅仅是例子，设计人员可以根据实际需要选择适当本地控件。

在这里，至少部分使用本地控件呈现基于Html文件的网页页面中的用户界面。这可以实现本地应用的流畅用户体验，也能够具备Html方式的动态更新能力。

本发明可以是设备、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。

这里参照根据本发明实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。

附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是，通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims

1.一种用于呈现用户界面的方法，包括：

接收网页页面数据；

基于网页页面数据中与页面呈现相关的界面信息，获取对应的本地应用的界面元素；以及

至少部分地使用所述本地应用的界面元素来呈现所述网页页面数据的网页页面。

2.根据权利要求1所述的方法，其中，所述网页页面数据包括信息流数据，以及所述界面信息包括通过内容管理系统下发的动态用户界面模板。

3.根据权利要求1所述的方法，其中，所述网页页面数据是基于Html的网页数据，以及所述界面信息是基于Html的界面信息。

4.根据权利要求3所述的方法，其中，所述界面信息包括Html文件中的标签、级联样式表中的样式和网页元素的属性设置中的至少一个。

5.根据权利要求1所述的方法，其中，所述本地应用的界面元素是基于SDK的用户界面框架实现的本地界面控件。

6.根据权利要求1所述的方法，其中，所述信息流数据包括从网络上抓取的新闻数据。

7.根据权利要求6所述的方法，其中，所述信息流数据包括所要使用的模板的标识。

8.根据权利要求1所述的方法，其中，基于预先设置的对应表，获取本地应用的界面元素，以及所述对应表包含网页页面数据中与页面呈现相关的界面信息与本地应用的界面元素的对应关系。

9.一种用于呈现网页页面的设备，包括：

接收网页页面数据；

10.一种客户端装置，包括根据权利要求9所述的用于呈现网页页面的设备，或者被设置成用于执行根据权利要求1-8中任何一项所述的用于呈现网页页面的方法中的操作。

11.一种电子设备，包括根据权利要求10所述的客户端装置，或者包括存储器和处理器，其中，所述存储器存储可执行指令，所述可执行指令在所述电子设备运行时控制所述处理器执行根据权利要求1-8中的任何一项所述的用于呈现网页页面的方法中的操作。