如何设计实现H5营销页面搭建系统

曾经终败给现在 2022-09-02 04:04 174阅读 0赞

## 背景 ##

近几年，`low code`、`no code`、`pro code`等越来越多的出现在我们的视野中。抱着不被卷的心态 ????，我决定来深入探索一下。

> “
> 
> 我所在的是营销部门。每天/月都承载着大量的营销活动，本文也是我在探索可视化搭建过程中的一些心得体会

其实这些名词都与`搭建`相关。其中一个应用最广的场景就是`营销`。我们知道无论是淘宝、京东这些电商巨头，亦或是携程、去哪儿这些`OTA`，每天 APP 上都承接着无数的活动页面。

大致梳理一下营销活动的一些特点：

*  页面类似: 页面布局和业务逻辑较固定
 *  需求高频: 每周甚至每天有多个这种需求
 *  迭代快速: 开发时间短, 上线时间紧
 *  开发耗时: 开发任务重复, 消耗各方的沟通时间和人力

不同于常规的业务开发，营销活动往往受影响的因素很多：节假日大促、政策规则等，所以往往可能是今天上午说的活动，明天就要上这种。如果单靠前端同学去维护，那怕不是要加无数的班（比如之前的我 ????）

每次来一个新活动，都靠前端同学去画页面，显然这种效率是极低的。如果排期宽裕点还行，如果遇到`618`、`双11`怕不是要逼疯我们。。

## 楼层搭建 ##

![48ea3b38e315a204bdfbe8ad673e2af0.png][]

鉴于这种场景，内部也进行了很多的讨论。得出的一致结论就是：开发同学提供营销搭建后台，页面做成可配置化，配置的工作交给产品/运营同学。这样，基于`楼层`搭建营销页面的方案就应运而生了。

其实`楼层搭建`在营销页面的搭建中是一种比较常见的方式。![f27be8e460b891566c529e88c95f7782.png][]如上图是京东的一个活动页面，页面主要由三部分组成：头图楼层、优惠卷楼层、热销楼层。因为就像生活中的盖楼一样，所以在早期的营销搭建中，就有了`楼层`的概念。每个楼层其实就对应了一个具体的组件。![e88b1d5204a7587114569cc088ed40c3.png][]然后在具体楼层的`编辑内容`区域就可以去上传对应的数据了。

但这种方式有一个很大的缺点就是：不够直观。随着业务的快速迭代，也陆续得到了一些反馈。最终发现运营同学真正需要的是那种可以直接拖拽生成页面的，也就是`可视化搭建`

## 可视化搭建 ##

![7f6e944c8ee475f82971e68a9d20b2ee.png][]

在`楼层搭建`的基础上进一步改造为`可视化搭建`，复杂度提升了很多。单纯的去看页面的不同呈现，可能仅仅就是加了一个`拖拽`的操作。但真正准备去落地的时候，发现其中的细节特别多，也包含了很多的设计理念在里面。

我们先来看一下原型图，然后仔细分析一下需要做的事情：![31ecb195f084651f2fe24e8e0ebb6fac.png][]市面上大部分营销可视化搭建系统基本都是类似上图这样的页面呈现。左侧对应组件区域，中间是画布区域，右侧是属性区域。

大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成，可通过类似`预览`的操作进行页面预览。预览无误，即可通过`发布`按钮进行活动的发布。

流程梳理完，我们来看下项目的基础架构：![c4eb68a2412809a17d38ceeca0302804.png][]

这里我基于原型对项目设计进行了功能的铺平，其实还是围绕`组件`、`画布`、`属性面板`这三块。

到这里，我们思考几个问题：

*  画布区域如何渲染已添加到画布中的组件（组件库组件会很多，画布中可能只需添加几个组件，考虑如何做动态渲染）？
 *  组件从左侧拖入画布区域，选中组件，就可知道该组件关联的属性。组件 Schema 如何设计？
 *  画布区域和预览时组件的渲染是否可共用一套渲染逻辑？
 *  组件的数据如何去维护（考虑添加组件、删除组件、组件渲染/预览等场景）
 *  组件库如何维护（考虑新增组件满足业务需要的场景）

首先来看第一条，简单归纳就是`动态加载组件`。

### 动态加载组件 ###

![685730bed0098efeb212331d9290a51c.png][]

如果你经常使用`vue`，那我想你对`vue`中的动态组件肯定不陌生：

<component :is="currentView"></component>

市面上的大部分编辑器也都是利用了这个特性，大致实现思路就是：

*  用一个数组`componentData`维护编辑器中的数据
 *  将组件拖动到画布中时，将此组件的数据`push`进`componentData`
 *  编辑器遍历（`v-for`）组件数据`componentData`，将组件依次渲染到画布中

由于我在的团队包括我自己一直都在使用`react`，这里着重来提下`react`组件动态加载的实现方式，框架使用的是`umi`。

我在实现这部分功能时，在`umi`的`api`中找到了`dynamic`：![4e72975ccca50685b813943c5acc68f5.png][]封装一个异步组件：

const DynamicComponent = (type, componentsType) => {
      return dynamic({
        loader: async function () {
          const { default: Component } = await import(
            `@/libs/${componentsType}/${type}`
          );
          return (props) => {
            return <Component {...props} />;
          };
        },
      });
    };

然后在调用的时候，将组件数组传入即可：

const Editor = memo((props) => {
      const {
        componentData,
      } = props;
      return (
        <div>
          {componentData.map((value) => (
            <div
              key={value.id}
            >
              <DynamicComponent {...value} />
            </div>
          ))}
        </div>
      );
    });

解决了第一个问题，我们来看第二个，也就是：`组件 Schema该如何设计`？

### 组件 Schema 设计 ###

![4eadd44867aa7423f4f59c9353c3ce81.png][]

这里涉及到组件、画布和属性区域三块的联动。主要包含组件强相关的表单属性以及初始值。

> “
> 
> 由于涉及到组件属性的字段限制及校验，为了规范和避免出错，建议项目使用 ts

这里以一个`TabList`组件为例，展示一下它的`Schema`结构：

const TabList = {
      formData: [
        {
          key: 'tabs',
          name: 'Tab名称',
          type: 'TitleList',
        },
        {
          key: 'layout',
          name: '布局方式',
          type: 'Select',
          options: [
            {
              key: 'single',
              text: '单列',
            },
            {
              key: 'double',
              text: '双列',
            },
          ],
        },
        {
          key: 'activeColor',
          name: '激活颜色',
          type: 'Color',
        },
        {
          key: 'color',
          name: '文字颜色',
          type: 'Color',
        },
        {
          key: 'fontSize',
          name: '文字大小',
          type: 'Number',
        },
      ],
      initialData: {
        tabs: [
          {
            id: uuid(6),
            title: '华北',
            list: [
              {
                icon:
                  '',
                goCity: '烟台',
                backCity: '北京',
                goDate: '08-18',
                goWeek: '周三',
                airline: '中国联合航空',
                price: 357,
                disCount: '4',
              },
            ],
          },
        ],
        layout: 'single',
        color: 'rgba(153,153,153,1)',
        activeColor: 'rgba(0,102,204,1)',
        fontSize: 16,
      },
    };

在组件初始化时就约定好其对应的结构，当将组件拖入画布区域后，我们可以拿到当前选中的组件数据，然后右侧的属性面板就可以渲染出对应的可编辑表单项。来看下右侧表单区域的代码：

const FormEditor = (props) => {
      const { formData, defaultValue } = props;
      console.log('FormEditor props', props);
      const [form] = Form.useForm();
    
      const handleFormChange = () => {
        console.log('表单更新',form.getFieldsValue());
      };
    
      return (
        <Form
          form={form}
          initialValues={defaultValue}
          onValuesChange={handleFormChange}
        >
          {formData.map((item, i) => {
            return (
              <React.Fragment key={i}>
                {item.type === 'Number' && (
                  <Form.Item label={item.name} name={item.key}>
                    <InputNumber max={item.range && item.range[1]} />
                  </Form.Item>
                )}
                {item.type === 'Text' && (
                  <Form.Item label={item.name} name={item.key}>
                    <Input />
                  </Form.Item>
                )}
                {item.type === 'TitleList' && (
                  <Form.Item label={item.name} name={item.key}>
                    <TitleList />
                  </Form.Item>
                )}
                {item.type === 'Select' && (
                  <Form.Item label={item.name} name={item.key}>
                    <Select placeholder="请选择">
                      {item.options.map((v: any, i: number) => {
                        return (
                          <Option value={v.key} key={i}>
                            {v.text}
                          </Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                )}
              </React.Fragment>
            );
          })}
        </Form>
      );
    };

表单区域具体表单项发生改变后就会触发`onValuesChange`，也就是`ant design`表单的`字段值更新时触发回调事件`。这时数据就会更新到`store`中。而画布的数据源就是`store`中的`componentData`进而页面会实时更新。来看下整体的数据流转图：

![b658b0790362762f3712b0d2fa83c5c0.png][]至此，第二个问题也就解决了。

接着看第三个问题：画布区域和预览时组件的渲染是否可共用一套渲染逻辑？

### 组件共享 ###

![ad59d46ecc6236f64351ab626c8bb52a.png][]

我们可以把预览组件理解为画布区的静态版本或者快照版本。从页面呈现上来看并没有太大的差异，那么从代码设计上，这两部分当然就可以共享一个组件。我们把这个共享组件叫做`RenderComponent.tsx`，数据源为`store`中的`componentData`，然后结合`DynamicComponent`组件，就得到了如下代码：

const RenderComponent = memo((props) => {
      const {
        componentData,
      } = props;
      return (
        <>
          {componentData.map((value) => (
            <div
              key={value.id}
            >
              <DynamicComponent {...value} />
            </div>
          ))}
        </>
      );
    });

### 数据存储/分发 ###

![2f96912eada06ce13666ba533dd18130.png][]

至于第四个问题：`组件的数据如何去维护（考虑添加组件、删除组件、组件渲染/预览等场景）`，其实在上面回答第二个问题的时候，已经提到了。全局有维护一个`store`：

state:{
      // 所有添加到画布中的组件数据
      componentData:[],
      // 当前编辑的组件数据
      curComponent: {}
    }
    
    reducers:{
      // 添加组件到componentData
      addComponentData(){},
      // 编辑组件，更新componentData及curComponent
      editComponentData(){},
      // 删除组件
      delComponentData(){}
    }

对于`可视化编辑器`这种大型前端项目，须有一个全局状态管理机制去做数据的存储和分发。这样对于数据状态的共享和同步也是很有帮助的。

### 组件开发/维护 ###

![087d4a06703912682dc4ed82fc2e7822.png][]

来看上面提到的最后一个问题：`组件库如何维护（考虑新增组件满足业务需要的场景）`。

这种目前有两种通用的做法：

*  直接放在项目中
 *  抽成 npm 包，形成独立的第三方组件库

如果是项目初期，我感觉第一种做法也不是不可以，方便调试。但长远来看，营销场景下沉淀出来的组件绝对不会少，抽成第三方 npm 包才是明智的选择，同时要配合一个类似组件管理后台的管理系统，对组件做统一的管理。

回到组件本身而言，必须有严格的开发规范。每个组件原则上只是呈现上的不同，对于约定俗成地组件研发规范则必须遵守。至于如何去限制，可以通过文档（弱）或者 cli（强）去做。

### 模板 ###

![ce321802b40cdbe598e8de7d54da7a9a.png][]

除了上面的几个问题，还有一个点没提到：模板。我们知道营销活动有一个很典型的特点：页面类似。如果运营/产品同学从零去生成一个页面也是挺耗费时间的，而且大部分活动都是归属于某一个大类下面的，我们可以把这些相似的活动抽成模板。基于模板创建就会省时省力很多。鉴于这部分内容还在开发迁移中，暂时就不展开细说了。

到这里，我感觉已经把`可视化编辑器`实现上最为复杂的几部分以问题的形式一一解答了。其实无论是`组件动态加载`还是`组件schema的设计`、`数据结构的设计`、`组件库的维护`等，每个团队都可以制定一套适合自己的规范，没有绝对的对错之分。

其实在这个编辑器的实现过程中，有很多不容我们忽略的底层实现细节。包括：

*  拖拽
 *  组件图层层级
 *  放大/缩小
 *  撤销/重做
 *  吸附
 *  绑定事件/动画

这些细节我就不一一展开说了，推荐一篇文章：可视化拖拽组件库一些技术要点原理分析。文章对于上面提到的技术要点都有很详细的说明。

## low code/no code/pro code ##

![c8db1d3b5a85b80556fc85625cc73a1b.png][]

上面说了这么多，下面让我们回到文章最开始提到的`low code/no code/pro code`。我会结合我们的可视化编辑器来阐述一下这三者。

首先来看下运营/开发同学使用编辑器创建活动的大致流程：![8975d9d44f4a6244a17a07d2a93bf352.png][]

### no code ###

首先来简单说明一下，什么是`no code`：从字面上来看就是无代码，也就是不写代码。

从上面的流程图中，可以看到运营/产品同学通过可视化编辑器，不用写一行代码，就可以搭建出功能齐全的活动页面。这种对应的就是`no code`。

### low code ###

`low code`的定义则是低代码、少写代码。

在上面的流程图中，更多体现在前端同学开发组件库。需要写部分代码，整体通过拖拽的方式生成的方式。对应的就是`low code`。

### pro code ###

`pro code`的定义是纯代码，也就是不通过任何可视化工具，全靠开发手写的代码形式。在`low code`和`no code`出现之前，这种方式是最为普遍的研发方式。

在上面的流程图中，这部分并没有体现。但是在实际的业务开发中，这种场景却是经常存在的。可能当前的一个营销活动，交互复杂、链路长，那通过本文这种可视化编辑器是很难去定制的。只能通过开发去手动写代码的方式去满足业务需求。

> “
> 
> 可视化编辑器更多的是去满足规则类似的页面开发，首要职责是去减轻重复业务的开发

## 展望 ##

![9e7b3d54ad7b9469b841db46ba5721ff.png][]

至此，一个营销系统的搭建探索演进流程我就大致梳理完毕了。

但，这只是一个开始。本文更多的是侧重于前端侧的探索，也仅仅是向可视化编辑器迈出了第一步，只是一个更倾向于纯前端的项目，很多逻辑都还没有考虑。这里列一下后面要做的吧：

*  模板市场
 *  数据中心
 *  埋点
 *  组件调试/预览
 *  缓存
 *  开放 api 能力
 *  CDN
 *  跨端
 *  ...

\- END -

[![1ebad769b41997ba316138647180a022.png][]][1ebad769b41997ba316138647180a022.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![e7d8b530cea27281f1b80455e34425fd.png][]

[48ea3b38e315a204bdfbe8ad673e2af0.png]: /images/20220829/f131ad2c8e044680aea2e221278f0ab0.png
[f27be8e460b891566c529e88c95f7782.png]: https://img-blog.csdnimg.cn/img_convert/f27be8e460b891566c529e88c95f7782.png
[e88b1d5204a7587114569cc088ed40c3.png]: /images/20220829/ec07dd9b021b47a4a4590a2e1c11eea7.png
[7f6e944c8ee475f82971e68a9d20b2ee.png]: /images/20220829/86f790b1ad1f4b9e87c1813c27682205.png
[31ecb195f084651f2fe24e8e0ebb6fac.png]: /images/20220829/0aa41fb768754e8ba1997343234614ee.png
[c4eb68a2412809a17d38ceeca0302804.png]: /images/20220829/30d08a983c41452dae17d9fe7e70b121.png
[685730bed0098efeb212331d9290a51c.png]: /images/20220829/7601b29f6a9e4657934c9b43dc2d34b0.png
[4e72975ccca50685b813943c5acc68f5.png]: /images/20220829/02721f4fe39d471e992b7d7761e83376.png
[4eadd44867aa7423f4f59c9353c3ce81.png]: /images/20220829/860f2df13a4c447c9f35fcae539c304e.png
[b658b0790362762f3712b0d2fa83c5c0.png]: /images/20220829/1039ea5db8bc4e688930ea7da12a4771.png
[ad59d46ecc6236f64351ab626c8bb52a.png]: /images/20220829/6187bff490a14fef9ef688402bd4d59a.png
[2f96912eada06ce13666ba533dd18130.png]: /images/20220829/45b588409ba847179b1d585cdba570c3.png
[087d4a06703912682dc4ed82fc2e7822.png]: /images/20220829/6cadee22e1814d8794f82af6c3daa6fd.png
[ce321802b40cdbe598e8de7d54da7a9a.png]: /images/20220829/497a2d845948406a906bdfa182329d8a.png
[c8db1d3b5a85b80556fc85625cc73a1b.png]: /images/20220829/f59a232c55154ae6933a7c648ae4c2a5.png
[8975d9d44f4a6244a17a07d2a93bf352.png]: /images/20220829/bd26700cf917478b85bf3396aff67cff.png
[9e7b3d54ad7b9469b841db46ba5721ff.png]: /images/20220829/6429c2450e604875ac9cf0b697bef65f.png
[1ebad769b41997ba316138647180a022.png]: /images/20220829/b2e7db959a114eccb1ba1dba025af074.png
[1ebad769b41997ba316138647180a022.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[e7d8b530cea27281f1b80455e34425fd.png]: /images/20220829/a05b2df62fc54ee3acf55e9e5eaa0fb0.png