资源工坊

消息卡片编辑器 ​

消息卡片编辑器介绍 ​

欢迎使用我们的消息卡片编辑器！这是一个强大的可视化工具，旨在帮助开发者通过直观的拖拽方式，快速创建、预览和管理消息卡片。通过使用我们的编辑器，您可以将复杂的卡片 JSON 代码转化为可视化的操作，大大提升卡片设计与开发的效率。

工具入口 ​

消息卡片编辑器

核心功能概览 ​

  1. 编辑器：集成所有核心功能的控制台，是您设计卡片的中心工作区。
  2. 组件区：提供丰富的组件库，通过拖拽即可将组件添加到画布中。
  3. 画布区：实时渲染卡片样式的区域，所见即所得，您可以在这里直观地调整卡片布局和内容。
  4. 组件样式与属性设置：对画布中选中的组件进行样式和属性的精细化配置。
  5. 代码预览：实时展示卡片对应的 JSON 代码，支持双向同步，方便开发者复制使用或直接编辑。

功能模块详解 ​

1. 编辑器 ​

编辑器是整个卡片设计工作的核心区域，它将所有工具和功能整合在一起。

  • 功能：
    • 集中展示组件区、画布区和样式属性设置面板。
    • 支持对卡片的发布、预览、保存、多端切换等功能。

编辑器

2. 组件区 ​

组件区是您构建卡片的素材库，提供了多样化的基础组件和容器组件。

  • 功能：
    • 组件分类：组件按功能分为“文本”、“图文”和“交互组件”等，方便查找。
    • 快捷添加：您可以从组件区直接将组件添加到画布中并进行拖拽布局。
  • 使用场景：适用于需要构建复杂卡片布局和功能的场景。

组件区

3. 画布区 ​

画布区是卡片设计的“画板”，它以所见即所得的方式呈现卡片最终的形态。

  • 功能：
    • 实时预览：您的所有操作（如拖拽组件、修改文本）都会在这里实时更新。
    • 元素选中：点击画布中的任意组件，即可选中该组件，并在右侧的样式属性设置面板中进行配置。
  • 使用场景：适用于需要直观设计和调整卡片外观的场景。

画布区

4. 组件样式与属性设置 ​

该面板是卡片组件的“控制中心”，您可以对选中的组件进行各种配置。

  • 功能：
    • 样式设置：配置组件的布局方式、外边距、对齐方式等。
    • 属性设置：配置组件的数据属性，如文本内容、表单默认值等。
  • 使用场景：适用于需要精细化调整卡片组件的显示和交互行为的场景。

组件样式与属性设置

5. 代码预览 ​

代码预览区为开发者提供了强大的辅助功能。

  • 功能：
    • JSON 代码预览：实时同步画布区的操作，生成对应的卡片 JSON 代码。
    • 双向同步：支持直接在代码区修改 JSON 代码，画布区会即时更新卡片视图。
    • 复制功能：支持一键复制 JSON 代码，方便开发者集成到自己的应用中。
  • 使用场景：适用于需要将设计稿转化为代码，或进行代码调试和优化的场景。

代码预览

了解更多 ​

了解消息卡片及构造规则，参考消息卡片总体结构