CN110309454A - 一种界面显示方法、装置、设备及存储介质 - Google Patents
一种界面显示方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN110309454A CN110309454A CN201810185783.3A CN201810185783A CN110309454A CN 110309454 A CN110309454 A CN 110309454A CN 201810185783 A CN201810185783 A CN 201810185783A CN 110309454 A CN110309454 A CN 110309454A
- Authority
- CN
- China
- Prior art keywords
- presentation
- tree object
- webpage
- presented
- interface
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种界面显示方法、装置、设备及存储介质,所述方法包括:获取统一资源定位符;获取所述统一资源定位符对应网页的呈现树对象;将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;将所述原生控件的控件元素加载到当前界面,生成原生界面。本发明能够把所有的网页以原生界面的形式进行客户端界面的呈现,避免了Web界面显示出现的多种性能不佳的问题,显示过程更加快速和流畅,提升了用户的体验感受;在生成原生界面的过程中不用开发大量的原生代码,开发成本低,学习成本低;还能够复用已有的数据信息。
Description
技术领域
本发明涉及移动设备网络界面显示技术领域,尤其涉及一种界面显示方法、装置、设备及存储介质。
背景技术
目前移动开发,已经分化为Android和IOS两大平台,很多应用需要为此编写两套代码致使开发和维护成本很高;并且,通常业界上应用APP都有很多的动态化的需求,比如运营活动、问题处理、快速上新功能等,特别像双十一、618这样的电商活动。对于这种既要体验好,又要开发速度快的需求,如果每次都需要通过原生代码的开发进行实现,不但耗时费力,而且成本高。
目前业界通用的跨平台的解决方案,常见分为两类:
(1)HTML5:移动设备的内置的浏览器都基于Webkit框架,都支持HTML5;HTML5可以在用户打开浏览器的时候,进行应用的访问,不用经过各种Store的审核,而且实时更新,不存在因为平台审核不通过致使问题无法处理。
(2)ReactNative:ReactNative是Facebook在React.JS Conf2015大会上推出了基于JavaScript的开源框架,使用JavaScript来开发IOS和Android原生应用;在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染等,这使得开发者只需学习一种语言就能为平台编写代码。
但是,HTML5存在多种性能问题,比如白屏、不流畅等,也无法实现复用效果,用户体验比较差。并且,ReactNative,其学习成本很高,并且也存在大量如HTML5无法复用的问题。
发明内容
为了解决现有技术应用在显示的页面中出现的白屏、不流畅,且页面无法复用等问题,本发明提供了一种界面显示方法、装置、设备及存储介质:
第一方面,本发明提供了一种界面显示方法,所述方法包括:
获取统一资源定位符;
根据所述统一资源定位符获取对应网页的呈现树对象;
将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
将所述原生控件的控件元素加载到当前界面,生成原生界面。
第二方面提供了一种界面显示装置,所述装置包括:
统一资源定位符获取模块,用于获取统一资源定位符;
呈现树对象获取模块,用于根据所述统一资源定位符获取对应网页的呈现树对象;
呈现树对象转换模块,用于将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
原生界面生成模块,用于将所述原生控件的控件元素加载到当前界面,生成原生界面。
第三方面提供了一种界面显示设备,所述设备包括处理器和存储器,所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如第一方面所述的界面显示方法。
第四方面提供了一种计算机可读存储介质,所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如第一方面所述的界面显示方法。
本发明提供的界面显示方法、装置、设备及存储介质,具有如下技术效果:
本发明能够把所有的网页以原生界面的形式进行客户端界面的呈现,避免了Web界面显示出现的多种性能不佳的问题,显示过程更加快速和流畅,提升了用户的体验感受。
本发明生成的原生界面,能够使用户直接调用客户端对应系统的API(APPlication Programming Interface,应用程序编程接口),使用户实现系统的原生应用功能的操作。
本发明不用开发大量的原生代码,开发成本低,学习成本低;还能够复用已有的数据信息。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案和优点,下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它附图。
图1是本发明实施例示出的一种实施环境的示意图;
图2是本发明实施例提供的一种界面显示方法流程图;
图3是本发明实施例提供的所述获取对应网页的呈现树对象的方法流程图;
图4是本发明实施例提供的所述将网页解析为呈现树对象的方法流程图;
图5是本发明实施例提供的一种呈现树对象的获取方法示意图;
图6是本发明实施例提供的Web界面的HTML文档信息的一个示例;
图7为图6提供的示例对应生成的原生界面;
图8是本发明实施例提供的DOM树示意图;
图9是本发明实施例提供的另一种界面显示方法流程图;
图10是本发明实施例提供的所述呈现树对象的存储流程图;
图11是本发明实施例提供的另一种界面显示方法;
图12是本发明实施例提供的另一种界面显示方法的判断流程图;
图13是本发明实施例提供的一种界面显示装置框图;
图14是本发明实施例提供的所述第一呈现树对象获取单元的组成框图;
图15是本发明实施例提供的另一种界面显示方法;
图16是本发明实施例提供的另一种界面显示方法;
图17是本发明实施例提供的所述呈现树对象调取单元的组成框图;
图18是本发明实施例提供的一种界面显示设备的示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。
需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
本发明实施例提供了一种界面显示方法,图1是实施例示出的一种实施环境的示意图,如图1所示,该实施环境包括设备01和服务器02,设备01可以为智能手机等类型的设备,设备的操作系统可以为安卓系统、IOS系统、塞班系统等。设备01和服务器02之间通过网络连接,所述设备上安装有多个客户端,对于其中的一个客户端与服务器之间的信息交互来说,所述方法包括:
客户端获取统一资源定位符;
客户端从服务器获取对应网页,将网页转换为呈现树对象,或者,客户端从本地直接获取到所述统一资源定位符对应网页的呈现树对象;
其中,对于获取呈现树对象还可以是,服务器将所述统一资源定位符对应网页转换为呈现树对象,服务器通过长连接下发最新版本的呈现树对象二进制数据,客户端从服务器获取呈现树对象;并且,呈现树对象,只是原生控件的样子,还需要操作这些控件逻辑。
客户端将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为控件元素。
客户端将所述原生控件的控件元素加载到当前界面,生成原生界面。其中,得到的客户端的原生控件,就如客户端或应用程序内的原生文件,在将其元素加载输出页面时整个过程更加流畅;所述当前界面也就是将要呈现所述统一资源定位符的界面。
本实施例通过客户端与服务器的信息交互,在服务器端将网页转化为呈现树对象,客户端从服务器获取所述呈现树对象;若客户端本地之前保存有对应的呈现树对象的情况下,直接获取所述呈现树对象;之后,在客户端将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为控件元素,进而使得原生控件和控件元素加载到当前界面,生成原生界面,也就是Native原生界面;其中,Native原生界面与Web界面属于两种不同的界面显示形式。
举例而言:
一个用户使用TIM客户端想打开一个打卡的HTML5页面;现有的就是用浏览器打开一个基本的网页;而通过本方案,TIM内打开的就是一个Native原生界面的呈现形式。或者是,对应至购物APP上,这些APP的首页一般是原生的,但是活动页和商品详情页是网页,在商品详情页上每个商品的链接均配置有一个网址,通过本发明的技术方案在该链接被打开后最后就会呈现出一个Native原生界面。并且,现有技术在购物APP上,如果需要添加新商家界面的话,一般需要有开发功能,如果使用本技术方案,购物后台开发人员就直接不用开发,把商家的网址直接拿来转化即可,之后再点击打开时,最后跳转得到的就是Native原生界面。
本实施例通过将网页转换为客户端的原生界面,不使用现有网页的呈现方式,通过原生界面的呈现方式使得避免了网页呈现过程中的多种性能问题,用户体验效果好。
本发明实施例提供了一种界面显示方法,如图2所示,所述方法包括:
S101.获取统一资源定位符;
在步骤S101中,客户端获取统一资源定位符;所述统一资源定位符(UniformResource Locator,缩写为URL)是互联网上标准的资源的地址(Address);互联网上的每个文件都有一个唯一的URL,通过包含的信息指出文件的位置,以及浏览器应该如何对其进行处理。
S102.根据统一资源定位符获取对应网页的呈现树对象;
在步骤S102中,在用户点击客户端上网页的统一资源定位符,也就是对应URL地址时,客户端根据网页标识的URL地址被触发的操作,开始进行呈现树对象的获取查询。
其中,本实施例具有缓存策略,具体是在获取到所述呈现数对象之后能够将所述呈现树对象的数据信息存储到本地的外存储器(如离线包)中,其目的是当所述网页标识再次被触发,所述网页有被再次打开的需求时,使所述外存储器中的呈现树对象的数据信息能够快速被复用。
具体而言,当需要加载相应界面的时候,优先从本地离线包加载,无需从服务器重新获取和解析;节省了流量,缩短了用户的等待时间,从而快速响应用户的需求。并且,提升了界面的显示效率和动态修改能力,做到实时的功能发布和问题修复。其中给予说明的是,所述呈现树对象属于可以被使用的程序对象;呈现树对象的数据信息是呈现树对象的二进制数据,属于数据集。
S103.将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
在步骤S103中,所述网页的网页元素对应的是Web界面的JavaScript文件,所述Web界面的JavaScript文件用于处理网页的网页元素;所述原生控件的控件元素对应的是原生控件的JavaScript操作文件,所述原生控件的JavaScript文件用于处理所述原生控件的控件元素。其中,每种移动系统,都有定义自己一套输入框等这样的控件,让开发使用;也就是说,在移动页面上的EditText输入框、Button按钮等都属于原生控件。
S104.将所述原生控件的控件元素加载到当前界面,生成原生界面。
具体地,在步骤S104中,通过为所述控件元素分配对应的位置坐标和样式属性,将带有所述位置坐标和样式属性的控件元素加载到客户端的当前界面,使所述控件元素结合所述原生控件在客户端上生成原生界面及对应的操作行为。
在本发明的一种实施例中,如图3所示,所述步骤S102包括:
S1a.根据统一资源定位符向服务器发送获取网页的呈现树对象的获取请求;
S1b.当未获取到所述呈现树对象时,则获取所述呈现树对象对应网页,将所述网页解析为呈现树对象。
在步骤S1b中,若客户端从服务器端未获取到所述呈现树对象,则客户端从服务器获取所述网页,进一步将所述网页解析成呈现树对象。
其中,将所述网页解析成呈现树对象是基于Webkit框架进行实现的,具体地就是使用浏览器内核Webkit框架将所述Web界面解析为呈现树对象。浏览器内核也被称为渲染引擎;所谓渲染,就是根据描述或者定义构建数学模型,通过模型生成图像的过程,浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果。
详细地,步骤S1b中的所述将所述网页解析为呈现树对象,如图4所示,包括如下步骤:
S11b.将所述网页的静态元素解析为第一合成元素;且将所述网页的动态元素解析为第二合成元素;
其中,所述网页的静态元素包括HTML文档信息,所述网页的动态元素包括CSS属性信息和位置信息。
S12b.根据所述第一合成元素和第二合成元素构建出呈现树;
S13c.将所述呈现树转化为呈现树对象,并将所述呈现树对象存储到本地。
具体地,针对上述将网页页面解析为呈现树对象的过程,结合图5给与说明:
所有的Android和IOS系统的移动设备,都有基于Webkit框架的浏览器控件,它能够进行Web界面的解析。具体是,Webkit框架通过呈现引擎解析Web界面的HTML文档,将HTML文档中的各标记逐个转化成“内容树”上的DOM节点;同时解析外部CSS文件以及样式元素中的样式数据。根据HTML文档的解析信息和外部CSS文件以及样式元素中的样式数据的解析信息构建出呈现树;使得呈现树带有HTML文档信息、CSS属性信息和位置信息。其中,图中是Webkit系统的主流程逻辑,通过该主流程进行页面显示。
其中,本实施例中,在检测到客户端上的URL地址的被触发操作时,进行URL地址对应的呈现树对象的查询获取;详细地,是先构建出URL地址对应网页的呈现树,获取构建出的呈现树,然后将呈现树转换为呈现树对象,之后将呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;为每个控件元素分配一个应出现在屏幕上的确切坐标和样式信息;将其加载到客户端的当前界面上,无需编码自动生成客户端的原生界面。
在客户端将所述网页的静态元素解析为第一合成元素,也就是将DOM树的类结构转化为对应的IOS或者Android的原生控件的控件元素;如图8所示,DOM节点为DOM树的组成部分。在客户端将网页的动态元素解析为第二合成元素,也就是将CSS属性和位置信息转化为原生控件对应的属性信息。然后将所有的控件元素与其对应的属性信息组合后,在指定的客户端界面上显示输出,该过程使得从操作Web界面元素转化为操作原生控件的控件元素。如图6所示为Web界面的HTML文档信息;如图7为生成的原生界面,其中图中显示的“动态化框架按钮”的字体为红色;该原生界面对应的json格式的呈现树为:
目前业界专门针对移动端动态化较少,本实施例基于Webkit客户端动态化框架,不仅仅适用于客户端变化度比较高的界面,在所有的其他界面都可以适应,甚至只要有这套框架,就不需要写其他的原生代码,直接这套框架加Web代码,可以搭建一整套的移动应用APP。需要说明的是,网页的动态化,是可以将数据转化为网页的界面。本技术方案基于Webkit的移动端动态化框架,是把所有的网页转为Native的界面;具体是基于浏览器内核的Webkit框架,将网页页面解析为呈现树对象和对应的JS文件,将呈现树对象和JS文件解析成移动端的Native界面和操作行为,进而实现把所有的网页以原生界面的形式呈现。
其中,将网页解析成呈现树,也可以在服务器实现,通过服务器的一次解析给所有的客户端用,减少客户端解析的时间;但是为了程序的健壮性,如果服务器执行解析操作失败的话,或者从服务器上取不到呈现树的数据(也就是服务器从来没有解析过客户端),则会在客户端将网页解析成呈现树操作。
本发明实施例能够将所有网页的显示形式转换为原生界面的呈现形式;通过获取网页,并将所述网页解析生成原生界面的方式;能够避免Web界面呈现过程中出现的白屏、不流畅等性能问题;显示效率高,用户体验效果好,进而使对应客户端具有更好的用户粘度性。
本发明实施例还提供了一种界面显示方法,如图9所示,
S201.获取统一资源定位符;
S202.根据统一资源定位符获取对应网页的呈现树对象;
步骤S202包括:根据统一资源定位符发送获取网页的呈现树对象的获取请求;判断是否获取到网页的呈现树对象。
具体地,上述的判断过程属于一个容错机制,若判断结果为从服务器获取到所述网页的呈现树对象,则包括两种情况:
如图9所示,S2a.当获取到所述呈现树对象时,则直接将所述呈现树对象存储到内存储器中,便于后续程序的调用;
如图10所示,S2b.当获取到所述呈现树对象,已有呈现树对象与获取到的呈现树对象不一致时,则将已有呈现树对象更新为获取到的呈现树对象,并将更新后的呈现树对象存储在外存储器中备用。
其中,因为服务器的呈现树对象处于不断更新的状态,所以,当客户端从服务器获取所述呈现树对象后,通过对之前已保存的呈现树对象的判断和更新,使得客户端保存的呈现树对象一直属于最新的呈现树对象。
举例而言,客户端中呈现树对象对应的版本为Vision1,而服务器中对应的版本为Vision2,则在判断出版本不同的情况下,更新客户端现有的版本为Vision2,实现消息推送及时界面更新及时等效果;进而保证了生成的原生界面的显示内容属于最新显示内容。
并且,将更新后的呈现树对象存储在外存储器中,使得客户端在后续程序处理时能够被快速复用,提升了客户端原生界面的呈现效率,快速响应用户的需求。
在步骤S202判断是否从服务器获取到网页的呈现树对象中,若判断出客户端从服务器未获取到所述呈现树对象,则从服务器获取所述呈现树对象对应的网页,将所述网页解析为呈现树对象,进而获取到所述呈现树对象。
S203.将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
S204.将所述原生控件的控件元素加载到当前界面,生成原生界面。
本发明实施例中向服务器获取所述呈现树对象,在从服务器获取到呈现树对象之后,能够进一步判断并对已有的呈现树对象的数据进行更新,使所述客户端保存的呈现树对象属于最新的呈现树对象;从而保证了之后生成的原生界面的显示属于最新的显示内容和布局,时时更新进一步提升用户的体验效果。
本发明实施例还提供了一种界面显示方法,如图11所示,
S301.获取统一资源定位符;
S302.根据统一资源定位符获取对应网页的呈现树对象;
其中,步骤S302包括:当所述呈现树对象位于存储器中时,则从所述存储器中获取所述网页的呈现树对象,此时判断的呈现树对象为对应界面的最新版本的呈现树对象。
其中,所述存储器包括内存储器和外存储器。所述内存储器为当前客户端使用的移动设备的随机存取存储器(RAM,RandomAccess Memory);所述外存储器如移动设备的外部存储器,比如只读存储器(ROM,Read-Only Memory)、U盘、移动硬盘、磁碟或者光盘等,其中,将数据信息存储在离线包的方式属于存储在移动设备的外存储器的方式,或者为跟随当前客户端保存到移动设备的外部存储器缓存单元的方式。
具体地:所述当所述呈现树对象位于存储器中时,则从所述存储器中获取所述网页的呈现树对象,包括:
S3a.当所述呈现树对象位于内存储器中,则从所述内存储器中调取所述呈现树对象;
其中,最新版本的呈现树对象位于内存储器中,也可以说是位于客户端的缓存中。
S3b.当所述呈现树对象未位于所述内存储器中,位于外存储器中时;则从所述外存储器中调取所述呈现树对象;
其中,最新版本的呈现树对象位于外存储器中,也就是说最新版本的呈现树对象的数据信息(二进制信息)位于外存储器中;从外存储器中调取所述呈现树对象其实质是调取所述呈现树对象对应的二进制数据。
S3c.当所述呈现树对象未位于所述内存储器中,且未位于所述外存储器中时;则发送获取所述网页的呈现树对象的获取请求。
在步骤S3c向服务器获取网页的呈现树对象过程中,如果服务器从来没有解析得到过网页的呈现树对象,那么,客户端从服务器上是取不到呈现树的数据信息的;在这种情况下,客户端可以向服务器获取所述呈现树对象对应网页,之后对所述网页进行解析,将所述网页解析为呈现树对象进而获取所述呈现树对象(如上述实施例中步骤S102具体包括的内容)。如果能够从服务器获取到呈现树对象,则进行呈现树对象获取、存储或更新(入上述实施例中的步骤S202具体包括的内容),为生成原生界面后续的程序操作使用。并且,可以将步骤S102、步骤S202、与步骤S301的内容结合得到图12所示的判断流程图。
S303.将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
S304.将所述原生控件的控件元素加载到当前界面,生成原生界面。
本发明实施例中在移动设备的本地存储器中保存有所述呈现树对象的情况下,不用向服务器获取呈现树对象,直接从本地获取所述呈现树对象,进而快速呈现出呈现树对象对应的显示页面,进一步提升了显示效率和用户体验度。
需要给予说明的是:本发明的原生界面由Native原生控件生成,Native原生控件由系统提供,所以,所述原生界面还可以直接访问移动设备对应系统的API(APPlicationProgramming Interface,应用程序编程接口),访问原生应用(拍照、日历和地理位置等),使用户实现系统的原生应用功能,比如拍照、日期查询、位置查询和信息存储等功能。
本发明实施例还提供了一种界面显示装置,如图13所示,所述装置包括:
统一资源定位符获取模块110,用于获取统一资源定位符;
呈现树对象获取模块120,用于根据统一资源定位符获取对应网页的呈现树对象;
具体地,所述呈现树对象获取模块120包括:
第一呈现树对象请求单元121,用于根据统一资源定位符向服务器发送获取网页的呈现树对象的获取请求;
第一呈现树对象获取单元122,用于在从服务器未获取到所述呈现树对象的情况下,获取所述网页,将所述网页解析为呈现树对象。
具体地,所述第一呈现树对象获取单元121,如图14所示,包括
网页解析子单元121a,用于将所述网页的静态元素解析为第一合成元素;且将所述网页的动态元素解析为第二合成元素;
呈现树构建子单元121b,用于根据所述第一合成元素和第二合成元素构建出呈现树;
第一呈现树对象获取子单元121c,将所述呈现树转化为呈现树对象,并将所述呈现树对象存储到内存储器中。
呈现树对象转换模块130,用于将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
原生界面生成模块140,用于将所述原生控件的控件元素加载到当前界面,生成原生界面。
所述的装置实施例中的装置与方法实施例基于同样地发明构思。
本发明实施例还提供了一种界面显示装置,如图15所示,所述装置包括:
统一资源定位符获取模块210,用于获取统一资源定位符;
呈现树对象获取模块220,用于根据统一资源定位符获取对应网页的呈现树对象;
具体地,所述呈现树对象获取模块220包括:
第二呈现树对象请求单元221,用于根据统一资源定位符向服务器发送获取网页的呈现树对象的获取请求;
呈现树对象获取更新单元222,用于在获取到所述呈现树对象,且已有呈现树对象与获取到的呈现树对象不一致的情况下,将已有呈现树对象更新为获取到的呈现树对象,并将更新后的呈现树对象存储在外存储器中。
呈现树对象转换模块230,用于将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
原生界面生成模块240,用于将所述原生控件的控件元素加载到当前界面,生成原生界面。
所述的装置实施例中的装置与方法实施例基于同样地发明构思。
本发明实施例还提供了一种界面显示装置,如图16所示,所述装置包括:
统一资源定位符获取模块310,用于获取统一资源定位符;
呈现树对象获取模块320,用于根据统一资源定位符获取对应网页的呈现树对象;
所述呈现树对象获取模块320还包括:
呈现树对象调取单元321,用于在判断出所述呈现树对象位于存储器的情况下,从所述存储器中获取所述网页的呈现树对象。
具体地,所述呈现树对象调取单元321,如图17所示,包括:
第一呈现树对象调取子单元321a,用于在判断出所述呈现树对象位于内存储器的情况下,从所述内存储器中调取所述呈现树对象;
第二呈现树对象调取子单元321b,用于在判断出所述呈现树对象未位于所述内存储器,位于外存储器的情况下;从所述外存储器中调取所述呈现树对象;
第三呈现树对象调取子单元321c,用于在所述呈现树对象未位于所述内存储器,且未位于所述外存储器的情况下;向服务器获取网页的呈现树对象。
呈现树对象转换模块330,用于将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为原生控件的控件元素;
原生界面生成模块340,用于将所述原生控件的控件元素加载到当前界面,生成原生界面。
其中,所述界面显示装置还包括:
呈现树对象外存模块350,用于将所述呈现树对象的数据信息存储到外存储器中。
所述的装置实施例中的装置与方法实施例基于同样地发明构思。
本发明实施例提供了一种界面显示设备,该界面显示设备设备包括处理器和存储器,该存储器中存储有至少一条指令、至少一段程序、代码集或指令集,该至少一条指令、该至少一段程序、该代码集或指令集由该处理器加载并执行以实现如上述方法实施例所提供的界面显示方法。
本发明的实施例还提供了一种存储介质,所述存储介质可设置于客户端之中以保存用于实现方法实施例中一种界面显示方法相关的至少一条指令、至少一段程序、代码集或指令集,该至少一条指令、该至少一段程序、该代码集或指令集由该处理器加载并执行以实现上述方法实施例提供的界面显示方法。
可选地,在本实施例中,上述存储介质可以位于计算机网络的多个网络设备中的至少一个网络设备。可选地,在本实施例中,上述存储介质可以包括但不限于:U盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,RandomAccess Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
本发明实施例还提供了一种界面显示设备的结构示意图,如图18所示,客户端可以安装在该设备上,该设备可以用于实施上述实施例中提供的界面显示方法。具体来讲:
所述设备可以包括RF(Radio Frequency,射频)电路810、包括有一个或一个以上计算机可读存储介质的存储器820、输入单元830、显示单元840、传感器850、音频电路860、WiFi(wireless fidelity,无线保真)模块870、包括有一个或者一个以上处理核心的处理器880、以及电源890等部件。本领域技术人员可以理解,图18中示出的设备结构并不构成对设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。其中:
RF电路810可用于收发信息或通话过程中,信号的接收和发送,特别地,将基站的下行信息接收后,交由一个或者一个以上处理器880处理;另外,将涉及上行的数据发送给基站。通常,RF电路810包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(LowNoiseAmplifier,低噪声放大器)、双工器等。此外,RF电路810还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议,包括但不限于GSM(Global System ofMobile communication,全球移动通讯系统)、GPRS(General Packet Radio Service,通用分组无线服务)、CDMA(CodeDivision Multiple Access,码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service,短消息服务)等。
存储器820可用于存储软件程序以及模块,处理器880通过运行存储在存储器820的软件程序以及模块,从而执行各种功能应用以及数据处理。存储器820可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、功能所需的应用程序等;存储数据区可存储根据所述设备的使用所创建的数据等。此外,存储器820可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地,存储器820还可以包括存储器控制器,以提供处理器880和输入单元830对存储器820的访问。
输入单元830可用于接收输入的数字或字符信息,以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地,输入单元830可包括触敏表面831以及其他输入设备832。触敏表面831,也称为触摸显示屏或者触控板,可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面831上或在触敏表面831附近的操作),并根据预先设定的程式驱动相应的连接装置。可选的,触敏表面831可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器880,并能接收处理器880发来的命令并加以执行。此外,可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面831。除了触敏表面831,输入单元830还可以包括其他输入设备832。具体地,其他输入设备832可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元840可用于显示由用户输入的信息或提供给用户的信息以及所述设备的各种图形用户接口,这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元840可包括显示面板841,可选的,可以采用LCD(Liquid Crystal Display,液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板841。进一步的,触敏表面831可覆盖显示面板841,当触敏表面831检测到在其上或附近的触摸操作后,传送给处理器880以确定触摸事件的类型,随后处理器880根据触摸事件的类型在显示面板841上提供相应的视觉输出。其中,触敏表面831与显示面板841可以两个独立的部件来实现输入和输入功能,但是在某些实施例中,也可以将触敏表面831与显示面板841集成而实现输入和输出功能。
所述设备还可包括至少一种传感器850,比如光传感器、运动传感器以及其他传感器。具体地,光传感器可包括环境光传感器及接近传感器,其中,环境光传感器可根据环境光线的明暗来调节显示面板841的亮度,接近传感器可在所述设备移动到耳边时,关闭显示面板841和/或背光。作为运动传感器的一种,重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小,静止时可检测出重力的大小及方向,可用于识别设备姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等;至于所述设备还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器,在此不再赘述。
音频电路860、扬声器861,传声器862可提供用户与所述设备之间的音频接口。音频电路860可将接收到的音频数据转换后的电信号,传输到扬声器861,由扬声器861转换为声音信号输出;另一方面,传声器862将收集的声音信号转换为电信号,由音频电路860接收后转换为音频数据,再将音频数据输出处理器880处理后,经RF电路810以发送给比如另一设备,或者将音频数据输出至存储器820以便进一步处理。音频电路860还可能包括耳塞插孔,以提供外设耳机与所述设备的通信。
WiFi属于短距离无线传输技术,所述设备通过WiFi模块870可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图18示出了WiFi模块870,但是可以理解的是,其并不属于所述设备的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。
处理器880是所述设备的控制中心,利用各种接口和线路连接整个设备的各个部分,通过运行或执行存储在存储器820内的软件程序和/或模块,以及调用存储在存储器820内的数据,执行所述设备的各种功能和处理数据,从而对设备进行整体监控。可选的,处理器880可包括一个或多个处理核心;优选的,处理器880可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器880中。
所述设备还包括给各个部件供电的电源890(比如电池),优选的,电源可以通过电源管理系统与处理器880逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源890还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
尽管未示出,所述设备还可以包括摄像头、蓝牙模块等,在此不再赘述。具体在本实施例中,设备的显示单元是触摸屏显示器,设备还包括有存储器,以及一个或者一个以上的程序,其中一个或者一个以上程序存储于存储器中,且经配置以由一个或者一个以上处理器执行本发明中方法实施例中的指令。
需要说明的是:上述本发明实施例先后顺序仅仅为了描述,不代表实施例的优劣。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (16)
1.一种界面显示方法,其特征在于,所述方法包括:
获取统一资源定位符;
获取所述统一资源定位符对应网页的呈现树对象;
将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为控件元素;
将所述原生控件的控件元素加载到当前界面,生成原生界面。
2.根据权利要求1所述的方法,其特征在于,所述根据统一资源定位符获取对应网页的呈现树对象,包括:
根据统一资源定位符发送获取网页的呈现树对象的获取请求;
当未获取到所述呈现树对象时,则获取所述网页,将所述网页解析为呈现树对象。
3.根据权利要求2所述的方法,其特征在于,所述将所述网页解析为呈现树对象,包括:
将所述网页的静态元素解析为第一合成元素;且将所述网页的动态元素解析为第二合成元素;
根据所述第一合成元素和第二合成元素构建出呈现树;
将所述呈现树转化为呈现树对象,并将所述呈现树对象存储在本地。
4.根据权利要求1所述的方法,其特征在于,所述根据统一资源定位符获取对应网页的呈现树对象,包括:
根据统一资源定位符发送获取网页的呈现树对象的获取请求;
当获取到所述呈现树对象,且已有呈现树对象与获取到的呈现树对象不一致时,则将已有呈现树对象更新为获取到的呈现树对象,并将更新后的呈现树对象存储在本地中。
5.根据权利要求2或4所述的方法,其特征在于,所述根据统一资源定位符获取对应网页的呈现树对象,还包括:
当所述呈现树对象位于本地时,则从本地获取所述网页的呈现树对象。
6.根据权利要求5所述的方法,其特征在于,所述当所述呈现树对象位于本地时,则从本地获取所述网页的呈现树对象,包括:
当所述呈现树对象位于本地的内存储器中,则从所述本地的内存储器中调取所述呈现树对象;
当所述呈现树对象未位于所述本地的内存储器中,位于本地的外存储器中时;则从所述本地的外存储器中调取所述呈现树对象;
当所述呈现树对象未位于所述本地的内存储器中,且未位于所述本地的外存储器中时;则发送获取网页的呈现树对象的获取请求。
7.根据权利要求1-4任一所述的方法,其特征在于,所述根据统一资源定位符获取对应网页的呈现树对象,之后包括:
将所述呈现树对象的数据信息存储到本地。
8.一种界面显示装置,其特征在于,所述装置包括:
统一资源定位符获取模块,用于获取统一资源定位符;
呈现树对象获取模块,用于获取所述统一资源定位符对应网页的呈现树对象;
呈现树对象转换模块,用于将所述呈现树对象转换为原生控件,并将所述呈现树对象对应网页的网页元素转换为控件元素;
原生界面生成模块,用于将所述原生控件的控件元素加载到当前界面,生成原生界面。
9.根据权利要求8所述的装置,其特征在于,所述呈现树对象获取模块包括:
第一呈现树对象请求单元,用于根据统一资源定位符发送获取网页的呈现树对象的获取请求;
第一呈现树对象获取单元,用于在未获取到所述呈现树对象的情况下,获取所述网页,并将所述网页解析为呈现树对象。
10.根据权利要求9所述的装置,其特征在于,所述第一呈现树对象获取单元包括:
网页解析子单元,用于将所述网页的静态元素解析为第一合成元素;且将所述网页的动态元素解析为第二合成元素;
呈现树构建子单元,用于根据所述第一合成元素和第二合成元素构建出呈现树;
第一呈现树对象获取子单元,用于将所述呈现树转化为呈现树对象,并将所述呈现树对象存储到本地。
11.根据权利要求8所述的装置,其特征在于,所述呈现树对象获取模块包括:
第二呈现树对象请求单元,用于根据统一资源定位符发送获取网页的呈现树对象的获取请求;
呈现树对象获取更新单元,用于在获取到所述呈现树对象,且已有呈现树对象与获取到的呈现树对象不一致的情况下,将已有呈现树对象更新为获取到的呈现树对象,并将更新后的呈现树对象存储在本地。
12.根据权利要求9或11所述的装置,其特征在于,所述呈现树对象获取模块还包括:
呈现树对象调取单元,用于在判断出所述呈现树对象位于本地的情况下,从本地获取所述网页的呈现树对象。
13.根据权利要求12所述的装置,其特征在于,所述呈现树对象调取单元包括:
第一呈现树对象调取子单元,用于在判断出所述呈现树对象位于本地的内存储器的情况下,从所述本地的内存储器中调取所述呈现树对象;
第二呈现树对象调取子单元,用于在判断出所述呈现树对象未位于所述本地的内存储器,位于本地的外存储器的情况下;从所述本地的外存储器中调取所述呈现树对象;
第三呈现树对象调取子单元,用于在所述呈现树对象未位于所述本地的内存储器,且未位于所述本地的外存储器的情况下;发送获取网页的呈现树对象的获取请求。
14.根据权利要求8-11任一所述的装置,其特征在于,所述装置还包括:
呈现树对象外存模块,用于将所述呈现树对象的数据信息存储到本地。
15.一种界面显示设备,其特征在于,所述设备包括处理器和存储器,所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至7任一所述的界面显示方法。
16.一种计算机可读存储介质,其特征在于,所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至7任一所述的界面显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810185783.3A CN110309454B (zh) | 2018-03-06 | 2018-03-06 | 一种界面显示方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810185783.3A CN110309454B (zh) | 2018-03-06 | 2018-03-06 | 一种界面显示方法、装置、设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110309454A true CN110309454A (zh) | 2019-10-08 |
CN110309454B CN110309454B (zh) | 2023-07-11 |
Family
ID=68073753
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810185783.3A Active CN110309454B (zh) | 2018-03-06 | 2018-03-06 | 一种界面显示方法、装置、设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110309454B (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110795154A (zh) * | 2019-10-10 | 2020-02-14 | 深圳市证通电子股份有限公司 | 跨平台设备驱动方法、装置、设备及计算机可读存储介质 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105760405A (zh) * | 2014-12-19 | 2016-07-13 | 阿里巴巴集团控股有限公司 | 用于加载web页面的网络资源获取方法、缓存方法及装置 |
CN106293645A (zh) * | 2015-05-13 | 2017-01-04 | Tcl集团股份有限公司 | 一种提高Web应用界面渲染效率的方法及系统 |
CN106339405A (zh) * | 2015-07-08 | 2017-01-18 | 三星电子株式会社 | 用于显示网络内容的方法和支持其的电子装置 |
CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
US20170091160A1 (en) * | 2015-09-30 | 2017-03-30 | Samsung Display Co. Ltd. | Display system and virtual web device in the cloud |
CN107291465A (zh) * | 2017-06-14 | 2017-10-24 | 北京小米移动软件有限公司 | 页面显示方法、装置及存储介质 |
CN107608675A (zh) * | 2017-09-27 | 2018-01-19 | 微景天下(北京)科技有限公司 | 基于虚拟文档对象模型的跨平台前端开发系统及方法 |
-
2018
- 2018-03-06 CN CN201810185783.3A patent/CN110309454B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105760405A (zh) * | 2014-12-19 | 2016-07-13 | 阿里巴巴集团控股有限公司 | 用于加载web页面的网络资源获取方法、缓存方法及装置 |
CN106293645A (zh) * | 2015-05-13 | 2017-01-04 | Tcl集团股份有限公司 | 一种提高Web应用界面渲染效率的方法及系统 |
CN106339405A (zh) * | 2015-07-08 | 2017-01-18 | 三星电子株式会社 | 用于显示网络内容的方法和支持其的电子装置 |
US20170091160A1 (en) * | 2015-09-30 | 2017-03-30 | Samsung Display Co. Ltd. | Display system and virtual web device in the cloud |
CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
CN107291465A (zh) * | 2017-06-14 | 2017-10-24 | 北京小米移动软件有限公司 | 页面显示方法、装置及存储介质 |
CN107608675A (zh) * | 2017-09-27 | 2018-01-19 | 微景天下(北京)科技有限公司 | 基于虚拟文档对象模型的跨平台前端开发系统及方法 |
Non-Patent Citations (1)
Title |
---|
戴志诚;程劲草;: "基于虚拟DOM的Web前端性能优化研究", 计算机应用与软件, no. 12 * |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110795154A (zh) * | 2019-10-10 | 2020-02-14 | 深圳市证通电子股份有限公司 | 跨平台设备驱动方法、装置、设备及计算机可读存储介质 |
CN110795154B (zh) * | 2019-10-10 | 2024-02-06 | 深圳市证通电子股份有限公司 | 跨平台设备驱动方法、装置、设备及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN110309454B (zh) | 2023-07-11 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106970790B (zh) | 一种应用程序创建的方法、相关设备及系统 | |
CN103455582B (zh) | 浏览器导航页的显示方法及移动终端 | |
CN104978176B (zh) | 应用程序接口调用方法、装置及计算机可读存储介质 | |
CN107741844B (zh) | 一种应用安装包的生成方法和装置 | |
CN105320687A (zh) | 网页显示方法及装置 | |
CN106502703B (zh) | 一种函数调用方法和装置 | |
CN111178012A (zh) | 一种表单渲染方法、装置、设备及存储介质 | |
CN112882772B (zh) | 移动终端应用界面的配置方法、移动终端及存储介质 | |
US20150091935A1 (en) | Method and device for browsing web under weak light with mobile terminal browser | |
CN110032512A (zh) | 一种小程序的调试方法、相关设备及终端 | |
CN109857403A (zh) | 一种页面更新、页面处理方法及装置 | |
CN107666406B (zh) | 智能卡片显示方法及装置 | |
CN104965716A (zh) | 图标更新方法、客户端装置、及终端设备 | |
CN103513987A (zh) | 一种浏览器网页的渲染处理方法、装置及终端设备 | |
CN103310009A (zh) | 一种更新网页数据的方法、装置和终端设备 | |
CN104978183A (zh) | 一种图标构造方法,及终端设备 | |
CN105955739A (zh) | 一种图形界面的处理方法、装置和系统 | |
CN110035181A (zh) | 一种快应用卡片主题设置方法及终端 | |
CN103607431B (zh) | 移动终端资源处理方法、装置和设备 | |
CN105868319B (zh) | 网页加载方法及装置 | |
CN106293738A (zh) | 一种表情图像的更新方法及装置 | |
CN109933381A (zh) | 一种内核的加载方法及装置 | |
CN108874653A (zh) | 任务测试方法、测试机、共享服务器和可读存储介质 | |
CN104536782A (zh) | 引导内容展示方法、文件生成方法及装置 | |
CN104063400A (zh) | 数据搜索方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | 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 |