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

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

1回答

0收藏

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

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

迷你应用程序

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

安装

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

Variable :

  1. import { miniApp } from '@telegram-apps/sdk';% c% Z! l, O9 H; ~
  2. ' K7 {# s) x( t$ S5 L; j' L# ^
  3. miniApp.mount();6 ?8 r) x- N/ V! F' j# q! _, U
  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 :5 a, D. q' ]* q. R
8 h' R' l( d: a5 A6 I
  1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
    , ]% k0 |1 l8 h$ f! h8 Y

  2. / ]( Q4 m7 @: F
  3. unmountMiniApp();: B1 s+ X  f0 r. r8 T3 E/ I8 t
  4. isMiniAppMounted(); // false
复制代码
绑定 CSS 变量

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

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

Variable :

  1. miniApp.bindCssVars();* p7 G5 Q. s3 D& {& Q
  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( ~  E, q0 O7 p4 ~# C& k) Q
  5. , R# t" b) {  t+ V- l6 n
  6. miniApp.bindCssVars(key => `--my-prefix-${key}`);" Z+ \" s6 l' c, A( L
  7. // Creates CSS variables like:
    ; X% o0 l3 I; V6 u/ }8 F, w0 j+ j
  8. // --my-prefix-bgColor: #aabbcc* U) m1 q( m, X
  9. // --my-prefix-headerColor: #aabbcc6 o0 q) T3 _! Y& `" J" P

  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. % L$ m* N) y2 {3 e
  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/ C1 E4 G6 \% ?9 ~) G3 f% F
  7. 3 \1 q2 Q; L6 V2 k
  8. bindMiniAppCssVars(key => `--my-prefix-${key}`);; C, V! U. x1 F& q) y( x* @- l
  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'- u. Z4 |# {) `9 K& G3 f+ g
  4. }% [! d( \6 P' e; E* h
  5.   Q/ h1 E2 ?' C- A
  6. if (
    - @4 t# A( r# F9 z* y
  7.   miniApp.setHeaderColor.isSupported()
    " I, s" u+ `: D
  8.   && miniApp.setHeaderColor.supports('color')+ p2 f4 ^7 S' D1 m1 T+ V1 ]
  9. ) {
    " k+ |9 O. Q* W% c" a/ F
  10.   miniApp.setHeaderColor('#aabbcc');
    # v9 k; j% W6 {5 N8 }
  11.   miniApp.headerColor(); // '#aabbcc'2 }. A- n2 S) p" P5 h; A8 H0 X
  12. }
复制代码

Functions :

  1. import {& d( [& e4 k. Y5 y) {$ E8 ~  ?' T
  2.   setMiniAppHeaderColor,: R  S. `# @2 M  Q- d
  3.   miniAppHeaderColor,! b$ ?' h) }2 U0 h# v$ ?% b8 d
  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. 4 {5 h: \6 I4 \8 c# b+ R
  11. if (- {. q2 l: G6 B- a% i0 L
  12.   setMiniAppHeaderColor.isSupported()0 D$ o2 E: {. v8 J( ]3 D
  13.   && setMiniAppHeaderColor.supports('color')6 f6 I! U9 A/ h2 |
  14. ) {7 O% r2 D' L! V# Q& S% W# @, o
  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');( Y) w  G/ D2 w' Q; c3 q
  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,' d$ G+ Y0 Q9 B- P
  4. } from '@telegram-apps/sdk';
    , d! c' c4 P  J- v3 y
  5. ) W) S# q; I% I# }" d( a
  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'4 R+ j  ], x4 \* N& M
  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';4 @* x# r0 W0 j& q0 ^/ g* s

  2. / Z2 X, E, y6 f( K
  3. miniAppReady();
复制代码

TIP

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

6 k& W2 _5 H# a5 C! s
分享到:

回答|共 1 个

沙盆

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

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

本版积分规则