使用 React 和 Next.js 开发 Telegram Web 应用
Telegram 最近的一次更新终于将 Web 应用的全部功能集成到了 Telegram Messenger 中。这意味着从现在开始，任何开发者都可以将大型多人在线游戏、票务平台或其他任何应用嵌入到 Telegram 内置浏览器中，并使其可供 7 亿用户使用。没有任何限制，它就像一个内置于 Messenger 中的完整浏览器。
Telegram Web App API 提供用户信息、主题方案、触觉反馈（仅限移动/笔记本电脑设备）以及视频和音频流访问权限。您可以测试此机器人的所有功能，并查看哪些信息会提供给 Web 应用 -- https://t.me/asmico_attach_bot
要使用 React 和 Next.js 构建自己的 Telegram Web 应用，您需要从应用中获取信息。我想分享一些代码片段和技巧，您可以复制粘贴并用于快速入门。
首先，让我们添加数据类型，以便了解您可以访问哪些数据：
// types.ts
export interface ITelegramUser {
id: number;
first_name: string;
last_name: string;
username: string;
language_code: string;
}
export interface IWebApp {
initData: string;
initDataUnsafe: {
query_id: string;
user: ITelegramUser;
auth_date: string;
hash: string;
};
version: string;
platform: string;
colorScheme: string;
themeParams: {
link_color: string;
button_color: string;
button_text_color: string;
secondary_bg_color: string;
hint_color: string;
bg_color: string;
text_color: string;
};
isExpanded: boolean;
viewportHeight: number;
viewportStableHeight: number;
isClosingConfirmationEnabled: boolean;
headerColor: string;
backgroundColor: string;
BackButton: {
isVisible: boolean;
};
MainButton: {
text: string;
color: string;
textColor: string;
isVisible: boolean;
isProgressVisible: boolean;
isActive: boolean;
};
HapticFeedback: any;
}
接下来，我们来为 Telegram Web 应用数据创建上下文提供程序和自定义钩子：
// TelegramProvider
import Script from "next/script";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
import type { ITelegramUser, IWebApp } from "types";
export interface ITelegramContext {
webApp?: IWebApp;
user?: ITelegramUser;
}
export const TelegramContext = createContext<ITelegramContext>({});
export const TelegramProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [webApp, setWebApp] = useState<IWebApp | null>(null);
useEffect(() => {
const app = (window as any).Telegram?.WebApp;
if (app) {
app.ready();
setWebApp(app);
}
}, []);
const value = useMemo(() => {
return webApp
? {
webApp,
unsafeData: webApp.initDataUnsafe,
user: webApp.initDataUnsafe.user,
}
: {};
}, [webApp]);
return (
<TelegramContext.Provider value={value}>
{/* Make sure to include script tag with "beforeInteractive" strategy to pre-load web-app script */}
<Script
src="https://telegram.org/js/telegram-web-app.js"
strategy="beforeInteractive"
/> {children}
</TelegramContext.Provider>
);
};
export const useTelegram = () => useContext(TelegramContext);
最后，让我们将其用于我们的测试 WebApp 页面：
// pages/webapp.tsx
import { TelegramProvider, useTelegram } from "lib/TelegramProvider";
const WebApp = () => {
const { user, webApp } = useTelegram();
console.log(user);
return (
<div>
{user ? (
<div>
<h1>Welcome {user?.username}</h1>
User data:
<pre>{JSON.stringify(user, null, 2)}</pre>
Eniter Web App data:
<pre>{JSON.stringify(webApp, null, 2)}</pre>
</div>
) : (
<div>Make sure web app is opened from telegram client</div>
)}
</div>
);
};
const WithTelegramProvider = () => {
return (
<TelegramProvider>
<WebApp />
</TelegramProvider>
);
};
或者通过在顶层提供 Telegram 上下文，使其在全球范围内可用。_app.tsx
// _app.tsx
import { TelegramProvider } from "lib/TelegramProvider";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<TelegramProvider>
<Component {...pageProps} />
</TelegramProvider>
);
}
export default MyApp;
就是这样！祝你编程愉快 🔥
访问 Telegram 官网了解更多关于 Telegram Web Apps 的信息：https://core.telegram.org/bots/webapps