logo好方法网

动态化布局方法以及系统


技术摘要:
本发明提供一种动态化布局方法以及系统,所述动态化布局方法包括如下步骤,编写动态化布局文件;验证动态化布局文件展示的正确性;将动态化布局文件部署到服务器;应用程序向服务器请求动态化布局文件;应用程序解析生成展示界面。与相关技术相比,本发明提供的动态化  全部
背景技术:
为了快速的响应产品的业务迭代需要,应用程序开发出现了很多动态化技术,尤 其是一些业务快速发展的互联网产品,经常出现版本的更新迭代跟不上业务的变化,因此 动态化技术在应用程序的研发中显得格外的重要。目前市面上比较通用的动态化技术有H5 内嵌技术、Hybrid、ReactNative、Weex。 H5内嵌技术:指的在应用程序中内嵌H5页面来实现Android和iOS端的动态化展 示,每次需要更新内容的时候,只需要针对H5开发,然后下发到Android和iOS进行展示。界 面的渲染由HTML,CSS完成。该技术方案的问题在于性能比较差,用户体验非常不好。 Hybrid应用程序:部分H5和部分Native的混合架构,这种方案以H5的动态性为基 础,通过定义Native的扩展(Bridge)来实现动态化,该技术方案的特点界面的渲染由HTML, CSS完成,底层逻辑通过原生代码桥接来实现,该技术方案的问题同样出在性能差,用户体 验不好的问题。 ReactNative:通过JavaScript脚本引擎支持页面DOM转换和逻辑控制来实现动态 化。该动态化技术的特点就是可以动态的下发动态逻辑,复杂的逻辑动态化同时也造成应 用程序崩溃率较高,学习成本高。 Weex:跟ReactNative实现原理一样,同样是通过动态下发JavaScript逻辑来实现 应用程序的动态化,实现逻辑较重造成学习成本和崩溃率较高,后台难以扩展和维护。 因此,有必要提供一种新型的动态化布局方法以及系统,以克服上述缺陷。
技术实现要素:
本发明的目的在于提供一种新型的动态化布局方法以及系统,其提高响应速度, 简化了动态化方案逻辑,易与维护和扩展,学习成本相对较低。 为了达到上述目的,本发明提供一种动态化布局方法,包括如下步骤, S1、编写动态化布局文件,动态化布局文件采用自定义的XML布局文件做为DSL来 描述应用端展示界面的视图层次结构; S2、验证动态化布局文件展示的正确性,使用动态化模板引擎程序实时获取最新 的动态化布局文件,然后执行动态化布局文件并显示出最终效果; S3、将动态化布局文件部署到服务器,将经过验证后的自定义的动态化布局文件 上传到服务器保存; S4、应用程序向服务器请求动态化布局文件,当位于应用端的应用程序启动后,会 向服务器发送推送最新的动态化布局文件的请求; S5、应用程序解析生成展示界面,当应用端应用程序拿到服务器返回的动态化布 局文件后进行解析,在应用程序生成相应的展示界面。 4 CN 111596996 A 说 明 书 2/5 页 优选的,在上述步骤S1中,动态化布局文件采用第三方编辑器编写,所述第三方编 辑器包括VSCode、Sublime、IDE开发工具或其他文本编辑器。 优选的,在上述步骤S1中,所述DSL包括应用程序展示的相关基本控件描述,所述 基本控件包括按钮、滚动视图、列表视图、文本视图以及图片视图中的一种或多种。 优选的,在上述步骤S2中,所述验证动态布局文件展示的正确性包括如下步骤: S21、在书写动态化布局文件的外部设备上创建一个Socket服务端,同时在应用端 创建可实时预览的Socket客户端; S22、将Socket服务端和Socket客户端通过TCP通信协议实现安全加密连接; S23、Socket服务端实时检测动态化布局文件是否发生变更,并将检测到的变更后 的动态化布局文件发送给Socket客户端; S24、Socket客户端接收到变更后的动态化布局文件后进行解析,并映射成为应用 端各自的视图层次结构,然后渲染成相应的展示界面。 优选的,在上述步骤S3中,所述服务器给所述动态化布局文件设置版本分类号。 优选的,在上述步骤S5中,所述动态化布局文件解析包括如下步骤: S51、XML解析,通过解析器从XML文件中提取元素转换成一个对象模型的表达式; S52、语法解析,通过解析出来的XML文件的表达式,判断XML文件是否符合DSL规 范; S53、语义解析,通过算法分析表达式的含义,计算出表达式的最终结果; S54、数据绑定,将表达式的字符集对应的变量替换成指定的变量值; S55、虚拟树生成,根据绑定数据的每一层节点创建对应的应用程序节点,生成一 个节点树; S56、映射视图层次结构,根据生成的虚拟书映射成应用程序的原生代码,渲染出 将要展示界面的视图层次结构; S57、事件绑定,在生成视图层次的过程中,可以根据虚拟树上特定的标签创建对 应的响应事件。 优选的,在上述步骤S57中,所述响应事件包括点击事件、滚动事件以及长按事件。 本发明还提供一种应用上述动态化布局方法的动态化布局系统,包括用于存储动 态化布局文件的服务器以及位于应用端的应用程序,所述应用程序与所述服务器通过通信 协议连接。 优选的,所述应用端包括IOS和Android。 与相关技术相比较,在本发明提供了一种动态化布局方法以及系统能够免去在应 用程序开发中每次新的产品需求迭代都要做Android、iOS端应用端的开发,提高及时的响 应需求变更速度,减少了研发人力投入;采用自定义的domain  specific  language(简称: DSL)来描述应用端展示界面的视图层次结构,通过服务器动态下发到应用端进行展示,简 化了动态化方案逻辑,专注于界面动态化的实现,使得该方法易与维护和扩展,学习成本相 对较低。 附图说明 为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使 5 CN 111596996 A 说 明 书 3/5 页 用的附图作简单地介绍,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通 技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它的附图,其 中: 图1为本发明的动态化布局方法的流程图; 图2为本发明的动态化布局方法中的验证的流程图; 图3为本发明的动态化布局方法中的解析的流程图; 图4为本发明的动态化布局系统的架构图。
分享到:
收藏