telegram 小程序开发之旅（一）

最新推荐文章于 2024-08-27 13:38:21 发布

无物勿吾

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量434

点赞数 5

分类专栏： Telegram 文章标签： javascript react.js Telegram

本文链接：https://blog.csdn.net/cmy120813/article/details/140625031

版权

Telegram 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Next.js App项目开发 telegram 小程序

将 telegram 的内置对象通过 context 挂载到全局，在 provides 下新建 TelegramProvider

"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
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;
  openTelegramLink: any;
}

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}>
      <Script
        src="https://telegram.org/js/telegram-web-app.js"
        strategy="beforeInteractive"
      />
      {children}
    </TelegramContext.Provider>
  );
};

export const useTelegram = () => useContext(TelegramContext);

将 TelegramProvider 挂载到 app 下的 layout.tsx 全局组件上

import type { Metadata } from "next"; 
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "@/providers/TelegramProvider"; 
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "xxx",
  description: "xxx website",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en"> 
      <body className={inter.className}>
        <Providers>
          <div className="max-width-[1920px] mx-auto w-full h-full">
            {children}
          </div>
        </Providers>
      </body> 
    </html>
  );
}

页面中使用

import { useTelegram } from "@/providers/TelegramProvider";
...
const Page = () => {
	const { webApp } = useTelegram();
	const initData = useMemo(() => webApp && webApp.initData, [webApp]);
	getUser(initData);
}

const getUser = (initData: string) => {
  return fetcher(null, `${getHost()}/user/info`, {
    method: "GET",
    headers: new Headers({
      "Content-Type": "application/json",
      Authorization: `tma ${initData}`,
    }),
  });
};