说说Teams里的Card?
在为Teams开发应用的时候,如果是Bot,Connectors或者Message Extension应用,会有添加Card的场景。
什么是Card
Card,可以认为是一种用户界面上的容器,可以包含诸多信息。比如包含button,点击后可以出发一些事件。当然,Card还有其他一些属性。Card实际上一开始在Outlook和Office 365中被使用的。详情见https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/cards/cards
Card分类
Card有很多种类,各有各的历史和用途。
- Adaptive Cards :这种类型是最新的跨微软各个产品的一种Card,包括Bots, Cortana, Outlook, and Windows等,用途很广泛。
- Connector Cards:当作Office 365 connectors的一部分来使用;
- Simple Cards: 这是Bot框架里的, 比如Thumbnail和Hero。本身Bot框架里有定义好的一系列Card,这部分Card是基于Message的附件(attachment)来实现的,也就相当于对Cards做了扩展;
Messaging Extension可以返回以上三种Card中的任何一种。
Adaptive Card
这是种自定义的Card,可以包含文本, 语音, 图片, 按钮和输入控件。但是不支持Connectors。
Hero Card
Hero Card就是一张大图,一段描述,可以有button。当然也不支持Connectors。也支持平板用户点击操作。
json数据:
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "东方明珠",
"subtitle": "上海外滩-东方明珠",
"text": "点击查看更多图片",
"images": [
{
"url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567775652466&di=203a1ecb2336949507875872c9bb7473&imgtype=0&src=http%3A%2F%2Fpic1.nipic.com%2F2008-11-26%2F2008112691317235_2.jpg"
}
],
"buttons": [
{
"type": "openUrl",
"title": "Button 1",
"value": "https://timgsa.baidu.com/timg"
},
{
"type": "openUrl",
"title": "Button 2",
"value": "https://https://timgsa.baidu.com/timg"
}
]
}
}
Thumbnail Card
缩略图配文字
{
"contentType": "application/vnd.microsoft.card.thumbnail",
"content": {
"title": "东方明珠小图",
"subtitle": "上海外滩-东方明珠",
"text": "点击链接,查看更多",
"images": [
{
"url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567775652466&di=203a1ecb2336949507875872c9bb7473&imgtype=0&src=http%3A%2F%2Fpic1.nipic.com%2F2008-11-26%2F2008112691317235_2.jpg"
}
],
"buttons": [
{
"type": "openUrl",
"title": "Button 1",
"value": "https://www.baidu.com"
},
{
"type": "openUrl",
"title": "Button 2",
"value": "https://www.baidu.com"
}
]
}
}
以上就是主要的几种Card,大家可以根据场景需要,选择适合的Card,每个字段的具体含义也比较顾名思义。如果还有不明白的,欢迎留言。或者直接戳这里:https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/cards/cards,了解更多。