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

riyad

启动​

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

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

下面就是一个例子：

1. import { initBackButton, initMainButton } from '@telegram-apps/sdk';
   
2. 
   
3. const [mb, cleanupMb] = initMainButton();
   8 L: e- v& }& ^1 u. |- C( t: l, D: W
4. const [bb, cleanupBb] = initBackButton();
   6 R- _/ A$ P% E% [7 d& s
5. 
   2 h3 r0 h( S8 s: M/ b) o( t- E- U
6. // Clicking the MainButton hides it and shows the BackButton.
   7 D, ]0 z' D; R; V6 k
7. mb.on('click', () => {
   
8.   mb.hide();
   
9.   bb.show();
   6 x4 t* m; D0 x" S( d
10. });
    
11. 
    
12. // Clicking the BackButton hides it and shows the MainButton.
    0 h* R0 b: K% E8 v: m; B
13. bb.on('click', () => {
    ; |; Q  L: q$ H0 `
14.   mb.show();
    
15.   bb.hide();
    
16. });
    
17. 
    
18. // Configure the MainButton.
    / `* L& X+ @6 P/ q' q( F
19. mb
    # G$ L' E  R& F" f3 E% v
20.   .setBgColor('#ff0000')
    
21.   .setTextColor('#ffffff')
    
22.   .setText('Expand')
    ( t3 l( R8 Q' x2 F
23.   .enable()
    
24.   .show();
    * P! t3 {( c% ~: u3 u+ G
25. 
    ' p" e+ ?% U" J: d6 j
26. // When we don't need BackButton and MainButton anymore, we can
    0 o) R# e7 K! X+ _, @, ?+ b: _
27. // perform a cleanup. After calling a cleanup, the initialized
    5 D! ?% Z' W% t/ y- V5 g
28. // component will not receive any events.
    
29. cleanupMb();
    / j; {% q/ b* a- ^6 S; w1 l
30. cleanupBb();

复制代码

INFO

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

事件​

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

1. import { initBackButton } from '@telegram-apps/sdk';
   # d: e4 j% i+ m6 L( d" p
2. 
   + z$ U1 J* j# |# `1 t. c/ ]
3. const [bb] = initBackButton();
   
4. 
   
5. // Clicking the BackButton hides it and shows the MainButton.
   6 J( N+ B) o6 p/ _! L2 p! z5 W
6. bb.on('click', () => {
   8 @( {$ q" j; Q  C
7.   console.log('BackButton clicked.');
   
8. });

复制代码

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

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

1. import { BackButton } from '@telegram-apps/sdk';
   & T! U2 o  d/ P. N
2. 
   
3. let bb = new BackButton('6.0', ...);
   . L5 J/ }$ d, c: N/ Z
4. bb.supports('show'); // false
   + K7 J% g% h% o8 |) p/ q1 n  D* a. a
5. 
   " _& I. {4 S; U  y
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. 
   3 O  a& \/ u( O" {" K2 o# b% ]
6. utils = new Utils('6.10', ...);
   
7. utils.supportsParam('openLink.tryInstantView'); // true

复制代码

TIP

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