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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   
2. 
   
3. miniApp.mount();
   
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
     s) N" J7 O. B0 s( v- B
2. 
   6 ^$ m' X* S! _5 b2 a
3. mountMiniApp();
   + N5 @. c" Y$ P) I$ W9 r# S. M
4. isMiniAppMounted(); // true

复制代码

INFO

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

& q5 H6 u5 W, ?" X( L4 r# Y% _* A

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

Variable :

1. miniApp.unmount();
   8 Z+ }3 F/ s7 n# k7 U2 z
2. miniApp.isMounted(); // false

复制代码

Functions :

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   , ]% k0 |1 l8 h$ f! h8 Y
2. 
   / ]( Q4 m7 @: F
3. unmountMiniApp();
   
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   , {$ Y2 K9 Z  D
3. // --tg-bg-color: #aabbcc
   % {5 U* V/ K$ s1 n  O" r+ _/ ~
4. // --tg-header-color: #aabbcc
   
5. 
   
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   ; X% o0 l3 I; V6 u/ }8 F, w0 j+ j
8. // --my-prefix-bgColor: #aabbcc
   
9. // --my-prefix-headerColor: #aabbcc
   
10. 
    9 Y  R' ^$ \0 L1 P3 ]
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   1 p" ^3 L% [- Q' {, ]) @
2. 
   
3. bindMiniAppCssVars();
   9 j. M+ c- R, t' ~1 e6 m, v6 c
4. // Creates CSS variables like:
   ' v9 p) E) |2 @
5. // --tg-bg-color: #aabbcc
   3 {! b& N% B8 c; k  w8 L
6. // --tg-header-color: #aabbcc
   
7. 
   
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   + i  o) U5 _4 c# H2 m) O, z0 B% D
10. // --my-prefix-bgColor: #aabbcc
    ; p+ a8 y+ p, |5 @5 I
11. // --my-prefix-headerColor: #aabbcc
    ) l/ T# c' G( O1 r3 u- E
12. 
    2 E/ C( o* y: Y% g
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   4 U1 e5 v3 [7 T6 P( j+ S6 n
2.   miniApp.setHeaderColor('bg_color');
   / i& e/ k6 s0 E$ d- O
3.   miniApp.headerColor(); // 'bg_color'
   
4. }
   
5. 
   
6. if (
   - @4 t# A( r# F9 z* y
7.   miniApp.setHeaderColor.isSupported()
   " I, s" u+ `: D
8.   && miniApp.setHeaderColor.supports('color')
   
9. ) {
   " k+ |9 O. Q* W% c" a/ F
10.   miniApp.setHeaderColor('#aabbcc');
    # v9 k; j% W6 {5 N8 }
11.   miniApp.headerColor(); // '#aabbcc'
    
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   5 X  f) a: w$ {+ Q) w
5. 
   3 M& {/ h' K7 j8 t% D
6. if (setMiniAppHeaderColor.isSupported()) {
   5 w2 @# g3 v" _0 o- A- R4 q9 J/ ~
7.   setMiniAppHeaderColor('bg_color');
   6 g& _" E0 ?! a; N$ X/ g8 w3 D) {
8.   miniAppHeaderColor(); // 'bg_color'
   5 K5 m) q/ b8 e  [* c
9. }
   2 H- B, o8 `: t: ~8 Q) n2 W" E7 t
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    - X, e7 \: f$ y5 T/ M: [
16.   miniAppHeaderColor(); // '#aabbcc'
    , `- i$ q* I) d( c. U( z) B$ h6 k, m
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   # }" \6 c0 W: P2 [
2.   miniApp.setBackgroundColor('#ffffff');
   
3.   miniApp.backgroundColor(); // '#ffffff'
   4 C6 f- k- Q, m- d0 y" v# F
4. }

复制代码

Functions :

1. import {
   - S6 F3 T# B0 \- p
2.   setMiniAppBackgroundColor,
   / Q9 E1 M% r5 h7 P2 D
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   , d! c' c4 P  J- v3 y
5. 
   
6. if (setMiniAppBackgroundColor.isSupported()) {
   7 S8 e1 G7 k/ b3 x2 Y
7.   setMiniAppBackgroundColor('#ffffff');
   - {  g9 f4 a7 f/ N# Z" U- t
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   ! E' T% ~- ^8 B! [/ E2 H% P/ v
2. 
   0 ]7 Q8 z7 J9 C0 C' W' P& x, d4 c( _( _
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   
2. 
   / Z2 X, E, y6 f( K
3. miniAppReady();

复制代码

TIP

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

沙盆

膜拜大神！！