一种移动终端应用界面动态渲染方法和装置与流程

文档序号:15200184发布日期:2018-08-19 10:46阅读:205来源:国知局

本申请涉及互联网技术领域,特别是涉及一种移动终端应用界面动态渲染方法和一种移动终端应用界面动态渲染装置。



背景技术:

随着网络技术的普及以及移动互联网终端的普及,信息移动化的需求与日俱增,而信息移动化需要进行不同平台的移动终端应用的开发、发布、安装和更新等过程。传统的开发模式(即原生native开发模式),因为学习成本高,以及由于跨平台等问题,导致移动化成本过高,并且如果新增或修改功能,还面临对开发端重新发版,且移动终端应用进行重新安装的问题。

基于上述问题,现有技术利用大前端解决方案,即结合html5、reactnative等方法,可以一定程度上提升开发的灵活性和便利性,但是相对于native开发模式,往往会降低用户在使用应用时的流畅性。



技术实现要素:

鉴于上述问题,提出了本申请实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种移动终端应用界面动态渲染方法和相应的一种移动终端应用界面动态渲染装置。

为了解决上述问题,本申请公开了一种移动终端应用界面动态渲染方法,包括:根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;依次遍历所述文档对象模型dom树上的每个dom节点;根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;通过所述预定义脚本基础库解析所述dom节点的常规属性;根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

可选地,所述dom节点的常规属性包括:事件回调标识touch、pingback属性中的一项或多项。

可选地,在所述通过所述预定义脚本基础库解析所述dom节点的常规属性的步骤之后,还包括:若解析到所述dom节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;其中,所述item样式属性包括:像素、百分比、宽高比其中的一项或多项。

可选地,在所述通过所述预定义脚本基础库解析所述dom节点的常规属性的步骤之后,还包括:若解析到所述dom节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述dom节点。

可选地,在所述通过所述预定义脚本基础库解析所述dom节点的常规属性的步骤之后,还包括:若解析到所述dom节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述dom节点。

本申请公开了一种移动终端应用界面动态渲染装置,包括:文件获取模块,用于根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;解析模块,用于根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;属性解析模块,用于依次遍历所述文档对象模型dom树上的每个dom节点;排版模块,用于根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;常规属性解析模块,用于通过所述预定义脚本基础库解析所述dom节点的常规属性;更新模块,用于根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

可选地,所述dom节点的常规属性包括:事件回调标识touch、pingback属性中的一项或多项。

可选地,还包括:item样式属性解析模块,用于若解析到所述dom节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;其中,所述item样式属性包括:像素、百分比、宽高比其中的一项或多项。

可选地,还包括:touch属性解析模块,用于若解析到所述dom节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述dom节点。

可选地,还包括:pingback属性解析模块,用于若解析到所述dom节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述dom节点。

本申请实施例包括以下优点:

本申请实施例,通过检测对应移动终端应用可视界面的更新xml文件和预定义脚本基础库,根据预定义脚本基础库解析动态更新xml文件,生成dom树,解析dom树的dom节点的属性,根据节点属性的解析结果,通过native方式创建flex排版节点,并根据预定义脚本基础库解析所述dom节点的常规属性,最后根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面,解决了现有技术中更新移动终端应用界面需要重新发版的问题,达到了降低开发成本的同时,提高更新速度,并实现了界面更新动态化的有益效果。

附图说明

图1是本申请实施例提供的一种移动终端应用界面动态渲染方法实施例的步骤流程图;

图2是本申请实施例提供的一种移动终端应用界面动态渲染方法实施例的步骤流程图;

图2a是本申请实施例的一种应用底层结构示意图;

图2b是本申请实施例提供的应用界面动态渲染系统结构示意图;

图3是是本申请实施例提供的一种移动终端应用界面动态渲染装置实施例的结构框图;

图4是是本申请实施例提供的一种移动终端应用界面动态渲染装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本申请作进一步详细的说明。

实施例一

参照图1,示出了本申请的一种移动终端应用界面动态渲染方法实施例的步骤流程图,具体可以包括如下步骤:

步骤101、根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库。

本发明实施例中,针对移动终端应用的每个可视界面,都在服务器端存在一个对应的当前可视界面的xml文件的url地址,根据该地址可以从服务器端获取对应的xml文件和预定义脚本。

具体地,相关技术人员在服务器端会针对应用的可视界面的部署对应的xml文件,首先,部署的xml文件包括定义的xml皮肤规则、支持层叠样式css属性、支持基于flex规则的排版等,而预定义脚本基础库为luakit库。

其中,当相关技术人员在服务器端上传更新后,可以通过向客户端发送更新提示消息的方式,通知移动终端上对应应用在服务器端请求下载更新。

步骤102、根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树。

本发明实施例中,当移动终端应用在服务器端请求下载对应的更新xml文件和预定义脚本基础库后,通过luakit库脚本解析xml皮肤文件,并生成dom树。

其中,dom把xml文档视为一种树结构。dom树结构被称为节点树,可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素,dom节点树展示了节点的集合,以及它们之间的联系。dom树从根节点开始,然后在树的最低层级向文本节点长出枝条。

步骤103、依次遍历所述文档对象模型dom树上的每个dom节点。

本发明实施例中,当根据更新的xml文件生成dom树以后,利用预设的解析器对dom树进行解析,当本地载入解析器解析时,首先是依次遍历dom树上每个dom节点。例如,利用函数loadxmldoc()加载xml文件,并根据文件中的dom节点列表,以及各节点的上下级关联关系依次进行遍历。

步骤104、根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点。

本发明实施例中,在遍历dom节点时,可以根据nodename和nodetype确定节点属性的名称和类型,通过使用loadxmldoc()把xml文件载入xmldoc中,再获得根元素的子节点,检查每个子节点的节点类型,如果节点类型是"1",则是元素节点,如果是元素节点,则输出节点的名称。

其中,可以通过上述方法,在遍历dom节点时,如果返回的节点名为flex,dom节点为flex节点,并确定遍历节点包含flex排版属性,可以通过native方式创建flex排版。

具体地,flex是flexiblebox的缩写,弹性盒子布局,flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,flex元素将伸展大小以填充可用空间,当flex元素超出可用空间时将自动缩小,利用native方式定义伸缩容器属性包括,display、flex-direction、flex-wrap、flex-flow、justify-content、align-items,分别定义块级伸缩容器的伸缩方向,以及扩展时的不足时的处理方式等。

步骤105、通过所述预定义脚本基础库解析所述dom节点的常规属性。

本发明实施例中,若遍历dom节点返回的nodename和nodetype进一步解析该dom节点的常规属性,并根据解析出的常规属性,找到对应的事件,绑定事件到该dom节点。

步骤106、根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

本发明实施例中,在遍历完成dom树后,根据排版节点、布局形式、绑定的视图和事件,绘制页面颜色、背景等皮肤,生成控件,最后生成更新后的应用界面。

在本发明实施例中,根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;依次遍历所述文档对象模型dom树上的每个dom节点;根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;通过所述预定义脚本基础库解析所述dom节点的常规属性;根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。实现了根据界面更新下载对应xml文件,并进行动态解析和更新,具有降低开发成本,提高开发灵活性的有益效果。

实施例二

参照图2,示出了本申请的一种移动终端应用界面动态渲染方法实施例的步骤流程图,具体可以包括如下步骤:

步骤201、根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库。

此步骤与步骤101相同,在此不再详述。

步骤202、根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树。

此步骤与步骤102相同,在此不再详述。

步骤203、依次遍历所述文档对象模型dom树上的每个dom节点。

此步骤与步骤103相同,在此不再详述。

步骤204、根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点。

此步骤与步骤104相同,在此不再详述。

优选地,所述dom节点的常规属性包括:事件回调标识touch、pingback属性中的一项或多项。

步骤205、通过所述预定义脚本基础库解析所述dom节点的常规属性。

此步骤与步骤105相同,在此不再详述。

步骤206、若解析到所述dom节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;其中,所述item样式属性包括:像素、百分比、宽高比其中的一项或多项。

优选地,在本发明另一实施例中,在步骤205之后,还包括:

步骤a11、若解析到所述dom节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述dom节点。

优选地,在本发明另一实施例中,在步骤205之后,还包括:

步骤b11、若解析到所述dom节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述dom节点。

本发明实施例中,通过上述步骤的描述,如图2a所示的,首先预先定义xml皮肤规则(skindesigner),支持css属性,支持基于flex规则的排版。其次,当下载定义脚本基础库luakitscript,并根据luakit脚本解析皮肤,利用业务层的皮肤解析器skinparser,生成类似dom的树形结构,解析xml皮肤为dom结构并存储,然后在引擎engine层通过luakit库bridge到objectivec端,生成组建层对应的native控件,其中包括ui组件、声音组件、网络组件、定时器控件、动画组件、pingback组件等,并拼接成对应的树形结构。例如,首先解析xml皮肤为dom结构并存储。然后依次遍历每个dom节点,依次解析每个节点的常规属性,并通过luakit和oc的bridge机制触发相应的方法。

其次,控制协议以文本的形式下发到具体的平台,客户端根据平台的特点做本地化处理,转成平台可以识别的控制语意。例如,css属性单位换算,将css中的像素(px)、百分比(%)、宽高比(vw)等单位转化为平台相关的单位,如dp、sp等,其中css属性屏幕适配,大部分情况下,不同屏幕分辨率和屏幕尺寸的手机使用同一套css标准,客户端根据当前屏幕密度对转换后的单位乘以特定屏幕系数,以便适配不同屏幕。

其中,在解析dom节点的过程中,分为两种情况:一种是解析的dom节点为flex节点,那么搜索flex节点,绑定flex节点,异步驱动flex排版过程,例如,如果遍历出来的节点是一个flex节点,则遍历它的孩子节点,并用native的方式设置flexchildren,native端创建flex排版节点,并绑定到实际的预设视图,步触发flex节点排版,待排版完成后,获取排版节点的位置,并反向同步到其绑定的预设视图。另一种情况是,当解析的dom节点不是flex节点,则根据dom节点的属性,绑定对应事件。例如,解析节点的过程中如果发现touch属性,查找luakit脚本中对应的回调事件,并绑定该事件。解析节点的过程中如果发现pingback属性,查找luakit脚本中对应的pingback事件,并绑定该事件。

其中,在解析dom节点时,通过函数nodename获取节点的名称,通过函数nodevalue获取节点的值以及通过函数nodetype获取节点的类型,以上只读操作获取dom节点的名称、属性和相应的值,根据节点不同属性,将对应的值进行分别存储,以便下一步的渲染。

当然,在实际应用中,dom节点的属性还包括,id,frame,bg,等属性,其中id指定控件标识,frame指定预定区域,bg指定背景色,通过预定于脚本库中对应内容进行解析,最后渲染为更新的应用界面和内容,在系统层展示给用户。

如图2b所示的,相关技术人员通过配置工具配置动态更新模板,并上传至服务器生成更新数据包并保存,移动终端从服务器端请求下载更新数据包后,根据下载皮肤包和预定义luakit脚本库进行,然后解析dom文件中的皮肤文件和节点属性,根据解析结果可以对应的生成flex排版节点,并绑定视图,通过css样式属性进行语义本地化,针对于touch节点和pingback节点,绑定对应的事件,最后完成应用界面的更新。

步骤207、根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

此步骤与步骤106相同,在此不再详述。

在本发明实施例中,根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;依次遍历所述文档对象模型dom树上的每个dom节点;根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;若遍历所述dom节点不为flex节点,若解析到所述dom节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;若解析到所述dom节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述dom节点;若解析到所述dom节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述dom节点;最后根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。实现了根据界面更新下载对应xml文件,并进行动态解析和更新,分离样式数据与行为数据,样式和行为数据都由云端控制,支持动态更新,接入规范化的xml皮肤以及lua脚本,避免自定义dsl,具有降低了界面开发门槛,提高提高移动客户端界面交互的灵活性,能更好支持产品、运营的需求的有益效果。

实施例三

参照图3,示出了本申请的一种移动终端应用界面动态渲染装置实施例的结构框图,具体可以包括如下模块:

所述移动终端应用界面动态渲染装置300,包括:

文件获取模块301,用于根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;

解析模块302,用于根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;

属性解析模块303,用于依次遍历所述文档对象模型dom树上的每个dom节点;

排版模块304,用于根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;

常规属性解析模块305,用于通过所述预定义脚本基础库解析所述dom节点的常规属性;

更新模块306,用于根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

实施例四

参照图4,示出了本申请的一种移动终端应用界面动态渲染装置实施例的结构框图,具体可以包括如下模块:

所述移动终端应用界面动态渲染装置400,包括:

文件获取模块401,用于根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;

解析模块402,用于根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;

属性解析模块403,用于依次遍历所述文档对象模型dom树上的每个dom节点;

排版模块404,用于根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;

优选地,所述dom节点的常规属性包括:事件回调标识touch、pingback属性中的一项或多项。

常规属性解析模块405,用于通过所述预定义脚本基础库解析所述dom节点的常规属性;

优选地,还包括:

item样式属性解析模块406,用于若解析到所述dom节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;其中,所述item样式属性包括:像素、百分比、宽高比其中的一项或多项。

优选地,在本发明另一实施例中,还包括:

touch属性解析模块,用于若解析到所述dom节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述dom节点。

优选地,在本发明另一实施例中,还包括:

pingback属性解析模块,用于若解析到所述dom节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述dom节点。

更新模块407,用于根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。

在本发明实施例中,利用文件获取模块,根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新xml文件和预定义脚本基础库;在通过解析模块,根据预定义脚本基础库解析所述更新xml文件,生成文档对象模型dom树;然后利用属性解析模块和排版模块,依次遍历所述文档对象模型dom树上的每个dom节点,以及根据所述dom节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;并通过常规属性解析模块,通过所述预定义脚本基础库解析所述dom节点的常规属性;并且根据解析常规属性的类型,将对应事件绑定到对应dom节点;最后,根据解析最后根据所述flex排版节点,以及所述dom节点的常规属性的解析结果,渲染生成更新的可视界面。实现了根据界面更新下载对应xml文件,并进行动态解析和更新,分离样式数据与行为数据,样式和行为数据都由云端控制,支持动态更新,接入规范化的xml皮肤以及lua脚本,避免自定义dsl,具有降低了界面开发门槛,提高提高移动客户端界面交互的灵活性,能更好支持产品、运营的需求的有益效果。

对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述,各个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白,本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此,本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中,所述计算机设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(ram)和/或非易失性内存等形式,如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非持续性的电脑可读媒体(transitorymedia),如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上,使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例做出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

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

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1