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

riyad

辅助按钮​

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

检查支持​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   / A% `5 y7 @4 O6 _- T: d
2. 
   
3. secondaryButton.isSupported(); // boolean

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   
2. 
   / P' u8 C( a) W
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   
2. 
   
3. secondaryButton.mount();
   + [9 x9 \0 i4 ]5 J
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   ' {( ^+ q! _$ {2 C1 J0 v
2.   mountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountSecondaryButton();
   7 r! Y6 X8 Y# ]& a: f6 O
7. isSecondaryButtonMounted(); // true

复制代码

1 }- J# f7 [5 n/ K- }" s

要卸载，请使用 unmount 方法：

Variable :

1. secondaryButton.unmount();
   - f+ s2 o$ W$ e# j5 z
2. secondaryButton.isMounted(); // false

复制代码

Functions :

1. import {
   + |+ a& a) I! a1 a8 v7 S
2.   unmountSecondaryButton,
   0 S5 O# w' i5 n
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   + T; `# w7 ^. h9 K
5. 
   & n! d+ J" P$ @' j
6. unmountSecondaryButton();
   
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({
   
2.   backgroundColor: '#000000',
     c* p" n! A/ j8 x( F! ~
3.   hasShineEffect: true,
   
4.   isEnabled: true,
     f- }  m3 L+ b8 T. f- w
5.   isLoaderVisible: true,
   7 V' i/ S9 L4 H6 w  z* c
6.   isVisible: true,
   & Z/ ^* d: ?6 P0 T" C
7.   position: 'top',
   ' n  z4 I4 z- w5 p8 @3 h; ~+ |
8.   text: 'My text',
   
9.   textColor: '#ffffff'
   4 X' A% R* T# G) d& J( r9 M
10. });
    
11. secondaryButton.backgroundColor(); // '#000000'
    
12. secondaryButton.hasShineEffect(); // true
    
13. secondaryButton.isEnabled(); // true
    
14. secondaryButton.isLoaderVisible(); // true
    
15. secondaryButton.isVisible(); // true
    0 u/ m0 T$ ^8 b
16. secondaryButton.position(); // 'top'
      G4 e& V, f5 L8 Q# B" p
17. secondaryButton.text(); // 'My text'
    : A0 ?. p: m7 R
18. secondaryButton.textColor(); // '#ffffff'
    1 v; |& E! {1 g" a
19. 
    
20. secondaryButton.state();
    9 p6 c3 \2 u" ]
21. // {
    , p/ X4 o0 I5 ^* u: Q  [
22. //   backgroundColor: '#000000',
    
23. //   hasShineEffect: true,
    , H; F. }. l. k7 n/ @0 g! G
24. //   isActive: true,
    
25. //   isLoaderVisible: true,
    0 _6 I8 O8 Z7 Q: B& J: P  U
26. //   isVisible: true,
    
27. //   position: 'top',
    ) M/ b" x% I" C* E
28. //   text: 'My text',
    
29. //   textColor: '#ffffff'
    
30. // }

复制代码

Functions :

1. import {
     r0 ~# U: [% z5 s
2.   setSecondaryButtonParams,
   ) Z- l  Z. Y# U: w6 g% t! W/ i
3.   secondaryButtonBackgroundColor,
   + p" b1 H. N$ s' z! b7 O
4.   secondaryButtonHasShineEffect,
   
5.   isSecondaryButtonVisible,
   , T3 ~) X. X) U# A1 h4 Y
6.   isSecondaryButtonEnabled,
   , k- m) J! i+ D1 {' ~
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   1 o5 ~5 e$ @' o6 F/ E) O
9.   secondaryButtonTextColor,
   7 ]' P8 C6 U1 G0 u$ L
10.   secondaryButtonText,
    
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    / E2 G) d/ q, e" H, k* s
13. 
    9 C9 m* V! n2 |$ U. @
14. setSecondaryButtonParams({
    . t$ R- r9 X, f! B7 }' d
15.   backgroundColor: '#000000',
    ( e# n# ^+ A9 h6 r+ M: F1 ]
16.   hasShineEffect: true,
    3 z# S4 Z7 B* b; t  F' x: P$ ?/ R
17.   isEnabled: true,
    
18.   isLoaderVisible: true,
    , W& g8 ~2 n3 ^) ~% h1 K
19.   isVisible: true,
    + f$ l! u( y" l6 D* |/ p, L
20.   position: 'top',
    
21.   text: 'My text',
    6 ^0 q7 N: [- O3 t* {3 |
22.   textColor: '#ffffff'
    . I- }+ u0 Y) z' O* b; B
23. });
    7 u  k! ?# W' X8 |; L
24. secondaryButtonBackgroundColor(); // '#000000'
    8 w5 K# |9 i! E5 u: ^
25. secondaryButtonHasShineEffect(); // true
    ( M1 F* H! z! T% }/ {6 Z
26. isSecondaryButtonEnabled(); // true
    * L: x5 G+ e* J" I& |) a
27. isSecondaryButtonLoaderVisible(); // true
    & F+ S; I, A0 |" o0 n0 L; Y( ^
28. isSecondaryButtonVisible(); // true
    
29. secondaryButtonPosition(); // 'top'
    
30. secondaryButtonText(); // 'My text'
    
31. secondaryButtonTextColor(); // '#ffffff'
      Q, f% b) X9 e; P
32. 
    
33. secondaryButtonState();
    
34. // {
    : Z' t1 D. @$ o6 a9 _, b; e6 x
35. //   backgroundColor: '#000000',
    . a  X0 q' {3 O5 I0 {( Z6 _) f
36. //   hasShineEffect: true,
    5 w. P/ t  u* h( ?2 r3 O
37. //   isActive: true,
    
38. //   isLoaderVisible: true,
    8 }2 e, [' l! p6 r
39. //   isVisible: true,
    
40. //   position: 'top',
    
41. //   text: 'My text',
    
42. //   textColor: '#ffffff'
    
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   & `5 j, v$ O( i! X0 H+ Z
3. }
   
4. 
   
5. const offClick = secondaryButton.onClick(listener);
   
6. offClick();
   
7. // or
   
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onSecondaryButtonClick,
   
3.   offSecondaryButtonClick,
   
4. } from '@telegram-apps/sdk';
   5 ^& k! m3 {3 u
5. 
   6 x- s9 i0 {7 r" H" W, S
6. function listener() {
   7 H9 o5 o- d' p( v' u, }, ]
7.   console.log('Clicked!');
   
8. }
   3 u' E  s1 U1 v1 l5 ]3 g
9. 
   
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
      t, g5 u  Q; y; \# `1 y
12. // or
    
13. onSecondaryButtonClick(listener);
    
14. offSecondaryButtonClick(listener);

复制代码

# v8 d2 q+ H. O; d7 g
  a0 p5 H- l6 k& Q' y

农1885

回开源帖是美德！