[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-gojian-telegram-mini-apps-zhinan":3},{"article":4,"author":58},{"id":5,"category_id":6,"title":7,"slug":8,"excerpt":9,"content_md":10,"content_html":11,"locale":12,"author_id":13,"published":14,"published_at":15,"meta_title":7,"meta_description":16,"focus_keyword":17,"og_image":18,"canonical_url":18,"robots_meta":19,"created_at":15,"updated_at":15,"tags":20,"category_name":28,"related_articles":38},"d3000000-0000-0000-0000-000000000002","a0000000-0000-0000-0000-000000000034","构建Telegram Mini Apps：从概念到上线","gojian-telegram-mini-apps-zhinan","深入探讨如何使用Nuxt、Vue和TON区块链支付为现代企业创建高性能的Telegram Mini Apps。","## 什么是Telegram Mini Apps？\n\nTelegram Mini Apps是在Telegram即时通讯工具内运行的网页应用程序。它们提供类原生应用的体验，无需用户从应用商店下载任何内容。Telegram拥有超过9亿月活跃用户，提供了一个巨大的分发平台。\n\nMini Apps可以访问Telegram的用户数据（经同意后）、发送通知、通过TON区块链处理支付，并与聊天界面深度集成。\n\n## Mini Apps vs 传统机器人\n\n传统Telegram机器人通过文本命令和内联按钮进行通信。Mini Apps更进一步：\n\n| 功能 | 机器人 | Mini Apps |\n|------|--------|----------|\n| UI | 文本 + 按钮 | 完整网页UI |\n| 交互性 | 基于命令 | 触摸、滚动、表单 |\n| 支付 | Bot Payments API | TON Connect + 任意支付 |\n| 离线 | 否 | 部分支持（PWA） |\n| 富媒体 | 有限 | 完整HTML5\u002FCSS3\u002FJS |\n\n## 构建你的第一个Mini App\n\n### 技术栈\n我们推荐使用Nuxt 4和Vue 3进行Mini App开发：\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  ssr: false, \u002F\u002F Mini Apps是客户端渲染\n  app: {\n    head: {\n      script: [\n        { src: 'https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js' }\n      ]\n    }\n  }\n})\n```\n\n### 访问用户数据\n```typescript\nconst tg = window.Telegram.WebApp\nconst user = tg.initDataUnsafe.user\nconsole.log(user.first_name, user.id)\n```\n\n### 后端验证\n始终在后端使用HMAC-SHA256和你的bot token验证`initData`。绝不信任前端数据。\n\n## 集成TON区块链支付\n\nTON Connect允许Mini Apps与TON钱包进行加密货币支付交互：\n\n1. 用户在Mini App中点击\"购买\"\n2. TON Connect打开用户的钱包\n3. 用户确认交易\n4. 后端在链上验证交易\n5. 授予访问权限\n\n这使得无需传统支付处理器即可实现即时全球支付。\n\n## UX最佳实践\n\n- **使用Telegram主题颜色** — `tg.themeParams`提供当前主题\n- **尊重视口** — Mini Apps在底部面板中运行；优先为移动端设计\n- **使用触觉反馈** — `tg.HapticFeedback.impactOccurred('medium')`提供触觉响应\n- **最小化加载时间** — 首次有意义绘制目标在2秒以内\n- **处理返回按钮** — 使用`tg.BackButton`进行应用内导航\n\n## 变现策略\n\n1. **直接销售** — 通过TON销售数字产品（课程、订阅）\n2. **免费增值** — 免费功能 + 付费升级\n3. **应用内购买** — 虚拟商品、积分、解锁\n4. **广告** — Telegram广告平台集成\n5. **佣金模式** — 从用户间交易中抽取佣金\n\n## 总结\n\nTelegram Mini Apps代表了应用分发的范式转变。通过在Telegram平台上构建，你可以在没有应用商店障碍的情况下触达9亿+用户，通过TON区块链处理支付，并在人们每天使用的即时通讯工具内提供丰富的体验。","\u003Ch2 id=\"telegram-mini-apps\">什么是Telegram Mini Apps？\u003C\u002Fh2>\n\u003Cp>Telegram Mini Apps是在Telegram即时通讯工具内运行的网页应用程序。它们提供类原生应用的体验，无需用户从应用商店下载任何内容。Telegram拥有超过9亿月活跃用户，提供了一个巨大的分发平台。\u003C\u002Fp>\n\u003Cp>Mini Apps可以访问Telegram的用户数据（经同意后）、发送通知、通过TON区块链处理支付，并与聊天界面深度集成。\u003C\u002Fp>\n\u003Ch2 id=\"mini-apps-vs\">Mini Apps vs 传统机器人\u003C\u002Fh2>\n\u003Cp>传统Telegram机器人通过文本命令和内联按钮进行通信。Mini Apps更进一步：\u003C\u002Fp>\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>功能\u003C\u002Fth>\u003Cth>机器人\u003C\u002Fth>\u003Cth>Mini Apps\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\n\u003Ctr>\u003Ctd>UI\u003C\u002Ftd>\u003Ctd>文本 + 按钮\u003C\u002Ftd>\u003Ctd>完整网页UI\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>交互性\u003C\u002Ftd>\u003Ctd>基于命令\u003C\u002Ftd>\u003Ctd>触摸、滚动、表单\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>支付\u003C\u002Ftd>\u003Ctd>Bot Payments API\u003C\u002Ftd>\u003Ctd>TON Connect + 任意支付\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>离线\u003C\u002Ftd>\u003Ctd>否\u003C\u002Ftd>\u003Ctd>部分支持（PWA）\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>富媒体\u003C\u002Ftd>\u003Ctd>有限\u003C\u002Ftd>\u003Ctd>完整HTML5\u002FCSS3\u002FJS\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"mini-app\">构建你的第一个Mini App\u003C\u002Fh2>\n\u003Ch3>技术栈\u003C\u002Fh3>\n\u003Cp>我们推荐使用Nuxt 4和Vue 3进行Mini App开发：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  ssr: false, \u002F\u002F Mini Apps是客户端渲染\n  app: {\n    head: {\n      script: [\n        { src: 'https:\u002F\u002Ftelegram.org\u002Fjs\u002Ftelegram-web-app.js' }\n      ]\n    }\n  }\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>访问用户数据\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-typescript\">const tg = window.Telegram.WebApp\nconst user = tg.initDataUnsafe.user\nconsole.log(user.first_name, user.id)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>后端验证\u003C\u002Fh3>\n\u003Cp>始终在后端使用HMAC-SHA256和你的bot token验证\u003Ccode>initData\u003C\u002Fcode>。绝不信任前端数据。\u003C\u002Fp>\n\u003Ch2 id=\"ton\">集成TON区块链支付\u003C\u002Fh2>\n\u003Cp>TON Connect允许Mini Apps与TON钱包进行加密货币支付交互：\u003C\u002Fp>\n\u003Col>\n\u003Cli>用户在Mini App中点击“购买“\u003C\u002Fli>\n\u003Cli>TON Connect打开用户的钱包\u003C\u002Fli>\n\u003Cli>用户确认交易\u003C\u002Fli>\n\u003Cli>后端在链上验证交易\u003C\u002Fli>\n\u003Cli>授予访问权限\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>这使得无需传统支付处理器即可实现即时全球支付。\u003C\u002Fp>\n\u003Ch2 id=\"ux\">UX最佳实践\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>使用Telegram主题颜色\u003C\u002Fstrong> — \u003Ccode>tg.themeParams\u003C\u002Fcode>提供当前主题\u003C\u002Fli>\n\u003Cli>\u003Cstrong>尊重视口\u003C\u002Fstrong> — Mini Apps在底部面板中运行；优先为移动端设计\u003C\u002Fli>\n\u003Cli>\u003Cstrong>使用触觉反馈\u003C\u002Fstrong> — \u003Ccode>tg.HapticFeedback.impactOccurred('medium')\u003C\u002Fcode>提供触觉响应\u003C\u002Fli>\n\u003Cli>\u003Cstrong>最小化加载时间\u003C\u002Fstrong> — 首次有意义绘制目标在2秒以内\u003C\u002Fli>\n\u003Cli>\u003Cstrong>处理返回按钮\u003C\u002Fstrong> — 使用\u003Ccode>tg.BackButton\u003C\u002Fcode>进行应用内导航\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"\">变现策略\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>直接销售\u003C\u002Fstrong> — 通过TON销售数字产品（课程、订阅）\u003C\u002Fli>\n\u003Cli>\u003Cstrong>免费增值\u003C\u002Fstrong> — 免费功能 + 付费升级\u003C\u002Fli>\n\u003Cli>\u003Cstrong>应用内购买\u003C\u002Fstrong> — 虚拟商品、积分、解锁\u003C\u002Fli>\n\u003Cli>\u003Cstrong>广告\u003C\u002Fstrong> — Telegram广告平台集成\u003C\u002Fli>\n\u003Cli>\u003Cstrong>佣金模式\u003C\u002Fstrong> — 从用户间交易中抽取佣金\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"\">总结\u003C\u002Fh2>\n\u003Cp>Telegram Mini Apps代表了应用分发的范式转变。通过在Telegram平台上构建，你可以在没有应用商店障碍的情况下触达9亿+用户，通过TON区块链处理支付，并在人们每天使用的即时通讯工具内提供丰富的体验。\u003C\u002Fp>\n","zh","b0000000-0000-0000-0000-000000000001",true,"2026-03-28T10:44:25.588467Z","使用Nuxt、Vue和TON区块链支付创建高性能Telegram Mini Apps。完整开发指南。","telegram mini apps 开发",null,"index, follow",[21,26,30,34],{"id":22,"name":23,"slug":24,"created_at":25},"c0000000-0000-0000-0000-000000000015","TON","ton","2026-03-28T10:44:21.513630Z",{"id":27,"name":28,"slug":29,"created_at":25},"c0000000-0000-0000-0000-000000000010","Telegram","telegram",{"id":31,"name":32,"slug":33,"created_at":25},"c0000000-0000-0000-0000-000000000002","TypeScript","typescript",{"id":35,"name":36,"slug":37,"created_at":25},"c0000000-0000-0000-0000-000000000003","Vue","vue",[39,45,52],{"id":40,"title":41,"slug":42,"excerpt":43,"locale":12,"category_name":28,"published_at":44},"d0000000-0000-0000-0000-000000000597","2026年在TON上构建：使用TON Pay SDK在Telegram Mini Apps中实现加密支付","2026-ton-telegram-mini-apps-ton-pay-sdk-jiami-zhifu","TON生态系统已增长至500M+月活Mini App用户、3600+应用和400M+钱包。本指南详细介绍如何将TON Pay SDK集成到Telegram Mini Apps中，从钱包认证到Jetton转账。","2026-03-28T10:44:44.516060Z",{"id":46,"title":47,"slug":48,"excerpt":49,"locale":12,"category_name":50,"published_at":51},"d0000000-0000-0000-0000-000000000550","我们如何使用Claude Code维护Nuxt 4 + Rust单体仓库","women-ruhe-shiyong-claude-code-nuxt-rust-danticangku","深入了解Open Soft如何使用Claude Code作为我们生产单体仓库的日常开发工具。多文件重构、迁移编写、测试生成、代码审查以及使用钩子和MCP服务器的自定义工具的真实工作流。","工程","2026-03-28T10:44:41.525979Z",{"id":53,"title":54,"slug":55,"excerpt":56,"locale":12,"category_name":50,"published_at":57},"d0000000-0000-0000-0000-000000000504","构建您的第一个 MCP 服务器：开发者实践指南","goujian-diyige-mcp-fuwuqi-kaifazhe-shijian-zhinan","一步一步教您用 TypeScript 和 Python 构建 Model Context Protocol (MCP) 服务器、连接 Claude Desktop 或 Cursor、并部署到生产环境的实践教程。","2026-03-28T10:44:38.523599Z",{"id":13,"name":59,"slug":60,"bio":61,"photo_url":18,"linkedin":18,"role":62,"created_at":63,"updated_at":63},"Open Soft Team","open-soft-team","The engineering team at Open Soft, building premium software solutions from Bali, Indonesia.","Engineering Team","2026-03-28T08:31:22.226811Z"]