CN109684580A - 一种动态页面的展示方法及电子设备 - Google Patents
一种动态页面的展示方法及电子设备 Download PDFInfo
- Publication number
- CN109684580A CN109684580A CN201710978295.3A CN201710978295A CN109684580A CN 109684580 A CN109684580 A CN 109684580A CN 201710978295 A CN201710978295 A CN 201710978295A CN 109684580 A CN109684580 A CN 109684580A
- Authority
- CN
- China
- Prior art keywords
- page
- primary
- mobile application
- data
- file
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 58
- 230000001747 exhibiting effect Effects 0.000 title claims abstract description 13
- 238000009877 rendering Methods 0.000 claims abstract description 34
- 230000008569 process Effects 0.000 claims abstract description 22
- 238000011161 development Methods 0.000 claims description 19
- 230000006870 function Effects 0.000 claims description 13
- 230000005055 memory storage Effects 0.000 claims 1
- 238000012545 processing Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000003780 insertion Methods 0.000 description 2
- 230000037431 insertion Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 210000003205 muscle Anatomy 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000000547 structure data Methods 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
- 239000011800 void material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Landscapes
- Stored Programmes (AREA)
Abstract
本发明公开了一种动态页面的展示方法及电子设备,用于提高页面展示的速度。其中,移动应用页面的展示方法包括:获取移动应用的页面布局数据,所述页面布局数据至少包括原生组件数据和页面元素数据;对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件;根据所述页面元素数据确定所述移动应用在运行过程中要展示的页面元素;调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示。
Description
技术领域
本发明涉及计算机技术领域,特别涉及一种动态页面的展示方法及电子设备。
背景技术
终端包括了越来越多的应用(Application,APP),例如Windows应用、安卓(Android)应用、IOS应用等。且商家可以通过应用平台推广各种促销活动,这就要求APP展示页面能够支持动态展示。
目前,这些应用在展示页面的过程中,通过嵌入的网页窗口(Webview)组件的方式实现动态展示。Webview组件的方式需要加载动态内容的页面资源,对动态内容的页面资源进行渲染处理后,展示出渲染结果,也就是页面。而Webview组件作为一个内嵌浏览器,实际上同独立浏览器一样对CPU、内存消耗较大,尤其是当页面资源,例如图片的数量较多时,加载图片耗费的内存较多,图片加载慢、甚至会出现页面卡顿、闪退等现象。
可见,目前动态页面的展示速度较慢。
发明内容
本发明实施例提供一种动态页面的展示方法及电子设备,用于提高页面展示的速度。
第一方面,本发明一实施例提供了一种移动应用页面的展示方法,该展示方法包括:
获取移动应用的页面布局数据,所述页面布局数据至少包括原生组件数据和页面元素数据;
对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件;
根据所述页面元素数据确定所述移动应用在运行过程中要展示的页面元素;
调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示。
可选的,获取移动应用的页面布局数据,包括:
获取存储的所述移动应用的软件开发工具包SDK文件;
运行所述SDK文件获取移动应用的页面布局数据。
可选的,在获取移动应用的页面布局数据之前,还包括:
为各个操作系统的原生组件设置原生标签;其中,相同功能的原生组件设置相同的原生标签;
将设置的原生标签作为所述原生组件数据。
可选的,还包括:
在网页前端模板文件中内置所述原生组件数据;所述前端模板文件至少包括JS文件、超文本标记语言HTML文件和层叠样式表CSS文件;
重新编译内置了所述原生组件数据的网页前端模板文件,生成软件开发工具包SDK文件。
可选的,在重新编译内置了所述原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之前,还包括:
在前端转码器Babel的配置文件中添加转码规则;所述Babel用于将编写的代码转化成编译引擎能够识别的代码,所述转码规则为能将内置了原生组件数据的网页前端模板文件转化为所述编译引擎能够识别的文件的规则。
可选的,在重新编译内置了所述原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之后,还包括:
将生成的软件工具开发包SDK文件发布给服务器。
可选的,对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件,包括:
根据获取的软件开发工具包SDK文件,确定所述移动应用运行时所需要运行的操作系统;
根据确定的操作系统和所述原生组件数据包括的原生标签,确定所述至少一个原生组件。
可选的,调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示,包括:
在多个线程中调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示;
其中,所述多个线程以异步的方式运行,每个线程调用一个原生组件。
第二方面,本发明一实施例提供了一种电子设备,该电子设备包括:
获取单元,用于获取移动应用的页面布局数据,所述页面布局数据至少包括原生组件数据和页面元素数据;
解析单元,用于对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件;
确定单元,用于根据所述页面元素数据确定所述移动应用在运行过程中要展示的页面元素;
渲染单元,用于调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示。
第三方面,本发明一实施例提供了另一种电子设备,该电子设备包括:
至少一个处理器,以及
与所述至少一个处理器连接的存储器;
其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述至少一个处理器通过执行所述存储器存储的指令,执行如权第一方面中任一项所述的方法。
第四方面,本发明一实施例提供了一种计算机存储介质,所述计算机可读存储介质存储有计算机指令,当所述计算机指令在计算机上运行时,使得计算机执行如第一方面中任一项所述的方法。
本发明实施例中,移动应用的页面布局数据包括原生组件数据,根据原生组件数据可以确定移动应用在运行过程中调用的原生组件,通过调用原生组件对移动应用的页面元素进行渲染展示,得到页面。由于页面展现的是原生组件,无需采用Webview组件加载页面资源,从而缩短了页面展示所需要的时间,提高了页面展示的速度。
附图说明
图1是本发明实施例提供的移动应用页面的展示方法的流程示意图;
图2为本发明实施例提供的电子设备的一种结构示意图;
图3为本发明实施例提供的电子设备的一种结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述。
本发明实施例中,移动应用是指安装在终端的本地程序,即APP,可以是Windows应用、安卓(Android)应用、IOS应用等,支撑移动应用运行的设备可以称为终端,终端可以包括但不限于手机、平板电脑(Tablet Computer,TC)、个人电脑(Personal Computer,PC)、个人数字助理(Personal Digital Assistant,PDA)等。
本发明实施例中,移动应用页面包括静态页面和动态页面,其中,静态页面是指页面上的页面内容固定,不会发生变化。动态页面是指页面上的页面内容不固定,可能会发生变化,例如,当APP的运营商通过APP页面呈现的方式进行推广活动时,页面的内容就会包括推广活动的相关内容。
目前,移动应用在展示页面是通过调用嵌入的Webview组件的方式实现的。而Webview组件作为一个内嵌浏览器,实际上同独立浏览器一样对CPU、内存消耗较大,在加载动态内容的页面资源较多时,例如图片的数量较多,那么耗费的内存就较多,图片加载慢、甚至会出现页面卡顿、闪退等现象。
鉴于此,本发明实施例提供一种新的移动应用页面的展示方法,其中,移动应用的页面布局数据包括原生组件数据,根据原生组件数据可以确定移动应用在运行过程中调用的原生组件,通过调用原生组件对移动应用的页面元素进行渲染展示,得到页面。由于页面展现的是原生组件,无需采用Webview组件加载页面资源,从而提高了页面展示的速度。
下面结合附图介绍本发明实施例提供的技术方案。
请参见图1,本发明实施例提供一种移动应用页面的展示方法,该展示方法的流程描述如下:
S101:获取移动应用的页面布局数据,页面布局数据至少包括原生组件数据和页面元素数据;
S102:对页面布局数据中的原生组件数据进行解析,获得移动应用在运行过程中调用的至少一个原生组件;
S103:根据页面元素数据确定移动应用在运行过程中要展示的页面元素;
S104:调用至少一个原生组件,对移动应用的页面元素进行渲染展示。
终端要展示页面时,首先要获取移动应用的页面布局数据,也就是页面的布局数据,例如组件数据和页面元素数据。本发明实施例中,组件数据是指原生组件数据,可以是描述原生组件的相关数据。原生组件是指操作系统自身的组件,例如,如果操作系统是安卓系统,那么原生组件有GridView组件、Button组件等,原生组件数据可以用于指示安卓系统的原生组件。再例如,如果操作系统是IOS系统,那么原生组件有UICollectionView组件、UIButton组件等,原生组件数据可以用于指示IOS系统的原生组件。页面元素数据可以指示页面元素组件,例如可以指示页面展示的元素,例如图片、文本、控件等元素。
这样获得页面布局数据后,可以对获得的页面布局数据进行解析,获得原生组件数据和页面元素数据。再对获得的原生组件数据进行解析,获得移动应用在运行过程中调用的至少一个原生组件。同时,根据页面元素数据确定移动应用页面要展示的页面元素。从而调用至少一个原生组件,对移动应用的页面元素进行渲染展示,输出渲染后的页面得到移动应用的页面。
需要说明的是,前述步骤S101-S102的执行主体的部分或全部可以是移动应用,也可以是设置在移动应用中的插件或者软件开发工具包(SoftwareDevelopment Kit,SDK)等。或者也可以是其他可能的工具,例如位于服务器的处理引擎等,对此,本发明实施例不作限制。
本发明实施例获取移动应用页面布局数据,实际上是可以在移动应用中创建一个SDK。以创建SDK为例,目前基本是采用原生语音进行开发,例如安卓系统的应用采用Java语言,IOS系统采用ObjectC++等。不论基于何种原生语言,对于移动应用页面的展示,都是基于HTML。
例如,目前基于操作系统内核提供的Webview组件,例如,如果是安卓操作系统,那么Webview组件可能是ListView作为容器,通过加载HTML5页面实现页面的动态更新。如果是IOS操作系统,那么Webview组件可能是UIWebView作为容器,通过加载HTML5页面实现页面的动态更新。但是该方法完全依赖于H5。在页面渲染的数据量较大的情况下,由于消耗内存较多,页面会经常出现卡顿、内存不足和页面闪退等现象,用户体验不好。
或者,基于结构化的Native的方案实现。Native了可以理解为一个计算机函数,就是一个Java调用非Java代码的接口。Native的方案的实现由非Java语言实现,比如C或C++。对于移动应用页面的展示,可以基于NativeView(IOS操作系统:UIView,,安卓操作系统:RecyleView)作为容器,通过加载结构化数据,例如可扩展标记语言(eXtensible MarkupLanguage,XML)或JS对象标记(JavaScript Object Notation,JSON),动态地创建Native控件进行页面渲染。该方法只能结构化渲染页面,无法加载逻辑执行代码,也就无法满足复杂计算的页面场景,扩展性不够。
或者,基于ReactNative方案,一种开源移动应用开发框架。使用React.JS编写代码,通过脚本引擎支持界面虚拟文档对象模型(Virtual Document ObjectModel,VirtualDOM)的转换和逻辑控制,来实现界面的动态展示。该方法需要开发人员重新进行开发,这无疑要求开发人员的开发技能比较高,需要开发人员掌握原生开发技术导致开发难度增大,开发周期长,开发成本较高。
鉴于此,本发明实施例提供了一种HTML5容器。考虑到现有技术中,采用Webview组件,也称为非原生组件加载页面元素组件,例如HTML页面元素组件等,并非是通过操作系统的原生组件加载,可能会导致加载页面的过程中出现页面卡顿等现象。
因此,本发明实施例可以为各个操作系统的多个原生组件设置对应的原生标签,通过原生标签指示原生组件。其中,相同功能的原生组件设置相同的原生标签,如表1所示。
表1
(原生标签与各个操作系统的原生组件的对应关系表)
从表1中可以看出,不同操作系统相同功能的原生组件对应相同的原生标签,例如,IOS系统的原生组件UIButton和安卓系统的原生组件Button都表示按钮组件,可以都用原生标签SY-BUTTON来示意。其中,表1仅是举例列举标签,并不包括全部的原生组件的标签。其中原生标签的表现形式仅是示意,还可以是其他可能的表现形式,对此,本发明实施例不作限制。
本发明实施例可以将设置的原生标签作为原生组件数据,内置在网页前端模板文件中,通过编译引擎重新编译内置了原生组件数据的网页前端模板文件,生成SDK。这样SDK就包括了对应各个操作系统的原生组件的原生标签。移到应用页面展示时,就可以根据SDK获得至少一个原生标签,查找至少一个原生标签中每个原生标签对应的操作系统的原生组件,获得至少一个原生组件,直接用至少一个原生组件替换获得的至少一个原生标签,调用至少一个原生组件来加载页面元素,实现页面的展示。例如,移到应用页面展示时,可以通过SDK获得原生标签SY-BUTTON,如果移动应用运行所需要运行的操作系统是安卓系统,那么可以用Button替换SY-BUTTON,调用Button来加载页面元素,实现页面的展示。同样地,如果如果移动应用运行所需要运行的操作系统是IOS系统,那么可以用UIButton替换SY-BUTTON,调用UIButton来加载页面元素,实现页面的展示。
现有技术中,Webview组件,也就是非原生组件加载页面元素时,是检查使用的List标签,在大数据量下,消耗内存较大,页面很容易造成页面卡顿现象。而本发明实施例由于页面展现的是原生组件,在加载页面元素时,可以通过与原生标签对应的原生组件将原生标签替换,通过替换的原生组件加载页面元素,无需采用Webview组件加载页面资源。而使用原生组件加载页面元素,加载后会将消耗的内存自动回收,这样内存就不会一直消耗很大,不容易造成页面卡顿的现象,从而缩短了页面展示所需要的时间,提高了页面展示的速度,用户体验较好。
内置在网页前端模板文件中,通过编译引擎重新编译内置了原生组件数据的网页前端模板文件,生成SDK。这样SDK就包括了对应各个操作系统的原生组件的原生标签。移到应用页面展示时,
另外,本发明实施例是在网页前端模板文件内置原生组件数据,其中,网页前端模板文件至少包括JS文件、超文本标记语言HTML文件和层叠样式表CSS文件,这些都是标准的原生语法生成的文件。也就是本发明实施例实际上是在标准的原生语法生成的文件的实现代码中内置原生组件数据,可以认为是采用与标准HTML5类似的语法,扩展到不同的操作系统,对开发人员的开发能力要求较低,较为灵活,方便扩展到不同的操作系统。网站或者页面需要更新时,不需要对整个移动应用进行升级,减少开发周期,节约成本。
由于本发明实施例中的原生标签,即原生组件数据是内置在标准的前端模板文件,即在标准的原生语法代码中内置原生组件数据,这就是一种新的语法,浏览器,例如QQ浏览器、UC浏览器等并不能直接运行。这就需要编译引擎进行语法的翻译,生成渲染引擎可以进行渲染的JS资源文件。
可能的实施方式中,编译引擎可以在前端转码器Babel的配置文件中添加转码规则,使得编译引擎在对内置了原生组件数据的前端模板文件代码片段进行编译后,通过移动终端操作系统的应用接口API能够形成被移动终端直接调用,能够别浏览器直接运行。其中,abel用于将编写的代码转化成编译引擎能够识别的代码,转码规则为能将内置了原生组件数据的网页前端模板文件转化为述编译引擎能够识别的文件的规则。
编译引擎在重新编译内置了原生组件数据的网页前端模板文件,可以进行压缩,形成较小的执行效率更高的JS资源文件,生成SDK文件之后,可以将生成的软件工具开发包SDK文件发布给服务器。这样终端需要升级APP时可以请求从服务器获取对应的SDK文件。
本发明实施例是提供一个HTML5容器,在标准的前端模板文件中内置了原生标签,事先预置原生标签和各个操作系统的原生组件的对应关系。当移动应用对页面展示说,可以先获取原生标签,再将原生标签替换为对应的操作系统的原生组件,调用原生组件对页面的元素进行渲染,从而达到页面展示的目的。
具体来说,移到应用在进行页面展示时,可以从服务器或本地获取存储的移动应用的软件开发工具包SDK文件,运行该SDK文件可以确定移动应用运行时所需要运行的操作系统,也可以获取移动应用的页面布局数据,即原生组件数据和页面元素数据。
通过移动应用的渲染引擎对页面布局数据中的原生组件数据进行解析,基于原生标签与各个操作系统的原生组件的对应关系,根据确定的操作系统和页面布局数据中原生组件数据包括的原生标签,确定与原生标签对应的至少一个原生组件。渲染引擎调用至少一个原生组件就可以实现对页面元素的渲染,渲染后可以输出渲染后的页面,实现页面展示。
可能的实施方式中,渲染引擎可以在多个线程中调用至少一个原生组件,对移动应用的页面元素进行渲染展示,其中,多个线程以异步的方式运行,每个线程调用一个原生组件,这样就可以实现页面元素的并行加载,减少页面加载的阻塞,减小页面出现卡顿的现象,响应时间较短。而现有技术中,通过WebView组件进行页面的加载,由于WebView组件是单线程的渲染方式,也即页面元素是顺序加载,需要的时间较长,即响应时间较长,用户体验不好。
综上,本发明实施例中,开发端提供了一种HTML5容器,该容器可以包括语法组件模块、编译引擎模块。渲染引擎模块。其中,语法组件模块用于在标准的页面前端模板文件中内置了原生标签。编译引擎模块,用于对内置了原生标签的页面前端模板文件进行编译,生成移动应用能够识别的文件,浏览器可以直接运行的文件。渲染引擎用于解析语音组件模块,从中获取原生标签,并将原生标签直接替换为与其对应的操作系统的原生组件,在多个线程中并行调用原生组件,实现对移动页面的展示。
由于,本发明实施例通过调用原生组件对移动应用的页面元素进行渲染展示,得到页面。由于页面展现的是原生组件,无需采用Webview组件加载页面资源,从而缩短了页面展示所需要的时间,提高了页面展示的速度。
由于语法组件模块是在标准的页面前端模板文件中内置原生标签,可以认为是采用与标准HTML5类似的语法,扩展到不同的操作系统,不同于传统的XML或JSON等格式文件,对开发人员的开发能力要求较低,较为灵活,方便扩展到不同的操作系统。网站或者页面需要更新时,不需要对整个移动应用进行升级,减少开发周期,节约成本。
且,相对于结构化NativE方案,可以加载逻辑执行代码,能够满足复杂的页面场景,扩展性比较灵活。
下面介绍本发明实施例提供的设备。
请参见图2,基于同一发明构思,本发明一实施例提供了一种电子设备,该电子设备包括:
获取单元201,用于获取移动应用的页面布局数据,页面布局数据至少包括原生组件数据和页面元素数据;
解析单元202,用于对页面布局数据中的原生组件数据进行解析,获得移动应用在运行过程中调用的至少一个原生组件;
确定单元203,用于根据页面元素数据确定移动应用在运行过程中要展示的页面元素;
渲染单元204,用于调用至少一个原生组件,对移动应用的页面元素进行渲染展示。
可选的,获取单元201具体用于:
获取存储的移动应用的软件开发工具包SDK文件;
运行SDK文件获取移动应用的页面布局数据。
可选的,还包括设置单元,用于在获取移动应用的页面布局数据之前:
为各个操作系统的原生组件设置原生标签;其中,相同功能的原生组件设置相同的原生标签;
将设置的原生标签作为原生组件数据。
可选的,设置单元还用于:
在网页前端模板文件中内置原生组件数据;前端模板文件至少包括JS文件、超文本标记语言HTML文件和层叠样式表CSS文件;
重新编译内置了原生组件数据的网页前端模板文件,生成软件开发工具包SDK文件。
可选的,设置单元还用于:在重新编译内置了原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之前,在前端转码器Babel的配置文件中添加转码规则;
其中,Babel用于将编写的代码转化成编译引擎能够识别的代码,转码规则为能将内置了原生组件数据的网页前端模板文件转化为编译引擎能够识别的文件的规则。
可选的,还包括发布单元,用于在重新编译内置了原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之后,将生成的软件工具开发包SDK文件发布给服务器。
可选的,解析单元202具体用于:
根据获取的软件开发工具包SDK文件,确定移动应用运行时所需要运行的操作系统;
根据确定的操作系统和原生组件数据包括的原生标签,确定至少一个原生组件。
可选的,渲染单元204具体用于:
在多个线程中调用至少一个原生组件,对移动应用的页面元素进行渲染展示;
其中,多个线程以异步的方式运行,每个线程调用一个原生组件。
该设备可以用于执行图1所示的实施例所提供的方法。因此,对于该设备的各功能模块所能够实现的功能等可参考图1所示的实施例的描述,不多赘述。
请参见图3,本发明一实施例还提供一种系统备份的设备,即宿主机,该宿主机包括至少一个处理器301,处理器301用于执行存储器中存储的计算机程序时实现本发明实施例提供的如图1所示的系统备份的方法的步骤。
可选的,处理器301具体可以是中央处理器、特定应用集成电路(英文:Application Specific Integrated Circuit,简称:ASIC),可以是一个或多个用于控制程序执行的集成电路。
可选的,该电子设备还包括与至少一个处理器连接的存储器302,存储器302可以包括只读存储器(英文:Read Only Memory,简称:ROM)、随机存取存储器(英文:RandomAccess Memory,简称:RAM)和磁盘存储器。存储器302用于存储处理器301运行时所需的数据,即存储有可被至少一个处理器301执行的指令,至少一个处理器301通过执行存储器302存储的指令,执行如图1所示的方法。其中,存储器302的数量为一个或多个。其中,存储器302在图3中一并示出,但需要知道的是存储器302不是必选的功能模块,因此在图3中以虚线示出。
基于同一发明构思,本发明实施例提供一种计算机可读存储介质,该计算机可读存储介质存储有计算机指令,当计算机指令在计算机上运行时,使得计算机执行如图1所示的方法。
在具体的实施过程中,计算机可读存储介质包括:通用串行总线闪存盘(Universal Serial Bus flash drive,USB)、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的存储介质。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本发明所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括:通用串行总线闪存盘(UniversalSerial Bus flash disk)、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。
Claims (11)
1.一种移动应用页面的展示方法,其特征在于,包括:
获取移动应用的页面布局数据,所述页面布局数据至少包括原生组件数据和页面元素数据;
对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件;
根据所述页面元素数据确定所述移动应用在运行过程中要展示的页面元素;
调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示。
2.如权利要求1所述的方法,其特征在于,获取移动应用的页面布局数据,包括:
获取存储的所述移动应用的软件开发工具包SDK文件;
运行所述SDK文件获取移动应用的页面布局数据。
3.如权利要求1所述的方法,其特征在于,在获取移动应用的页面布局数据之前,还包括:
为各个操作系统的原生组件设置原生标签;其中,相同功能的原生组件设置相同的原生标签;
将设置的原生标签作为所述原生组件数据。
4.如权利要求3所述的方法,其特征在于,还包括:
在网页前端模板文件中内置所述原生组件数据;所述前端模板文件至少包括JS文件、超文本标记语言HTML文件和层叠样式表CSS文件;
重新编译内置了所述原生组件数据的网页前端模板文件,生成软件开发工具包SDK文件。
5.如权利要求4所述的方法,其特征在于,在重新编译内置了所述原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之前,还包括:
在前端转码器Babel的配置文件中添加转码规则;所述Babel用于将编写的代码转化成编译引擎能够识别的代码,所述转码规则为能将内置了原生组件数据的网页前端模板文件转化为所述编译引擎能够识别的文件的规则。
6.如权利要求5所述的方法,其特征在于,在重新编译内置了所述原生组件数据的网页前端模板文件,生成软件工具开发包SDK文件之后,还包括:
将生成的软件工具开发包SDK文件发布给服务器。
7.如权利要求2所述的方法,其特征在于,对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件,包括:
根据获取的软件开发工具包SDK文件,确定所述移动应用运行时所需要运行的操作系统;
根据确定的操作系统和所述原生组件数据包括的原生标签,确定所述至少一个原生组件。
8.如权利要求7所述的方法,其特征在于,调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示,包括:
在多个线程中调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示;
其中,所述多个线程以异步的方式运行,每个线程调用一个原生组件。
9.一种电子设备,其特征在于,包括:
获取单元,用于获取移动应用的页面布局数据,所述页面布局数据至少包括原生组件数据和页面元素数据;
解析单元,用于对所述页面布局数据中的原生组件数据进行解析,获得所述移动应用在运行过程中调用的至少一个原生组件;
确定单元,用于根据所述页面元素数据确定所述移动应用在运行过程中要展示的页面元素;
渲染单元,用于调用所述至少一个原生组件,对所述移动应用的页面元素进行渲染展示。
10.一种电子设备,其特征在于,包括:
至少一个处理器,以及
与所述至少一个处理器连接的存储器;
其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述至少一个处理器通过执行所述存储器存储的指令,执行如权利要求1-8中任一项所述的方法。
11.一种计算机存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,当所述计算机指令在计算机上运行时,使得计算机执行如权利要求1-8中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710978295.3A CN109684580A (zh) | 2017-10-18 | 2017-10-18 | 一种动态页面的展示方法及电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710978295.3A CN109684580A (zh) | 2017-10-18 | 2017-10-18 | 一种动态页面的展示方法及电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109684580A true CN109684580A (zh) | 2019-04-26 |
Family
ID=66183048
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710978295.3A Pending CN109684580A (zh) | 2017-10-18 | 2017-10-18 | 一种动态页面的展示方法及电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109684580A (zh) |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110196745A (zh) * | 2019-05-29 | 2019-09-03 | 维沃移动通信有限公司 | 数据分享方法及终端 |
CN110244955A (zh) * | 2019-05-29 | 2019-09-17 | 广州至真信息科技有限公司 | 一种应用的处理方法、装置、服务器和介质 |
CN110442286A (zh) * | 2019-07-29 | 2019-11-12 | 北京奇艺世纪科技有限公司 | 一种页面展示方法、装置及电子设备 |
CN110806915A (zh) * | 2019-11-01 | 2020-02-18 | 广州华多网络科技有限公司 | 一种专题页面处理方法及客户端 |
CN111258577A (zh) * | 2019-12-02 | 2020-06-09 | 泰康保险集团股份有限公司 | 页面渲染方法、装置、电子设备和存储介质 |
CN111324834A (zh) * | 2020-01-20 | 2020-06-23 | 北京无限光场科技有限公司 | 图文混排的方法、装置、电子设备及计算机可读介质 |
CN111581556A (zh) * | 2020-04-27 | 2020-08-25 | 北京字节跳动网络技术有限公司 | 页面数据处理方法、装置、电子设备和可读介质 |
CN112306594A (zh) * | 2020-04-16 | 2021-02-02 | 北京沃东天骏信息技术有限公司 | 一种基于移动端的渲染方法、装置及存储介质 |
CN112445473A (zh) * | 2019-08-29 | 2021-03-05 | 北京京东尚科信息技术有限公司 | 客户端布局方法与装置、存储介质、电子设备 |
CN112905943A (zh) * | 2020-12-09 | 2021-06-04 | 广州市玄武无线科技股份有限公司 | 一种基于移动端的动态展示图表方法及系统 |
CN113761440A (zh) * | 2021-07-28 | 2021-12-07 | 广州方硅信息技术有限公司 | 基于Web页面直播的项目运行方法、设备及存储介质 |
CN114356324A (zh) * | 2021-12-16 | 2022-04-15 | 阿里巴巴(中国)有限公司 | 界面处理方法、装置、设备和存储介质 |
CN115373683A (zh) * | 2022-08-22 | 2022-11-22 | 北京字跳网络技术有限公司 | 页面的展示方法、编译源代码的方法及相关设备 |
CN118192970A (zh) * | 2024-03-19 | 2024-06-14 | 知微行易(上海)智能科技有限公司 | 一种用于自动生成自定义sdk的方法和系统 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
US9143378B2 (en) * | 2011-07-01 | 2015-09-22 | International Business Machines Corporation | Rendering components within different browser environments |
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
-
2017
- 2017-10-18 CN CN201710978295.3A patent/CN109684580A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9143378B2 (en) * | 2011-07-01 | 2015-09-22 | International Business Machines Corporation | Rendering components within different browser environments |
CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
Cited By (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110244955A (zh) * | 2019-05-29 | 2019-09-17 | 广州至真信息科技有限公司 | 一种应用的处理方法、装置、服务器和介质 |
CN110196745A (zh) * | 2019-05-29 | 2019-09-03 | 维沃移动通信有限公司 | 数据分享方法及终端 |
CN110244955B (zh) * | 2019-05-29 | 2023-04-18 | 广州至真信息科技有限公司 | 一种应用的处理方法、装置、服务器和介质 |
CN110442286A (zh) * | 2019-07-29 | 2019-11-12 | 北京奇艺世纪科技有限公司 | 一种页面展示方法、装置及电子设备 |
CN112445473A (zh) * | 2019-08-29 | 2021-03-05 | 北京京东尚科信息技术有限公司 | 客户端布局方法与装置、存储介质、电子设备 |
CN110806915A (zh) * | 2019-11-01 | 2020-02-18 | 广州华多网络科技有限公司 | 一种专题页面处理方法及客户端 |
CN111258577A (zh) * | 2019-12-02 | 2020-06-09 | 泰康保险集团股份有限公司 | 页面渲染方法、装置、电子设备和存储介质 |
CN111258577B (zh) * | 2019-12-02 | 2024-06-21 | 泰康保险集团股份有限公司 | 页面渲染方法、装置、电子设备和存储介质 |
CN111324834A (zh) * | 2020-01-20 | 2020-06-23 | 北京无限光场科技有限公司 | 图文混排的方法、装置、电子设备及计算机可读介质 |
CN111324834B (zh) * | 2020-01-20 | 2024-01-16 | 北京有竹居网络技术有限公司 | 图文混排的方法、装置、电子设备及计算机可读介质 |
CN112306594A (zh) * | 2020-04-16 | 2021-02-02 | 北京沃东天骏信息技术有限公司 | 一种基于移动端的渲染方法、装置及存储介质 |
CN111581556A (zh) * | 2020-04-27 | 2020-08-25 | 北京字节跳动网络技术有限公司 | 页面数据处理方法、装置、电子设备和可读介质 |
CN111581556B (zh) * | 2020-04-27 | 2023-04-25 | 抖音视界有限公司 | 页面数据处理方法、装置、电子设备和可读介质 |
CN112905943A (zh) * | 2020-12-09 | 2021-06-04 | 广州市玄武无线科技股份有限公司 | 一种基于移动端的动态展示图表方法及系统 |
CN113761440A (zh) * | 2021-07-28 | 2021-12-07 | 广州方硅信息技术有限公司 | 基于Web页面直播的项目运行方法、设备及存储介质 |
CN114356324A (zh) * | 2021-12-16 | 2022-04-15 | 阿里巴巴(中国)有限公司 | 界面处理方法、装置、设备和存储介质 |
CN115373683A (zh) * | 2022-08-22 | 2022-11-22 | 北京字跳网络技术有限公司 | 页面的展示方法、编译源代码的方法及相关设备 |
CN118192970A (zh) * | 2024-03-19 | 2024-06-14 | 知微行易(上海)智能科技有限公司 | 一种用于自动生成自定义sdk的方法和系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109684580A (zh) | 一种动态页面的展示方法及电子设备 | |
CN104461484B (zh) | 前端模板的实现方法和装置 | |
CN104866383B (zh) | 一种接口调用方法、装置及终端 | |
US8161498B2 (en) | Providing globalization functionalities for javascript applications | |
CN103955364B (zh) | 一种适用于手机的前端组件方法 | |
CN106294658B (zh) | 网页快速展示方法和装置 | |
CN103019538A (zh) | 一种在终端中实现应用界面的方法和系统 | |
CN102346770A (zh) | WebKit浏览器网页内容加载方法及装置 | |
CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及系统 | |
CN102880708B (zh) | 用于实现html页面的可视化设计的系统和方法 | |
CN102999336A (zh) | 应用界面实现方法和系统 | |
CN105589631B (zh) | 信息展示方法和装置 | |
CN107066618A (zh) | 一种网页页面转换后显示方法和装置 | |
CN103699635B (zh) | 信息处理方法和装置 | |
CN103440151A (zh) | 一种动态加载Web页面的方法和装置 | |
CN103309806A (zh) | 一种快速开发测试的装置及方法 | |
CN104424239B (zh) | 资源文件加载方法和装置 | |
CN103544024A (zh) | 生成浏览器页面的方法、系统及终端设备 | |
CN102262684A (zh) | 移动终端网页页面生成方法及装置 | |
CN105068802B (zh) | 一种跨设备运行的Web应用软件实现系统和方法 | |
CN111290996A (zh) | 文档格式转换方法、装置、设备及可读存储介质 | |
CN102253986A (zh) | 提高多终端网页显示效果的方法和装置 | |
TWI420327B (zh) | 可提升網頁相容性的方法及其相關電子裝置及網頁存取系統 | |
CN106776800A (zh) | AngularJS框架的页面生成方法、装置及系统 | |
CN101546310B (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 | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190426 |