如何实现Azure bot自适应卡？

Question

我对在Azure机器人中创建自适应卡的理解是通过对其进行硬编码。创建自适应卡是否更好？因为假设我们必须创建120张卡片。我们必须对类似于以下代码的文件进行硬编码，这不是一个好习惯。请帮忙！谢谢

 {
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Image",
        "url":"google.image.com",
        "size": "small"
      }
     ],
    "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Google",
      "url": "google.com"
     }
     ]
  }

Answer 1

有两种不同的方法可以执行此操作。给出卡片：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",
            "id": "img",
            "selectAction": {
                "type": "Action.OpenUrl",
                "title": "Google",
                "url": "http://www.google.com"
            },
            "url": "https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Google",
            "url": "http://www.google.com"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

将呈现为：

鉴于我们将其导入：

import * as cardJson from './adaptiveCard.json';

然后我们的代码如下所示：

const card = CardFactory.adaptiveCard(cardJson);
const msg = MessageFactory.text('');
msg.attachments = [card];
await context.sendActivity(msg);

1。直接编辑JSON

如果我们使用它来更改图像：

cardJson.body[0].url = 'https://skillbotbuilder.gallerycdn.vsassets.io/extensions/skillbotbuilder/skillbotbuilder/1.0/1546976085901/Microsoft.VisualStudio.Services.Icons.Default';

我们得到：

因此，您可以将.json用作模板，然后使用javascript构建模板。或者：

2。使用其他类型的卡

Here's a link to other card types

然后您可以使用CardFactory来制作卡片。

与上面相似的英雄卡看起来像这样：

const hero = CardFactory.heroCard(
    null,
    CardFactory.images(['https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image']),
    CardFactory.actions([{
        type: 'Action.OpenUrl',
        title: 'Google',
        value: 'Google.com'
    }])
);