欢聚变色龙

欢聚变色龙活动配置平台，以低代码+无缓存更新+可视化+拼凑编辑为开发方向，丰富的灵活度体现在图片、榜单等低交互活动页。但过高的灵活度，使用成本、组件丰富度、业务自定义扩展性等问题，在总结中需要进一步迭代升级。

2020欢聚变色龙平台在提升活动上线效率、活动内容及时变更、活动页交互效果等功能上进行多次迭代与升级，优化方向还是停留在低交互功能性扩展，在使用或配置过程，未能对使用成本、业务组件扩展层面进行较好的优化。因此，降低对使用者的使用成本、提高业务组件自定义、打造成接入组件可视化平台成为了新的方向。

数据分析

累计活动上线量: 1413个
累计PV: 1600w+次
支撑业务线： 10+个
全网平均加载时长： 1.5s

（图：统计全网加载速度）

（图：页面加载速度）

功能优化

云代码（扩展与App进行丰富的交互）
生命周期
接口函数周期
动画
轮播
进度条
PK条
富文本
弹窗
倒计时
格式化
渐变背景
组件以时间维度自动显示隐藏
组件收藏、复制
数据上报
头部、底部默认文本

在功能迭代上，基本是无缝、无版本控制上线；最早设计理念以JSON方式，简单组件标签+拼装完成页面渲染，扩展字段来识别新增加的扩展功能，扩展字段对数据灵活处理与功能迭代上有足够的扩展性。但更丰富的表单、抽奖等强业务耦合的未有较好的处理。

Mock数据结构：

{
    id: 'SerializedId',
    type: 'div',
    data: {}, // 组件数据
    extend: {
        analytics: {}, // 数据上报
        api: {}, // 数据接口
        event: {},  // 事件处理
        // 其它扩展
    },
    style: {}, // 样式处理
    children: [{
        // ...
    }]
}

技术实现上，递归遍历上述数据，在高阶组件处理各个字段，特别是针对api字段进行接口数据处理，要考虑是接口数据源和多语言数据，但基本是通过数据字段来合理处理，这样也能做到可视化动态选择接口数据；最终通过type找到对应的组件或createElement，把处理后的字段结果以Props传递到组件中。

如何结合动态接口数据处理？编辑页中提供了可视化的表单配置，可以填入需要调用后端接口名、方法名、参数、返回的Mock数据等；在页面执行时，会以定义的接口生命周期调用相关接口获取数据；

扩展功能上，如在轮播、列表、格式化数据、云代码等功能，其实更多是针对扩展字段进行分析与完善逻辑，封装处理后展示组件。

整体上，可视化平台通过低代码方式，不仅有足够灵活度，也满足使用者在配置过程中及时变化某块组件的位置、增加交互功能等内容。

案例一：榜单显示中，如原本显示是分数，可通过操作区换成其它需要展示的接口字段；
案例二：针对已存在的内容，也可新增加图片、文本，并可相应进行接口字段设置；