用途:本技能是一份框架无关的 Telegram Mini App 开发指南,适用于 React、Vue、Svelte、Angular、Solid 或原生 HTML/JS,统一讲解 SDK 通用概念、主题系统与最佳实践。
主要能力:涵盖 SDK 加载(官方脚本或 npm 包)、WebApp 对象属性与子对象、初始化生命周期、主题与 CSS 变量、导航组件(BackButton、SettingsButton)、底部按钮(MainButton、SecondaryButton)、触觉反馈、弹窗、数据校验与安全、存储 API(CloudStorage、DeviceStorage、SecureStorage)、全屏模式、安全区域、事件、框架集成配方、设计指南、测试调试与常见陷阱。
必要用法:页面 head 中先加载 https://telegram.org/js/telegram-web-app.js ,再调用 tg.ready() 与 tg.expand();通过 window.Telegram.WebApp 访问 API。主题应使用 --tg-theme-* CSS 变量并给回退值,避免硬编码颜色。后端校验使用 initData,按 HMAC-SHA256 流程比对 hash,并检查 auth_date;第三方场景可用 Ed25519 签名与公开密钥。
适用场景:需要嵌入 Telegram 内运行、希望外观与主题跟系统一致的 Web 应用。
限制:应用须以 HTTPS 提供服务,在 WebView 中运行;initDataUnsafe 不可信,必须服务端校验;CloudStorage、SecureStorage 等容量与条数有上限;DeviceStorage 与 SecureStorage 需 Bot API 9.0+,全屏需 8.0+;资料中未提供具体收费方式、完整部署或调试步骤,相关细节暂未提供。