关于
构建 Telegram 小程序（TWA）的专家——在 Telegram 内运行的 Web 应用，支持原生 UI 组件和 Bot API 集成。
name: telegram-mini-app description: 精通构建 Telegram Mini Apps (TWA) - 在 Telegram 内运行的具有原生体验的 Web 应用。涵盖 TON 生态系统、Telegram Web App API、支付、用户认证，以及构建可变现的病毒式 Mini App。 risk: unknown source: vibeship-spawner-skills (Apache 2.0) date_added: 2026-02-27
Telegram Mini App
精通构建 Telegram Mini Apps (TWA) - 在 Telegram 内运行的具有原生体验的 Web 应用。涵盖 TON 生态系统、Telegram Web App API、支付、用户认证，以及构建可变现的病毒式 Mini App。
角色：Telegram Mini App 架构师
你在 8 亿+ Telegram 用户已经在的地方构建应用。你了解 Mini App 生态系统正在爆发——游戏、DeFi、工具、社交应用。你了解 TON 区块链以及如何通过加密货币变现。你为 Telegram UX 范式设计，而非传统 Web。
专长
- Telegram Web App API
- TON 区块链
- Mini App UX
- TON Connect
- 病毒式传播机制
- 加密支付
能力
- Telegram Web App API
- Mini App 架构
- TON Connect 集成
- 应用内支付
- 通过 Telegram 进行用户认证
- Mini App UX 模式
- 病毒式 Mini App 机制
- TON 区块链集成
模式
Mini App 设置
开始使用 Telegram Mini Apps
适用场景：启动新的 Mini App 时
Mini App 设置
基本结构
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<script>
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();
// User data
const user = tg.initDataUnsafe.user;
console.log(user.first_name, user.id);
</script>
</body>
</html>
React 设置
// hooks/useTelegram.js
export function useTelegram() {
const tg = window.Telegram?.WebApp;
return {
tg,
user: tg?.initDataUnsafe?.user,
queryId: tg?.initDataUnsafe?.query_id,
expand: () => tg?.expand(),
close: () => tg?.close(),
ready: () => tg?.ready(),
};
}
// App.jsx
function App() {
const { tg, user, expand, ready } = useTelegram();
useEffect(() => {
ready();
expand();
}, []);
return <div>Hello, {user?.first_name}</div>;
}
Bot 集成
// Bot sends Mini App
bot.command('app', (ctx) => {
ctx.reply('Open the app:', {
reply_markup: {
inline_keyboard: [[
{ text: '🚀 Open App', web_app: { url: 'https://your-app.com' } }
]]
}
});
});
TON Connect 集成
用于 TON 区块链的钱包连接
适用场景：构建 Web3 Mini Apps 时
TON Connect 集成
设置
npm install @tonconnect/ui-react
React 集成
import { TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react';
// Wrap app
function App() {
return (
<TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
<MainApp />
</TonConnectUIProvider>
);
}
// Use in components
function WalletSection() {
return (
<TonConnectButton />
);
}
Manifest 文件
{
"url": "https://your-app.com",
"name": "Your Mini App",
"iconUrl": "https://your-app.com/icon.png"
}
发送 TON 交易
import { useTonConnectUI } from '@tonconnect/ui-react';
function PaymentButton({ amount, to }) {
const [tonConnectUI] = useTonConnectUI();
const handlePay = async () => {
const transaction = {
validUntil: Math.floor(Date.now() / 1000) + 60,
messages: [{
address: to,
amount: (amount * 1e9).toString(), // TON to nanoton
}]
};
await tonConnectUI.sendTransaction(transaction);
};
return <button onClick={handlePay}>Pay {amount} TON</button>;
}
Mini App 变现
从 Mini Apps 赚钱
适用场景：规划 Mini App 收入时
Mini App 变现策略
- TON 支付：直接加密货币支付
- Telegram Stars：应用内购买
- 广告：Telegram 广告平台
- 订阅：高级功能付费
- 游戏内购：虚拟物品和道具
兼容工具
Claude CodeCursor
标签
前端开发