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';
   
2. 
   1 }8 l8 l! ?! G+ e
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   + y1 m3 J; ^% t  `! X$ W: a
2. 
   
3. secondaryButton.mount();
     ]* K8 g& ~" h1 Y# z! V0 y: W
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSecondaryButton,
   " S9 s4 y" _9 l0 g3 _% w* _
3.   isSecondaryButtonMounted,
   * A8 p$ @8 N& G: v: w8 m( [7 S
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountSecondaryButton();
     g; k) Q8 M8 X) u% {
7. isSecondaryButtonMounted(); // true

复制代码

( o  m& m! L8 |3 ~/ X/ F

要卸载，请使用 unmount 方法：

Variable :

1. secondaryButton.unmount();
   . H1 y4 \8 p# K2 m# ?  _$ u# z, X+ \
2. secondaryButton.isMounted(); // false

复制代码

Functions :

1. import {
   $ _" F( r, F/ A
2.   unmountSecondaryButton,
   - X* N- ?) K  M8 C9 ~
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   & f; n& S+ O' X- K' c
5. 
   
6. unmountSecondaryButton();
   + @2 _7 C' g: ^+ h+ C* g" G
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({
   8 F5 B  @, Z; s4 Y8 O
2.   backgroundColor: '#000000',
   & \4 R8 D) x, P; |) W, X
3.   hasShineEffect: true,
   7 L2 A' Q8 d5 |- Z
4.   isEnabled: true,
   : ]' P: m& t  Q" P# A. @
5.   isLoaderVisible: true,
   & I/ D4 I4 w0 X( w/ ]( g2 S+ X
6.   isVisible: true,
   - l- b: R5 f$ P" ]1 D: O
7.   position: 'top',
   
8.   text: 'My text',
   
9.   textColor: '#ffffff'
   ) a% Y, |9 ^0 Z0 Q8 }
10. });
    : E5 E# c# }# U2 y; t& d, n
11. secondaryButton.backgroundColor(); // '#000000'
    , G1 n& f/ @0 D+ g: F: e
12. secondaryButton.hasShineEffect(); // true
    
13. secondaryButton.isEnabled(); // true
    " ]' ]0 f+ A& Q: T' E8 e
14. secondaryButton.isLoaderVisible(); // true
    
15. secondaryButton.isVisible(); // true
    
16. secondaryButton.position(); // 'top'
    
17. secondaryButton.text(); // 'My text'
    ! F7 |" n/ w2 `+ h6 k# q
18. secondaryButton.textColor(); // '#ffffff'
    5 q5 a' \$ H" Q/ e; I) f
19. 
    
20. secondaryButton.state();
    5 ~& x4 U. ~! Y6 s! v+ U2 S
21. // {
    
22. //   backgroundColor: '#000000',
    
23. //   hasShineEffect: true,
    
24. //   isActive: true,
    - j0 Y- D$ V* T* e: v# m' e7 ?1 y$ a
25. //   isLoaderVisible: true,
    2 u' m2 k* a/ {/ a! r( L
26. //   isVisible: true,
    ! m; p) V. e" w$ u5 g3 l1 L( f
27. //   position: 'top',
    - N7 K) v  r7 p% [! |5 r& M0 m. e( S7 {
28. //   text: 'My text',
    # a( o. ?" C: b( [
29. //   textColor: '#ffffff'
    / t9 u9 }+ r0 D2 ?9 P! Q7 d3 a
30. // }

复制代码

Functions :

1. import {
   
2.   setSecondaryButtonParams,
   
3.   secondaryButtonBackgroundColor,
   + `3 N3 b) N! |* e& q' T2 A3 X
4.   secondaryButtonHasShineEffect,
   5 Y8 O: t3 Q. O0 {3 J
5.   isSecondaryButtonVisible,
   6 K6 j8 E: a) i$ X2 B' d$ b# @
6.   isSecondaryButtonEnabled,
   % Z) Z" G- e! w& L
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   8 J' M- {+ N8 u( X
9.   secondaryButtonTextColor,
   ( i9 X7 S" J7 u8 B
10.   secondaryButtonText,
    3 @( j" ~: u/ b2 W8 ~, P
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    4 D% J4 u5 r8 V$ \- w
13. 
    
14. setSecondaryButtonParams({
    
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    
17.   isEnabled: true,
    ! p2 \/ {, C0 k1 y# w
18.   isLoaderVisible: true,
    
19.   isVisible: true,
    
20.   position: 'top',
    $ h# `, r6 F2 O
21.   text: 'My text',
    
22.   textColor: '#ffffff'
    # M  ?' B' z& q/ V
23. });
    
24. secondaryButtonBackgroundColor(); // '#000000'
    4 ]* n* [# D) }) M
25. secondaryButtonHasShineEffect(); // true
    
26. isSecondaryButtonEnabled(); // true
    
27. isSecondaryButtonLoaderVisible(); // true
    1 X# p7 U. ^2 t9 q( B. |# f6 S8 ]. n0 e
28. isSecondaryButtonVisible(); // true
    0 |, B5 r; ?" K
29. secondaryButtonPosition(); // 'top'
    
30. secondaryButtonText(); // 'My text'
    ! k' F# ~4 q4 M& _4 x% F. m! z
31. secondaryButtonTextColor(); // '#ffffff'
    5 |: \; P4 E1 K
32. 
    4 c5 G  C+ M0 ?$ k
33. secondaryButtonState();
    
34. // {
    
35. //   backgroundColor: '#000000',
    3 O: w# q& F7 v8 F! N) c
36. //   hasShineEffect: true,
    
37. //   isActive: true,
    
38. //   isLoaderVisible: true,
    5 Z4 W! @0 Z$ I- j: M- R
39. //   isVisible: true,
    
40. //   position: 'top',
    ( R2 h5 H6 u; m1 |$ H1 V0 K5 z
41. //   text: 'My text',
    
42. //   textColor: '#ffffff'
    + |( V' i4 L* f8 K; h
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   * @" X! Z) z7 a! c% R
2.   console.log('Clicked!');
   
3. }
   ( Q" g# ^* b) L6 {4 c* V
4. 
   9 U: d/ A1 O" W2 P0 `5 _! s0 S
5. const offClick = secondaryButton.onClick(listener);
   4 ?1 r& `1 D; o' ?  L
6. offClick();
   
7. // or
   8 E# D" F( X% |2 q) x8 k# t6 }
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   : l  u, H( `4 b/ y) A# M; ^
2.   onSecondaryButtonClick,
   1 c/ ~+ {1 b- f: u
3.   offSecondaryButtonClick,
   
4. } from '@telegram-apps/sdk';
   6 k' J" v! J6 z" v  a& }/ }
5. 
   * @' J2 l& o- k8 n
6. function listener() {
     @1 l+ q+ Y4 b& N, v
7.   console.log('Clicked!');
   
8. }
   
9. 
   * W7 H; z" f9 {
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    6 u0 x  b: _. q+ {1 s; D/ }7 E
12. // or
    7 T1 o& g( v& i! _9 O. X6 O- S+ w
13. onSecondaryButtonClick(listener);
    ( I8 \* L5 N) D" N& U) l2 `
14. offSecondaryButtonClick(listener);

复制代码

. V4 [  C: Q. Z4 e- [0 n

农1885

回开源帖是美德！