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

riyad

迷你应用程序​

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

安装​

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

Variable :

1. import { miniApp } from '@telegram-apps/sdk';
   
2. 
   2 c3 B6 C; ]9 n/ a  _
3. miniApp.mount();
   $ F/ y' V: r: B  p: [
4. miniApp.isMounted(); // true

复制代码

Functions :

1. import { mountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   3 q4 }- N' g. z% T2 H& w: `
2. 
   
3. mountMiniApp();
   : \$ u4 _! i* V' `! R* A
4. isMiniAppMounted(); // true

复制代码

INFO

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

' _$ n7 Y. {; t4 r' W0 U# `

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

Variable :

1. miniApp.unmount();
   % Y- w: S$ W+ c' B$ T
2. miniApp.isMounted(); // false

复制代码

Functions :

1. import { unmountMiniApp, isMiniAppMounted } from '@telegram-apps/sdk';
   , J+ ]* M/ ^5 f! l0 E$ Y! N7 I" ], r
2. 
   9 }) H! y* Q+ Z1 f% C
3. unmountMiniApp();
   
4. isMiniAppMounted(); // false

复制代码

绑定 CSS 变量​

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

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

Variable :

1. miniApp.bindCssVars();
   
2. // Creates CSS variables like:
   
3. // --tg-bg-color: #aabbcc
   
4. // --tg-header-color: #aabbcc
   / j$ w* @  {: H7 }5 `: Y
5. 
   
6. miniApp.bindCssVars(key => `--my-prefix-${key}`);
   * K- H  ?: Z8 X, W4 R% z" J
7. // Creates CSS variables like:
     k8 O  W: W6 I
8. // --my-prefix-bgColor: #aabbcc
   7 R( ?8 D: o1 h9 {$ M: T  E
9. // --my-prefix-headerColor: #aabbcc
   6 l3 T) _8 R6 D9 q* d8 e& `
10. 
    ' }$ N0 q0 d( \
11. miniApp.isCssVarsBound(); // true

复制代码

Functions :

1. import { bindMiniAppCssVars, isMiniAppCssVarsBound } from '@telegram-apps/sdk';
   
2. 
   
3. bindMiniAppCssVars();
   - d( N+ C( f0 B$ B
4. // Creates CSS variables like:
   
5. // --tg-bg-color: #aabbcc
   
6. // --tg-header-color: #aabbcc
   4 c, s  ], {7 D
7. 
   ( O" j3 ]* }- k: a8 h5 f) x' k
8. bindMiniAppCssVars(key => `--my-prefix-${key}`);
   1 @' T0 i) T/ q3 B
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.   miniApp.headerColor(); // 'bg_color'
   % P9 D/ o' C2 D. X& H7 [
4. }
   ' `' z8 t0 w; M2 `6 l; n6 U6 K  i
5. 
   
6. if (
   $ f3 t( h! C0 n9 K8 K$ M8 H
7.   miniApp.setHeaderColor.isSupported()
   
8.   && miniApp.setHeaderColor.supports('color')
   ! m7 w. D5 @  V
9. ) {
   
10.   miniApp.setHeaderColor('#aabbcc');
    
11.   miniApp.headerColor(); // '#aabbcc'
    # @: U# k2 U8 w6 W
12. }

复制代码

Functions :

1. import {
   % I1 h: E, ^9 C8 U
2.   setMiniAppHeaderColor,
   
3.   miniAppHeaderColor,
   
4. } from '@telegram-apps/sdk';
   4 ]- {4 g# \3 O- c
5. 
   
6. if (setMiniAppHeaderColor.isSupported()) {
   
7.   setMiniAppHeaderColor('bg_color');
   6 p+ }" i$ Z0 f3 K! o% d
8.   miniAppHeaderColor(); // 'bg_color'
   
9. }
   
10. 
    
11. if (
    
12.   setMiniAppHeaderColor.isSupported()
    
13.   && setMiniAppHeaderColor.supports('color')
    , {2 I1 l9 j9 x, T) D' h3 x. g
14. ) {
    
15.   setMiniAppHeaderColor('#aabbcc');
    * _$ F& q  O4 x; x  ?; `8 u
16.   miniAppHeaderColor(); // '#aabbcc'
    - j; N0 h8 l9 r. F/ b: W4 Z
17. }

复制代码

背景颜色​

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

Variable :

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

复制代码

Functions :

1. import {
   
2.   setMiniAppBackgroundColor,
   
3.   miniAppBackgroundColor,
   
4. } from '@telegram-apps/sdk';
   
5. 
   & {+ i4 t* U6 r9 L% \% z5 ]* Z
6. if (setMiniAppBackgroundColor.isSupported()) {
   & d8 b' W! P8 y: \/ g
7.   setMiniAppBackgroundColor('#ffffff');
   
8.   miniAppBackgroundColor(); // '#ffffff'
   5 D' n" p0 i/ e! y1 N) e# T
9. }

复制代码

方法​close​

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

Variable :

1. miniApp.close();

复制代码

Functions :

1. import { closeMiniApp } from '@telegram-apps/sdk';
   
2. 
   $ S7 z4 o. d5 F* |6 C
3. closeMiniApp();

复制代码

ready​

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

Variable :

1. miniApp.ready();

复制代码

Functions :

1. import { miniAppReady } from '@telegram-apps/sdk';
   
2. 
   , j: d7 ^% I3 C& ?9 n5 v
3. miniAppReady();

复制代码

TIP

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

沙盆

膜拜大神！！