Telegram 小程序 | TypeScript @telegram-apps/bridge | 事件

riyad

本文涵盖与 apps communication 事件相关的主题。
6 h8 I! n! \, ^% I0 \

定义事件处理程序​

为避免副作用，该软件包在导入时不会调用任何函数。 Telegram 迷你应用程序 需要在本地 Telegram 应用程序和迷你应用程序之间使用特定的通信方式，其中涉及在全局 window 对象中定义某些方法。

要启用此功能并开始接收 Telegram 迷你应用程序事件，请使用 defineEventHandlers 函数：

1. import { defineEventHandlers } from '@telegram-apps/bridge';
   % D/ s  q7 F$ ~7 s
2. 
   
3. defineEventHandlers();

复制代码

这种设置通过监听 和处理必要的事件，确保迷你应用能与原生 Telegram 应用正确交互。

on 和 off​

要开始处理事件，需要使用 on 和 off 函数。

下面是 on 函数的一个基本示例：

1. import { on } from '@telegram-apps/bridge';
   8 H( w8 X' b2 k4 L9 H
2. 
   
3. // Start listening to the "viewport_changed" event. The returned value
   1 Y/ s5 _3 O; i
4. // is a function that removes this event listener.
   
5. const removeListener = on('viewport_changed', (payload) => {
   2 W* n/ L0 D- w3 m6 V+ @
6.   console.log('Viewport changed:', payload);
   4 L3 L. @) M0 i% \/ O7 O8 S
7. });
   
8. 
   / F- A6 p7 m+ P0 Y/ }
9. // Remove this event listener.
     ~$ C5 f7 h8 ^$ ~( y$ t: |; S7 Y
10. removeListener();

复制代码

另外，要停止监听事件，开发人员可以使用 off 功能：

1. import { on, off, type EventListener } from '@telegram-apps/bridge';
   1 s/ O) }- c& A. }
2. 
   
3. const listener: EventListener<'viewport_changed'> = (payload) => {
   1 x( q4 H  l1 X
4.   console.log('Viewport changed:', payload);
   ( A( ^7 U) ^6 y9 t6 K) G* e
5. };
   ( o  j8 u! {! {' ~9 _5 [# ^
6. 
   ' I7 [5 c6 }/ d1 _9 S; k4 }9 O4 s
7. // Start listening to the event.
   
8. on('viewport_changed', listener);
   3 l3 f; x! Y) w7 Z5 y# }
9. 
   * F" r+ w( n  H# f( M1 Z
10. // Remove the event listener.
    
11. off('viewport_changed', listener);

复制代码

要只调用监听器一次，则使用第三个布尔参数：

1. import { on } from '@telegram-apps/bridge';
   % d. a- D0 ^  R3 N
2. 
   
3. // Will automatically be removed after the first listener execution.
   
4. on('viewport_changed', (payload) => {
   
5.   console.log('Viewport changed:', payload);
   1 C  O- \  V+ j5 b* P
6. }, true);

复制代码

subscribe 和 unsubscribe​

要监听本地 Telegram 应用程序发送的所有事件，需要使用 subscribe 和 unsubscribe 功能：

import {
+ d* e2 ~  z1 h9 x+ \9 X  subscribe,
3 z2 {4 n2 b- ]; p  unsubscribe,
3 ^/ h+ J' P0 W$ ~- H) J  type SubscribeListener,
) e2 S4 b) G1 x0 }7 ?} from '@telegram-apps/bridge';

! O, F$ \9 d# m1 i$ @% b! Jconst listener: SubscribeListener = (event) => {
  console.log('Received event', event);
};

+ L8 H% C3 K2 N6 p* V  h" |& }// Listen to all events.
subscribe(listener);

// Remove the listener.
; F' D: O: D( R) S4 k' y" vunsubscribe(listener);

. F; X( O) D7 Q. q1 o9 l5 b6 Z

+ N5 t. R7 K- N, X# t" ^

  c8 e) k( r1 j4 t- L0 X