如何打造一个可视化活动页搭建平台（一）

前方同事在开展活动时，通常需要一些营销页面用于活动分享，之前的做法都是运营向前端提出需求，由前端开发完成交付一个页面，此过程消耗前端人力、带来沟通成本以及开发时间问题，经与前方同事沟通后，前端将提供一个低代码的活动页面编辑器，之后将由前方同事直接使用编辑器生成活动页面，避免重复劳动，加快交付速度。

作为内部使用工具，开发人员重点关注功能层面，不对 UI 做太多要求。

通过对以下内容的分析，最终明确产品形态为一款可视化的低代码活动页搭建工具

其重点在于简化我们的交付流程、保证物料的可拓展性

活动页结构分析

根据我们已有的活动页面，可以将 H5 的功能抽象为以下几类

• 背景图（及其他一些页面的配置能力，如 logo 配置等）
• 模块（H5 页面展示的模块）
• 按钮（用于完成跳转或者其他业务逻辑）

综上，我们需要开发出各类的物料组件，使不同的组件以不同的排列生成一个全新的活动页面

搭建平台完成后交付流程

整体使用编辑器创建活动页的需求流程如下:

根据上述流程，提取相应的关键词：可视化，配置，物料。 对应完成整套流程，我们需要的项目有：

1. 可视化的活动页编辑平台
2. 获取配置并渲染的 H5 活动页

核心模块划分

编辑平台以活动为单位进行流转，包含活动的创建，预览，编辑，删除等。每个活动需包含对应的活动配置，面向我们企业内部人员。H5 活动页负责渲染活动页面，面向外部用户。

至此，细化出要开发的模块包括：

其中编辑器模块作为核心部分，其基础结构可以用下图进行表示

完整流程

从配置到完成的完整流程

按钮逻辑行为

活动页中除了首页的模块展示，还将提供按钮，按钮拥有各自的功能，如下载、跳转、提交等

这部分功能不便拥有过高的自由度，应在物料设计时做好定义，以一个跳转按钮为例

下图为一个按钮配置面板的分层结构

技术核心

• 提供一套数据结构设计，具备良好的拓展性，以便响应之后的功能新增
• 提供一套代码复用逻辑，结构清晰易拓展，重点在于物料组件的复用
• 提供一套清晰的数据管理、数据流