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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
     O3 g/ F+ Y/ K" p. }- M% W
2. 
   
3. miniApp.mount();
   
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   . P, X, {  U5 g9 S
3. mountMiniApp();
   . s# J2 g& F& }7 _* h; _
4. isMiniAppMounted(); // true

复制代码

INFO

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

- T$ `- Y% T" l2 d% a4 m6 g/ m7 M0 B

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

Variable :

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

复制代码

Functions :
) c/ E! `9 W( B" J$ E
* D. i4 n; u3 W! G+ @6 W) o& L

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

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   4 f9 L% v0 }0 |5 U( S$ o7 S
2. // Creates CSS variables like:
   
3. // --tg-bg-color: #aabbcc
   9 _; e: A' X3 m3 Y
4. // --tg-header-color: #aabbcc
   
5. 
   
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   4 x! {9 G, Q% A. c2 D# F6 K
7. // Creates CSS variables like:
   ) j* t, T/ D4 k
8. // --my-prefix-bgColor: #aabbcc
   
9. // --my-prefix-headerColor: #aabbcc
   $ R9 `; |2 k' v9 F1 H! ]
10. 
    
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   
2. 
   . B7 m! x1 l: J# }. R; y, e
3. bindMiniAppCssVars();
   
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   9 T5 q) Q2 |) U# G+ m" K% u
6. // --tg-header-color: #aabbcc
   
7. 
   1 Q# ^) E% Z: N1 ?; @; w# p. K
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   9 W* V7 K+ _8 n; Z
9. // Creates CSS variables like:
   * k4 y6 L9 v2 `* E- R
10. // --my-prefix-bgColor: #aabbcc
    . g! M& N* l3 S, S
11. // --my-prefix-headerColor: #aabbcc
    
12. 
    2 ?0 R. i1 V- x9 o/ q  k: V
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   ) D9 }* W% t5 ?6 D  i2 R) C( ~
2.   miniApp.setHeaderColor('bg_color');
   
3.   miniApp.headerColor(); // 'bg_color'
   
4. }
   / _' Q' k9 i7 w- F. d% M1 T: I
5. 
   
6. if (
   + t' O+ ]* c$ ]6 Q8 N3 }5 H
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   + b! I+ C+ |* p7 R+ F9 E
9. ) {
   7 f/ h1 L( P9 Z) L7 G; [+ L* `
10.   miniApp.setHeaderColor('#aabbcc');
    + I  }; z# Q* J9 l. g+ p2 K) _# y
11.   miniApp.headerColor(); // '#aabbcc'
    ( U0 w3 q" a+ p" L  d  D0 g! t2 k
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   % m* c8 S9 q/ s4 T
4. } from '@telegram-apps/sdk';
     r0 ~# d$ D8 R! p* ?  J
5. 
   . I5 @4 B$ a- j5 {$ i4 z# d3 T
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   ! ^7 e2 j! {5 G& F+ H" u$ E
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    ) q4 Q4 j' C* L. h) d: ~  p' ]/ m+ j
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    % H2 n& R/ d( p1 Y. h6 X& s$ p
16.   miniAppHeaderColor(); // '#aabbcc'
    $ p3 ^* N5 \* R2 s
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   $ u$ K9 I) g* |+ K9 ?' L
2.   miniApp.setBackgroundColor('#ffffff');
   
3.   miniApp.backgroundColor(); // '#ffffff'
   
4. }

复制代码

Functions :

1. import {
   . u% P$ H: O7 Q( s
2.   setMiniAppBackgroundColor,
   / @' b0 s9 |) B( C6 a0 e! j. {7 Y. b' i
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   0 C! ]- [4 ^9 `
6. if (setMiniAppBackgroundColor.isSupported()) {
   ! u( v7 ^' J. e4 P" L6 T- M
7.   setMiniAppBackgroundColor('#ffffff');
   
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   
2. 
   8 x; ^  g$ {2 Q! i6 K# J
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   / l2 _/ u7 b9 r6 ?3 a
2. 
   1 K/ {: z# o  |
3. miniAppReady();

复制代码

TIP

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

6 y2 D! N( b3 [1 M

沙盆

膜拜大神！！