跳到主要内容

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 小程序
  • 你太棒了！