telegram-mini-app
使用 TON 整合打造 Telegram Mini Apps
打造在 Telegram 內運行的原生體驗 Web 應用程式，服務 8 億+ 用戶。無需離開 Telegram 生態系統即可整合 TON 區塊鏈、支付和病毒式傳播機制。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「telegram-mini-app」。 設定具有用戶問候語的基本 Telegram Mini App
預期結果:
HTML 頁面已載入 Telegram SDK，使用 initDataUnsafe.user 顯示用戶名字，使用 Telegram 主題色配置 main button
正在使用「telegram-mini-app」。 為現有 Mini App 新增 TON 錢包連接
預期結果:
TonConnectUIProvider 包裝應用程式，header 中的 TonConnectButton 元件，包含應用程式 metadata 的 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 遊戲 Mini App
打造具有 TON 錢包整合、NFT 獎勵和病毒式推薦機制的 play-to-earn 遊戲，透過 Telegram 分享傳播。
電商店面
建立可購物的 Mini App，具有 Telegram Stars 支付、訂單追蹤和在 Telegram 介面內無縫結帳功能。
社群互動工具
開發具有每日獎勵、連續登入、排行榜和成就徽章的遊戲化忠誠度應用程式，提升頻道參與度。
試試這些提示
建立 Telegram Mini App HTML 範本，包含適當的 viewport 設定、Telegram Web App SDK 初始化和從 initDataUnsafe 提取用戶資料。
建立 Telegram Web App 整合的 React hook，暴露用戶資料、query ID 和核心方法（如 expand、close 和 ready），並包含適當的 TypeScript 類型。
為 React Mini App 實作 TON Connect 錢包整合，包括 UI provider wrapper、連接按鈕元件和 manifest 文件設定。
建立支付按鈕元件，使用 tonConnectUI 發送 TON 交易、處理 nanoton 轉換，並設定交易有效時間視窗。
最佳實務
- 在後端使用 Telegram 的 HMAC 驗證始終驗證 initData，然後再信任用戶身份
- 使用 themeParams CSS 變數匹配 Telegram 主題，實現無縫原生體驗
- 採用行動優先設計，觸控目標最小 44px，並在實際裝置上測試
避免
- 忽略 Telegram 主題參數，導致突兀的視覺轉換
- 為桌面設計，而 95% 的 Telegram 使用量來自行動裝置
- 跳過載入狀態，讓用戶認為應用程式已損壞