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

riyad

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

4 k3 X# d- y' n, R$ k% \
$ I* ?$ n1 a) C) l; d- K调用方法​

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

1. import { postEvent } from '@telegram-apps/bridge';
   
2. 
   , a0 h( J1 v  x" \' ?1 G- b2 D9 ?: H
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';
   ( ?" @( [" W6 M' Y( ^# L! b
2. 
   : d1 E3 l$ a8 c9 s) M; P
3. const viewport = await request(
   + b6 T1 \$ v- V. J* E; {
4.   'web_app_request_viewport',
   ; Y7 `% k/ k8 t) q: F+ A7 }2 K
5.   'viewport_changed',
   ! Z1 f( [, @, z6 D6 K  _
6. );
   1 d# A! Y5 M( W) }1 o4 {) y7 |
7. 
   
8. console.log(viewport);
   
9. // Output:
   9 u/ S' k$ Y) m% n, A6 Y
10. // {
    
11. //   is_state_stable: true,
    
12. //   is_expanded: false,
    
13. //   height: 320
    
14. // };

复制代码

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

1. const buttonId = await request('web_app_open_popup', 'popup_closed', {
   " t' }. K8 g$ I" M) g% p) x
2.   params: {
   / R, j$ _( c/ K. `
3.     title: 'Caution',
   " U4 f' q/ L7 N0 N. ]
4.     message: 'Should we delete your account?',
   
5.     buttons: [
   
6.       { id: 'yes', type: 'ok' },
   
7.       { id: 'no', type: 'cancel' },
   
8.     ],
   " w# s. J7 x3 m4 @; g
9.   },
   
10. });

复制代码

; I) P$ u4 f8 E' x. M) I! i

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

1. const result = await request(
   
2.   'web_app_open_scan_qr_popup',
   : K: d: w5 H& S
3.   ['qr_text_received', 'scan_qr_popup_closed'],
   
4. );
   
5. 
   
6. // The result will either be the qr_text_received
   
7. // or scan_qr_popup_closed event payload.

复制代码

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

& F; v6 p2 n, u& n  zpostEvent​

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

1. request('web_app_request_viewport', 'viewport_changed', {
   
2.   postEvent() {
   - t: n- o+ g, Y2 r
3.     console.log('Hey, I am not going to do anything');
   
4.   },
   
5. });

复制代码

abortSignal​

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

1. const controller = new AbortController();
   ; l2 \% H; I; m* C
2. 
   ( ]0 _( |% O. j  Y
3. request('web_app_request_viewport', 'viewport_changed', {
   7 ^1 ^* b: x/ l/ J; L2 l4 b
4.   abortSignal: controller.signal,
   : C- S' P9 j. e+ \/ l+ p) {2 t
5. });
   5 S2 ], j! i0 A. e
6. 
   
7. setTimeout(() => {
   
8.   controller.abort(new Error('Not going to wait anymore'));
   % U9 X$ j" {, {5 y
9. }, 500);

复制代码

timeout​

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

1. import { request } from '@telegram-apps/bridge';
     o" D) D4 i. T* ^
2. 
   
3. try {
   
4.   await request(
   9 k& ?3 a4 U0 O$ e9 W  M
5.     'web_app_invoke_custom_method',
   - y) Q! k/ @8 c. X& n% W
6.     'custom_method_invoked',
   % v( V5 ^! g+ m) p% v
7.     {
   $ }5 ]: |1 z4 L# r6 i. e
8.       timeout: 5000,
   
9.       params: {
   
10.         req_id: '1',
    5 D7 m: g/ n) g* `/ c
11.         method: 'deleteStorageValues',
    , O4 S, i* S' q" k+ T" T0 n9 }
12.         params: { keys: ['a'] },
    $ y9 E. ]# B2 M( V: T. B2 J
13.       },
    * [$ c# p/ r" `5 m( t1 ^2 e' b
14.     },
    7 {$ @5 c+ w3 i/ v2 r# R( G
15.   );
    : q/ K" D4 T: x" P0 y4 ]4 K! R
16. } catch (e) {
    
17.   console.error(e); // TypedError with e.type === 'ERR_TIMED_OUT'
    5 R1 W$ N* h2 P  W3 F
18. }

复制代码

capture​

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

1. const slug = 'jjKSJnm1k23lodd';
     o# ]3 x! l7 V: ?. m/ p
2. 
   
3. request('web_app_open_invoice', 'invoice_closed', {
   
4.   params: { slug },
   
5.   capture(data) {
   . L3 K$ Z9 {/ H; \
6.     return slug === data.slug;
   6 a# @: f1 J  k3 P+ M
7.   },
   & B6 M' ^, g( Z  \
8. });

复制代码

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

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

' w  }% F9 n2 [" I3 `. b: x" z: o1 c