English 简体中文 繁體中文 한국 사람 日本語 Deutsch русский بالعربية TÜRKÇE português คนไทย french

简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE คนไทย Français русский

1回答

0收藏

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

开源社区 开源社区 11756 人阅读 | 1 人回复 | 2025-02-25

迷你应用程序

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

安装

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

Variable :

  1. import { miniApp } from '@telegram-apps/sdk';
    , n8 g1 R# J; b( V: a1 ~- f

  2. * [! u+ v. X- M# j7 C
  3. miniApp.mount();
    6 Z3 K. [/ z+ z/ b& j
  4. miniApp.isMounted(); // true
复制代码

Functions :

  1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';3 a' }/ h7 M) Y
  2. & W% E+ F% N' w# j/ t& G+ \8 F  X$ Q) E
  3. mountMiniApp();- j% o- C+ D: ^6 y7 G3 _0 \; k
  4. isMiniAppMounted(); // true
复制代码

INFO

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


9 B: u1 ~# G# l  m

要卸载组件,请使用 unmount 方法:

Variable :

  1. miniApp.unmount();4 k' c" p* m% f5 L+ H# J# k' y
  2. miniApp.isMounted(); // false
复制代码
Functions :
% F) k7 V! {0 Q% V4 E4 i% d6 `" l
  1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';3 o' t0 z& `+ _- J' T1 s+ I# L

  2. % E" F* {, _7 C# U
  3. unmountMiniApp();! L' _: W; E. t! V' [0 w3 i
  4. isMiniAppMounted(); // false
复制代码
绑定 CSS 变量

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

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

Variable :

  1. miniApp.bindCssVars();
    " |0 h$ U9 [$ T* r! q
  2. // Creates CSS variables like:
    5 q  W. @7 }% N$ q* {1 `4 @+ ]
  3. // --tg-bg-color: #aabbcc/ C" c: `2 x& W6 L
  4. // --tg-header-color: #aabbcc; J; G/ G8 i' G- T8 ^, ~0 W4 i

  5. $ I8 w: j+ X8 a
  6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
    4 j  }, }: k+ j
  7. // Creates CSS variables like:8 b* M  c; m* P5 L. u/ R, Y. {
  8. // --my-prefix-bgColor: #aabbcc
    5 H/ z2 S( g# {3 c
  9. // --my-prefix-headerColor: #aabbcc5 {( A, D; n/ N3 Z
  10. 5 s# b3 X$ x$ T
  11. miniApp.isCssVarsBound(); // true
复制代码

Functions :

  1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';  l& P+ W( y6 t' s3 N% N

  2. ' P% G& B6 Z" H% e! r+ P5 a$ F8 G3 L
  3. bindMiniAppCssVars();
    , a7 ^; |  L8 `0 [: M- d5 k. x; p
  4. // Creates CSS variables like:
    1 Q0 X& j* I2 }
  5. // --tg-bg-color: #aabbcc; q! y# j; s! {- Z
  6. // --tg-header-color: #aabbcc
    4 ]3 g. U! i% A3 T; `( \( i

  7. $ r5 R3 z4 f7 w$ X- x: L' e" [
  8. bindMiniAppCssVars(key => `--my-prefix-${key}`);% f3 N- w7 l2 Z% o+ l% z9 ?  F
  9. // Creates CSS variables like:4 P6 n& S1 w! d. m
  10. // --my-prefix-bgColor: #aabbcc0 j3 u$ K4 C, ]* s  Q+ v7 Y/ A
  11. // --my-prefix-headerColor: #aabbcc/ ~/ X2 Y0 ~, q/ t- k
  12. $ {4 ^  w+ `4 ]' @' H3 }% B
  13. isMiniAppCssVarsBound(); // true
复制代码
页眉颜色

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

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

Variable :

  1. if (miniApp.setHeaderColor.isSupported()) {8 b/ H. e" Y( A- D
  2.   miniApp.setHeaderColor('bg_color');
    ) ~" \3 D; r2 v
  3.   miniApp.headerColor(); // 'bg_color'
    , d4 [; k! J, _
  4. }
    * r! D8 c# L0 _# C4 u6 r
  5. $ N4 K1 p# v+ T/ P+ L
  6. if (4 N. v" z2 j7 _5 J8 b( f) m% R, L
  7.   miniApp.setHeaderColor.isSupported()1 L8 z6 s. t% n# |. d  L& w9 x
  8.   && miniApp.setHeaderColor.supports('color')
    7 b* r4 K9 F8 ~
  9. ) {
    2 e1 Z' P& O' I( D
  10.   miniApp.setHeaderColor('#aabbcc');/ U3 L  H' m: Y0 Q, p) I5 p. |
  11.   miniApp.headerColor(); // '#aabbcc'! E7 c( Z& Q2 x& [: n' ]( t/ f* }5 A
  12. }
复制代码

Functions :

  1. import {$ L* j* O8 V2 _' e, R; V, X
  2.   setMiniAppHeaderColor,: b) x, s+ F; g' v- v. W" a
  3.   miniAppHeaderColor,
    + d9 W7 T: @8 S; v
  4. } from '@telegram-apps/sdk';5 V1 I2 c: {/ M; z- W

  5. 5 r3 \0 c5 Q9 a2 o4 g6 j' c( `4 [
  6. if (setMiniAppHeaderColor.isSupported()) {9 g6 I, j9 y+ U) v7 V* ?4 P
  7.   setMiniAppHeaderColor('bg_color');) t, }/ m& i, q( @
  8.   miniAppHeaderColor(); // 'bg_color'' o; a6 r* j% A9 v0 f0 P7 Z! J
  9. }! e* X5 |& u& r
  10. " @" m9 W1 N% P; j, }/ G
  11. if (3 x2 |$ K4 u* x
  12.   setMiniAppHeaderColor.isSupported()6 M) r: p- e3 o9 F+ m* T1 @* o
  13.   && setMiniAppHeaderColor.supports('color')
    , H0 D7 B" p) M; D" D
  14. ) {
    # w0 p6 a+ K* c# Y' G* F3 R9 x
  15.   setMiniAppHeaderColor('#aabbcc');6 ~$ q" e' E3 r4 \: h) r5 u) n8 |
  16.   miniAppHeaderColor(); // '#aabbcc'
    ; k% u% E+ v/ ~: }% K6 m
  17. }
复制代码
背景颜色

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

Variable :

  1. if (miniApp.setBackgroundColor.isSupported()) {& a! u9 d# m0 a  P: ?3 w; ]
  2.   miniApp.setBackgroundColor('#ffffff');# W1 g& I8 r3 T* M  N  E" z
  3.   miniApp.backgroundColor(); // '#ffffff'7 h" ]- X* a' U6 ]
  4. }
复制代码

Functions :

  1. import {
    8 Z, P( |) h, Q& \
  2.   setMiniAppBackgroundColor,
    . ^- ?0 a- L; B) M" ?5 M" n
  3.   miniAppBackgroundColor,) W# Y& l' d* r8 E; k+ G; y& v
  4. } from '@telegram-apps/sdk';
    7 E- u1 ^( g/ e# P

  5. , }, I# K" m% `# w2 A1 W
  6. if (setMiniAppBackgroundColor.isSupported()) {5 ?" W& d2 b: J, d8 M3 y' S
  7.   setMiniAppBackgroundColor('#ffffff');
    4 \( T/ w! S  N) C2 Q; J
  8.   miniAppBackgroundColor(); // '#ffffff'
      L  j2 J6 B( o' q7 [* }! b' c/ x) h
  9. }
复制代码
方法close

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

Variable :

  1. miniApp.close();
复制代码

Functions :

  1. import { closeMiniApp } from '@telegram-apps/sdk';
    / f7 m6 X2 j! [# S+ m

  2. ( z3 D( m, F3 e
  3. closeMiniApp();
复制代码
ready

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

Variable :

  1. miniApp.ready();
复制代码

Functions :

  1. import { miniAppReady } from '@telegram-apps/sdk';2 K9 q- P" H! n9 O- K/ w

  2. ; T$ S- w$ U6 B
  3. miniAppReady();
复制代码

TIP

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


5 R5 D) _) r4 P: P8 ~) {% S0 t
分享到:

回答|共 1 个

沙盆

发表于 2025-2-26 18:27:24 | 显示全部楼层

膜拜大神!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则