Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 组件 | 弹出窗口

riyad

弹出窗口​

负责 Telegram 迷你应用程序 popup 的💠组件。

检查支持​

要检查当前 Telegram 小应用程序版本是否支持弹出窗口，需要使用 isSupported 方法：

Variable :

1. import { popup } from '@telegram-apps/sdk';
   ! }+ h. R% |" B$ e& p' c
2. 
   & J1 `' ~1 W7 j9 f. x
3. popup.isSupported(); // boolean

复制代码

Functions :

1. import { isPopupSupported } from '@telegram-apps/sdk';
   
2. 
   
3. isPopupSupported(); // boolean

复制代码

打开​

要打开弹出窗口，需要调用 open 方法，指定弹出窗口的属性：标题、 信息和最多 3 个按钮的列表。

该方法返回一个承诺，点击按钮的标识符将实现该承诺。 在 的情况下，如果用户没有点击任何按钮，该方法将返回 null。

调用该方法会更新 isOpened 信号属性值。

Variable :

1. import { popup } from '@telegram-apps/sdk';
   
2. 
   % \+ R1 t1 F* w. X) d
3. // popup.isOpened() -> false
   
4. const promise = popup.open({
   
5.   title: 'Hello!',
   
6.   message: 'Here is a test message.',
   
7.   buttons: [{ id: 'my-id', type: 'default', text: 'Default text' }],
   
8. });
   . F" H5 X5 h# O1 g3 [& |
9. // popup.isOpened() -> true
   
10. const buttonId = await promise;
    / C4 }  m: Z/ i7 b
11. // popup.isOpened() -> false

复制代码

Functions :

1. import { openPopup, isPopupOpened } from '@telegram-apps/sdk';
   
2. 
   
3. // isPopupOpened() -> false
   , B( m% e& t. K% C9 t* E4 B
4. const promise = openPopup({
   5 J0 Q  s9 X0 n  Y) w- z% o
5.   title: 'Hello!',
   
6.   message: 'Here is a test message.',
   / o2 A1 B( |( d7 h8 t
7.   buttons: [{ id: 'my-id', type: 'default', text: 'Default text' }],
   
8. });
   
9. // isPopupOpened() -> true
   3 f% H( S2 _4 w
10. const buttonId = await promise;
    
11. // isPopupOpened() -> false

复制代码

8 _1 a3 M# e/ m( |( Y3 w* z3 L" q* q
$ U  }: M  r8 a' x& H* b