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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   
2. 
   ; m# \% y6 b, ~
3. miniApp.mount();
   
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   & Y+ T5 H/ S. E5 q+ m! y
2. 
   ' K6 v1 z. M" ]& K
3. mountMiniApp();
   
4. isMiniAppMounted(); // true

复制代码

INFO

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

. V9 z0 J3 o4 j! Z% A2 `

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

Variable :

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

复制代码

Functions :
  R  [8 }' p! }6 A; x5 i4 j- c, U

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   / z8 O2 j- {! Q  d
2. 
   
3. unmountMiniApp();
   & ?8 n* j2 @% I0 F9 h- Q! T
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   ! E5 Q, \+ p' d2 j6 G5 R
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   ' W6 ~' A5 l3 C* c/ M% Q8 |" k
5. 
   
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   ' G7 ~; ^- j! _
8. // --my-prefix-bgColor: #aabbcc
   6 [, i, h0 Q2 b9 e; Z
9. // --my-prefix-headerColor: #aabbcc
   
10. 
    2 p# {+ U9 Z& Z! B3 f0 d
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   9 R  O% c/ u' D7 _2 B
2. 
   ! K, N5 N  x. ]4 p
3. bindMiniAppCssVars();
   $ I7 X6 {( U! ^5 M- ?# ^" I0 A# w
4. // Creates CSS variables like:
   % ?; C; y& y$ Z( B, k
5. // --tg-bg-color: #aabbcc
   6 o- H' d8 Q  k) Q$ N
6. // --tg-header-color: #aabbcc
   ( f4 F- P* I2 T$ V/ B
7. 
   
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   ( h6 X* @$ Y; X$ O0 K
9. // Creates CSS variables like:
   / M/ H& A; V9 I2 v4 W5 @: r* x5 a, ^3 i
10. // --my-prefix-bgColor: #aabbcc
    . s# ]" f$ m; @0 T" a
11. // --my-prefix-headerColor: #aabbcc
    . v* o, m$ k  U0 j
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   
2.   miniApp.setHeaderColor('bg_color');
   * e3 P( C; \: Z- ~
3.   miniApp.headerColor(); // 'bg_color'
   ; f; z$ }) x+ `- H- P
4. }
   
5. 
   
6. if (
   2 o0 z5 U8 Z& |+ d
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   + b; U) B! n8 B& m9 @. b" ?9 \
9. ) {
   ' X$ q' [( P4 q
10.   miniApp.setHeaderColor('#aabbcc');
    $ t# _" [2 v5 }+ r- k% W
11.   miniApp.headerColor(); // '#aabbcc'
    
12. }

复制代码

Functions :

1. import {
   2 S9 \7 v8 [# J! z- I* b5 A. h
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   ' s6 D! Z5 e; Z, \  i0 K
5. 
   ! {, ~) A5 f" Z! D
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   / H' r# N: n  H/ \2 P: t2 m
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   ; B  M& u4 Z, ?, `% k' k$ d
10. 
    % e! X5 D' S- o0 s, _. N! u& I
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    " X2 J2 \  H4 X% c/ o9 U7 {
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   + G5 a0 R  M! ?* h9 P
3.   miniApp.backgroundColor(); // '#ffffff'
   ) C) U# n' x- W5 ]
4. }

复制代码

Functions :

1. import {
   0 R/ g# E/ n& H3 O: [5 T
2.   setMiniAppBackgroundColor,
   
3.   miniAppBackgroundColor,
   , B) |( o: I5 F0 \
4. } from '@telegram-apps/sdk';
   
5. 
   
6. if (setMiniAppBackgroundColor.isSupported()) {
   
7.   setMiniAppBackgroundColor('#ffffff');
   : J7 k9 a+ b. \9 _/ r
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   7 `7 G2 b. p+ [0 f
2. 
   
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   
2. 
   : Z! m" i8 f: K% @
3. miniAppReady();

复制代码

TIP

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

% q' P  S- a; B: I4 D# a

沙盆

膜拜大神！！