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

riyad

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

6 R' n$ k) G2 R! ^; h
* e# U/ H+ w/ B# s2 N  M调用方法​

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

1. import { postEvent } from '@telegram-apps/bridge';
   / V2 J9 s/ B, c3 E, Y; \
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';
   : I4 D: E. D. M0 j. ]7 U
2. 
   
3. const viewport = await request(
   " ]) l9 F6 B$ D7 Q4 a3 {6 G
4.   'web_app_request_viewport',
   5 I9 n( `# a# S7 X  {2 n& w
5.   'viewport_changed',
   * a. ?% S. b) ~5 f1 l
6. );
   % @8 {4 g1 |& i# n
7. 
   
8. console.log(viewport);
   / B! f. I( L( R  p9 k  c% ]
9. // Output:
   # P; u& D6 K9 D
10. // {
    
11. //   is_state_stable: true,
    
12. //   is_expanded: false,
    
13. //   height: 320
    
14. // };

复制代码

& Z9 Q' o! ~! c* k

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

1. const buttonId = await request('web_app_open_popup', 'popup_closed', {
   
2.   params: {
   
3.     title: 'Caution',
   
4.     message: 'Should we delete your account?',
   
5.     buttons: [
   
6.       { id: 'yes', type: 'ok' },
   ; J% S  w- `1 `& Y. O! L1 a1 @" c
7.       { id: 'no', type: 'cancel' },
   0 O2 U9 S5 G  ]; e7 W
8.     ],
   # r2 |( h0 G  c, @; H3 K4 v
9.   },
   9 y2 M' }+ A1 N
10. });

复制代码

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

1. const result = await request(
   " S2 t: u0 c3 j9 o* d
2.   'web_app_open_scan_qr_popup',
   ( i: E+ e: I* u' ~0 D+ S# g
3.   ['qr_text_received', 'scan_qr_popup_closed'],
   - S* M/ ~$ H. n+ G+ `+ Y+ G6 p
4. );
   3 i3 f6 P* X( u2 B6 N! x. u. \$ Z
5. 
   . [# M+ g7 D+ x5 s
6. // The result will either be the qr_text_received
   ) [" J" W" s8 L4 T( X6 G+ s4 Y& Q- K
7. // or scan_qr_popup_closed event payload.

复制代码

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

postEvent​

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

1. request('web_app_request_viewport', 'viewport_changed', {
   ) U7 b# Z+ R& Y
2.   postEvent() {
   
3.     console.log('Hey, I am not going to do anything');
   ( \9 w$ m- s3 P) z: p- z: B
4.   },
   ! U2 s1 d- @( y4 V6 V; N
5. });

复制代码

abortSignal​

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

1. const controller = new AbortController();
   
2. 
   ! u  m! F" {9 N- _
3. request('web_app_request_viewport', 'viewport_changed', {
   
4.   abortSignal: controller.signal,
   $ G+ ?1 b; D! U4 q7 e
5. });
   
6. 
   : n3 Z( W$ W  P2 S3 v
7. setTimeout(() => {
   ! {4 p2 T" K: i& `
8.   controller.abort(new Error('Not going to wait anymore'));
   7 E( O' @0 y% R$ p- b6 J6 p- V
9. }, 500);

复制代码

timeout​

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

1. import { request } from '@telegram-apps/bridge';
   
2. 
   
3. try {
   
4.   await request(
   
5.     'web_app_invoke_custom_method',
   ( s$ _# i5 a% C( [+ w" t5 p
6.     'custom_method_invoked',
   ' C" }- x# [, P1 `0 n4 B2 a* k
7.     {
   
8.       timeout: 5000,
   
9.       params: {
   
10.         req_id: '1',
    
11.         method: 'deleteStorageValues',
    0 ~! i' l5 |0 b+ O( L) ~/ \. O
12.         params: { keys: ['a'] },
    $ @; ^- c* N- v2 s. Q0 F/ }$ `' |
13.       },
    
14.     },
    8 m( j' f% _# z; R# z7 E7 J" Q/ f
15.   );
    
16. } catch (e) {
    
17.   console.error(e); // TypedError with e.type === 'ERR_TIMED_OUT'
    
18. }

复制代码

capture​

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

1. const slug = 'jjKSJnm1k23lodd';
   
2. 
   
3. request('web_app_open_invoice', 'invoice_closed', {
   # M/ R8 I3 I' ?' C: N2 C6 }' E3 c
4.   params: { slug },
   ' D- V: \  K8 g% ~! @. I& D
5.   capture(data) {
   
6.     return slug === data.slug;
   . h/ X; I# o; L7 s) b
7.   },
   6 ?$ i, w2 o4 _6 F! G  G, {
8. });

复制代码

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

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

! \$ G) R$ @+ G/ Y1 u1 P