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

riyad

启动​

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

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

下面就是一个例子：

1. import { initBackButton, initMainButton } from '@telegram-apps/sdk';
   " h  s) O4 z$ D- [& P
2. 
   
3. const [mb, cleanupMb] = initMainButton();
   + q% ], P+ X+ i# G6 _- O
4. const [bb, cleanupBb] = initBackButton();
   - ^. E# I* J  c9 @( L- Y: i
5. 
   
6. // Clicking the MainButton hides it and shows the BackButton.
   
7. mb.on('click', () => {
   : k% [& @2 }. `1 Q0 H+ {
8.   mb.hide();
   
9.   bb.show();
   ' Q6 b" w% r! C! w
10. });
    ! |" ^- W4 U3 n. e! h0 z& R3 Q
11. 
    2 T' \* Z. H& k7 S
12. // Clicking the BackButton hides it and shows the MainButton.
    
13. bb.on('click', () => {
    
14.   mb.show();
    & R' H3 e- M8 S! s+ l( S
15.   bb.hide();
    
16. });
    
17. 
    
18. // Configure the MainButton.
    : }1 |1 l+ u) l. y+ ^9 O
19. mb
    
20.   .setBgColor('#ff0000')
    " `* l' T1 Y6 X  a% D) F
21.   .setTextColor('#ffffff')
    
22.   .setText('Expand')
    
23.   .enable()
    6 ^( A  n% R/ }0 x
24.   .show();
    
25. 
    # o+ A2 z& `7 U% K& v3 Y
26. // When we don't need BackButton and MainButton anymore, we can
    ; y  H& I" X/ |# [( M
27. // perform a cleanup. After calling a cleanup, the initialized
    
28. // component will not receive any events.
    
29. cleanupMb();
    
30. cleanupBb();

复制代码

INFO

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

事件​

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

1. import { initBackButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [bb] = initBackButton();
   
4. 
   ! Y! g3 g' h3 j, t8 o5 L+ F
5. // Clicking the BackButton hides it and shows the MainButton.
   
6. bb.on('click', () => {
   ! {  p2 k7 {8 k7 t0 d" A
7.   console.log('BackButton clicked.');
   
8. });

复制代码

您可以在组件文档中找到支持的事件列表。
) q1 U( t+ G* n- C' Q2 R; _方法支持​

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

1. import { BackButton } from '@telegram-apps/sdk';
   3 B* I9 W- E# d6 A9 `9 l; M
2. 
   0 J4 n  J, `3 j; ], n
3. let bb = new BackButton('6.0', ...);
   1 M& Z; I6 h/ u7 u. R
4. bb.supports('show'); // false
   % N0 `: }1 g9 q) f3 R+ a; \
5. 
   
6. bb = new BackButton('6.3', ...);
   
7. bb.supports('hide'); // true

复制代码

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

1. import { Utils } from '@telegram-apps/sdk';
     U- D+ a0 c% L. w
2. 
   
3. let utils = new Utils('6.0', ...);
   8 U7 x: P& t( X* g8 V+ k
4. utils.supportsParam('openLink.tryInstantView'); // false
   1 j4 E8 a" p  Y4 U) C% Q
5. 
   8 z' B6 ~& d% a4 n  Y
6. utils = new Utils('6.10', ...);
   9 Y2 I3 J8 x# x9 v2 e4 U6 ^
7. utils.supportsParam('openLink.tryInstantView'); // true

复制代码

TIP

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