H5 活动页面快速生成神器—

项目介绍

Mocha 项目为 H5 活动配置平台，用于简单、灵活、快速地生成活动页面，操作方式采用拖拽来快速生成，使之更方便地获得想要的内容，所见即所得。同时还支持在线预览、扫码预览、一键发布上线等功能。相比原来开发广告活动所消耗的开发成本大幅度降低。那么，接下来就开始说说这个活动配置平台~

项目流程图

Mocha 活动配置平台项目主要通过简单配置快速、稳定上线，减少开发成本。此项目技术及框架涉及到 React、dva、umi、react-dnd、antd 等，数据是存储到ElasticSearch （简称：es）服务中，同时会同步缓存到 redis。当未超过缓存时间时直接读取 redis 中的数据并返回，但此次介绍的重点并不是数据的存储和读取，而是一个新活动的生成及实现过程。

活动创建

活动的创建根据不同的类型进行区分，如：默认分类、运营活动、投放活动、研发测试等。一般针对于新的组件功能研发或测试的活动会在研发测试分类中，其他分类下均由运营同学来配置活动。接下来看一下如何创建新的活动，如图所示：

这里的活动 ID 是由前端生成的，可以通过此 ID 值在 es 服务查询到当前活动的数据。活动 ID 的生成规则代码如下：

活动配置

创建一个活动后，我们来具体看看如何配置一个活动以及是如何实现的。先来看一下配置活动的页面结构：

从图上可以看出，在配置活动的页面中主要分为三个部分，分别是组件库、画布展示区、组件属性配置。

组件库

每一个组件由 index.tsx、schema.ts、template.ts 文件三个部分组成，如图：

index.tsx：主要用来显示组件内容，展示左侧组件库中的模板及画布上配置参数后的组件
schema.ts：组件的基础数据信息
template.ts：组件的类型、生成样式及组件名称

在组件库中的每一个组件由 DynamicEngine 组件动态解析生成，给组件 DynamicEngine 传入相应的参数来生成不同的组件，代码如下：

再来看一下 DynamicEngine 组件的实现，代码如下：

代码中可以看到 props 中有一个 isTpl 属性，这个属性的目的是用来做展示区分的。当 isTpl 为 true 时会显示在组件库中，否则会展示到画布展示区中。那么来看一下画布展示区这个部分到底做了哪些工作。

画布展示区

当一个组件从组件库中拖拽到画布中，会显示组件的默认信息。以图片组件为例，如图所示：

从图上可以看出，我们只需要简单配置相对应的数据信息即可在画布中显示出我们想要的结果。那么，来看一下是这部分是如何实现的，代码如下：

GridLayout 组件主要的作用是对画布的拖拽事件做了一些处理，在 GridLayout 组件中我们可以同样看到 DynamicEngine 组件的存在。这里的 DynamicEngine 与组件库中为同一个组件，作用也是一致的。唯一不同的是此时的 isTpl 属性为 false，那么在动态加载组件时可以通过此属性展示出不同的内容。接下来同样以图片列表组件为例来看一下在组件中 isTpl 属性做怎样的区分，代码如下：