Mini App 概览
Mini App 是运行在聊天界面内的轻量级 Web 应用,通过 JavaScript API 与客户端深度集成,提供原生级别的交互体验。
功能特性
- 无缝集成 — 在聊天窗口内直接打开,无需跳转外部浏览器
- 原生交互 — 访问返回按钮、主按钮、触觉反馈等原生 UI 组件
- 主题适配 — 自动适配用户的明暗主题配色
- 安全验证 — 内置数据签名机制,确保数据来源可信
- 云端存储 — 提供键值对云存储、设备存储和加密安全存储
- 传感器访问 — 读取加速度计、陀螺仪、设备方向等传感器数据
- 生物识别 — 支持指纹和面部识别认证
初始化
Mini App 通过在 HTML 中引入 JavaScript SDK 来初始化:
html
<script src="https://oauth.safew.org/js/safew-web-app.js"></script>引入后,全局对象 window.Telegram.WebApp 即可使用。建议在页面加载完成后调用 Telegram.WebApp.ready() 通知客户端 Mini App 已准备就绪。
javascript
const tg = window.Telegram.WebApp;
tg.ready();
// 获取初始化数据
console.log(tg.initData);
console.log(tg.initDataUnsafe);模块索引
| 模块 | 说明 |
|---|---|
| WebApp 属性 | WebApp 对象的 30+ 只读属性,包括平台、版本、视口尺寸等 |
| WebApp 方法 | WebApp 对象的 30+ 方法,包括 UI 控制、数据发送、链接打开等 |
| UI 组件 | BackButton、BottomButton、SettingsButton、HapticFeedback |
| 外观与主题 | ThemeParams 15 色参数、CSS 变量、安全区域 |
| 事件系统 | 40+ 事件,涵盖生命周期、视图变化、按钮交互等 |
| 弹窗交互 | 弹窗、警告、确认、QR 扫码、剪贴板、发票、分享等 |
| 云存储 | CloudStorage API,最多 1024 个键值对 |
| 设备存储 | DeviceStorage API,5MB 本地持久化存储 |
| 安全存储 | SecureStorage API,最多 10 项加密存储 |
| 传感器 | Accelerometer、DeviceOrientation、Gyroscope |
| 位置与生物识别 | LocationManager 和 BiometricManager |
| 初始化数据 | WebAppInitData、WebAppUser、WebAppChat 数据类型 |
| 数据验证 | HMAC-SHA256 服务端验证 + Ed25519 第三方验证 |
