飞书机器人如何更改消息样式以支持多种展示格式？

Question

如何通过飞书机器人实现多种消息样式的自定义展示？ 在使用飞书机器人时，常遇到消息样式单一、无法满足多样化展示需求的问题。例如，想在消息中突出显示关键数据或添加交互按钮。此时，可以通过调整JSON格式的请求体，利用飞书提供的交互消息组件（如div、action等）来自定义样式。但实际操作中，开发者可能不清楚如何正确配置字段或嵌套结构，导致消息展示效果不符合预期。解决此问题的关键在于熟悉飞书消息卡片的Schema规范，并结合具体场景设计合适的布局与交互逻辑，从而实现富文本、按钮组、折叠面板等多种展示格式的支持。

Answer 1

1. 飞书机器人消息样式的概述

在飞书机器人开发中，消息样式可以通过JSON格式的请求体进行自定义。飞书提供了丰富的交互组件，例如div、action等，支持开发者构建多样化的展示形式。

• 基础文本消息：最简单的消息类型，仅包含纯文本内容。
• 富文本消息：支持加粗、斜体、链接等格式化功能。
• 交互式消息：包括按钮、下拉菜单等交互组件，提升用户体验。

开发者需要熟悉飞书的消息卡片Schema规范，才能正确配置字段和嵌套结构。

2. JSON Schema与消息组件详解

飞书的消息卡片基于JSON Schema设计，以下是一些常用的字段及其作用：

字段名	描述	示例值
config	设置消息的整体行为，如宽屏模式。	{"wide_screen_mode": true}
header	定义消息顶部标题区域。	{"title": {"content": "通知", "tag": "plain_text"}}
elements	包含具体的消息内容和交互组件。	见下方代码示例

{
    "config": {"wide_screen_mode": true},
    "header": {"title": {"content": "关键数据通知", "tag": "plain_text"}},
    "elements": [
        {
            "tag": "div",
            "text": {
                "content": "本月销售额为 **10,000元**。",
                "tag": "lark_md"
            }
        },
        {
            "tag": "action",
            "actions": [
                {
                    "tag": "button",
                    "text": {"content": "查看详情", "tag": "plain_text"},
                    "url": "http://example.com"
                }
            ]
        }
    ]
}
    

3. 实际场景中的布局与交互逻辑设计

结合具体业务需求，可以设计不同的消息样式。以下是几个常见场景：

1. 突出显示关键数据：使用Markdown语法加粗或高亮重要信息。
2. 添加交互按钮：通过"action"组件提供跳转链接或回调操作。
3. 折叠面板：利用"field"组件实现多行信息的折叠展示。

以下是一个带有折叠面板的消息示例：

{
    "elements": [
        {
            "tag": "div",
            "fields": [
                {"is_short": false, "text": {"tag": "lark_md", "content": "点击展开详情"}},
                {"is_short": false, "text": {"tag": "lark_md", "content": "这里是隐藏的内容"}}
            ]
        }
    ]
}
    

4. 消息样式开发流程图

以下是消息样式开发的主要步骤：

此流程图展示了从选择Schema到最终部署的完整过程。