{"content":{"title":"如何在Telegram通过direct link 分享TMA应用？","body":"如何在纯前端的项目之中实现TMA 链接的分享与跳转？\r\n\r\n在web telegram之中，telegram TMA 作为一个iframe被嵌套在telegram的项目之中， 此时的telegram TMA 就是一个普通的web应用。在telegram的direct link到 我们web 应用之中，存在一个映射，这个映射由telegram bot的app来管理，通常一个app对应一个web服务。telegram direct link 与 web 服务的路由存在一个映射关系，而当路由的参数存在多个的时候，需要自动处理（自动映射）这个映射关系。\r\n\r\n\r\n由telegram direct link 到目标web url之中，需要解决下面2个问题：\r\n1. telegram direct link 拼接\r\n2. 解析direct link，redirect 到 web 应用之中，此时的rediirect可以发生在前端以前端亦可以在后端。\r\n\r\n官方文档之中，自定义的参数可以放入url query string的startapp字段之中。\r\ntelegram direct link格式如下：\r\n<!--StartFragment-->\r\n`https://t.me/botusername/appname`\r\n`https://t.me/botusername/appname?startapp=command`\r\n<!--EndFragment-->\r\n\r\n如此，我们可以操作的 `command` 的值或者通过多个app来达成目标。\r\n<br />\r\n \r\n 此处采用command复合方式，挺通过base64 encode的方式来处理问题1：\r\n \r\n```js\r\nconst link = `https://t.me/${TG_BOT_NAME}/${TG_BOT_APP}?startapp=${btoa(\r\n      JSON.stringify({ projectUrl, campaignId, type: 'campaign' })\r\n    )}`;\r\n\r\nconst shareLink =  `https://t.me/share/url?url=${encodeURIComponent(link)}`;\r\n```\r\n\r\n纯前端路由解析base64 decode与redirect\r\n```js\r\n\r\nfunction safeParse(start_param) {\r\n  try {\r\n    const str = atob(start_param);\r\n    return JSON.parse(str);\r\n  } catch (error) {\r\n    return {};\r\n  }\r\n}\r\nuseLayoutEffect(() => {\r\n    if (webApp?.initDataUnsafe.start_param) {\r\n      const { type, projectUrl, campaignId } = safeParse(\r\n        webApp?.initDataUnsafe.start_param\r\n      );\r\n      if (type === 'campaign') {\r\n        navigate(`/${projectUrl}/${campaignId}`);\r\n      }\r\n    }\r\n}, []);\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n<br />\r\n<br />\r\n<br />\r\n\r\n\r\n\r\n相关技术文档：\r\n- [what's telegram direct link](https://core.telegram.org/bots/webapps#direct-link-mini-apps)\r\n- [what's is telegram mini apps](https://docs.ton.org/develop/dapps/telegram-apps/)\r\n- [telegram-apps-step-by-step-guide](https://docs.ton.org/develop/dapps/telegram-apps/step-by-step-guide)"},"author":{"user":"https://learnblockchain.cn/people/14603","address":"0x624f313007ca80eae6cd1536362721f479558e3f"},"history":null,"timestamp":1713799309,"version":1}