MS Teams Bot App - 如何使用按钮显示主菜单？答案

【问题标题】：MS Teams Bot App - How to display main menu with buttons?MS Teams Bot App - 如何使用按钮显示主菜单？
【发布时间】：2020-07-27 20:00:10
【问题描述】：

我正在为 MS Teams 开发一个一对一的机器人应用程序（Azure 机器人框架）。一个用例很简单：用户安装 Bot，Bot 向他发送欢迎消息以及一系列可用功能（菜单）。

我的问题：

如果我们谈到 MS Teams，显示 Bot 主菜单的最佳做法是什么？
是否可以让 Bot 的主菜单带有按钮？以及如何创建？

我发现微软建议为此使用下拉菜单 (https://docs.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-menus)。但它不适用于移动设备，并且用户必须手动将命令写入 Bot - 从用户体验的角度来看，这不是最佳选择。

当我尝试使用按钮时，我遇到了另一个问题：在自适应卡片中，按钮显示在一行中。如果我将不同列集中的按钮分开，那么：

在桌面应用程序中一切正常（但无论如何按钮的宽度不同）。
在 iOS 应用程序中一切正常（但无论如何按钮的宽度不同）。
在 Android 应用程序中，按钮显示为相互粘连（它们之间没有任何垂直边距）

我使用的主菜单的 JSON：

{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
    {
        "type": "TextBlock",
        "wrap": true,
        "text": "%%0"
    },
    {
        "type": "ActionSet",
        "actions": [
            {
        "type": "Action.Submit",
        "title": "Use enhanced password policy",
        "style": "positive",
        "data": {
            "id": "services/pw_policy"
        }
    }
        ],
    "spacing" : "Medium"
    },
    {
        "type": "ActionSet",
        "actions": [
          {
        "type": "Action.Submit",
        "title": "Reset HPA password",
        "style": "positive",
        "data": {
            "id": "services/hpa_reset_pswd"
        }
    }
        ],
    "spacing" : "Medium"
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"

}

【问题讨论】：

我们可以重现我们这边的问题。提出了一个错误
-Bug已经解决，我们已经测试过了，请您也检查确认一下吗？

标签： botframework microsoft-teams azure-bot-service

【解决方案1】：

使用列集

{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
    {
        "type": "TextBlock",
        "wrap": true,
        "text": "%%0"
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Use enhanced password policy",
                                "style": "positive",
                                "data": {
                                    "id": "services/pw_policy"
                                }
                            }
                        ],
                        "spacing": "Medium"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Reset HPA password",
                                "style": "positive",
                                "data": {
                                    "id": "services/hpa_reset_pswd"
                                }
                            }
                        ],
                        "spacing": "Medium"
                    }
                ]
            }
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

【讨论】：