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

riyad

React.js 软件包提供开发人员在开发小型 应用程序时可能会用到的实用工具。


: m+ [0 f" P  _. m2 O6 L3 ]TIP

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

8 ^3 ~8 s3 ]0 v6 r( \9 o! C安装​

在继续之前，假定您已经安装了 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. 
   
4. import { BackButton } from './BackButton.js';
   
5. 
   $ Z6 I' g$ U/ z% j- F
6. // Initialize the package.
   # ?  h1 C. a3 {* k
7. init();
   
8. 
   
9. // Mount the Back Button, so we will work with
   8 S  _- a; s1 }' w$ Y
10. // the actual component properties.
    0 _) `' u* m: h0 `* ~: ^
11. backButton.mount();
    ( b/ m+ @5 _7 x5 ^- h
12. 
    
13. ReactDOM
    
14.   .createRoot(document.getElementById('root')!)
    ) M) c* _$ h1 ^0 ^* T! [8 p
15.   .render(<BackButton/>);

复制代码

Backbutton.ts

1. import { useEffect } from 'react';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   
3. 
   
4. /**
   
5. * Component which controls the Back Button visibility.
   
6. */
   
7. export function BackButton() {
   
8.   const isVisible = useSignal(backButton.isVisible);
   
9. 
   ! a* H) Y; E6 k5 m
10.   useEffect(() => {
    4 Y/ W7 m% Y: ]8 ^  z
11.     console.log('The button is', isVisible ? 'visible' : 'invisible');
    4 ?8 [& _7 g" P" V6 R
12.   }, [isVisible]);
    
13. 
    * u* W) J5 @! B: `% Y0 L
14.   useEffect(() => {
    
15.     backButton.show();
    
16.     return () => {
    3 t4 j$ i7 I7 b2 @! l7 s3 W" s
17.       backButton.hide();
    & Q$ [( F5 t3 o# {4 _" C( f6 Q$ M
18.     };
    ) B5 c2 o) H$ }& h, B9 F: A; m
19.   }, []);
    
20. 
    
21.   return null;
    , s  n6 g7 B4 Q4 g
22. }

复制代码

Hooks​useSignal​

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

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

1. import { useEffect } from 'react';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-react';
   
3. 
   9 V9 C/ b4 |; [. A
4. function Component() {
   ' ?/ B# ], i* C) L
5.   const isVisible = useSignal(backButton.isVisible);
   : h9 X1 v' T# B8 W
6. 
   , t' x+ {' \' G9 |2 i
7.   useEffect(() => {
   : B* M' _! a, N9 R7 K: `
8.     console.log('The button is', isVisible ? 'visible' : 'invisible');
   9 p( ~7 U& B3 n1 d6 M1 W4 [
9.   }, [isVisible]);
   
10. 
    
11.   useEffect(() => {
    
12.     backButton.show();
    6 T5 Y% E' m, h! O% J; m
13.     return () => {
    - P* N3 R: |0 [& X6 ?
14.       backButton.hide();
    
15.     };
    ' y. P1 M" ~, V) {
16.   }, []);
    
17. 
    # _3 q7 L" ~. q# K) D+ ~; e
18.   return null;
    ' h" ^2 p! `- O
19. }

复制代码

useLaunchParams​

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

1. import { useLaunchParams } from '@telegram-apps/sdk-react';
   
2. 
   
3. function Component() {
   
4.   const lp = useLaunchParams();
   ' u! ^+ [; }5 j1 C% j
5.   return <div>Start parameter: {lp.startParam}</div>;
   # Y5 s+ ?% }) @6 r/ V
6. }

复制代码

6 |4 k6 M/ U' I* H