Microsoft Teams 卡片为 html

如何解决Microsoft Teams 卡片为 html

我通过 API 收集了 Microsoft Teams 聊天消息，并希望在网站上显示这些消息。当 cards 的 JSON 包含在这些聊天消息中时，问题就出现了。我尝试用 Adaptive Card JS SDK 显示自适应卡片，它显示自适应卡片类型很好。但是我找不到任何关于如何正确显示其他卡片类型的参考。

一些想法：

我可以将任何其他卡片类型转换为自适应卡片 JSON（或者通过图书馆或对 con 进行编码，以便我可以使用 Adaptive Card 进行显示 JS SDK？但是如果我自己用代码来做，我就能处理所有卡片类型/场景？
是否有任何 JS 库可以显示卡片的 JSON，而不是自适应卡片也

我需要能够显示任何卡片类型，但它不需要与 MS Teams 应用程序中的显示方式完全匹配（越近越好:)）。我不需要卡片中的任何功能作为按钮点击/重定向，只是卡片需要像在 MS Teams 中一样以 HTML 呈现。注意：我有来自聊天元数据的卡片 JSON 的内容类型为 application/vnd.microsoft.card.hero、application/vnd.microsoft.card.thumbnail、application/vnd.microsoft.teams.card.o365connector 等。

例如 1：来自维基百科应用的卡片

卡片的 JSON

{
  "title": "<a href=\"https://en.wikipedia.org/wiki/Unidentified%20flying%20object\" target=\"_blank\">Unidentified flying object</a>","text": "unidentified flying object (<span>UFO</span>) is any aerial phenomenon that cannot immediately be identified or explained. Most <span>UFOs</span> are identified or investigated","images": [
    {
      "alt": "Unidentified flying object","url": "https://upload.wikimedia.org/wikipedia/commons/b/bc/PurportedUFO2cropped.jpg"
    }
  ],"buttons": [

  ]
}

例如 2：股票卡应用

卡片的 JSON

{
  "sections": [
    {
      "activityTitle": "<span style=\"font-weight:600;font-size:1.8rem\">Apple Inc (Nasdaq Stock Market: AAPL)</span>","activitySubtitle": "<span style=\"font-size:1.6rem\">125.89&nbsp;&nbsp;<span style=\"color:#7FBA00\">&#x25B2; 2.35 (1.90%)</span></span>","activityText": "\r\n<br/>\r\n<div style=\"font-size:1.2rem\">\r\n  <p>\r\n    <span style=\"font-weight:600\">When:</span> Friday,June 4,2021 7:59 PM EDT. Delayed 15 minutes.<br/>    <span style=\"font-weight:600\">After hours:</span> 126.01\r\n  </p>\r\n  <p>Data from Refinitiv</p>\r\n</div>","potentialAction": [
        {
          "@type": "OpenUri","targets": [
            {
              "os": "default","uri": "https://www.msn.com/en-us/money/stockdetails/fi-a1mou2"
            }
          ],"name": "More details","@id": "ViewOnMsn"
        },{
          "@type": "OpenUri","uri": "https://www.bing.com/news/search?q=Apple Inc"
            }
          ],"name": "News","@id": "ViewNews"
        }
      ],"markdown": false
    }
  ]
}

例如 3：Youtube 应用卡

卡片的 JSON

{
  "title": "M1 MacBook Pro and Air review: Apple delivers","subtitle": "The Verge | 1.4M views | 6 months ago","text": "<p>Apple has updated three Mac with its own M1 processors: the Macbook Air,the entry-level 13-inch MacBook Pro,and the Mac mini. Will Intel-based apps run? Will ...</p>\r\n\r\n\r\n<p>YouTube | 12:57</p>","images": [
    {
      "alt": "M1 MacBook Pro and Air review: Apple delivers","url": "https://i.ytimg.com/vi/OEaKQ0pxQsg/hqdefault.jpg"
    }
  ],"buttons": [

  ],"tap": {
    "type": "openUrl","title": "M1 MacBook Pro and Air review: Apple delivers","value": "https://www.youtube.com/watch?v=OEaKQ0pxQsg"
  }
}

解决方法

我可以将任何其他卡片类型转换为 Adaptive Card JSON（通过库或编码 con 以便我可以使用 Adaptive Card JS SDK 显示？但是如果我自己通过代码来做，我将能够处理所有卡片类型/场景？

Bot Framework Web Chat 通过首先将它们转换为自适应卡片来呈现所有 Bot Framework rich cards。网络聊天是开源的，因此您可以查看源代码以了解它是如何做到的。但是，您从 Stocks 应用程序显示的示例卡是特定于 Teams 的 O365 连接器卡，而不是 Bot Framework 卡，并且 Teams 源代码是专有的，因此您不会轻易了解 JSON 是如何处理的。您可以参考 Teams docs 以了解您可能遇到的卡片类型范围。

是否有任何 JS 库可以显示除自适应卡片以外的卡片的 JSON 数据

不，没有。你可以考虑在浏览器中打开 Teams Web 应用，以便读取从 API 收集的对话的 HTML，并将 HTML 与 JSON 进行比较。您也可以考虑使用工具直接从对话中复制 HTML，而不是使用 API 以 JSON 形式获取对话。

Microsoft Teams 卡片为 html

如何解决Microsoft Teams 卡片为 html

解决方法

相关推荐