随着模块化的开发形式深入人心，越来越多的项目采用集成现有功能模块形式完成自己的项目开发，这样既降低了业务功能的重复建设，又提升了项目的开发效率。虽然这样实现了更快速的项目交付，但也引入了不同业务的定制需求多样等问题，其中UI布局风格迥异的问题对于前端来说尤为棘手。
痛点分析1.布局需求风格多样
2.模块布局修改繁琐
3.布局修改上线价值低
解决方案针对上文的痛点问题，我们依托于阿波罗配置平台设计了一套动态布局方案通过以下能力特点来帮助用户解决难题。
1.控件丰富：标准控件，无限组合，控件种类齐全，特性持续拓展。
2.效果即现：配置简单，易于掌握，所见即所得，直接预览线上效果。
3.不依赖发版：云端配置，灰度发布，可按平台及版本控制生效。
4.跨平台支持：一套配置，适配多端，弹性布局协议，自动适配终端。
不同业务的商详页面案例：
技术实现1、那么是如何实现不同业务的商详页面的风格定制呢，首先要介绍一下动态布局方案依赖的阿波罗配置平台，阿波罗配置平台是一个布局、逻辑、数据全部由服务端动态下发，由动态布局SDK进行解耦和渲染，通过简化开发，模板复用提升开发效率，从代码实现到简单的拖拽实现。能够节省大量的开发成本和提高开发效率的平台。
平台实现流程图如下所示：
2、阿波罗配置平台流程已确认，那么动态布局SDK具体是如何实现数据转化为前端页面呢。动态布局SDK通过将阿波罗配置平台下发的层级关系、数据，进行解耦和渲染，动态生成前端页面。
动态布局SDK工作流程如下：
3、通过流程图可以了解到阿波罗组件页面的形成来源是服务端下发的布局数据，而页面布局数据是由阿波罗配置平台配置生成。布局配置页面总共由3个部分组成：
a.第一部分是控件栏，其中包含了几种常用的容器布局和常用的功能性组件如文本框、图片框等。
b.第二部分则是布局的制作与展示栏，通过将左侧的控件拖拽至中间的空白处并按照需求进行组合后形成需要的布局样式，也可以通过点击显示XML按钮切换代码页面，查看生成布局的代码内容。
c.第三部分则是对选中控件进行详细参数设置的栏目，其中包含了布局的名称、宽高、边距、点击事件等常用的属性。
具体配置页面如下图所示：
配置样式保存成功后真机展示页面如下：
4、说完了实现流程与实现操作，下面我们讲一讲动态布局SDK的解析流程：
图中介绍了解析引擎的原理
第一部分是模板样式的资源管理，包括模板下载，更新，版本控制，缓存等等，更新主要是以预更新为主。
第二部分是布局解析，解析后台模板设置的布局信息，存起来待用。
第三部分解析样式，解析完了样式之后，生成model模型，这个部分完成之后，就生成view了，然后映射到属性。
第四部分解析数据和注册事件，按样式里面配置的数据逻辑，从数据源里取出来将数据绑定到组件。
最后，渲染，展示view。
5、动态布局SDK的解析是如何具体实现：
a.读取JSON中的key=attrs，attrs中存储的是每一个视图的样式参数，如边距，颜色，圆角等内容，读取JSON中的key=struct，struct中存储的是视图之间的层级关系，如视图A的子视图包含视图B和视图C。
b.从struct中id=0开始，如果items中有子组件，则进行步骤3，否则返回一个空视图
c.遍历循环items中的每一个子组件，例如子组件的id=1，首先读取struct中内容，包含组件的类型View，组件包含的子组件items。然后读取attrs中的组件参数。通过组件参数生成组件后，判断组件的items是否有子组件，如果有，读取子组件的id重复此步骤，直到不再有子组件。
d.当获取到id的struts中没有子组件时，返回生成的组件作为上一个id的子组件。如id=3的视图中没有子组件，3作为1的子组件直接返回视图，id=1的组件组合自身的子组件和参数返回给父组件，一直重复此过程直到返回到无父组件
e.输出最终生成的组件
主要流程参考：
6、动态布局SDK进行解析后下一步问题就是前端如何进行渲染展示，下面我们继续介绍渲染展示的具体实现方案：
阿波罗配置平台将前端布局数据通过XML文本形式下发，要通过解析XML到完整输出页面，需要以下步骤：
a.请求网络获取需要的XML文本。XML中包含视图、视图所具有的属性、视图之间的父子层级关系等内容。
b.解析XML文本。将XML文本解析成语言环境搭建页面需要的JSON格式，JSON格式更利于代码读取。
c.根据读取JSON数据生成出所需要的视图。每一个语言环境中仅需要一个生成视图的方法，因为不同的语言生成的视图的方式不同
方法的逻辑如下：
d.呈现视图到移动设备
总结阿波罗动态布局方案能够快捷高效的支持不同业务对布局的多样化需求，客户端楼层样式自动渲染生成，无需开发编码，减少发版样式布局后台配置，所见即所得，调试验证方便元件类型丰富，布局属性灵活。最后再让我们用一个简单的图例来整体总结一下阿波罗动态布局的能力与优势：
预览时标签不可点收录于合集#个上一篇下一篇