Telegram 小程序 | TypeScript @telegram-apps/sdk-react @2.x

riyad

React.js 软件包提供开发人员在开发小型 应用程序时可能会用到的实用工具。
: D$ I+ f& w7 {4 G( f
$ X* ~! b/ Z1 t
0 _. J( ?1 j" b- g/ F8 N- E3 _TIP

由于本软件包提供了扩展 @telegram-apps/sdk 功能的实用程序函数 ，建议首先查看 SDK 软件包 文档。

( j% j: `1 N: W安装​

在继续之前，假定您已经安装了 react 软件包，因为它是 对等软件包的依赖项。

pnpm :

1. pnpm i @telegram-apps/sdk-react

复制代码

npm :

1. npm i @telegram-apps/sdk-react

复制代码

yarn :

1. yarn add @telegram-apps/sdk-react

复制代码

INFO

此软件包完全重新导出 @telegram-apps/sdk 软件包，因此 您无需单独安装。

使用方法​

下面是该软件包的一个简单使用示例：

index.tsx

1. import ReactDOM from 'react-dom/client';
   
2. import { init, backButton } from '@telegram-apps/sdk-react';
   
3. 
   # }3 }. N! a* j" a# r* i
4. import { BackButton } from './BackButton.js';
   ; y' ^# q, m/ E( |% Z
5. 
   5 }4 M! J# b9 m" G
6. // Initialize the package.
   ! U; X, C% C! Z/ i9 A  W
7. init();
   $ o; l" D( H  q/ Z( X5 J; c
8. 
   
9. // Mount the Back Button, so we will work with
   ' g* g7 m1 M! {/ {1 P0 F
10. // the actual component properties.
    
11. backButton.mount();
    4 H# h2 A0 l* h! F6 k" w
12. 
    / j2 T6 a* U* B
13. ReactDOM
    ! z, ]4 {- ~2 Y
14.   .createRoot(document.getElementById('root')!)
    ! i: v/ z7 |" T1 V) G5 h! e3 c2 b" C
15.   .render(<BackButton/>);

复制代码

Backbutton.ts

1. import { useEffect } from 'react';
   8 Z2 w  R, s* ?" f: a3 d' e
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   
3. 
   ! x7 R$ u2 y' h. A4 }: p
4. /**
   
5. * Component which controls the Back Button visibility.
   
6. */
   * I! \+ Y7 ~  e9 [1 S9 U7 s
7. export function BackButton() {
   2 t9 e1 ~' `) U4 [! }/ B1 R9 Y4 e0 a
8.   const isVisible = useSignal(backButton.isVisible);
   6 }/ ]) d" w- T) \" R6 O
9. 
   3 C5 m' F; j" D' Q' D7 y; Z
10.   useEffect(() => {
    
11.     console.log('The button is', isVisible ? 'visible' : 'invisible');
    
12.   }, [isVisible]);
    
13. 
    
14.   useEffect(() => {
    
15.     backButton.show();
    - n2 Q$ Y, f8 e
16.     return () => {
    
17.       backButton.hide();
    - _: K& [5 T& z) I
18.     };
    
19.   }, []);
    ' R0 Q6 r5 k( w2 u( l
20. 
    8 U* E* a/ U) @2 q0 q* K6 t
21.   return null;
    5 k, R5 Z% ]& {% r& u8 b
22. }

复制代码

Hooks​useSignal​

该辅助工具允许开发人员在 应用程序中使用我们的 signals。

它返回基础值，并在信号值发生变化时进行更新。

1. import { useEffect } from 'react';
   . b  d/ p2 U, i* I1 w# Z( A
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   1 }$ X! @2 b/ w
3. 
   
4. function Component() {
   
5.   const isVisible = useSignal(backButton.isVisible);
   . Y9 p9 v' z/ l
6. 
   
7.   useEffect(() => {
   " S! ^! G, [6 _2 u9 ^. D! V' p
8.     console.log('The button is', isVisible ? 'visible' : 'invisible');
   " g8 k2 ^& ^- V! f
9.   }, [isVisible]);
   . a. _8 B2 |4 A6 _% V" s7 y
10. 
    
11.   useEffect(() => {
    ( k) C/ {( y8 x: b7 f8 n! _
12.     backButton.show();
    , c4 m6 _" Z; w& x$ H0 K& H0 u
13.     return () => {
    & d" f- v( K$ Z- p" F  O& s
14.       backButton.hide();
    
15.     };
    
16.   }, []);
    
17. 
    8 Q# Z8 V+ V' L& A+ Y/ o0 D
18.   return null;
    
19. }

复制代码

useLaunchParams​

返回迷你应用程序启动参数的函数。

1. import { useLaunchParams } from '@telegram-apps/sdk-react';
   8 D* q6 Y: d) E" t% z
2. 
   0 n7 m; ^2 ]: J
3. function Component() {
   
4.   const lp = useLaunchParams();
   
5.   return <div>Start parameter: {lp.startParam}</div>;
   , d+ G& |4 u' @( a
6. }

复制代码