Telegram 小程序 | TypeScript @telegram-apps/bridge | 方法

riyad

本文涵盖与 apps communication 方法相关的主题。


5 ?2 _( Q* y8 e$ c7 Z* H( T* P6 S调用方法​

要调用 Telegram 迷你应用程序的方法，开发人员应使用 postEvent 函数：

1. import { postEvent } from '@telegram-apps/bridge';
   & Y: H: g* s+ u. i, Z6 S" ^- P
2. 
   
3. postEvent('web_app_setup_back_button', { is_visible: true });

复制代码

该功能会根据当前 环境自动确定发送事件的正确方式。 它能识别 Telegram 应用程序类型并选择合适的流程。

request​

当开发人员需要调用 Telegram 小应用程序方法和 接收特定事件时，应使用 request 函数。

例如，调用web_app_request_viewport 方法并捕捉 viewport_changed 事件以获取实际视口数据：

1. import { request } from '@telegram-apps/bridge';
   + G8 ~4 f- E( n3 d
2. 
   : ~% u8 t  q' Y5 x; [
3. const viewport = await request(
   
4.   'web_app_request_viewport',
   / \1 H; O  H2 p0 y3 z
5.   'viewport_changed',
   
6. );
   9 s% e5 Q7 Y3 ~
7. 
   - a8 l8 A% D& A8 R, l2 K) x4 t
8. console.log(viewport);
   
9. // Output:
   
10. // {
    . p4 B+ l4 S! P  I
11. //   is_state_stable: true,
    / u7 f3 V( D2 K5 L
12. //   is_expanded: false,
    # u8 p; A$ b' M1 N
13. //   height: 320
    
14. // };

复制代码

如果 Telegram 小应用程序方法接受参数，则应在第三个参数的 params 属性 中传递这些参数：

1. const buttonId = await request('web_app_open_popup', 'popup_closed', {
   ( _& G# ]6 G9 I, U; }
2.   params: {
   % Q) K* u, J# e8 n2 X
3.     title: 'Caution',
   : R" ?% N2 I8 F1 U7 T
4.     message: 'Should we delete your account?',
   
5.     buttons: [
   
6.       { id: 'yes', type: 'ok' },
   
7.       { id: 'no', type: 'cancel' },
   
8.     ],
   
9.   },
   ; V0 o( V6 x7 V( c
10. });

复制代码

它还可以同时跟踪多个事件：

1. const result = await request(
   8 q5 Q; o; V# ]7 w3 U
2.   'web_app_open_scan_qr_popup',
   - A# j1 @: O7 P+ |8 O
3.   ['qr_text_received', 'scan_qr_popup_closed'],
   
4. );
   & R8 w  A) B' f: W
5. 
   
6. // The result will either be the qr_text_received
   
7. // or scan_qr_popup_closed event payload.

复制代码

该函数允许传递其他选项，如 postEvent、abortSignal、timeout、 和 capture。

  I  t7 b* d3 xpostEvent​

postEvent 选项允许开发人员覆盖用于调用 Telegram 迷你应用程序 方法的方法。

1. request('web_app_request_viewport', 'viewport_changed', {
   
2.   postEvent() {
   
3.     console.log('Hey, I am not going to do anything');
   2 ]& m$ j! d' F  g! N
4.   },
   + y5 [9 a8 B* H
5. });

复制代码

abortSignal​

要从外部终止返回的承诺，需要使用 abortSignal 选项。

1. const controller = new AbortController();
   * c/ Z% p- _7 w/ h7 ^
2. 
   8 b% i1 I9 p$ V- a& N' W1 n& I! @4 A( G
3. request('web_app_request_viewport', 'viewport_changed', {
   
4.   abortSignal: controller.signal,
   . o- i" p( W" H1 u! P
5. });
   9 l( r5 d. n6 N
6. 
   ; X  z7 O) z/ p! P  Z
7. setTimeout(() => {
   ! j3 h, d3 u5 G1 U; I2 I! P! z
8.   controller.abort(new Error('Not going to wait anymore'));
     ]9 p) \8 i; }4 h* t* e: I
9. }, 500);

复制代码

timeout​

timeout 选项为请求指定一个超时时间。

1. import { request } from '@telegram-apps/bridge';
   / x& t5 @$ a+ I4 K
2. 
   
3. try {
     f/ B5 w. n: c: y: B+ Y0 N
4.   await request(
   
5.     'web_app_invoke_custom_method',
   
6.     'custom_method_invoked',
   8 w4 c  o9 }7 B) m- b
7.     {
   , `: r. n+ z2 E3 N/ t8 `( {
8.       timeout: 5000,
   
9.       params: {
   
10.         req_id: '1',
    
11.         method: 'deleteStorageValues',
    # V4 }) v+ I/ _, K+ a) ~9 F
12.         params: { keys: ['a'] },
    ' t. e  U4 `( z' `
13.       },
    5 x/ L# k: b7 B0 ^- X
14.     },
    & C7 c  L6 L3 P8 P
15.   );
    ; z  K0 S7 D+ X8 w* Y4 e
16. } catch (e) {
    ; S/ ]# ]+ Z" I: H) f
17.   console.error(e); // TypedError with e.type === 'ERR_TIMED_OUT'
    ! d, e, ~, D4 G; X2 b) ~
18. }

复制代码

capture​

capture 属性是一个允许开发人员确定是否应捕获 Mini Apps 事件并从 request 函数返回的函数：

1. const slug = 'jjKSJnm1k23lodd';
   9 N# ^: Q4 E* s( g
2. 
   
3. request('web_app_open_invoice', 'invoice_closed', {
   
4.   params: { slug },
   " q- |! g! I+ h' h. O' T
5.   capture(data) {
   
6.     return slug === data.slug;
   
7.   },
   5 e+ \% o* K( E0 ?0 }5 P/ a7 Z
8. });

复制代码

默认情况下，request 函数会捕获具有所需名称的第一个事件。 在这种情况下，只有当事件具有预期的标签时，该函数才会捕获事件，特定于 [color=var(--vp-c-brand-1)]invoice_closed 事件。

当传递一个事件数组时，capture 函数将收到一个对象，其中包含 event: EventName 和 payload?: EventPayload 属性的对象。