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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   
2. 
   
3. miniApp.mount();
   " K! C, I7 W8 [
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   
3. mountMiniApp();
   
4. isMiniAppMounted(); // true

复制代码

INFO

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

. s* Q9 R2 m( B6 j$ }

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

Variable :

1. miniApp.unmount();
   
2. miniApp.isMounted(); // false

复制代码

Functions :

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   / O3 E1 `8 }$ I4 ~
3. unmountMiniApp();
   5 o, f/ K/ N1 f% b% C# n0 z& T
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   9 |% A7 k, G: ^0 c
2. // Creates CSS variables like:
   ' Z( A& [. U. k. x
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   9 A: V( @& t' y! K% Y8 T
5. 
   & y" m2 W- n( k: i" @+ N
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   
7. // Creates CSS variables like:
   
8. // --my-prefix-bgColor: #aabbcc
   : G. d% Q/ u4 J: z
9. // --my-prefix-headerColor: #aabbcc
   / n7 x1 |) K) Y- y" w* d
10. 
    : p+ {. z" o# z& ^
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   4 o' E' s5 j& V3 `% U
2. 
   # F0 @: g0 s7 w# m: d5 v3 \
3. bindMiniAppCssVars();
   
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   
7. 
   
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   , Z  T! [1 G9 f  K5 p2 V' r/ V  M
9. // Creates CSS variables like:
   8 X  L6 ^  L4 f/ W
10. // --my-prefix-bgColor: #aabbcc
    " x6 K: q9 }4 B7 J8 \9 v% w2 R
11. // --my-prefix-headerColor: #aabbcc
    
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   + L! A) i& q2 p1 G8 a
2.   miniApp.setHeaderColor('bg_color');
   $ K: g+ R5 e7 U- d0 u
3.   miniApp.headerColor(); // 'bg_color'
   
4. }
   1 o/ s* S+ b6 @7 y/ u
5. 
   0 o/ c! w/ }; ~+ K) N& n
6. if (
   2 O8 ^! M4 F6 s0 e2 _
7.   miniApp.setHeaderColor.isSupported()
   % b3 _' C$ ^" C3 _9 O; h: f
8.   && miniApp.setHeaderColor.supports('color')
   1 q1 b7 k4 h% F) D) Z4 O
9. ) {
   
10.   miniApp.setHeaderColor('#aabbcc');
    # T6 }! [* O" _8 M; ~
11.   miniApp.headerColor(); // '#aabbcc'
    / Q) |) j7 q( G9 G$ J0 d5 P* P
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   & I8 w; Z( A# y- X( F/ B; a
5. 
   # C( P; }" V; C7 a. e% k
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   . Q) ]8 w( m4 O3 v
8.   miniAppHeaderColor(); // 'bg_color'
   5 G1 t7 ^6 C( I4 w. q6 H
9. }
   9 P* x6 N1 c# Y9 F6 d2 h
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    2 l- d: P" H0 O+ ]" N$ N
13.   && setMiniAppHeaderColor.supports('color')
    
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    * y$ z% u, t9 i5 @
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   ( ?: `$ ?) r5 b' f, n
3.   miniApp.backgroundColor(); // '#ffffff'
   3 ]5 L+ j5 i; }$ f; `
4. }

复制代码

Functions :

1. import {
   
2.   setMiniAppBackgroundColor,
   0 ]8 U/ ~/ L, K8 h
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   
6. if (setMiniAppBackgroundColor.isSupported()) {
   
7.   setMiniAppBackgroundColor('#ffffff');
   1 v2 N6 u3 T7 i9 C
8.   miniAppBackgroundColor(); // '#ffffff'
   
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   
2. 
   3 y+ ]: z; _7 I( M: B6 ^; w6 `* x
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   . F+ x  y" P; h0 p
2. 
   
3. miniAppReady();

复制代码

TIP

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

沙盆

膜拜大神！！