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

riyad

辅助按钮​

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

检查支持​

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

Variable :

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

复制代码

Functions :

1. import { isSecondaryButtonSupported } from '@telegram-apps/sdk';
   
2. 
   : ?& Q. r1 Z0 `1 z( v( I
3. isSecondaryButtonSupported(); // boolean

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   . N2 X0 a2 c0 x$ L3 P, r
2. 
   5 k2 A& Q6 U  p' T
3. secondaryButton.mount();
   1 R4 k$ s, s& ^- C% ~. n
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSecondaryButton,
   ( k% ?% f4 C9 \
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   + ^, j, F7 Y2 b
6. mountSecondaryButton();
     e2 E( m& U2 C9 R; V
7. isSecondaryButtonMounted(); // true

复制代码

7 V4 W8 b7 U9 N) g2 l

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   + h  _* n9 q- ?  s' G* d
2.   unmountSecondaryButton,
   & W4 m. {/ V- W$ F$ a7 m
3.   isSecondaryButtonMounted,
   8 ^$ c) j. ]8 }8 @! F
4. } from '@telegram-apps/sdk';
   3 a& w( {" D- W' ^( z, e+ e' b6 A0 h
5. 
   6 I7 S0 B& g: Y9 u3 J" F0 j3 @' h
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',
   
3.   hasShineEffect: true,
   " A2 k$ N& i% p8 y+ {1 N' Y
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   9 B; t  f2 g) }, f
6.   isVisible: true,
   # V: N$ B* I0 V$ u
7.   position: 'top',
   
8.   text: 'My text',
   
9.   textColor: '#ffffff'
   . V6 x9 `2 o& [- T
10. });
    3 {4 h" O4 g( I* l' X& F
11. secondaryButton.backgroundColor(); // '#000000'
    
12. secondaryButton.hasShineEffect(); // true
    
13. secondaryButton.isEnabled(); // true
    7 t) L- g6 S4 e# h! E
14. secondaryButton.isLoaderVisible(); // true
    $ U8 h+ [% \2 s+ a% c
15. secondaryButton.isVisible(); // true
    
16. secondaryButton.position(); // 'top'
    
17. secondaryButton.text(); // 'My text'
    0 e# r; M& ], u' P5 c" Y% {2 n1 J
18. secondaryButton.textColor(); // '#ffffff'
    ' @$ _6 u# R& G% z5 D4 ~7 m6 d
19. 
    : d  u1 m( f. Q
20. secondaryButton.state();
    
21. // {
    # v7 ^- m; j; X% H4 Z6 q; t9 p% t' h4 [* m* j
22. //   backgroundColor: '#000000',
    8 v; D0 Y4 x/ X1 e9 L+ E
23. //   hasShineEffect: true,
    ) p* R2 B/ }. @/ u3 \+ z
24. //   isActive: true,
    8 y# Q" c+ P7 G
25. //   isLoaderVisible: true,
    
26. //   isVisible: true,
    - `1 J8 N, H' B! v9 E; F' M
27. //   position: 'top',
    
28. //   text: 'My text',
    
29. //   textColor: '#ffffff'
    ) K# r2 N- @; q0 y2 y
30. // }

复制代码

Functions :

1. import {
     i! A3 X: N. m, [4 `
2.   setSecondaryButtonParams,
   
3.   secondaryButtonBackgroundColor,
   ! R5 ^5 B, M+ F% V
4.   secondaryButtonHasShineEffect,
   ( f  a2 ?0 s+ W- j* i1 [  k; X
5.   isSecondaryButtonVisible,
   
6.   isSecondaryButtonEnabled,
   
7.   isSecondaryButtonLoaderVisible,
   
8.   secondaryButtonState,
   
9.   secondaryButtonTextColor,
   8 |) |. z: f  N. s' ^1 n
10.   secondaryButtonText,
    9 l  A# W2 G5 ]1 m) ]  j3 F
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    ( _9 J' M  U  h2 }
13. 
    
14. setSecondaryButtonParams({
    : X, @. o" H4 u, o3 d) Y9 I
15.   backgroundColor: '#000000',
    % K$ O4 ~: W1 b/ M0 T7 j  e
16.   hasShineEffect: true,
    
17.   isEnabled: true,
    ; d" j" g( G3 c1 @6 p
18.   isLoaderVisible: true,
    
19.   isVisible: true,
    
20.   position: 'top',
    " U. @) x8 @5 b# M: L. m9 Z+ e) D
21.   text: 'My text',
    
22.   textColor: '#ffffff'
    / [! g$ X( K  h  P; R+ H+ r
23. });
    
24. secondaryButtonBackgroundColor(); // '#000000'
    
25. secondaryButtonHasShineEffect(); // true
    / Q9 o* G, a+ G" w+ k  l
26. isSecondaryButtonEnabled(); // true
    
27. isSecondaryButtonLoaderVisible(); // true
    
28. isSecondaryButtonVisible(); // true
    ! Z* ]8 [& U8 ?2 P. \# l
29. secondaryButtonPosition(); // 'top'
    2 V% W0 g) Q1 x) L7 O' t
30. secondaryButtonText(); // 'My text'
    
31. secondaryButtonTextColor(); // '#ffffff'
    
32. 
    
33. secondaryButtonState();
    6 J# @1 U$ e$ v( H" \3 `: [- L& s% x
34. // {
    
35. //   backgroundColor: '#000000',
    / r) x0 d2 H3 c9 F& p; a
36. //   hasShineEffect: true,
    . T+ l8 y( M, q
37. //   isActive: true,
    7 h1 O" W, p9 d9 v- _( j
38. //   isLoaderVisible: true,
    & d, J6 m. q6 W- d7 h4 I
39. //   isVisible: true,
    9 j# M8 m% Z$ H$ E8 X* \: @
40. //   position: 'top',
    1 k* M( r8 k& A6 |2 X) V
41. //   text: 'My text',
    
42. //   textColor: '#ffffff'
    
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   
2.   console.log('Clicked!');
   ' k& u  J7 k3 p+ b
3. }
   . r% }2 d9 l. d0 a- d
4. 
     _8 _/ b' `$ t4 @1 s$ E1 k1 c
5. const offClick = secondaryButton.onClick(listener);
   
6. offClick();
   ! g7 ^1 O' D% }" R) l5 v# K0 W9 t# I
7. // or
   
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   
2.   onSecondaryButtonClick,
   
3.   offSecondaryButtonClick,
   8 S2 v' o- e: H* S  U+ P) b
4. } from '@telegram-apps/sdk';
   5 X% n0 I. l3 L! Y: h
5. 
   
6. function listener() {
   4 ^& u3 B; ?- u1 H; J0 F% j5 R3 E! [
7.   console.log('Clicked!');
   , {( X& k. H0 e& [4 A$ w* P# F
8. }
   9 [# u) F, p" y+ M% \5 u
9. 
   
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    # h( j3 y/ v( l2 }4 @& b5 I+ o) o  w
12. // or
    ( S$ M7 a9 S1 V  A
13. onSecondaryButtonClick(listener);
    
14. offSecondaryButtonClick(listener);

复制代码

农1885

回开源帖是美德！