Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 组件 | 迷你应用程序

riyad

% u) W; O6 x2 K
迷你应用程序​

该组件提供其他系统 组件未涵盖的 Telegram Mini Apps 通用功能。

初始化​

要初始化组件，请使用initMiniApp函数：

1. import { initMiniApp } from '@telegram-apps/sdk';
   
2. 
   ) v! ^& u* W* C8 Q
3. const [miniApp] = initMiniApp();

复制代码

颜色​页眉​

开发人员可以获取并更新 Mini App 的标题和背景颜色。 要获取 标题颜色的当前值，开发人员可参考 headerColor 属性，并通过 setHeaderColor 方法进行更新：

1. miniApp.setHeaderColor('secondary_bg_color');
   % c/ E! b* O' O. O/ m
2. // or starting from v6.10:
   6 ]: Y8 c7 M5 ~# k. U2 W. K. k
3. miniApp.setHeaderColor('#aa1132');

复制代码

背景介绍​

除了迷你应用程序的标题颜色，开发人员还可以调整其背景颜色：

1. miniApp.setBgColor('#888311');

复制代码

迷你应用背景色用于确定当前迷你应用是否为深色调。 要知道 当前调色板是否为暗色，开发人员应使用 isDark 属性：

1. console.log(miniApp.isDark); // false

复制代码

访问请求​

从 Telegram Mini Apps 6.9 版本开始，允许 Mini Apps 申请访问手机 号码和申请写入当前用户的权限。 为此，允许开发人员使用 requestPhoneAccess 和 requestWriteAccess 方法：

1. miniApp.requestPhoneAccess().then(() => {
   $ C  N- e- y9 B6 s2 k+ H* @
2.   // done.
   
3. });
   
4. 
     Z/ j1 z/ G8 @6 l; q5 w8 [% l* r$ p" j
5. miniApp.requestWriteAccess().then(() => {
   ! _+ P9 l; H9 J3 z1 F1 ^* A
6.   // done.
   
7. });

复制代码

要请求联系信息（例如电话号码），请使用 requestContact 方法：

  ?" @0 \) p4 n+ D% y

1. miniApp.requestContact().then(contact => {
   + }9 c( Z0 u8 r  n$ c
2.   console.log(contact);
   ! ]5 O& Z! t4 @4 Q' a# r
3.   // Output:
   
4.   // {
   4 p( S' a$ [( [
5.   //   authDate: Date(...),
   & Q/ e/ S4 d7 C
6.   //   hash: '...',
   
7.   //   contact: {
     Q- c  L+ I4 O1 L
8.   //     firstName: '...',
   $ h9 k$ ]: E. \, ?7 y2 `7 @" C
9.   //     phoneNumber: '+38291789233',
   + K# O7 B" F- h, B" S/ R
10.   //   },
    ! b( b/ B% d7 O3 ?9 d4 G/ O8 ?
11.   // };
    5 Q! Y0 k4 L& M2 O2 @
12. });

复制代码

内联模式​

迷你应用程序可在 内联模式 下启动。 当 在这种模式下启动迷你应用程序时，允许开发人员使用 switchInlineQuery 方法：

1. miniApp.switchInlineQuery('Show me something', ['users', 'groups']);
   & E: {: m+ h2 E. e" h: g9 W

复制代码

调用此方法时，Telegram 应用程序会发送机器人用户名和指定文本，以 用户选择的聊天内容。 可用聊天列表将受到第二个参数中指定的聊天类型 的限制。

要检查当前 Mini App 是否以内联模式启动，开发者应参考 isBotInline 属性：

1. console.log(miniApp.isBotInline); // false

复制代码

生命周期方法​ready​

通知 Telegram 应用程序已准备好显示迷你应用程序。

建议尽早调用该方法，即在加载所有基本接口 元素后立即调用。 调用该方法后，加载占位符将被隐藏，迷你应用程序将显示出来。

如果该方法未被调用，占位符只有在页面完全加载后才会被隐藏。

1. miniApp.ready();

复制代码

close​

关闭迷你应用程序。

1. miniApp.close();

复制代码

如果您想将应用程序打包到底部应用程序栏，但不想关闭它，请考虑使用第一个参数 returnBack: boolean。

1. //
   
2. miniApp.close(true);

复制代码

5 W  j7 _( c. ^0 S! h
其他方法​sendData​

用于向机器人发送数据的方法。 调用该方法时，会向 机器人发送一条服务消息，其中包含长度不超过 4096 字节的数据，然后关闭 Mini App。 请参阅 Message 类中的 web_app_data 字段。

: b2 B. m; I3 O( y3 z- p
事件​

可被 跟踪 的事件列表：

事件	监听器	触发条件
change	() => void	组件中的某些部分发生了变化
change:bgColor	(value: RGB) => void	更改了 bgColor 属性
change:headerColor	(value: HeaderColorKey or RGB) => void	更改了 headerColor 属性

0 c3 \" B" Y2 h方法支持​

方法和参数列表，可在 support checks 中使用：requestWriteAccess、requestPhoneAccess、 switchInlineQuery、setHeaderColor、setBgColor和setHeaderColor.color。

0 {; ]: t7 v5 s0 V" t* m- o% d


! y" V. g1 V/ S0 x& b/ v

蹂珍淙

我抢、我抢、我抢沙发~