迷你应用程序 💠组件 负责管理 Telegram 迷你应用程序内的功能。 安装在使用该组件之前,必须使用 mount 方法安装该组件,该方法会更新 isMounted 信号属性。 Variable : - import { miniApp } from '@telegram-apps/sdk';% c% Z! l, O9 H; ~
- ' K7 {# s) x( t$ S5 L; j' L# ^
- miniApp.mount();6 ?8 r) x- N/ V! F' j# q! _, U
- miniApp.isMounted(); // true
复制代码Functions : - import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
s) N" J7 O. B0 s( v- B
6 ^$ m' X* S! _5 b2 a- mountMiniApp();
+ N5 @. c" Y$ P) I$ W9 r# S. M - isMiniAppMounted(); // true
复制代码INFO mount方法还会挂载 Theme Params作用域,以提取正确的 配置值。
& q5 H6 u5 W, ?" X( L4 r# Y% _* A要卸载组件,请使用 unmount 方法: Variable : - miniApp.unmount();
8 Z+ }3 F/ s7 n# k7 U2 z - miniApp.isMounted(); // false
复制代码 Functions :5 a, D. q' ]* q. R
8 h' R' l( d: a5 A6 I
- import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
, ]% k0 |1 l8 h$ f! h8 Y
/ ]( Q4 m7 @: F- unmountMiniApp();: B1 s+ X f0 r. r8 T3 E/ I8 t
- isMiniAppMounted(); // false
复制代码 绑定 CSS 变量要通过 CSS 变量公开 miniApp 属性,请使用 bindCssVars 方法。 调用该方法后,isCssVarsBound 信号属性会被更新。 此方法可选择接受一个函数,该函数可将 bgColor 和 headerColor 的值转换为 CSS 变量名。 默认情况下,数值会以前缀 --tg- 转换为 kebab 大小写。 Variable : - miniApp.bindCssVars();* p7 G5 Q. s3 D& {& Q
- // Creates CSS variables like:
, {$ Y2 K9 Z D - // --tg-bg-color: #aabbcc
% {5 U* V/ K$ s1 n O" r+ _/ ~ - // --tg-header-color: #aabbcc( ~ E, q0 O7 p4 ~# C& k) Q
- , R# t" b) { t+ V- l6 n
- miniApp.bindCssVars(key => `--my-prefix-${key}`);" Z+ \" s6 l' c, A( L
- // Creates CSS variables like:
; X% o0 l3 I; V6 u/ }8 F, w0 j+ j - // --my-prefix-bgColor: #aabbcc* U) m1 q( m, X
- // --my-prefix-headerColor: #aabbcc6 o0 q) T3 _! Y& `" J" P
9 Y R' ^$ \0 L1 P3 ]- miniApp.isCssVarsBound(); // true
复制代码Functions : - import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
1 p" ^3 L% [- Q' {, ]) @ - % L$ m* N) y2 {3 e
- bindMiniAppCssVars();
9 j. M+ c- R, t' ~1 e6 m, v6 c - // Creates CSS variables like:
' v9 p) E) |2 @ - // --tg-bg-color: #aabbcc
3 {! b& N% B8 c; k w8 L - // --tg-header-color: #aabbcc/ C1 E4 G6 \% ?9 ~) G3 f% F
- 3 \1 q2 Q; L6 V2 k
- bindMiniAppCssVars(key => `--my-prefix-${key}`);; C, V! U. x1 F& q) y( x* @- l
- // Creates CSS variables like:
+ i o) U5 _4 c# H2 m) O, z0 B% D - // --my-prefix-bgColor: #aabbcc
; p+ a8 y+ p, |5 @5 I - // --my-prefix-headerColor: #aabbcc
) l/ T# c' G( O1 r3 u- E
2 E/ C( o* y: Y% g- isMiniAppCssVarsBound(); // true
复制代码 页眉颜色要更改迷你应用程序的标题颜色,可使用方法 setHeaderColor。 反过来, 会更新 headerColor 信号属性值。 该方法接受 RGB 颜色值或以下字符串之一:bg_color、secondary_bg_color。 Variable : - if (miniApp.setHeaderColor.isSupported()) {
4 U1 e5 v3 [7 T6 P( j+ S6 n - miniApp.setHeaderColor('bg_color');
/ i& e/ k6 s0 E$ d- O - miniApp.headerColor(); // 'bg_color'- u. Z4 |# {) `9 K& G3 f+ g
- }% [! d( \6 P' e; E* h
- Q/ h1 E2 ?' C- A
- if (
- @4 t# A( r# F9 z* y - miniApp.setHeaderColor.isSupported()
" I, s" u+ `: D - && miniApp.setHeaderColor.supports('color')+ p2 f4 ^7 S' D1 m1 T+ V1 ]
- ) {
" k+ |9 O. Q* W% c" a/ F - miniApp.setHeaderColor('#aabbcc');
# v9 k; j% W6 {5 N8 } - miniApp.headerColor(); // '#aabbcc'2 }. A- n2 S) p" P5 h; A8 H0 X
- }
复制代码Functions : - import {& d( [& e4 k. Y5 y) {$ E8 ~ ?' T
- setMiniAppHeaderColor,: R S. `# @2 M Q- d
- miniAppHeaderColor,! b$ ?' h) }2 U0 h# v$ ?% b8 d
- } from '@telegram-apps/sdk';
5 X f) a: w$ {+ Q) w
3 M& {/ h' K7 j8 t% D- if (setMiniAppHeaderColor.isSupported()) {
5 w2 @# g3 v" _0 o- A- R4 q9 J/ ~ - setMiniAppHeaderColor('bg_color');
6 g& _" E0 ?! a; N$ X/ g8 w3 D) { - miniAppHeaderColor(); // 'bg_color'
5 K5 m) q/ b8 e [* c - }
2 H- B, o8 `: t: ~8 Q) n2 W" E7 t - 4 {5 h: \6 I4 \8 c# b+ R
- if (- {. q2 l: G6 B- a% i0 L
- setMiniAppHeaderColor.isSupported()0 D$ o2 E: {. v8 J( ]3 D
- && setMiniAppHeaderColor.supports('color')6 f6 I! U9 A/ h2 |
- ) {7 O% r2 D' L! V# Q& S% W# @, o
- setMiniAppHeaderColor('#aabbcc');
- X, e7 \: f$ y5 T/ M: [ - miniAppHeaderColor(); // '#aabbcc'
, `- i$ q* I) d( c. U( z) B$ h6 k, m - }
复制代码 背景颜色要更新迷你应用程序的背景颜色,请使用 setBackgroundColor 方法。 调用 时,该方法会更新 headerColor 信号属性值。 Variable : - if (miniApp.setBackgroundColor.isSupported()) {
# }" \6 c0 W: P2 [ - miniApp.setBackgroundColor('#ffffff');( Y) w G/ D2 w' Q; c3 q
- miniApp.backgroundColor(); // '#ffffff'
4 C6 f- k- Q, m- d0 y" v# F - }
复制代码Functions : - import {
- S6 F3 T# B0 \- p - setMiniAppBackgroundColor,
/ Q9 E1 M% r5 h7 P2 D - miniAppBackgroundColor,' d$ G+ Y0 Q9 B- P
- } from '@telegram-apps/sdk';
, d! c' c4 P J- v3 y - ) W) S# q; I% I# }" d( a
- if (setMiniAppBackgroundColor.isSupported()) {
7 S8 e1 G7 k/ b3 x2 Y - setMiniAppBackgroundColor('#ffffff');
- { g9 f4 a7 f/ N# Z" U- t - miniAppBackgroundColor(); // '#ffffff'4 R+ j ], x4 \* N& M
- }
复制代码 方法close要关闭迷你应用程序,请使用 close 方法。 Variable : Functions : - import { closeMiniApp } from '@telegram-apps/sdk';
! E' T% ~- ^8 B! [/ E2 H% P/ v
0 ]7 Q8 z7 J9 C0 C' W' P& x, d4 c( _( _- closeMiniApp();
复制代码 ready要发出 Mini App 已准备好显示的信号,请使用 ready 方法。 调用后, 加载占位符会被隐藏,而迷你应用程序则会显示出来。 Variable : Functions : - import { miniAppReady } from '@telegram-apps/sdk';4 @* x# r0 W0 j& q0 ^/ g* s
/ Z2 X, E, y6 f( K- miniAppReady();
复制代码TIP 在加载基本界面元素后尽早调用该函数,以确保 顺畅的用户体验。 6 k& W2 _5 H# a5 C! s
|