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

riyad

启动​

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

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

下面就是一个例子：

1. import { initBackButton, initMainButton } from '@telegram-apps/sdk';
   2 ~" M1 A+ N/ k3 Q
2. 
   " P) u' X$ t# c. H6 x
3. const [mb, cleanupMb] = initMainButton();
   
4. const [bb, cleanupBb] = initBackButton();
   ) a; I7 h/ D2 t8 u& Q8 S) D
5. 
   
6. // Clicking the MainButton hides it and shows the BackButton.
   4 b  Z8 ?- n9 i9 b1 h; N: _; y
7. mb.on('click', () => {
   
8.   mb.hide();
   
9.   bb.show();
   1 I% {7 W5 T7 ]# y5 G5 x
10. });
    
11. 
    ' A$ m6 z9 t' ^9 O3 F
12. // Clicking the BackButton hides it and shows the MainButton.
    
13. bb.on('click', () => {
    
14.   mb.show();
    5 v. t0 L$ `/ a7 G1 q
15.   bb.hide();
    
16. });
    
17. 
    
18. // Configure the MainButton.
    
19. mb
    ! p+ S# J% \+ _2 i2 F: N+ E) E
20.   .setBgColor('#ff0000')
    
21.   .setTextColor('#ffffff')
    " K7 e- W# ~% T; D$ a
22.   .setText('Expand')
    
23.   .enable()
    
24.   .show();
    
25. 
    
26. // When we don't need BackButton and MainButton anymore, we can
    
27. // perform a cleanup. After calling a cleanup, the initialized
    
28. // component will not receive any events.
    * I; w3 C! n! @; U3 f
29. cleanupMb();
    
30. cleanupBb();

复制代码

INFO

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

事件​

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

1. import { initBackButton } from '@telegram-apps/sdk';
   
2. 
   6 n8 k7 `$ n, ~0 L8 E
3. const [bb] = initBackButton();
   & f. n5 p) @: |6 ]
4. 
   / @5 V; y; ]* i, y
5. // Clicking the BackButton hides it and shows the MainButton.
   
6. bb.on('click', () => {
   
7.   console.log('BackButton clicked.');
   
8. });

复制代码

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

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

1. import { BackButton } from '@telegram-apps/sdk';
   ! _2 r- r: e7 L( J/ M0 L! q
2. 
   
3. let bb = new BackButton('6.0', ...);
   5 @) n4 i. `' p8 J. H5 N" W9 P
4. bb.supports('show'); // false
   
5. 
   , f6 d# T. c# G# Y6 b* C
6. bb = new BackButton('6.3', ...);
   
7. bb.supports('hide'); // true

复制代码

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

1. import { Utils } from '@telegram-apps/sdk';
   " S& z! ?) D) A+ J. x/ H$ m" ^- i- t
2. 
   " |6 c( o2 I& e: U
3. let utils = new Utils('6.0', ...);
   / ~; l& K4 v0 b  F# p; J# F
4. utils.supportsParam('openLink.tryInstantView'); // false
   9 y) y& ?9 K2 q% l4 b; u8 V" m
5. 
   
6. utils = new Utils('6.10', ...);
   
7. utils.supportsParam('openLink.tryInstantView'); // true

复制代码

TIP

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

7 S: [1 h2 ]; A- S8 h2 f
& v; R1 m! N( x: W2 W- t