telegram-mini-app
使用 TON 集成构建 Telegram 小程序
为 8 亿以上用户创建原生体验的 Web 应用程序，直接在 Telegram 内运行。无需离开 Telegram 生态系统即可集成 TON 区块链、支付和病毒式传播机制。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“telegram-mini-app”。 设置带有用户问候的基础 Telegram 小程序
预期结果:
加载 Telegram SDK 的 HTML 页面，使用 initDataUnsafe.user 显示用户名字，使用 Telegram 主题颜色配置主按钮
正在使用“telegram-mini-app”。 为现有小程序添加 TON 钱包连接
预期结果:
TonConnectUIProvider 包装应用，头部放置 TonConnectButton 组件，包含应用元数据的 manifest.json，连接后可访问钱包地址
安全审计
安全Static analyzer flagged 41 patterns that are all false positives. The skill file (SKILL.md) is documentation-only markdown containing code examples. Backticks are markdown code fences, not shell execution. URLs are official Telegram SDK links or documentation placeholders. No executable code or security risks present.
质量评分
你能构建什么
Web3 游戏小程序
构建带有 TON 钱包集成、NFT 奖励和病毒式推荐机制的 play-to-earn 游戏，通过 Telegram 分享传播。
电子商务店面
创建一个可购物的小程序，支持 Telegram Stars 支付、订单跟踪，以及在 Telegram 界面内的无缝结账体验。
社区互动工具
开发游戏化忠诚度应用，包含每日奖励、连续签到、排行榜和成就徽章，提升频道互动率。
试试这些提示
创建一个 Telegram 小程序 HTML 模板，包含适当的 viewport 设置、Telegram Web App SDK 初始化和从 initDataUnsafe 提取用户数据。
构建一个用于 Telegram Web App 集成的 React hook，暴露用户数据、query ID 和核心方法（如 expand、close 和 ready），并提供适当的 TypeScript 类型。
为 React 小程序实现 TON Connect 钱包集成，包括 UI provider 包装器、连接按钮组件和 manifest 文件配置。
创建一个支付按钮组件，使用 tonConnectUI 发送 TON 交易，处理 nanoton 转换，并设置交易有效时间窗口。
最佳实践
- 在信任用户身份之前，始终在您的后端使用 Telegram 的 HMAC 验证来验证 initData
- 使用 themeParams CSS 变量匹配 Telegram 主题，实现无缝原生体验
- 移动端优先设计，触摸目标最小 44px，并在实际设备上测试
避免
- 忽略 Telegram 主题参数，导致突兀的视觉过渡
- 为桌面端设计，而 95% 的 Telegram 使用量来自移动端
- 跳过加载状态，让用户认为应用已损坏