說說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，瞭解更多。