tg-miniapp

📱 极速构建 Telegram 小程序解决方案

源自实战的 Telegram Mini App 开发指南,提供安全区域适配、分享流等常见问题的即插即用解决方案,助开发者避坑提效。

收藏
7.8k
安装
2.1k
版本
v1.0.1
CLS 安全性认证2026-05-07
点击查看完整报告 >

使用说明

tg-miniapp 是一款专注于 Telegram Mini App(TMA)开发的实用技能文档,系统性地整理了开发者在构建小程序过程中常遇到的技术陷阱与解决方案。该技能并非可执行程序,而是一份经过实战验证的开发参考手册,涵盖了从安全区域适配、全屏模式处理到分享功能实现的完整技术路径。

核心用法
开发者可将此技能作为技术字典随时查阅。其核心交付物包括三个部分:位于 references/KNOWLEDGE.md 的完整知识库,详细记录了 safe area 计算、position:fixed 失效问题(因 Telegram 容器应用 transform 导致)及 BackButton 事件监听等坑点;references/hooks.ts 提供的 React Hooks 代码片段,如 useSafeAreaInset 用于动态获取安全边距;以及 references/components.tsx 中的现成 UI 组件(SafeAreaHeader、DebugOverlay)。此外,技能还提供了 Inline Mode 分享消息的完整实现链路,包括后端 savePreparedInlineMessage 与前端 shareMessage 的对接流程。

显著优点
该技能的最大价值在于其"踩坑经验"的沉淀。针对 TMA 开发中 notorious 的 safe area 适配问题,它提供了响应式 Hook 方案而非硬编码;对于 React 开发者常见的 "0" 渲染陷阱({count && }),也给出了明确的对比例子。更重要的是,它附带了完整的上线前测试清单(Test Checklist),覆盖 iOS/Android 双端、不同入口场景(文件夹/直接聊天)及分享流程的异常路径,显著降低上线后的兼容性风险。

潜在缺点与局限性
作为 T3 来源的社区贡献,该技能缺乏官方背书,代码示例虽经过验证但仍需开发者根据实际业务调整。技术栈上存在明显偏向性,所有示例均基于 React + TypeScript,Vue 或原生 JavaScript 开发者需要额外适配。此外,TMA 本身存在平台碎片化问题(iOS/Android/Web 表现差异),技能文档虽提及但无法完全消除平台特异性 Bug。部分高级功能(如分享消息)依赖 Telegram WebApp 8.0+ 版本,低版本客户端会面临兼容性问题。

适合的目标群体
主要面向正在使用或计划使用 React 技术栈开发 Telegram Mini App 的前端工程师。特别适合首次接触 TMA 开发的团队,可快速理解 WebApp SDK 的异步特性和容器限制。对于需要实现社交分享功能(通过 Inline Mode)的产品团队,该技能提供了端到端的实现参考。

使用风险
尽管技能本身为纯文档性质(A 级安全),但直接复制代码到生产环境仍存在常规风险:示例代码中的错误处理可能过于简化,需补充完整的边界情况校验;@telegram-apps/sdk 等依赖库需保持版本更新以适配 Telegram 客户端迭代;分享功能涉及的 prepared_message_id 为一次性消耗品,高并发场景下若未设计好后端缓存策略可能导致分享失败。建议在使用前进行代码审查,并在真机全量测试清单通过后再发布。

安全解读

概述

tg-miniapp 是一套面向 Telegram Mini App 开发者的实战解决方案集合,由个人开发者 zenith2828 维护,针对 TMA(Telegram Mini Apps)开发中最常见、最令人头疼的技术痛点提供经过验证的代码方案和最佳实践。

核心用法

该 Skill 以参考文档(T-REF)形式组织,包含三大核心资源:

1. 知识库文档 (references/KNOWLEDGE.md) — 全面记录平台特性和坑点
2. React Hooks (references/hooks.ts) — 即插即用的自定义 Hooks:

3. UI 组件 (references/components.tsx) — 生产级组件:

  • useSafeAreaInset() — 响应式获取安全区边距(顶部状态栏、底部导航栏)
  • useFullscreen() — 全屏模式状态管理
  • SafeAreaHeader — 自动适配刘海屏的头部组件
  • DebugOverlay — 开发调试信息浮层

典型使用场景包括:解决 iOS/Android 异形屏幕的安全区问题、修复 position:fixed 在 Telegram WebView 中失效的 bug、处理返回按钮事件不触发、实现 inline 模式分享流程等。

显著优点

  • 实战验证:所有方案均来自真实项目踩坑经验,非官方文档复述
  • 零依赖:无第三方库依赖,避免供应链风险,代码可直接复制到任何 React/TS 项目
  • 平台特性深度覆盖:涵盖 Telegram WebApp API 的异步特性、分享消息的一次性 ID 机制、跨设备渲染差异等细节
  • 测试清单完备:提供 8 项发布前必检清单,覆盖不同入口、平台、分享场景

潜在局限

  • 来源为个人开发者(T3 级别),非官方或知名组织背书
  • 浏览器环境绑定:Hooks 依赖 window.Telegram.WebApp,需确保客户端挂载后使用,SSR 场景需额外处理
  • 技术栈限定:主要面向 React/TypeScript 技术栈,Vue/Svelte 开发者需自行适配
  • API 演进依赖:Telegram 平台 API 更新可能导致部分方案过时,需关注版本更新

适合人群

  • 正在开发或计划开发 Telegram Mini App 的前端工程师
  • 遇到 TMA 特定 bug(如 fixed 定位失效、安全区计算错误)需要快速解决方案的开发者
  • 希望避免重复踩坑、提升 TMA 开发效率的团队

常规风险

  • 来源可信度:代码虽已公开可审计,但用户应自行快速审查关键 hooks 逻辑
  • 平台兼容性:Telegram Mini App 在不同平台(iOS/Android/Desktop)表现存在差异,务必按提供的测试清单验证
  • 分享流程限制prepared_message_id 为一次性使用,高频分享场景需设计后端缓存策略
  • SDK 版本:建议使用 @telegram-apps/sdk 而非原生 window.Telegram.WebApp,以获得更好的类型支持和事件处理

tg-miniapp 内容

references文件夹
手动下载zip · 10.4 kB
components.tsxtext/plain
请选择文件