如何在纯前端的项目之中实现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个问题:
官方文档之中,自定义的参数可以放入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 />
相关技术文档:
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!