如何在Telegram通过direct link 分享TMA应用？
- lake01
- 更新于 2024-04-22 23:21
- 阅读 170
如何在纯前端的项目之中实现TMA链接的分享与跳转？在webtelegram之中，telegramTMA作为一个iframe被嵌套在telegram的项目之中，此时的telegramTMA就是一个普通的web应用。在telegram的directlink到我们web应用之中，存在
如何在纯前端的项目之中实现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个问题：
- telegram direct link 拼接
- 解析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 />
相关技术文档：
