亿联文档帮助中心

构造卡片

卡片结构

卡片基础结构

字段	必填	类型	取值范围	描述
config	否	object		卡片属性相关配置
header	否	object		卡片标题
elements	是	array	内容块组件/markdown组件/分割线组件/图片组件/备注组件 /交互块组件	卡片正文
preview	否	string		预览文案，用于卡片消息推送和会话列表消息预览的显示
keyword	否	string		关键字，用于消息搜索匹配命中，sdk层做搜索用字段，UI不需要关心
link	否	object	url组件	用于卡片点击跳转

config结构

字段	必填	类型	取值范围	描述
isFullUpdate	否	bool	true/false	是否全量更新，默认true，服务器关心的字段，客户端可以丢弃
isForwardable	否	bool	true/false	是否可转发，默认true

header结构

字段	必填	类型	取值范围	描述
title	是	object	文本组件	标题内容，仅支持plainText标签的文本组件，且行数固定最多2行
theme	否	string	main/green/orange/red/gray/pink/gold/purple/blue	标题区主题色

"card": {
    "config": {
        "isFullUpdate": true,
        "isForwardable": true
    },
    "header": {
        "title": {
            "tag": "plainText",
            "content": "hello card!"
        },
        "theme": "blue"
    },
    "elements": [
        //只能放置内容块、markdown、分割线、图片、备注、交互块6种组件，可根据组件要求内嵌其他组件
        {组件},
        {组件},
        ......
    ],
    "preview": "hello card!",
    "keyword": "hello card!",
    "link": {
        "tag": "url",
        "url": "https://www.yealink.com.cn/",
        "iosUrl": "https://www.yealink.com.cn/",
        "androidUrl": "https://www.yealink.com.cn/",
        "pcUrl": "https://www.yealink.com.cn/"
    }
}

卡片内容组件

组件	描述	是否为基础组件（可内嵌于其它组件中）
内容块	由文本块组成，并且能够携带右侧配图	否
文本块	无法单独存在，需内嵌在内容块组件中，由文本组件组成，相连的文本块能够指定其排列样式是单列还是均分并列	是
文本	单个文本内容，无法单独存在，可内嵌在各个需要文本内容的组件中	是
图片	单个图片内容	是
markdown	markdown格式内容	否
分割线	单条分割线	否
备注	包含多个文本组件和图片组件以流式布局显示	否

文本组件

字段	必填	类型	取值范围	描述
tag	是	string	plainText/simpleMd	标签，内嵌于图片组件的alt字段时仅支持plainText标签 plainText: 纯文本 simpleMd: 富文本
content	是	string		文本内容
lines	否	int		内容显示行数，默认0自适应行数不限制，内嵌于标题header和备注组件时该字段无效
href	否	object	key为content里指定的变量名，value为url组件	用于指定simpleMd标签富文本content里文本链接差异化跳转的链接

{
    "tag": "plainText",
    "content": "hello text!",
    "lines": 1
}

文本块组件

字段	必填	类型	取值范围	描述
tag	是	string	field	标签
isShort	是	bool	true/false	是否允许并列，false时独占一行，相连的两个文本块组件若都为true时则两个文本块垂直均分并列一区域
text	是	object	文本组件	文本块内容

{
    "tag": "field",
    "isShort": false,
    "text": {
        "tag": "plainText",
        "content": "hello field!"
    }
}

内容块组件

字段	必填	类型	取值范围	描述
tag	是	string	div	标签
fields	是	array	文本块组件	文本内容
extra	否	object	图片组件	配图，展示在文本内容右侧

{
    "tag": "div",
    "fields": [
        {
            "tag": "field",
            "isShort": false,
            "text": {
                "tag": "simpleMd",
                "content": "**hello div!**"
            }
        },
        {
            "tag": "field",
            "isShort": true,
            "text": {
                "tag": "plainText",
                "content": "左侧并排文本"
            }
        },
        {
            "tag": "field",
            "isShort": true,
            "text": {
                "tag": "plainText",
                "content": "右侧并排文本"
            }
        }
    ],
    "extra": {
        "tag": "urlImage",
        "imageUrl": "https://t7.baidu.com/it/u=1653900808,1273534310&fm=193&f=GIF"
    }
}

图片组件

字段	必填	类型	取值范围	描述
tag	是	string	image/urlImage	标签 image: 常规图片，数据来源为imageId urlImage: 网络链接图片，数据来源为imageUrl
imageId	是(image)，否(urlImage)	string		图片唯一标识（即预签上传获得的fileId），详细使用说明可见发送带图片的消息卡片
imageUrl	是(urlImage)，否(image)	string		网络图片url
isPreviewable	否	bool	true/false	是否支持点击预览，true时点击图片会预览该图片，false时点击图片会响应卡片点击事件，默认true
title	否	object	文本组件	图片标题，显示在图片的上侧，仅在该组件不作为内嵌组件时生效
alt	否	object	文本组件	pc端鼠标悬浮停留在该图片时展示的文本内容，仅支持plainText标签的文本组件
mode	否	string	tile/cropCenter	图片渲染显示时的裁剪方式，默认cropCenter，仅在该组件不作为内嵌组件时生效 tile: 平铺 cropCenter: 居中裁剪
width	否	int		图片宽度，当标签为image时，不需要填写，该字段无作用；当标签为urlImage时，未经过网盘处理，客户端无法知道图片的宽高，因此需要自行填写，且为真实的图片宽度
height	否	int		图片高度，当标签为image时，不需要填写，该字段无作用；当标签为urlImage时，未经过网盘处理，客户端无法知道图片的宽高，因此需要自行填写，且为真实的图片高度

{
    "tag": "image",
    "imageId": "******************",//即预签上传获得的fileId
    "isPreviewable": true,
    "title": {
        "tag": "plainText",
        "content": "图片标题"
    },
    "alt": {
        "tag": "plainText",
        "content": "这里是鼠标悬浮停留时显示的文本内容"
    },
    "mode": "cropCenter"
}

{
    "tag": "urlImage",
    "imageUrl": "https://t7.baidu.com/it/u=1653900808,1273534310&fm=193&f=GIF",
    "isPreviewable": true,
    "title": {
        "tag": "plainText",
        "content": "图片标题"
    },
    "alt": {
        "tag": "plainText",
        "content": "这里是鼠标悬浮停留时显示的文本内容"
    },
    "mode": "cropCenter",
    "width": 800,
    "height": 532
}

markdown组件

字段	必填	类型	取值范围	描述
tag	是	string	markdown	标签
content	是	string		markdown格式内容
href	否	dict	key为content里指定的变量名，value为url组件	用于指定content里差异化跳转的链接

{
    "tag": "markdown",
    "content": "普通文本\n标准emoji😄\n*斜体*\n**粗体**\n~~删除线~~\n<at id="******************">用户名</at>\n<at id="all"></at>\n<a>https://www.yealink.com.cn/</a>\n[文字链接](https://www.yealink.com.cn/)\n[差异化跳转]($urlVal)\n![图片](******************)\n上面是一个图片标签\n ---\n上面是一行分割线",
    "href": {
        "urlVal": {
            "tag": "url",
            "url": "https://www.yealink.com.cn/",
            "iosUrl": "https://www.yealink.com.cn/",
            "androidUrl": "https://www.yealink.com.cn/",
            "pcUrl": "https://www.yealink.com.cn/"
        }
    }
}

markdown支持样式

样式	语法	效果	可用标签	备注
换行	`\n`	换行	simpleMd/markdown
斜体	`斜体`	斜体	simpleMd/markdown
粗体	`粗体`	粗体	simpleMd/markdown
删除线	`~~删除线~~`	~~删除线~~	simpleMd/markdown
@单人	`<at id="userId">用户名</at>`	@用户名	simpleMd/markdown	userId为用户id
@所有人	`<at id="all"></at>`	@所有人	simpleMd/markdown
超链接	`<a>https://www.yealink.com.cn/</a>`	https://www.yealink.com.cn/	simpleMd/markdown	地址内容必填且前缀为https或http
文字链接	`[文字链接](url)`	文字链接	simpleMd/markdown	地址内容必填且前缀为https或http
差异化跳转	`[差异化跳转]($urlVal)`	差异化跳转	simpleMd/markdown
图片	`![xxx](imageId)`		markdown	仅支持imageId(即预签上传获得的fileId)，不支持url图片，[xxx]内的文本效果为鼠标悬浮停留图片上显示的文本内容，与图片组件的alt作用一样
分割线	`\n ------------\n`		markdown	------符号必须跟在换行符后使用，且与换行符间有1个空格

分割线组件

字段	必填	类型	取值范围	描述
tag	是	string	hr	标签

{
    "tag": "hr"
}

备注组件

字段	必填	类型	取值范围	描述
tag	是	string	note	标签
elements	是	array	文本组件/图片组件	备注内容，流式布局依次往右放置，显示不下时自动换行，文本组件行数根据内容自适应，无行数限制

{
    "tag": "note",
    "elements": [
        //文本、图片组件
        {
            "tag": "urlImage",
            "imageUrl": "https://t7.baidu.com/it/u=1653900808,1273534310&fm=193&f=GIF"
        },
        {
            "tag": "plainText",
            "content": "hello note!"
        }
    ]
}

卡片交互组件

组件	描述	是否为基础组件（可内嵌于其它组件中）
交互块	由多个交互组件组成，目前仅支持按钮组件	否
按钮	响应用户点击的交互组件	是
url	差异化链接，无法单独存在，内嵌在卡片跳转或文本组件、markdown组件、按钮组件里	是
弹窗	再次确认操作的弹窗，无法单独存在，需内嵌在按钮组件中	是

交互块组件

字段	必填	类型	取值范围	描述
tag	是	string	action	标签
actions	是	array	按钮组件	交互元素数组
layout	否	string	column/bisected/trisection/flow	元素布局方式，pc端仅支持flow，移动端未配置时默认column column: 单行纵向排列 bisected: 二等分 trisection: 三等分 flow: 自适应大小流式排列

{
    "tag": "action",
    "layout": "column",
    "actions": [
        {
            "tag": "button",
            "title": {
                "tag": "plainText",
                "content": "this is button title"
            }
        },
        {
            "tag": "button",
            "title": {
                "tag": "plainText",
                "content": "this is button title"
            }
        },
        }
    ]
}

url组件

字段	必填	类型	取值范围	描述
tag	是	string	url	标签
url	是	string		默认跳转链接，前缀必须为https或http
iosUrl	否	string		iOS端跳转链接，前缀必须为https或http
androidUrl	否	string		android端跳转链接，前缀必须为https或http
pcUrl	否	string		pc端跳转链接，前缀必须为https或http

{
    "tag": "url",
    "url": "https://www.yealink.com.cn/",
    "iosUrl": "https://www.yealink.com.cn/",
    "androidUrl": "https://www.yealink.com.cn/",
    "pcUrl": "https://www.yealink.com.cn/"
}

弹窗组件

字段	必填	类型	取值范围	描述
tag	是	string	confirm	标签 confirm: 双选项二次确认弹窗，点击取消选项后无响应，点击确认选项后执行事件
title	否	object	文本组件	弹窗标题，仅支持plainText标签的文本组件
text	否	object	文本组件	弹窗内容，仅支持plainText标签的文本组件

{
    "tag": "confirm",
    "title": {
        "tag": "plainText",
        "content": "this is alert title"
    },
    "text": {
        "tag": "plainText",
        "content": "this is alert content"
    }
}

按钮组件

字段	必填	类型	取值范围	描述
tag	是	string	button	标签
title	是	object	文本组件	按钮标题，仅支持plainText标签的文本组件
type	否	string	default/primary/danger/frameless	按钮样式，默认default default: 常规次要按钮 primary: 主要按钮 danger: 警告按钮 frameless: 无边框按钮
value	否	dict	key为string类型的key-value形式的json数据	点击后该数据会返回给第三方应用的业务，与link字段跳转链接互斥，优先级低于link，link和value都没有配置时按钮将处于禁用态不可点击
link	否	object	url组件	点击跳转链接，与value字段上报业务方事件互斥，优先级高于value，link和value都没有配置时按钮将处于禁用态不可点击
popup	否	object	弹窗组件	点击按钮后出现的弹窗，弹窗后根据用户点击选项继续执行事件

{
    "tag": "button",
    "title": {
        "tag": "plainText",
        "content": "this is button title"
    },
    "type": "default",
    "value": {
        "key1": "value1",
        "key2": "value2",
        "..."
    },
    "link": {
        "tag": "url",
        "url": "https://www.yealink.com.cn/",
        "iosUrl": "https://www.yealink.com.cn/",
        "androidUrl": "https://www.yealink.com.cn/",
        "pcUrl": "https://www.yealink.com.cn/"
    },
    "popup": {
        "tag": "confirm",
        "title": {
            "tag": "plainText",
            "content": "this is alert title"
        },
        "text": {
            "tag": "plainText",
            "content": "this is alert content"
        }
    }
}