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

riyad

迷你应用程序​

💠组件 负责管理 Telegram 迷你应用程序内的功能。

安装​

在使用该组件之前，必须使用 mount 方法安装该组件，该方法会更新 isMounted 信号属性。

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   : `$ \. G0 T9 w/ s5 T1 C
2. 
   
3. miniApp.mount();
     Z! v; [& X$ B4 N5 n- Y- e$ X4 {
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMiniApp();
   
4. isMiniAppMounted(); // true

复制代码

INFO

mount方法还会挂载 Theme Params作用域，以提取正确的 配置值。

要卸载组件，请使用 unmount 方法：

Variable :

1. miniApp.unmount();
   ' U! T% I7 Y; s
2. miniApp.isMounted(); // false

复制代码

Functions :

4 r0 s( L1 m) x

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   + h5 i. O" a7 c& M. V3 q& U
2. 
   5 `% `+ C: {6 s% X2 Q
3. unmountMiniApp();
   : X2 |. l0 m9 G( `  S( ?- b
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

要通过 CSS 变量公开 miniApp 属性，请使用 bindCssVars 方法。 调用该方法后，isCssVarsBound 信号属性会被更新。

此方法可选择接受一个函数，该函数可将 bgColor 和 headerColor 的值转换为 CSS 变量名。 默认情况下，数值会以前缀 --tg- 转换为 kebab 大小写。

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   & ]% G4 f6 f7 Y
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   8 z( W: Q* S8 y/ P# r/ J( Y: G
5. 
   " B$ @* D- _' d2 E
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   * c4 Y, V: \5 T
7. // Creates CSS variables like:
   % o- B; i6 U7 L! S5 M8 }$ D
8. // --my-prefix-bgColor: #aabbcc
   
9. // --my-prefix-headerColor: #aabbcc
   
10. 
    " C+ p1 q& P( I' H* F3 j
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   
2. 
   5 a$ P& A: e/ u6 N' E
3. bindMiniAppCssVars();
   
4. // Creates CSS variables like:
   # u; E& R/ ~& ^4 B+ h( J
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   
7. 
   ! {- J6 }+ [; m+ I8 p9 p" `5 g
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   ) y1 @) `( W5 a$ ~1 ?  Z
9. // Creates CSS variables like:
   
10. // --my-prefix-bgColor: #aabbcc
    2 J2 X9 T) j& B  h! d- P% j7 O
11. // --my-prefix-headerColor: #aabbcc
    - m9 W  k: c) ?9 k2 b2 T
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

要更改迷你应用程序的标题颜色，可使用方法 setHeaderColor。 反过来， 会更新 headerColor 信号属性值。

该方法接受 RGB 颜色值或以下字符串之一：bg_color、secondary_bg_color。

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   1 x6 r5 ^# C  n* }6 r' c3 o
2.   miniApp.setHeaderColor('bg_color');
   ) O9 q  q( P7 |# T/ p* M
3.   miniApp.headerColor(); // 'bg_color'
   
4. }
   
5. 
   
6. if (
   
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   $ j8 @! _# L. x  p  Z# n
9. ) {
   . G, ?) V: }. Y, N* M* [
10.   miniApp.setHeaderColor('#aabbcc');
    
11.   miniApp.headerColor(); // '#aabbcc'
    & |" ?! [% Q7 E% L+ a2 p
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   5 O& E3 `& a& V9 P  s9 I
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   ; \4 o, y; E! V
5. 
   4 Z- r, m( B, V% V9 B" v0 _/ J0 x
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   5 j4 c9 L! c4 M
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   : _! W  y, ]; @
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
13.   && setMiniAppHeaderColor.supports('color')
    ; c  Q6 R% m  ^
14. ) {
    9 T$ d: s3 ]5 m( r% J: C
15.   setMiniAppHeaderColor('#aabbcc');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    
17. }

复制代码

背景颜色​

要更新迷你应用程序的背景颜色，请使用 setBackgroundColor 方法。 调用 时，该方法会更新 headerColor 信号属性值。

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   
3.   miniApp.backgroundColor(); // '#ffffff'
   + R9 d6 s$ l7 P( @: b  {% }' l
4. }

复制代码

Functions :

1. import {
   
2.   setMiniAppBackgroundColor,
   * }7 }. C& b5 n) _6 W7 q
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. if (setMiniAppBackgroundColor.isSupported()) {
   
7.   setMiniAppBackgroundColor('#ffffff');
   
8.   miniAppBackgroundColor(); // '#ffffff'
   4 [: ^5 e+ S* L" m, l
9. }

复制代码

方法​close​

要关闭迷你应用程序，请使用 close 方法。

Variable :

1. miniApp.close();

复制代码

Functions :

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

复制代码

ready​

要发出 Mini App 已准备好显示的信号，请使用 ready 方法。 调用后， 加载占位符会被隐藏，而迷你应用程序则会显示出来。

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   ; p+ e6 [$ F$ e- v* `
2. 
   
3. miniAppReady();

复制代码

TIP

在加载基本界面元素后尽早调用该函数，以确保 顺畅的用户体验。

* V% C) R" V; l

沙盆

膜拜大神！！