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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   $ R6 U  M2 X% S% g& Q9 f
2. 
   1 G+ `& ^. P6 D, ~" O
3. miniApp.mount();
   
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   6 q7 ?) G+ V; T' h% u3 v; p3 E
2. 
   
3. mountMiniApp();
   
4. isMiniAppMounted(); // true

复制代码

INFO

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

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

Variable :

1. miniApp.unmount();
   ) \3 Q' j2 s4 c$ N( \+ p( d' _
2. miniApp.isMounted(); // false

复制代码

Functions :
6 E- d0 O7 C3 |, R# s; m1 o
$ x+ U4 N+ I  x1 H

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   
3. unmountMiniApp();
   ' K- C* D: Q$ b5 ~  B  {
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   7 \) ?! \6 K# h1 [# r' w' x
2. // Creates CSS variables like:
   
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   
5. 
   ' j; ^9 V0 |+ k% ~& Q
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   
8. // --my-prefix-bgColor: #aabbcc
   
9. // --my-prefix-headerColor: #aabbcc
   * T. ~, j5 O5 ]) }: Q- t7 i# q) R; L* v
10. 
    . v- I4 I( i$ r- Q) J
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   3 U! A5 f! P2 ~  f$ j
2. 
   $ e+ H, j  d! t- b% R  r1 A( P" Y
3. bindMiniAppCssVars();
   
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   
7. 
   
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   $ f+ e  s# H+ k% X2 i5 p# \8 ?, g
10. // --my-prefix-bgColor: #aabbcc
    
11. // --my-prefix-headerColor: #aabbcc
    
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   
2.   miniApp.setHeaderColor('bg_color');
   - ]% Z* y" u4 Z7 m/ Q
3.   miniApp.headerColor(); // 'bg_color'
   . d2 a3 L4 F& z7 D/ J# j% \/ p
4. }
   
5. 
   6 X4 R0 I4 f6 t0 q
6. if (
   ' L' O# G' y$ J7 m# K* z2 e
7.   miniApp.setHeaderColor.isSupported()
   1 P2 n6 O+ w. x7 y2 t4 Y* M
8.   && miniApp.setHeaderColor.supports('color')
   ! g6 G; i6 |# X4 t
9. ) {
   & `8 F' r! l1 a" [
10.   miniApp.setHeaderColor('#aabbcc');
    9 ~; Z5 _. X  J# M) g. F) v/ T5 {& |
11.   miniApp.headerColor(); // '#aabbcc'
    
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. if (setMiniAppHeaderColor.isSupported()) {
   , i7 I& g, v) ~, P; w" p$ L9 T2 K4 m
7.   setMiniAppHeaderColor('bg_color');
   
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   * c3 [! R9 i3 C) c3 e
10. 
    
11. if (
    . l. n% N( [+ P) H6 j- E
12.   setMiniAppHeaderColor.isSupported()
    4 R6 ]/ Y' {% ?8 _5 `
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    : i1 f; |( N" c: {/ |, G# j
16.   miniAppHeaderColor(); // '#aabbcc'
    
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   0 R9 r3 M2 v1 e) f+ @
3.   miniApp.backgroundColor(); // '#ffffff'
   
4. }

复制代码

Functions :

1. import {
   
2.   setMiniAppBackgroundColor,
   
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   . K6 A3 r" m, V( E
5. 
   % L8 \3 T( T! }2 a! T5 @
6. if (setMiniAppBackgroundColor.isSupported()) {
   + @1 _/ W0 z* \' C  h5 a
7.   setMiniAppBackgroundColor('#ffffff');
   ' z' h0 ~* n) _' q1 `8 ^) ~
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   
2. 
   2 o4 Y( L& l1 T3 ~) ?6 M! Q
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

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

复制代码

TIP

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

沙盆

膜拜大神！！