Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 组件

riyad

启动​

根据该软件包的设计，开发人员可以完全控制其生命周期，包括初始化过程。 这意味着没有预初始化的全局组件 供开发人员使用。 他们必须自己创建组件。

为简化开发人员的工作流程，该软件包包含一些特殊函数，其前缀为 init 字符串。 这些函数会返回一个元组，其中包含初始化组件 的一个实例和一个清理函数，清理函数会移除该 init 函数产生的所有副作用。

下面就是一个例子：

1. import { initBackButton, initMainButton } from '@telegram-apps/sdk';
   
2. 
   9 D7 _& [% \, ?4 z3 S* z: K' K. Z
3. const [mb, cleanupMb] = initMainButton();
   # S! d) H9 l, L% x. c
4. const [bb, cleanupBb] = initBackButton();
   5 Q8 ?! E3 d/ L( x7 a
5. 
   # ?" n' k. D3 q- y3 w  J
6. // Clicking the MainButton hides it and shows the BackButton.
   6 ^3 H1 a- Z$ l( k
7. mb.on('click', () => {
   
8.   mb.hide();
   - d1 I$ r2 W( |
9.   bb.show();
   7 u; H$ Q8 }& c) X0 {# s5 A
10. });
    
11. 
    
12. // Clicking the BackButton hides it and shows the MainButton.
    4 ~8 i, ]! f( {8 F
13. bb.on('click', () => {
    
14.   mb.show();
    6 W) \$ P. z2 @9 [6 A: x
15.   bb.hide();
    
16. });
    
17. 
    8 I2 W2 d+ h' I* y
18. // Configure the MainButton.
    0 o9 f7 U: o. N4 K/ t) b  e" k* g1 ?: O
19. mb
    
20.   .setBgColor('#ff0000')
    # L7 ]6 @# [9 M& ]
21.   .setTextColor('#ffffff')
    
22.   .setText('Expand')
    
23.   .enable()
    
24.   .show();
    * Z! v4 C0 J6 |+ l) n$ H- f  m
25. 
    
26. // When we don't need BackButton and MainButton anymore, we can
    ! u1 y  e6 P0 J) Z9 z# t  ~5 R
27. // perform a cleanup. After calling a cleanup, the initialized
    5 y$ ?. w; N7 O3 W( a
28. // component will not receive any events.
    
29. cleanupMb();
    ; a+ C" k: I$ O, V' l
30. cleanupBb();

复制代码

INFO

请注意，只要本地没有 相关信息，就不能同步实例化某些组件。 使用每个组件的文档，了解 组件如何初始化。

事件​

组件实例通过 on 和 off 方法使用常见的事件监听方式。 下面是使用 BackButton 组件的示例

1. import { initBackButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [bb] = initBackButton();
   + ]: L' e9 v. V$ W9 ~3 I  ^( ~
4. 
   
5. // Clicking the BackButton hides it and shows the MainButton.
   ; ~7 }  |% a; O$ v6 O
6. bb.on('click', () => {
   
7.   console.log('BackButton clicked.');
     F* O4 M2 }) X9 }
8. });

复制代码

您可以在组件文档中找到支持的事件列表。
方法支持​

几乎每个组件都能检查当前 Mini Apps 版本是否支持其方法。 要检查是否支持某些方法，开发人员应使用组件 instance supports() 函数。 例如

1. import { BackButton } from '@telegram-apps/sdk';
   2 Y1 L" O( X* Q, y5 M- ~
2. 
   
3. let bb = new BackButton('6.0', ...);
   
4. bb.supports('show'); // false
   
5. 
   # ]6 t" j: I  s7 u3 K* I; y; [& H
6. bb = new BackButton('6.3', ...);
   
7. bb.supports('hide'); // true

复制代码

某些组件支持附加方法 supportsParam ，可检查 方法参数是否受支持：

1. import { Utils } from '@telegram-apps/sdk';
   
2. 
   
3. let utils = new Utils('6.0', ...);
   
4. utils.supportsParam('openLink.tryInstantView'); // false
   
5. 
   
6. utils = new Utils('6.10', ...);
   ; r( C( C5 V* x7 N. f* q
7. utils.supportsParam('openLink.tryInstantView'); // true

复制代码

TIP

建议在调用某些组件方法之前使用该功能，只要 能确保开发人员使用该功能。 各组件支持的方法列表见 各组件文档。

: ^  B/ Z! q0 i) i5 [8 Z- d