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

riyad

辅助按钮​

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

检查支持​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   
2. 
   4 T3 Y& p' `* z% F9 \& g! H
3. secondaryButton.isSupported(); // boolean

复制代码

Functions :

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

复制代码

安装​

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

Variable :

1. import { secondaryButton } from '@telegram-apps/sdk';
   # B0 [7 E; H5 z( d+ b% ~) v
2. 
   
3. secondaryButton.mount();
   9 z# E5 V- ^1 `" v6 H
4. secondaryButton.isMounted(); // true

复制代码

Functions :

1. import {
   
2.   mountSecondaryButton,
   ' C. v3 a" K- W  L( o; ^- v$ _7 U
3.   isSecondaryButtonMounted,
   5 `2 @: o3 D2 j, x- o
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountSecondaryButton();
   
7. isSecondaryButtonMounted(); // true

复制代码

, O2 v/ u* z, O2 J

要卸载，请使用 unmount 方法：

Variable :

1. secondaryButton.unmount();
   " |3 B9 {* u# J# S& P' ~
2. secondaryButton.isMounted(); // false

复制代码

Functions :

1. import {
   
2.   unmountSecondaryButton,
   
3.   isSecondaryButtonMounted,
   
4. } from '@telegram-apps/sdk';
   0 B- O  m6 }$ g# m
5. 
   
6. unmountSecondaryButton();
     l& ^$ w4 U, P' y; Q* [- F
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,
   - y, e, I. v$ Y: j3 \- m
4.   isEnabled: true,
   
5.   isLoaderVisible: true,
   & x* }/ |" z7 W! P3 ^* X' \" ]- a
6.   isVisible: true,
   & Y% i+ z/ f0 y7 p
7.   position: 'top',
   
8.   text: 'My text',
   
9.   textColor: '#ffffff'
   
10. });
    + L4 x3 |9 s' ^+ W8 T8 V( \
11. secondaryButton.backgroundColor(); // '#000000'
    
12. secondaryButton.hasShineEffect(); // true
    5 K* U/ P1 \! T
13. secondaryButton.isEnabled(); // true
    
14. secondaryButton.isLoaderVisible(); // true
    
15. secondaryButton.isVisible(); // true
    ! S: @7 ~; a( c+ V
16. secondaryButton.position(); // 'top'
    - o- K2 \  C  v, q( j8 h- k
17. secondaryButton.text(); // 'My text'
    
18. secondaryButton.textColor(); // '#ffffff'
    6 B1 O, `6 x4 N1 V, h* ]
19. 
    ( e+ ?5 |+ _5 d# g6 j  z1 Z* Y- F; g) B7 c
20. secondaryButton.state();
    
21. // {
    
22. //   backgroundColor: '#000000',
    
23. //   hasShineEffect: true,
    
24. //   isActive: true,
    
25. //   isLoaderVisible: true,
    
26. //   isVisible: true,
    
27. //   position: 'top',
    
28. //   text: 'My text',
    5 X) E0 ^. A/ D/ r
29. //   textColor: '#ffffff'
    + n3 P0 |/ a5 C
30. // }

复制代码

Functions :

1. import {
   % K7 Y. L. S9 d2 i5 f5 ?
2.   setSecondaryButtonParams,
   # [0 x, `& t. _% a5 I: B
3.   secondaryButtonBackgroundColor,
   2 ]% X- k" h& l2 M
4.   secondaryButtonHasShineEffect,
   9 M# `5 m  J6 b' C3 E
5.   isSecondaryButtonVisible,
   
6.   isSecondaryButtonEnabled,
   
7.   isSecondaryButtonLoaderVisible,
   3 a  b5 _# F4 D; s3 H' h  R3 x
8.   secondaryButtonState,
   & [! w' W( U3 w. C5 |( `, O
9.   secondaryButtonTextColor,
   / m, Z9 L0 D1 B0 V& [: l
10.   secondaryButtonText,
    0 n! z- p* V0 N3 {" @
11.   secondaryButtonPosition,
    
12. } from '@telegram-apps/sdk';
    $ B& w0 K2 [7 i. _; ^2 M* Y  L
13. 
    
14. setSecondaryButtonParams({
    
15.   backgroundColor: '#000000',
    
16.   hasShineEffect: true,
    & @- f) s+ L. y2 K  c; |
17.   isEnabled: true,
    9 X' N- m8 V3 j" v( ]+ A2 A3 ~7 _
18.   isLoaderVisible: true,
    
19.   isVisible: true,
    
20.   position: 'top',
    0 N  r: ^5 e2 d/ c
21.   text: 'My text',
    
22.   textColor: '#ffffff'
    # B' ?8 N7 y. H1 X2 G
23. });
    
24. secondaryButtonBackgroundColor(); // '#000000'
    
25. secondaryButtonHasShineEffect(); // true
    8 B! e4 c; h% T9 L) R3 o
26. isSecondaryButtonEnabled(); // true
    
27. isSecondaryButtonLoaderVisible(); // true
    6 Y1 w. G" X( |4 ^! Z# Q' G# Z
28. isSecondaryButtonVisible(); // true
    
29. secondaryButtonPosition(); // 'top'
    4 Z  @% `$ ^) u; [9 S" {
30. secondaryButtonText(); // 'My text'
    
31. secondaryButtonTextColor(); // '#ffffff'
    ( j, B/ B+ B6 s8 `. c7 n" E2 @
32. 
    & {- x* F: y5 A% r$ @
33. secondaryButtonState();
    
34. // {
    9 _: A3 F: R9 f- O2 l; {$ v, X% T
35. //   backgroundColor: '#000000',
    , f7 l$ y( o+ d8 g" X. @
36. //   hasShineEffect: true,
    ' T, T: G6 _' c8 c& G& V  a  I
37. //   isActive: true,
    ! h* Q2 K! q! b# e: \- g1 D
38. //   isLoaderVisible: true,
    ; T, h: n( W# L
39. //   isVisible: true,
    
40. //   position: 'top',
    
41. //   text: 'My text',
    
42. //   textColor: '#ffffff'
    6 L* P+ T! @/ c7 H
43. // }

复制代码

跟踪点击​

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

Variable :

1. function listener() {
   9 S8 m- \" m! y% `3 e
2.   console.log('Clicked!');
   
3. }
   
4. 
   
5. const offClick = secondaryButton.onClick(listener);
   
6. offClick();
   
7. // or
   
8. secondaryButton.onClick(listener);
   
9. secondaryButton.offClick(listener);

复制代码

Functions :

1. import {
   + b! {, N3 V% p1 c+ n
2.   onSecondaryButtonClick,
   5 O6 I) `- y: Z6 l* {/ U0 Z
3.   offSecondaryButtonClick,
   ( b5 j! {) i5 u- C" P* k  f; V
4. } from '@telegram-apps/sdk';
   6 l9 l9 q( ~8 N( l
5. 
   $ }. f- ?( [7 ?% [( r& X* q
6. function listener() {
   5 L( Z% B1 q8 H1 j% }
7.   console.log('Clicked!');
   
8. }
   ( P0 j' I6 t- r) E
9. 
   ; j( d- o" C1 o5 T# j' p
10. const offClick = onSecondaryButtonClick(listener);
    
11. offClick();
    
12. // or
    
13. onSecondaryButtonClick(listener);
    * C( M% U8 o+ [7 b9 H
14. offSecondaryButtonClick(listener);

复制代码

3 W8 U- C" j2 o) N, I

农1885

回开源帖是美德！