Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 组件 | 返回按钮

riyad

返回按钮​

💠组件 负责 Telegram Mini Apps 返回按钮 。

检查支持​

要检查当前 Telegram 小应用程序版本是否支持返回按钮，请使用 isSupported 方法：

Variable :

1. import { backButton } from '@telegram-apps/sdk';
   
2. 
   8 t5 }) S2 d- M  j+ ]# ]; _/ n
3. backButton.isSupported(); // boolean

复制代码

Functions :

1. import { isBackButtonSupported } from '@telegram-apps/sdk';
   ) U* P' w1 p2 C4 c( ^+ e# C
2. 
   1 R3 B0 l& \/ n6 I5 @4 l+ e: i
3. isBackButtonSupported(); // boolean

复制代码

安装​

在使用该组件之前，有必要将其安装到配置正确的 属性中。 为此，请使用 mount 方法。 它将更新 isMounted 信号属性。

Variable :

1. import { backButton } from '@telegram-apps/sdk';
   * n' a/ P' z& |4 u3 u
2. 
   
3. backButton.mount();
   % d# y& n6 E+ _  y$ D  b
4. backButton.isMounted(); // true

复制代码

Functions :

1. import { mountBackButton, isBackButtonMounted } from '@telegram-apps/sdk';
   2 e' U% r- W$ P' I( h, H. P
2. 
   
3. mountBackButton();
   
4. isBackButtonMounted(); // true

复制代码

: ?8 f  \" i2 A0 [

要卸载，请使用 unmount 方法：

Variable :

1. backButton.unmount();
   
2. backButton.isMounted(); // false

复制代码

Functions :

1. import { unmountBackButton, isBackButtonMounted } from '@telegram-apps/sdk';
   
2. 
   9 K( R3 L% O! {3 w" q2 B* P( C& O# Y
3. unmountBackButton();
   
4. isBackButtonMounted(); // false

复制代码

展示与隐藏​

要更改按钮的可见性，请使用 hide() 和 show() 方法。 这些方法会更新 isVisible 信号属性值。

Variable :

1. backButton.show();
   
2. backButton.isVisible(); // true
   
3. 
   
4. backButton.hide();
   
5. backButton.isVisible(); // false

复制代码

Functions :

1. import {
   
2.   showBackButton,
   . L8 q" @% j/ L
3.   hideBackButton,
   
4.   isBackButtonVisible,
   
5. } from '@telegram-apps/sdk';
   4 h, ?4 {6 Q6 `
6. 
   0 a/ G- D% }2 u" C/ [0 }( a9 N
7. showBackButton();
   
8. isBackButtonVisible(); // true
   
9. 
   
10. hideBackButton();
    % b6 h' c2 O! o# B% B8 M- z
11. isBackButtonVisible(); // false

复制代码

跟踪点击​

要添加按钮点击监听器，请使用 onClick 方法。 它返回一个函数，用于移除绑定的 监听器。 或者，您也可以使用 offClick 方法。

Variable :

1. function listener() {
   0 Q9 f6 j# L$ ?6 y  M
2.   console.log('Clicked!');
   
3. }
   
4. 
   2 i9 y& P6 y7 j* ~- L: E7 r
5. const offClick = backButton.onClick(listener);
   
6. offClick();
   ' ^) C& R+ t5 m" Z. W, ^+ @
7. // or
     d; Z5 i8 ^7 L* u
8. backButton.onClick(listener);
   8 w0 p/ d7 u* k2 b/ t
9. backButton.offClick(listener);

复制代码

Functions :

1. import { onBackButtonClick, offBackButtonClick } from '@telegram-apps/sdk';
   1 G6 G+ ~3 [' O! v7 K) B- P
2. 
   
3. function listener() {
   
4.   console.log('Clicked!');
   3 g8 C# C1 C: G
5. }
   
6. 
   ( n2 r- f1 {( P, ^
7. const offClick = onBackButtonClick(listener);
   + b. N, _1 J" M  y! K/ }
8. offClick();
   : i4 G9 {. `+ v; G( J2 J) C* I2 I4 x
9. // or
   + m) \+ |; i' u4 h9 T( W
10. onBackButtonClick(listener);
    0 W7 b0 f% R' p$ E
11. offBackButtonClick(listener);

复制代码