SuperAPI AI 工具集

telegram-mini-apps-react

前端与建站

查看项目

更新于 10-16 01:33

技能介绍

用途:指导开发者用 React 构建运行在 Telegram WebView 内的 Mini Apps,借助 @tma.js/sdk-react 接入 Telegram 原生能力(返回按钮、主按钮)、启动参数、用户数据与主题设置。Mini App 是 Telegram Bot 的附加组件,通过事件与方法同客户端通信。

主要能力:SDK 初始化(init 之前必须调用 initSDK);挂载并使用返回按钮、主按钮等原生 UI;使用 useSignal 订阅响应式信号;读取 initData 用户信息与 startParam;获取启动参数(平台、版本、主题、数据);绑定主题与视口 CSS 变量(如 --tg-theme-bg-color、安全区变量);处理深链;开发环境模拟(mockTelegramEnv);向服务端发送并校验 initData(Node 端可用 @tma.js/init-data-node)。

使用方式:安装 pnpm i @tma.js/sdk-react;不要同时安装 @tma.js/sdk 与 @tma.js/sdk-react,React 包已完整重导出。可用 pnpm dlx @tma.js/create-mini-app@latest 或 npx @tma.js/create-mini-app@latest 创建项目。入口 main.tsx 中先 retrieveLaunchParams,再调用 init,失败时渲染兜底 UI(EnvUnsupported)。组件须先 mount 再调用方法,调用前检查 isAvailable,或用 ifAvailable 更安全。

适用场景:Telegram Bot 内嵌 Web 应用,含路由返回、深链跳转、主题适配、安全区布局、按平台差异化处理等。

限制:资料明确 macOS 客户端存在已知问题,需 mock 处理;未在 Telegram 环境中运行会崩溃,需环境模拟与兜底 UI;不支持平台未列出,仅列 android、ios、macos、tdesktop、weba、web;收费、价格等未提供。initData 服务端必须校验哈希,不可直接信任。