迷你应用程序 💠组件 负责管理 Telegram 迷你应用程序内的功能。 安装在使用该组件之前,必须使用 mount 方法安装该组件,该方法会更新 isMounted 信号属性。 Variable : - import { miniApp } from '@telegram-apps/sdk';
, n8 g1 R# J; b( V: a1 ~- f
* [! u+ v. X- M# j7 C- miniApp.mount();
6 Z3 K. [/ z+ z/ b& j - miniApp.isMounted(); // true
复制代码Functions : - import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';3 a' }/ h7 M) Y
- & W% E+ F% N' w# j/ t& G+ \8 F X$ Q) E
- mountMiniApp();- j% o- C+ D: ^6 y7 G3 _0 \; k
- isMiniAppMounted(); // true
复制代码INFO mount方法还会挂载 Theme Params作用域,以提取正确的 配置值。
9 B: u1 ~# G# l m要卸载组件,请使用 unmount 方法: Variable : - miniApp.unmount();4 k' c" p* m% f5 L+ H# J# k' y
- miniApp.isMounted(); // false
复制代码 Functions :
% F) k7 V! {0 Q% V4 E4 i% d6 `" l
- import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';3 o' t0 z& `+ _- J' T1 s+ I# L
% E" F* {, _7 C# U- unmountMiniApp();! L' _: W; E. t! V' [0 w3 i
- isMiniAppMounted(); // false
复制代码 绑定 CSS 变量要通过 CSS 变量公开 miniApp 属性,请使用 bindCssVars 方法。 调用该方法后,isCssVarsBound 信号属性会被更新。 此方法可选择接受一个函数,该函数可将 bgColor 和 headerColor 的值转换为 CSS 变量名。 默认情况下,数值会以前缀 --tg- 转换为 kebab 大小写。 Variable : - miniApp.bindCssVars();
" |0 h$ U9 [$ T* r! q - // Creates CSS variables like:
5 q W. @7 }% N$ q* {1 `4 @+ ] - // --tg-bg-color: #aabbcc/ C" c: `2 x& W6 L
- // --tg-header-color: #aabbcc; J; G/ G8 i' G- T8 ^, ~0 W4 i
$ I8 w: j+ X8 a- miniApp.bindCssVars(key => `--my-prefix-${key}`);
4 j }, }: k+ j - // Creates CSS variables like:8 b* M c; m* P5 L. u/ R, Y. {
- // --my-prefix-bgColor: #aabbcc
5 H/ z2 S( g# {3 c - // --my-prefix-headerColor: #aabbcc5 {( A, D; n/ N3 Z
- 5 s# b3 X$ x$ T
- miniApp.isCssVarsBound(); // true
复制代码Functions : - import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk'; l& P+ W( y6 t' s3 N% N
' P% G& B6 Z" H% e! r+ P5 a$ F8 G3 L- bindMiniAppCssVars();
, a7 ^; | L8 `0 [: M- d5 k. x; p - // Creates CSS variables like:
1 Q0 X& j* I2 } - // --tg-bg-color: #aabbcc; q! y# j; s! {- Z
- // --tg-header-color: #aabbcc
4 ]3 g. U! i% A3 T; `( \( i
$ r5 R3 z4 f7 w$ X- x: L' e" [- bindMiniAppCssVars(key => `--my-prefix-${key}`);% f3 N- w7 l2 Z% o+ l% z9 ? F
- // Creates CSS variables like:4 P6 n& S1 w! d. m
- // --my-prefix-bgColor: #aabbcc0 j3 u$ K4 C, ]* s Q+ v7 Y/ A
- // --my-prefix-headerColor: #aabbcc/ ~/ X2 Y0 ~, q/ t- k
- $ {4 ^ w+ `4 ]' @' H3 }% B
- isMiniAppCssVarsBound(); // true
复制代码 页眉颜色要更改迷你应用程序的标题颜色,可使用方法 setHeaderColor。 反过来, 会更新 headerColor 信号属性值。 该方法接受 RGB 颜色值或以下字符串之一:bg_color、secondary_bg_color。 Variable : - if (miniApp.setHeaderColor.isSupported()) {8 b/ H. e" Y( A- D
- miniApp.setHeaderColor('bg_color');
) ~" \3 D; r2 v - miniApp.headerColor(); // 'bg_color'
, d4 [; k! J, _ - }
* r! D8 c# L0 _# C4 u6 r - $ N4 K1 p# v+ T/ P+ L
- if (4 N. v" z2 j7 _5 J8 b( f) m% R, L
- miniApp.setHeaderColor.isSupported()1 L8 z6 s. t% n# |. d L& w9 x
- && miniApp.setHeaderColor.supports('color')
7 b* r4 K9 F8 ~ - ) {
2 e1 Z' P& O' I( D - miniApp.setHeaderColor('#aabbcc');/ U3 L H' m: Y0 Q, p) I5 p. |
- miniApp.headerColor(); // '#aabbcc'! E7 c( Z& Q2 x& [: n' ]( t/ f* }5 A
- }
复制代码Functions : - import {$ L* j* O8 V2 _' e, R; V, X
- setMiniAppHeaderColor,: b) x, s+ F; g' v- v. W" a
- miniAppHeaderColor,
+ d9 W7 T: @8 S; v - } from '@telegram-apps/sdk';5 V1 I2 c: {/ M; z- W
5 r3 \0 c5 Q9 a2 o4 g6 j' c( `4 [- if (setMiniAppHeaderColor.isSupported()) {9 g6 I, j9 y+ U) v7 V* ?4 P
- setMiniAppHeaderColor('bg_color');) t, }/ m& i, q( @
- miniAppHeaderColor(); // 'bg_color'' o; a6 r* j% A9 v0 f0 P7 Z! J
- }! e* X5 |& u& r
- " @" m9 W1 N% P; j, }/ G
- if (3 x2 |$ K4 u* x
- setMiniAppHeaderColor.isSupported()6 M) r: p- e3 o9 F+ m* T1 @* o
- && setMiniAppHeaderColor.supports('color')
, H0 D7 B" p) M; D" D - ) {
# w0 p6 a+ K* c# Y' G* F3 R9 x - setMiniAppHeaderColor('#aabbcc');6 ~$ q" e' E3 r4 \: h) r5 u) n8 |
- miniAppHeaderColor(); // '#aabbcc'
; k% u% E+ v/ ~: }% K6 m - }
复制代码 背景颜色要更新迷你应用程序的背景颜色,请使用 setBackgroundColor 方法。 调用 时,该方法会更新 headerColor 信号属性值。 Variable : - if (miniApp.setBackgroundColor.isSupported()) {& a! u9 d# m0 a P: ?3 w; ]
- miniApp.setBackgroundColor('#ffffff');# W1 g& I8 r3 T* M N E" z
- miniApp.backgroundColor(); // '#ffffff'7 h" ]- X* a' U6 ]
- }
复制代码Functions : - import {
8 Z, P( |) h, Q& \ - setMiniAppBackgroundColor,
. ^- ?0 a- L; B) M" ?5 M" n - miniAppBackgroundColor,) W# Y& l' d* r8 E; k+ G; y& v
- } from '@telegram-apps/sdk';
7 E- u1 ^( g/ e# P
, }, I# K" m% `# w2 A1 W- if (setMiniAppBackgroundColor.isSupported()) {5 ?" W& d2 b: J, d8 M3 y' S
- setMiniAppBackgroundColor('#ffffff');
4 \( T/ w! S N) C2 Q; J - miniAppBackgroundColor(); // '#ffffff'
L j2 J6 B( o' q7 [* }! b' c/ x) h - }
复制代码 方法close要关闭迷你应用程序,请使用 close 方法。 Variable : Functions : - import { closeMiniApp } from '@telegram-apps/sdk';
/ f7 m6 X2 j! [# S+ m
( z3 D( m, F3 e- closeMiniApp();
复制代码 ready要发出 Mini App 已准备好显示的信号,请使用 ready 方法。 调用后, 加载占位符会被隐藏,而迷你应用程序则会显示出来。 Variable : Functions : - import { miniAppReady } from '@telegram-apps/sdk';2 K9 q- P" H! n9 O- K/ w
; T$ S- w$ U6 B- miniAppReady();
复制代码TIP 在加载基本界面元素后尽早调用该函数,以确保 顺畅的用户体验。
5 R5 D) _) r4 P: P8 ~) {% S0 t |