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

riyad

弹出窗口​

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

检查支持​

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

Variable :

1. import { popup } from '@telegram-apps/sdk';
   4 S! r7 ~" m% d- R: v. z  d( C
2. 
   
3. popup.isSupported(); // boolean

复制代码

Functions :

1. import { isPopupSupported } from '@telegram-apps/sdk';
   
2. 
   / l$ G# _. d! Q- X3 G, Q; Q
3. isPopupSupported(); // boolean

复制代码

打开​

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

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

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

Variable :

1. import { popup } from '@telegram-apps/sdk';
   
2. 
   
3. // popup.isOpened() -> false
   
4. const promise = popup.open({
   ( H0 l$ n; N+ O1 _, F
5.   title: 'Hello!',
   5 N! N7 Z& O# g8 H" N0 W
6.   message: 'Here is a test message.',
   / w) ]5 M# X5 M) `" T4 s
7.   buttons: [{ id: 'my-id', type: 'default', text: 'Default text' }],
   % q4 Z) P) L7 g: w% T
8. });
   
9. // popup.isOpened() -> true
   
10. const buttonId = await promise;
    ( n, A) O2 Q. O& r* f$ M
11. // popup.isOpened() -> false

复制代码

Functions :

1. import { openPopup, isPopupOpened } from '@telegram-apps/sdk';
   6 e+ M) L: J6 \, B8 `: @
2. 
   " T+ c8 Z# z. M3 r
3. // isPopupOpened() -> false
   0 A9 c' {3 E4 ^0 p
4. const promise = openPopup({
   
5.   title: 'Hello!',
   
6.   message: 'Here is a test message.',
   
7.   buttons: [{ id: 'my-id', type: 'default', text: 'Default text' }],
   
8. });
   
9. // isPopupOpened() -> true
   / R7 w0 f+ c! C" E4 |) T" a
10. const buttonId = await promise;
    6 S2 r, F+ G( m4 M) R2 {- V4 o
11. // isPopupOpened() -> false

复制代码

1 e& p8 I: E. S. k: j