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

riyad

迷你应用程序​

💠组件 负责管理 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';
   
2. 
   
3. mountMiniApp();
   
4. isMiniAppMounted(); // true

复制代码

INFO

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

9 B: u1 ~# G# l  m

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

Variable :

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

复制代码

Functions :
% F) k7 V! {0 Q% V

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   
2. 
   % E" F* {, _7 C# U
3. unmountMiniApp();
   
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
   
4. // --tg-header-color: #aabbcc
   
5. 
   $ I8 w: j+ X8 a
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   4 j  }, }: k+ j
7. // Creates CSS variables like:
   
8. // --my-prefix-bgColor: #aabbcc
   5 H/ z2 S( g# {3 c
9. // --my-prefix-headerColor: #aabbcc
   
10. 
    
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   
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
   
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}`);
   
9. // Creates CSS variables like:
   
10. // --my-prefix-bgColor: #aabbcc
    
11. // --my-prefix-headerColor: #aabbcc
    
12. 
    
13. isMiniAppCssVarsBound(); // true

复制代码

页眉颜色​

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

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

Variable :

1. if (miniApp.setHeaderColor.isSupported()) {
   
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. 
   
6. if (
   
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   7 b* r4 K9 F8 ~
9. ) {
   2 e1 Z' P& O' I( D
10.   miniApp.setHeaderColor('#aabbcc');
    
11.   miniApp.headerColor(); // '#aabbcc'
    
12. }

复制代码

Functions :

1. import {
   
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   + d9 W7 T: @8 S; v
4. } from '@telegram-apps/sdk';
   
5. 
   5 r3 \0 c5 Q9 a2 o4 g6 j' c( `4 [
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
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');
    
16.   miniAppHeaderColor(); // '#aabbcc'
    ; k% u% E+ v/ ~: }% K6 m
17. }

复制代码

背景颜色​

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

Variable :

1. if (miniApp.setBackgroundColor.isSupported()) {
   
2.   miniApp.setBackgroundColor('#ffffff');
   
3.   miniApp.backgroundColor(); // '#ffffff'
   
4. }

复制代码

Functions :

1. import {
   8 Z, P( |) h, Q& \
2.   setMiniAppBackgroundColor,
   . ^- ?0 a- L; B) M" ?5 M" n
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   7 E- u1 ^( g/ e# P
5. 
   , }, I# K" m% `# w2 A1 W
6. if (setMiniAppBackgroundColor.isSupported()) {
   
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. 
   ; T$ S- w$ U6 B
3. miniAppReady();

复制代码

TIP

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

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

沙盆

膜拜大神！！