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

riyad

辅助按钮​

负责 Telegram 迷你应用程序二级按钮的💠组件。

检查支持​

要检查当前 Telegram 迷你应用程序版本是否支持辅助按钮，请使用 isSupported 方法：

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   ) u6 t" e& ~" i, B8 z( S) T" L( s
2. 
   5 ~3 f; E5 M% }5 k
3. secondaryButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   4 y; W- D: L/ I/ ?  I8 x1 ^
2. 
   
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   9 K! }* r' e  P; X: `6 V
2. 
   1 o$ l: U" g+ M* O" m% f7 S7 q
3. secondaryButton.mount();
   * Y* b; W3 Z; l# i6 M' e  N4 l4 M
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   ' G+ F4 @2 F& E3 t$ F
2.   mountSecondaryButton,
   1 a& x2 I! q; ?  i$ B+ H# Z) Z
3.   isSecondaryButtonMounted,
   $ R' `7 k% d7 W
4. } from '@telegram-apps/sdk';
   . O& n+ h! V. o9 j$ {; a
5. 
     u. z0 m' m6 [  h9 `* d2 W
6. mountSecondaryButton();
   
7. isSecondaryButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   
2.   unmountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   . Y* |, C8 ~3 F1 {4 O
4. } from '@telegram-apps/sdk';
   
5. 
   1 f: `6 p% C" b7 q1 v! a
6. unmountSecondaryButton();
   ; b1 @4 r/ M2 M; n# W$ J9 G7 `) {3 n) B
7. isSecondaryButtonMounted(); // false

复制代码

WARNING

该组件的属性取决于 Mini App 和 Theme Params 组件的值。 具体来说，二级按钮使用 Mini App 的 bottomBarBgColor 和一些主题参数颜色。 在使用辅助按钮之前，请确保将这些组件安装到 。

设置属性​

要更新按钮属性，请使用 setParams 方法。 它接受一个带有可选 属性的对象，每个属性负责各自的按钮特性。

反过来，调用该方法会更新 ，如 backgroundColor, hasShineEffect, isVisible, isEnabled, isLoaderVisible, position, state, textColor 和 text。

Variable :

1. secondaryButton.setParams({
   * N$ _5 D* k# k& i; o
2.   backgroundColor: '#000000',
   6 L. B+ c$ j, t! q
3.   hasShineEffect: true,
   
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   $ \% k# x7 r+ F% g4 z( W: E! m* }
6.   isVisible: true,
   9 g2 A& w- P% h* ^+ r
7.   position: 'top',
   , G+ s/ j; N# I5 y- Y
8.   text: 'My text',
   ( R  z7 P7 a% c, c4 ~
9.   textColor: '#ffffff'
   
10. });
    
11. secondaryButton.backgroundColor(); // '#000000'
      W4 W$ ~! `8 ?4 C8 J& M
12. secondaryButton.hasShineEffect(); // true
    - ^& G: N3 _2 ]
13. secondaryButton.isEnabled(); // true
    
14. secondaryButton.isLoaderVisible(); // true
    
15. secondaryButton.isVisible(); // true
    6 M2 O* H: J' V( G' B+ Z
16. secondaryButton.position(); // 'top'
    6 Z# P5 @/ y' y; Y) J  N, b2 X
17. secondaryButton.text(); // 'My text'
    3 X+ p. j! d" N+ Y7 c, j7 t
18. secondaryButton.textColor(); // '#ffffff'
    & o- Z- Q9 |" ?
19. 
    
20. secondaryButton.state();
    
21. // {
    
22. //   backgroundColor: '#000000',
    
23. //   hasShineEffect: true,
    ; x+ a# q  E7 N- E
24. //   isActive: true,
    
25. //   isLoaderVisible: true,
    
26. //   isVisible: true,
    9 d7 j9 m$ ?+ v
27. //   position: 'top',
    , L) N' o7 e9 {1 _
28. //   text: 'My text',
    
29. //   textColor: '#ffffff'
    
30. // }

复制代码

Functions :

1. import {
   ( m2 i, l# J1 ^: Y4 J$ R
2.   setSecondaryButtonParams,
   ! W  v8 v$ E. P* {& @% F
3.   secondaryButtonBackgroundColor,
   
4.   secondaryButtonHasShineEffect,
   
5.   isSecondaryButtonVisible,
   0 i/ n8 p# h& Y/ n
6.   isSecondaryButtonEnabled,
   
7.   isSecondaryButtonLoaderVisible,
   5 P. C  t3 X! C4 J
8.   secondaryButtonState,
   ; N7 h" _! ?/ U
9.   secondaryButtonTextColor,
   
10.   secondaryButtonText,
    
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    4 {9 T! B3 ^; ]4 \( g
13. 
    
14. setSecondaryButtonParams({
    7 d6 O4 P% w4 i8 z0 g2 r4 g( ~- i
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    + F- G  {% E" _5 c- `  ]0 G
17.   isEnabled: true,
    5 c6 q7 h( j% X* W9 E8 R
18.   isLoaderVisible: true,
    
19.   isVisible: true,
    
20.   position: 'top',
    " n6 y+ Y  L+ S  m5 s. a' Q, G
21.   text: 'My text',
    
22.   textColor: '#ffffff'
    
23. });
    
24. secondaryButtonBackgroundColor(); // '#000000'
    : O( n5 u; W; J6 n
25. secondaryButtonHasShineEffect(); // true
    
26. isSecondaryButtonEnabled(); // true
    
27. isSecondaryButtonLoaderVisible(); // true
    
28. isSecondaryButtonVisible(); // true
    
29. secondaryButtonPosition(); // 'top'
    
30. secondaryButtonText(); // 'My text'
    $ H' ], t  t* M' A
31. secondaryButtonTextColor(); // '#ffffff'
    
32. 
    / f: N# O. a7 q0 s: A- X
33. secondaryButtonState();
    
34. // {
    
35. //   backgroundColor: '#000000',
    5 N( M" S& g, q9 g1 e
36. //   hasShineEffect: true,
    ! @" c2 E7 s# W6 F" S
37. //   isActive: true,
    3 S3 d9 M' a7 |- l5 G  u! S  U
38. //   isLoaderVisible: true,
    
39. //   isVisible: true,
    8 m) @, w$ X6 R$ S) {0 v$ z
40. //   position: 'top',
    0 G2 Y8 ^0 C% D* P8 E4 v' {
41. //   text: 'My text',
    ( u7 r% \4 a" k
42. //   textColor: '#ffffff'
    ; U/ t# v- h. `+ _2 r; F( k
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   
3. }
   , A  e0 E* g5 t  d0 K
4. 
   + D! N  E9 c0 Z, H4 p- e/ C
5. const offClick = secondaryButton.onClick(listener);
   $ u. Q/ Y& X1 i  ~/ }- S8 G3 g" ?. n
6. offClick();
   
7. // or
   
8. secondaryButton.onClick(listener);
     U( u8 ?+ F. ~" G- \% T' ]
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   ' c: r+ [& e" r" |- e
2.   onSecondaryButtonClick,
   
3.   offSecondaryButtonClick,
   0 f0 I. _% ^( L3 B; p
4. } from '@telegram-apps/sdk';
   
5. 
   
6. function listener() {
   " ?" J; J  {, V) [1 \
7.   console.log('Clicked!');
   ) O, L3 `( @; @, j0 Q
8. }
   , X4 F& W( ?: ]3 Q
9. 
   ; K: l) ]& z0 A9 E
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    
12. // or
    
13. onSecondaryButtonClick(listener);
    + O2 F1 {* _( W
14. offSecondaryButtonClick(listener);

复制代码

农1885

回开源帖是美德！