如何通过Telegraf按钮向Telegram Web App传递动态参数？

问题场景 #

你用Telegraf开发的Telegram Bot，通过url按钮打开@botfather创建的Web App，但在链接后追加?type=add这类自定义参数时，参数无法传递到Web App中。由于参数是动态的，没法创建多个独立Web App，也不能直接用外部URL（会跳浏览器而非Telegram内置Web App）。

可行方案 #

Telegram对Web App的参数传递有官方规范，按以下步骤修改即可：

1. 改用官方规范的参数名 #

不要用自定义的type参数，改用Telegram认可的startapp作为参数名，传递的值会被自动注入到Web App的初始化数据中。

2. 调整按钮代码 #

推荐使用专门的webApp按钮，更符合Telegram Web App的使用规范，确保在Telegram内置浏览器打开：

const { Telegraf, Markup } = require('telegraf')
require('dotenv').config()

const bot = new Telegraf(process.env.BOT_TOKEN)

bot.command('/command', ctx => {
  ctx.reply('Open web app', Markup.inlineKeyboard([
    // Add按钮传递参数
    Markup.button.webApp('Add', 'https://t.me/bot_name/app_name?startapp=add'),
    // Delete按钮传递参数
    Markup.button.webApp('Delete', 'https://t.me/bot_name/app_name?startapp=delete')
  ]))
})

bot.launch()

如果坚持用原有的url按钮，也可以按同样参数格式修改：

Markup.button.url('Add', 'https://t.me/bot_name/app_name?startapp=add')

3. 在Web App中读取参数 #

在你的Web App代码里，通过Telegram提供的Web App API获取传递的参数：

// 获取启动参数
const operationType = window.Telegram.WebApp.initDataUnsafe.start_param;

if (operationType === 'add') {
  // 执行Add相关逻辑
} else if (operationType === 'delete') {
  // 执行Delete相关逻辑
}

关键说明 #

• Telegram的Web App入口链接（https://t.me/bot_name/app_name）只解析官方指定的startapp参数，自定义参数会被过滤，这是你之前传参失败的核心原因
• 若需传递复杂参数，可先对参数做Base64编码后通过startapp传递，Web App端解码即可使用

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