Skip to content

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 第三方验证