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

riyad

辅助按钮​

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

检查支持​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   / r( }0 l" W9 Q1 d7 a4 w7 |
2. 
   ' K  e. E. m' j0 O
3. secondaryButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   
2. 
   ) @! r4 p: S, ~6 k
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   
2. 
   9 y* Z- B/ M2 N8 d' q
3. secondaryButton.mount();
   
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   9 i5 Q+ Y" t, v" H3 V
2.   mountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   3 V3 e; B& m- b9 Y! _* q  X/ U
4. } from '@telegram-apps/sdk';
   + R, i! o/ j, E& L
5. 
   ) \2 B, w0 L. d* a+ X. R; S
6. mountSecondaryButton();
   
7. isSecondaryButtonMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   
2.   unmountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   2 Z" M' V  a9 ]5 Q* {8 W+ q* p
6. unmountSecondaryButton();
   ( O. i$ ?/ v$ o, l) W
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({
   + G6 ~9 i+ E6 f  v, c
2.   backgroundColor: '#000000',
   
3.   hasShineEffect: true,
   
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   
6.   isVisible: true,
   
7.   position: 'top',
   
8.   text: 'My text',
   5 B* S* }; `2 D( M3 U
9.   textColor: '#ffffff'
   
10. });
    
11. secondaryButton.backgroundColor(); // '#000000'
    $ O8 t* b+ m/ d$ t
12. secondaryButton.hasShineEffect(); // true
    0 o  [' F" h! e
13. secondaryButton.isEnabled(); // true
    
14. secondaryButton.isLoaderVisible(); // true
    5 P' Q" A+ f7 j) j+ B9 r+ {# p; ]
15. secondaryButton.isVisible(); // true
    " C; Z! k  c7 e6 Y4 k' H
16. secondaryButton.position(); // 'top'
    4 ?( \9 B# h4 Q% D( c0 D
17. secondaryButton.text(); // 'My text'
    + y" H* U- v# _6 m1 x. R  O+ S' A9 s0 @# C
18. secondaryButton.textColor(); // '#ffffff'
    4 C4 h& l0 K  u2 D# k% G
19. 
    
20. secondaryButton.state();
    5 C4 ]0 e! ]$ k6 ], `# j5 ^
21. // {
    3 C6 ]& @6 i; z# M* T/ S4 [. ?
22. //   backgroundColor: '#000000',
    
23. //   hasShineEffect: true,
    4 q) l/ l1 M2 F4 }5 Q5 y+ O
24. //   isActive: true,
    
25. //   isLoaderVisible: true,
    3 o  U6 W, x* o' B/ J2 d' N
26. //   isVisible: true,
    + n7 I+ ?3 c0 F  c: ~
27. //   position: 'top',
    
28. //   text: 'My text',
    
29. //   textColor: '#ffffff'
    * ^. d; ~+ g4 u. G& \0 M
30. // }

复制代码

Functions :

1. import {
   
2.   setSecondaryButtonParams,
   
3.   secondaryButtonBackgroundColor,
   
4.   secondaryButtonHasShineEffect,
   / V8 c. [6 I1 P  h
5.   isSecondaryButtonVisible,
   
6.   isSecondaryButtonEnabled,
   7 C5 Y, q( g5 N
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   4 U2 C6 U! }% R+ t" a! C. X. i+ v
9.   secondaryButtonTextColor,
   / P5 x& n5 T- _+ y9 t% G1 E
10.   secondaryButtonText,
    
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    
13. 
    
14. setSecondaryButtonParams({
    / L2 |; g6 [+ {: o4 Y( e) y
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    , u# n, ], L8 {9 L( o2 m! b+ q% l! ^
17.   isEnabled: true,
    
18.   isLoaderVisible: true,
    
19.   isVisible: true,
    4 f# n9 X: d7 l$ ?" e3 ~( O
20.   position: 'top',
    
21.   text: 'My text',
    
22.   textColor: '#ffffff'
    
23. });
    6 p8 M( v+ m3 }' I# u# x! j
24. secondaryButtonBackgroundColor(); // '#000000'
    
25. secondaryButtonHasShineEffect(); // true
    
26. isSecondaryButtonEnabled(); // true
    5 y7 ?" ]" Y4 A: c. V- x7 @
27. isSecondaryButtonLoaderVisible(); // true
    
28. isSecondaryButtonVisible(); // true
    & H  Z3 y+ c2 `# B5 O/ b0 l! r
29. secondaryButtonPosition(); // 'top'
    
30. secondaryButtonText(); // 'My text'
    
31. secondaryButtonTextColor(); // '#ffffff'
    ; K" r7 z. B9 }3 v$ i4 r
32. 
    
33. secondaryButtonState();
    
34. // {
    
35. //   backgroundColor: '#000000',
    
36. //   hasShineEffect: true,
    1 P" _4 R: I/ ?2 s# i0 P
37. //   isActive: true,
    
38. //   isLoaderVisible: true,
    / B, F+ z! b4 i! F: [6 p% Z: `$ T6 b: r
39. //   isVisible: true,
    + I  L- O7 [7 D/ r$ G
40. //   position: 'top',
    ' L8 ^! \. s" f# Z
41. //   text: 'My text',
    / q; V! j; }/ w6 j: W8 K  X, J9 H
42. //   textColor: '#ffffff'
    
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   ! C4 A* O% O+ L- }" W2 Y
3. }
   
4. 
   
5. const offClick = secondaryButton.onClick(listener);
   
6. offClick();
   3 o5 W9 }7 H9 \1 ~- i5 u
7. // or
   
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   % a, P  h; i3 k; V2 D2 R0 Z
2.   onSecondaryButtonClick,
   ) r+ O# r- ]7 w! V* a3 u0 A
3.   offSecondaryButtonClick,
   
4. } from '@telegram-apps/sdk';
   % \& N0 t( i" g
5. 
   
6. function listener() {
   4 W8 ?8 F! J1 x1 Q
7.   console.log('Clicked!');
   2 Z3 L" h: R( y: B$ Y
8. }
   
9. 
   ' `% t5 _. Y( f2 W
10. const offClick = onSecondaryButtonClick(listener);
    4 q& o7 z! W/ Z7 D! F1 [( v+ Y
11. offClick();
    
12. // or
    - C- l" q8 ~* v! w' I2 T* ]/ r
13. onSecondaryButtonClick(listener);
    " x4 w3 o4 o* [! }: S
14. offSecondaryButtonClick(listener);

复制代码

农1885

回开源帖是美德！