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

riyad

启动​

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

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

下面就是一个例子：

1. import { initBackButton, initMainButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [mb, cleanupMb] = initMainButton();
   ) O: I1 @4 j% F) s! T. l7 A( J
4. const [bb, cleanupBb] = initBackButton();
   + c+ `4 H) H7 U& R5 ]4 |
5. 
   6 ^8 r5 w+ A, J6 g
6. // Clicking the MainButton hides it and shows the BackButton.
   4 y- |8 u7 _  a) P& n5 j
7. mb.on('click', () => {
   
8.   mb.hide();
   9 s! u# P2 P6 T3 r
9.   bb.show();
   , C, d; Z5 O) ?) d
10. });
    7 W9 O# J- V4 W0 a$ R9 L" D
11. 
    4 S  f: @0 a% G' A9 M
12. // Clicking the BackButton hides it and shows the MainButton.
    - I  l. N# X( [9 C- T, a9 ~! P+ i1 C
13. bb.on('click', () => {
    5 b4 D, B& Q) ~
14.   mb.show();
    
15.   bb.hide();
    7 S0 F2 V# `6 {
16. });
    + f( F4 J9 N! d* Y8 e+ E& b# u
17. 
    / T' z9 I6 n& ]1 N6 j& V
18. // Configure the MainButton.
    
19. mb
    
20.   .setBgColor('#ff0000')
    
21.   .setTextColor('#ffffff')
    9 x1 ^( v% y& T* p' H  j" ?! P
22.   .setText('Expand')
    
23.   .enable()
    
24.   .show();
    , m5 b+ [# B) Z! A6 ^6 m$ z" C
25. 
    % ^$ T  z! E0 @" G
26. // When we don't need BackButton and MainButton anymore, we can
    
27. // perform a cleanup. After calling a cleanup, the initialized
    - w7 i! u# ]/ ?& N. J
28. // component will not receive any events.
    ; k/ j9 L% G2 q5 a& W% ^/ W# u5 m
29. cleanupMb();
    
30. cleanupBb();

复制代码

INFO

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

事件​

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

1. import { initBackButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [bb] = initBackButton();
   
4. 
   2 m- u2 N/ ?# J- V  W& P
5. // Clicking the BackButton hides it and shows the MainButton.
   , L1 t7 i* L# X
6. bb.on('click', () => {
   
7.   console.log('BackButton clicked.');
   
8. });

复制代码

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

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

1. import { BackButton } from '@telegram-apps/sdk';
   ' ]( C+ W0 L& b. l# I
2. 
   # P9 u9 G" h8 S
3. let bb = new BackButton('6.0', ...);
   
4. bb.supports('show'); // false
   % _4 o( \" x/ |" D
5. 
   ( D$ t, G  D- M4 p  V+ R/ Z6 p
6. bb = new BackButton('6.3', ...);
   ! R" K( G3 S$ x! y- n
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 D, j4 T5 \% j! Y# H1 l/ M
5. 
   0 G1 [5 H1 X1 B  c# k2 w2 T
6. utils = new Utils('6.10', ...);
   
7. utils.supportsParam('openLink.tryInstantView'); // true

复制代码

TIP

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

0 W$ @$ p3 V' \8 u0 e  i