如何开发无需参数直接返回自适应卡片的Teams静态消息扩展

第一步：修改manifest配置 #

你之前的配置用了action类型的命令，默认会触发参数填写弹窗，要改成query类型（和GIF按钮的命令类型一致），同时保留parameters字段设为空数组即可：

"composeExtensions": [
    {
        "botId": "{botId}",
        "commands": [
            {
                "id": "createCard",
                "context": [
                    "compose"
                ],
                "description": "点击直接生成预设卡片",
                "title": "Create Card",
                "type": "query",
                "parameters": []
            }
        ],
        "messageHandlers": [
            {
                "type": "link",
                "value": {
                    "domains": [
                        "*.botframework.com"
                    ]
                }
            }
        ]
    }
]

注意：修改完manifest后必须重新打包应用，在Teams中卸载旧版本后重新侧加载新版本，避免客户端缓存旧配置导致弹窗仍然出现，这是你之前删除parameters后依旧弹框的核心原因。

第二步：修改Bot实现代码 #

原来的handleTeamsMessagingExtensionSubmitAction是处理action类命令提交的回调，现在替换为query类命令对应的回调方法即可，原有生成卡片的逻辑不需要改动：

export class MessageExtensionBot extends TeamsActivityHandler {

  // 替换原来的submitAction方法为query处理方法
  public async handleTeamsMessagingExtensionQuery(
    context: TurnContext,
    query: any
  ): Promise<any> {
    switch (query.commandId) {
      case "createCard":
        return createCardCommand(context, query);
      default:
        throw new Error("NotImplemented");
    }
  }
}

// 原有createCardCommand逻辑可以完全复用，不需要修改
async function createCardCommand(context: TurnContext, action: any): Promise<any> {
  const cardJson = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "TextBlock",
        "text": "Click the button below to launch Custom Link"
      }
    ],
    "actions": [
      {
        "type": "Action.OpenUrl",
        "title": "Launch Custom Link",
        "url": "https://google.com"
      }
    ]
  };
  const adaptiveCard = CardFactory.adaptiveCard(cardJson);
  const attachment = {
    contentType: adaptiveCard.contentType,
    content: adaptiveCard.content,
    preview: adaptiveCard,
  };
  return {
    composeExtension: {
      type: "result",
      attachmentLayout: "list",
      attachments: [attachment],
    },
  };
}

验证效果 #

修改完成后重新部署后端，重新安装Teams应用，点击消息扩展按钮就会直接展示预设的自适应卡片，按回车即可直接发送到频道。

内容的提问来源于stack exchange，提问作者Serban