如何在Telegram通过direct link 分享TMA应用？

如何在纯前端的项目之中实现TMA 链接的分享与跳转？

在web telegram之中，telegram TMA 作为一个iframe被嵌套在telegram的项目之中， 此时的telegram TMA 就是一个普通的web应用。在telegram的direct link到 我们web 应用之中，存在一个映射，这个映射由telegram bot的app来管理，通常一个app对应一个web服务。telegram direct link 与 web 服务的路由存在一个映射关系，而当路由的参数存在多个的时候，需要自动处理（自动映射）这个映射关系。

由telegram direct link 到目标web url之中，需要解决下面2个问题：

1. telegram direct link 拼接
2. 解析direct link，redirect 到 web 应用之中，此时的rediirect可以发生在前端以前端亦可以在后端。

官方文档之中，自定义的参数可以放入url query string的startapp字段之中。 telegram direct link格式如下： <!--StartFragment--> https://t.me/botusername/appname https://t.me/botusername/appname?startapp=command <!--EndFragment-->

如此，我们可以操作的 command 的值或者通过多个app来达成目标。 <br />

此处采用command复合方式，挺通过base64 encode的方式来处理问题1：

const link = `https://t.me/${TG_BOT_NAME}/${TG_BOT_APP}?startapp=${btoa(
      JSON.stringify({ projectUrl, campaignId, type: 'campaign' })
    )}`;

const shareLink =  `https://t.me/share/url?url=${encodeURIComponent(link)}`;

纯前端路由解析base64 decode与redirect

function safeParse(start_param) {
  try {
    const str = atob(start_param);
    return JSON.parse(str);
  } catch (error) {
    return {};
  }
}
useLayoutEffect(() => {
    if (webApp?.initDataUnsafe.start_param) {
      const { type, projectUrl, campaignId } = safeParse(
        webApp?.initDataUnsafe.start_param
      );
      if (type === 'campaign') {
        navigate(`/${projectUrl}/${campaignId}`);
      }
    }
}, []);

<br /> <br /> <br />

相关技术文档：

• what's telegram direct link
• what's is telegram mini apps
• telegram-apps-step-by-step-guide