如何在TelegrafJS中创建Telegram机器人聊天菜单按钮

你要实现的是Telegram官方的常驻侧边菜单按钮，不是普通的回复键盘/内联键盘，Telegraf 4.0+版本已经原生封装了对应API，不需要额外引入第三方依赖。

前置依赖 #

先升级Telegraf到最新稳定版本：

npm install telegraf@latest

步骤1：设置输入框旁的常驻菜单按钮 #

Telegram支持三种菜单按钮类型，按需选择即可：

• MenuButtonDefault：系统默认样式，显示斜杠图标，点击弹出默认菜单
• MenuButtonCommands：自定义按钮文字，点击弹出你配置的命令列表
• MenuButtonWebApp：自定义按钮文字，点击直接打开关联的Web App

使用setChatMenuButton方法配置按钮，支持全局生效或针对指定聊天/用户单独生效：

const { Telegraf, MenuButtonCommands, MenuButtonWebApp, WebAppInfo } = require('telegraf')
const bot = new Telegraf('替换为你的机器人Token')

// 全局配置：所有用户聊天界面都显示该菜单按钮
// 传入chatId参数即可对单个用户/群单独配置
bot.telegram.setChatMenuButton({
  // 配置为命令菜单类型，按钮显示文字为「功能菜单」
  menuButton: new MenuButtonCommands('功能菜单')

  // 如果需要点击按钮直接打开小程序，替换为以下配置
  // menuButton: new MenuButtonWebApp(
  //   '功能菜单',
  //   new WebAppInfo('替换为你的Web App服务地址')
  // )
})

步骤2：配置点击按钮后弹出的菜单列表 #

如果使用MenuButtonCommands类型，点击按钮弹出的菜单内容通过setMyCommands方法配置，用户点击对应选项会自动向机器人发送对应指令：

// 配置菜单选项
bot.telegram.setMyCommands([
  { command: 'start', description: '返回主界面' },
  { command: 'bind', description: '绑定账号信息' },
  { command: 'task', description: '查看我的任务' },
  { command: 'setting', description: '修改偏好设置' },
  { command: 'feedback', description: '提交问题反馈' }
])

// 编写对应指令的处理逻辑
bot.command('bind', ctx => ctx.reply('请按照提示输入你的绑定信息'))
bot.command('task', ctx => ctx.reply('正在加载你的任务列表...'))
bot.command('setting', ctx => ctx.reply('打开设置面板'))

自定义菜单样式适配 #

如果官方命令列表的样式不能满足需求，可以将菜单按钮设置为Web App类型，自行开发前端菜单页面，通过Telegram WebApp SDK实现点击选项和机器人的交互，这种方式可以完全自定义菜单的样式、动效和选项逻辑，没有格式限制。

注意：全局菜单配置后存在缓存，最长可能需要10分钟同步到所有客户端，测试时可以重启Telegram客户端强制刷新配置。

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