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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   : i; ?; R8 i( D) e
2. 
   $ ]0 x( {0 D1 r# p3 c7 G! M
3. miniApp.mount();
   
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   9 ^, s) \3 {* ^; U2 M
2. 
   * Q' i! J% F4 r1 I; [" h& V7 X
3. mountMiniApp();
   & p" h/ {* D+ S' z( ^
4. isMiniAppMounted(); // true

复制代码

INFO

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

* p% O$ A1 {9 m" f/ U. ~

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

Variable :

1. miniApp.unmount();
   , i: m. R. L2 X8 P0 h, X, B
2. miniApp.isMounted(); // false

复制代码

Functions :
  Z* h5 g7 j/ c) p( Q) s  o

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   
3. unmountMiniApp();
   ! l. D/ l" k/ P6 f/ s8 p
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   7 `- e* x: \! [% n$ u2 |6 e
3. // --tg-bg-color: #aabbcc
   ( n4 j! e  M( B4 M" s+ k
4. // --tg-header-color: #aabbcc
   
5. 
   $ O9 Z6 v- C' I9 u( [& ?  D  b
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   * S6 w  T' s# y4 B
8. // --my-prefix-bgColor: #aabbcc
   
9. // --my-prefix-headerColor: #aabbcc
   
10. 
    ( y! i- h; s7 c) T2 m2 k
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   
2. 
   2 s7 ^4 y* u3 G: O8 R
3. bindMiniAppCssVars();
   
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   
7. 
   / X. c1 v! L$ O
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   
10. // --my-prefix-bgColor: #aabbcc
    
11. // --my-prefix-headerColor: #aabbcc
    + O9 A6 d6 ?! P
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   7 L4 `: X$ F5 [! [: O
2.   miniApp.setHeaderColor('bg_color');
   2 b4 X& k+ M4 F5 \; q
3.   miniApp.headerColor(); // 'bg_color'
   
4. }
   
5. 
   ) l5 g* i; z- \8 M
6. if (
   
7.   miniApp.setHeaderColor.isSupported()
   2 X: |' y* \5 E
8.   && miniApp.setHeaderColor.supports('color')
   
9. ) {
   
10.   miniApp.setHeaderColor('#aabbcc');
    & P, M, r8 R+ R% L. G( {
11.   miniApp.headerColor(); // '#aabbcc'
    
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   , b2 l6 e5 Y3 u/ v; U8 N& n0 ^
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   1 J; {# l3 D* G; R4 o/ o% ?
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   
10. 
    2 C  t. q4 C/ X3 Q
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
13.   && setMiniAppHeaderColor.supports('color')
    $ p* Z% a5 L2 a2 v
14. ) {
    0 P& s9 u' e% I" K
15.   setMiniAppHeaderColor('#aabbcc');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    ; z+ o7 j7 `: Q- q2 n
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   
3.   miniApp.backgroundColor(); // '#ffffff'
   
4. }

复制代码

Functions :

1. import {
   7 J5 z5 j. J1 \+ k# I! B
2.   setMiniAppBackgroundColor,
   . h. W+ q, b7 f1 M3 x# o
3.   miniAppBackgroundColor,
   . M4 [( v! B" _0 d' \
4. } from '@telegram-apps/sdk';
   9 T9 r1 i3 ?( n( l1 J
5. 
   8 A& e- H2 C  v/ V' v2 B5 ^6 Y
6. if (setMiniAppBackgroundColor.isSupported()) {
   ) Z) [6 H- ?9 {/ a
7.   setMiniAppBackgroundColor('#ffffff');
   
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   $ f( g" h( m/ f+ B& h# o& U
2. 
   # h- b5 S( }( w& z
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   ) j3 Z8 U( @, g0 J" M  s0 \; D
2. 
   
3. miniAppReady();

复制代码

TIP

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

沙盆

膜拜大神！！