说说Teams里的Card

说说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有很多种类,各有各的历史和用途。

  1. Adaptive Cards :这种类型是最新的跨微软各个产品的一种Card,包括Bots, Cortana, Outlook, and Windows等,用途很广泛。
  2. Connector Cards:当作Office 365 connectors的一部分来使用;
  3. 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,了解更多。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页