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

riyad

辅助按钮​

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

检查支持​

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

Variable :

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

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   - X: S- B/ @( }0 a
2. 
   1 W% W. F- S# _" e- x2 z4 i
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   ) R2 N' w  D* ~: J1 A
2. 
   
3. secondaryButton.mount();
   ; c8 N) _0 V8 P! d: k2 f. f6 {
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   % ?( B) U; D& }  I0 N5 }3 b
2.   mountSecondaryButton,
   2 _4 ?; h; B; \/ ~. l. F
3.   isSecondaryButtonMounted,
   " B% X$ m. T8 E
4. } from '@telegram-apps/sdk';
   
5. 
   ) \5 ?  ]8 W1 v) L5 ^) \1 U' A
6. mountSecondaryButton();
   ! f' T( P6 q( [% A2 L+ \
7. isSecondaryButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   5 `1 t( S7 d) \0 T
2.   unmountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   / O2 Q* F) A2 W$ x0 w, x7 X+ E- A
5. 
   9 |2 U4 z% X) a/ G, O- }, ~
6. unmountSecondaryButton();
   % f4 Q/ b' t4 W1 c9 D- G, o3 t
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({
   7 Q4 U) ~" E& [* ?# I: j" r9 j1 a
2.   backgroundColor: '#000000',
   " D# g/ ?8 }) V7 n8 h  U* c
3.   hasShineEffect: true,
   2 Z& f. r3 q, Z: J+ ]
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   position: 'top',
   
8.   text: 'My text',
     U* `( H# K3 V3 A- E( V
9.   textColor: '#ffffff'
   
10. });
    ; X" _6 [1 j+ P. q
11. secondaryButton.backgroundColor(); // '#000000'
    
12. secondaryButton.hasShineEffect(); // true
    2 u* R9 R* q, [1 s6 t( V3 v
13. secondaryButton.isEnabled(); // true
    9 O/ a5 Y- Q. }3 G  b+ s+ ?) A- H
14. secondaryButton.isLoaderVisible(); // true
    * n8 C; s# K: a" [: v7 U
15. secondaryButton.isVisible(); // true
    & Z3 `, }/ z2 i# o; p* N
16. secondaryButton.position(); // 'top'
    
17. secondaryButton.text(); // 'My text'
    3 v* x$ _9 Q  L- u6 L9 `, n$ ?
18. secondaryButton.textColor(); // '#ffffff'
    ; p. y' p8 g5 ?' N: O' c( e' l
19. 
    & P! y# i! U9 s) T  U( P, Q
20. secondaryButton.state();
    
21. // {
    
22. //   backgroundColor: '#000000',
    + o4 r5 c; M+ N- U2 k
23. //   hasShineEffect: true,
    
24. //   isActive: true,
    ! D" D& u& ^4 {. [& Z  U" x
25. //   isLoaderVisible: true,
    
26. //   isVisible: true,
    
27. //   position: 'top',
    
28. //   text: 'My text',
    + {0 h2 p" Q0 G0 m6 V8 d% Q9 Y8 e! F9 d
29. //   textColor: '#ffffff'
    
30. // }

复制代码

Functions :

1. import {
   7 G" y( H4 I* K1 c
2.   setSecondaryButtonParams,
   9 P! v( u- o: i
3.   secondaryButtonBackgroundColor,
   
4.   secondaryButtonHasShineEffect,
   ' c  U) }+ C# P5 H2 f
5.   isSecondaryButtonVisible,
   
6.   isSecondaryButtonEnabled,
   
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   , i0 \) V) G9 H, n" }6 j
9.   secondaryButtonTextColor,
   
10.   secondaryButtonText,
    9 K/ j" f! R1 V9 ~, t
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    
13. 
    * U* [& E& s- \% x- y% I
14. setSecondaryButtonParams({
    ' [8 u& u: d5 [; X
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    
17.   isEnabled: true,
    
18.   isLoaderVisible: true,
    & Z; P* I+ m% A: S) g0 }0 B9 {
19.   isVisible: true,
    
20.   position: 'top',
    7 d& K2 d! m2 {6 l
21.   text: 'My text',
    ( Z+ e( W  f! c6 J9 n
22.   textColor: '#ffffff'
    
23. });
    
24. secondaryButtonBackgroundColor(); // '#000000'
    
25. secondaryButtonHasShineEffect(); // true
    ; q8 E0 n- o2 q0 f
26. isSecondaryButtonEnabled(); // true
    
27. isSecondaryButtonLoaderVisible(); // true
    8 ]  n" _4 l$ h; B- e
28. isSecondaryButtonVisible(); // true
    6 Q1 {. k6 E% D! C2 U
29. secondaryButtonPosition(); // 'top'
    4 z, T6 x# J3 S8 L
30. secondaryButtonText(); // 'My text'
    ; J! @3 s8 P, v! S
31. secondaryButtonTextColor(); // '#ffffff'
    
32. 
    
33. secondaryButtonState();
    % O$ G% F( q* A, L* G5 o' d$ a
34. // {
    ( h; n& [9 `! z- |. j
35. //   backgroundColor: '#000000',
    
36. //   hasShineEffect: true,
    
37. //   isActive: true,
    ) J5 q2 U! o! E" K2 T3 \5 ^; ]& A
38. //   isLoaderVisible: true,
    ) o- M; X, X; |9 n
39. //   isVisible: true,
    
40. //   position: 'top',
    , W1 q) ^, W7 s7 V- V' Q
41. //   text: 'My text',
    # ~! V; H$ ]' o8 j5 `# M4 y
42. //   textColor: '#ffffff'
    + u2 k& O$ g1 n! t$ A
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   
3. }
   4 @5 `5 ?0 P6 f
4. 
   ; \, D, v, j7 I
5. const offClick = secondaryButton.onClick(listener);
   
6. offClick();
   4 n5 Y3 e  T/ F* T- d3 i7 q( s- t
7. // or
   
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onSecondaryButtonClick,
   
3.   offSecondaryButtonClick,
   
4. } from '@telegram-apps/sdk';
   9 Y0 e2 T: \3 h* R/ Y+ I/ v* z
5. 
   : e7 ?" e- ], s4 T' U1 p8 v
6. function listener() {
   3 U* N  q" ^" H( d5 n5 {8 Q5 s4 v+ H
7.   console.log('Clicked!');
   
8. }
   . A5 u: j! \$ t
9. 
   
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    " m- U# B" E. z" ]  g
12. // or
    
13. onSecondaryButtonClick(listener);
    
14. offSecondaryButtonClick(listener);

复制代码

' ]7 `  I. @/ o6 v2 v! ^
- R% d* d2 z, T' O) q

农1885

回开源帖是美德！