跳到主要内容

TMA 启动教程

Telegram Mini Apps(TMA)是在 Telegram 消息传递应用程序内运行的 Web 应用程序。它们是使用 Web 技术构建的 —— HTML、CSS 和 JavaScript。Telegram Mini Apps 可用于创建 DApps、游戏以及其他可以在 Telegram 内运行的应用程序类型。

创建你的应用程序

  1. 要将你的小程序连接到 Telegram,请使用此代码放置 SDK 脚本 telegram-web-app.js
<script src="https://telegram.org/js/telegram-web-app.js"></script>
提示

It's preferable to switch off cache in the HTML. To ensure your cache is switched off, specify headers in your request according to the following:

Cache-Control: no-store, must-revalidate
Pragma: no-cache
Expires: 0
  1. 脚本连接后,一个 window.Telegram.WebApp 对象就变得可用。你可以在此阅读更多有关利用 telegram-web-app.js 创建小程序的信息。

  2. 连接 SDK 的现代方式是 Telegram Mini Apps SDK 的 npm 包:

npm i @twa-dev/sdk

你可以在此处找到 @twa-dev/sdk 的指南。

  1. 当你的小程序准备就绪并部署到 Web 服务器时,进行下一步。

为应用程序设置机器人

要将你的小程序连接到 Telegram,你需要创建一个机器人并为其设置一个小程序。按照这些步骤设置一个新的 Telegram 机器人:

1. 与 BotFather 启动对话

  • 打开 Telegram 应用程序或网页版本。
  • 在搜索栏中搜索 @BotFather 或跟随链接 https://t.me/BotFather
  • 通过点击 START 按钮来开始与 BotFather 的聊天。

2. 创建一个新机器人

  • 向 BotFather 发送 /newbot 命令。
  • BotFather 将要求你为你的机器人选择一个名字。这是一个显示名称,可以包含空格。
  • 接下来,你将被要求为你的机器人选择一个用户名。这必须以 bot 结尾(例如,sample_bot)并且是唯一的。

3. 设置机器人小程序

  • 向 BotFather 发送 /mybots 命令。
  • 从列表中选择你的机器人并选择 Bot 设置 选项
  • 选择 菜单按钮 选项
  • 选择 编辑菜单按钮 URL 选项并发送你的 Telegram 小程序的 URL,例如从 GitHub Pages 部署的链接。

4. 访问机器人

  • 现在你可以在 Telegram 的搜索栏中使用其用户名搜索你的机器人。
  • 按下紧挨附件选择器旁边的按钮来在消息传递应用程序中启动你的 Telegram 小程序
  • 你太棒了!