一种移动终端应用界面动态渲染方法和装置制造方法及图纸

技术编号:18710187 阅读:38 留言:0更新日期:2018-08-21 22:34
本申请实施例提供了一种移动终端应用界面动态渲染方法和装置,涉及互联网领域。所述方法包括:根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新XML文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新XML文件生成文档对象模型DOM树;依次遍历所述文档对象模型DOM树上的每个DOM节点;根据所述DOM节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;通过所述预定义脚本基础库解析所述DOM节点的常规属性;根据所述flex排版节点,以及所述DOM节点的常规属性的解析结果,渲染生成更新的可视界面。解决了现有技术中更新移动终端应用界面需要重新发版,开发成本较高的问题。

Mobile terminal application interface dynamic rendering method and device

The application embodiment provides a mobile terminal application interface dynamic rendering method and device, which relates to the Internet field. The method includes: obtaining the updated XML file and the predefined script base library corresponding to the visual interface on the server side according to the visual interface of the mobile terminal application; parsing the updated XML file according to the predefined script base to generate the document object model DOM tree; traversing each DOM tree of the document object model DOM tree in turn. The flex typesetting node is created natively according to the flex typesetting properties of the DOM node, and the corresponding preset views are bound to each flex typesetting node; the conventional properties of the DOM node are resolved through the predefined script base library; and the flex typesetting node and the conventional ownership of the DOM node are based on the flex typesetting node and the normal ownership of the DOM node. The results of sexual analysis render the updated visual interface. The invention solves the problem that the application interface of mobile terminal needs to be reprinted and the development cost is high in the prior art.

【技术实现步骤摘要】
一种移动终端应用界面动态渲染方法和装置
本申请涉及互联网
,特别是涉及一种移动终端应用界面动态渲染方法和一种移动终端应用界面动态渲染装置。
技术介绍
随着网络技术的普及以及移动互联网终端的普及,信息移动化的需求与日俱增,而信息移动化需要进行不同平台的移动终端应用的开发、发布、安装和更新等过程。传统的开发模式(即原生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节点。本专利技术实施例中,当根据更新的X本文档来自技高网...

【技术保护点】
1.一种移动终端应用界面动态渲染方法,其特征在于,包括:根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新XML文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新XML文件,生成文档对象模型DOM树;依次遍历所述文档对象模型DOM树上的每个DOM节点;根据所述DOM节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;通过所述预定义脚本基础库解析所述DOM节点的常规属性;根据所述flex排版节点,以及所述DOM节点的常规属性的解析结果,渲染生成更新的可视界面。

【技术特征摘要】
1.一种移动终端应用界面动态渲染方法,其特征在于,包括:根据移动终端应用可视界面,获取服务器端对应所述可视界面的更新XML文件和预定义脚本基础库;根据预定义脚本基础库解析所述更新XML文件,生成文档对象模型DOM树;依次遍历所述文档对象模型DOM树上的每个DOM节点;根据所述DOM节点的flex排版属性,通过native方式创建flex排版节点,并将对应的预设视图绑定至各所述flex排版节点;通过所述预定义脚本基础库解析所述DOM节点的常规属性;根据所述flex排版节点,以及所述DOM节点的常规属性的解析结果,渲染生成更新的可视界面。2.根据权利要求1所述的方法,其特征在于,所述DOM节点的常规属性包括:事件回调标识touch、pingback属性中的一项或多项。3.根据权利要求2所述的方法,其特征在于,在所述通过所述预定义脚本基础库解析所述DOM节点的常规属性的步骤之后,还包括:若解析到所述DOM节点的常规属性为item样式属性,则将所述item样式属性数据转换为对应所述移动终端系统平台的属性数据;其中,其中,所述item样式属性包括:像素、百分比、宽高比其中的一项或多项。4.根据权利要求2所述的方法,其特征在于,在所述通过所述预定义脚本基础库解析所述DOM节点的常规属性的步骤之后,还包括:若解析到所述DOM节点的常规属性为touch属性,则根据预定义脚本基础库获取对应所述touch属性的回调事件,并将所述回调事件绑定至所述DOM节点。5.根据权利要求2所述的方法,其特征在于,在所述通过所述预定义脚本基础库解析所述DOM节点的常规属性的步骤之后,还包括:若解析到所述DOM节点的常规属性为pingback属性,则根据预定义脚本基础库获取对应的pingback事件,并将所述pingback事件绑定至所述DO...

【专利技术属性】
技术研发人员:熊浩
申请(专利权)人:北京奇艺世纪科技有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1