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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   " J+ u& v. U) v* r9 V: s
2. 
   
3. miniApp.mount();
   & T4 D: K6 x3 S7 C  p4 u
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMiniApp();
   ( g/ c7 P1 }* w  X5 m; D+ b
4. isMiniAppMounted(); // true

复制代码

INFO

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

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

Variable :

1. miniApp.unmount();
   ! f4 A7 _, V" ^: B) o, ~; ?
2. miniApp.isMounted(); // false

复制代码

Functions :

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   + Q6 J; k; i2 O( @  W; B$ O* U
2. 
   " c) Y3 c: G, ?% g% ?
3. unmountMiniApp();
   
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   5 H, F, F; X/ N+ ?. v6 i# s. ]" [
5. 
   
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   
8. // --my-prefix-bgColor: #aabbcc
   ! B& C& ]0 Q& x  i- B$ X% P( I
9. // --my-prefix-headerColor: #aabbcc
   + I) Q- O5 W4 X
10. 
    ; [' O" q! y7 @
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   9 \4 `) u* L% l+ t$ d
2. 
   3 @% f" n: J  T; N7 |0 E0 w) k9 l2 E
3. bindMiniAppCssVars();
   6 K3 z" {- w$ d5 D$ W1 x. T
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   
7. 
   
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   7 m  \9 z. u, W  W* g$ P6 b7 R
9. // Creates CSS variables like:
   
10. // --my-prefix-bgColor: #aabbcc
    
11. // --my-prefix-headerColor: #aabbcc
    
12. 
    ) E0 }* M  l, P, Y2 k+ B) {5 g2 ]
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   
2.   miniApp.setHeaderColor('bg_color');
   
3.   miniApp.headerColor(); // 'bg_color'
   + ~/ l5 q) }8 n: q
4. }
   3 E- }1 u* ~( G+ ~- g9 Q% n& t: i- R
5. 
   1 p6 `. U$ v+ w4 ]9 v: @  x& Z! U
6. if (
   
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   
9. ) {
   
10.   miniApp.setHeaderColor('#aabbcc');
    
11.   miniApp.headerColor(); // '#aabbcc'
    / z) T& L  ^/ f+ b& C) a
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   % y$ y; \  D7 [2 P; e' Y' Z
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    $ z5 n! I0 Y5 a$ x/ U
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    . y. m! N" Y/ r& R
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   ( Y; a4 v$ q# j" u4 V
2.   miniApp.setBackgroundColor('#ffffff');
   , e) A' g/ ~- |+ y+ E( `
3.   miniApp.backgroundColor(); // '#ffffff'
   8 `5 U  r9 e; I8 x% J* n" e
4. }

复制代码

Functions :

1. import {
   ! c" ]" c, V6 V3 M6 _5 {  w; n
2.   setMiniAppBackgroundColor,
   
3.   miniAppBackgroundColor,
   # e6 V& M7 u6 c8 I& I; K/ d1 i
4. } from '@telegram-apps/sdk';
   7 {; ?; l: `! Q3 _$ j
5. 
   , v5 I! L$ z7 d- ^) o2 d8 L/ }3 k
6. if (setMiniAppBackgroundColor.isSupported()) {
   . O7 y& M  M. H. a! a
7.   setMiniAppBackgroundColor('#ffffff');
   
8.   miniAppBackgroundColor(); // '#ffffff'
   
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';
   # N) N! V1 m+ q
2. 
   0 H/ s0 u5 W3 Z3 O, t; H# x
3. miniAppReady();

复制代码

TIP

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

沙盆

膜拜大神！！