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

riyad

本文涵盖与 apps communication 事件相关的主题。
, e4 m$ A2 @+ h7 i  L

% M8 L$ M$ F$ ?3 l6 D定义事件处理程序​

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

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

1. import { defineEventHandlers } from '@telegram-apps/bridge';
   6 t; A) b; S( ]3 i; K7 s: r
2. 
   
3. defineEventHandlers();

复制代码

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

8 R0 ?8 E4 [2 ~/ Ion 和 off​

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

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

1. import { on } from '@telegram-apps/bridge';
   ( P7 F  r3 _: h2 r9 g4 l
2. 
   4 a3 w* S2 @. O+ C1 X( ^0 `# u! [
3. // Start listening to the "viewport_changed" event. The returned value
   1 d! ]% v% j' |" Z9 ^  z  X4 C8 h
4. // is a function that removes this event listener.
   
5. const removeListener = on('viewport_changed', (payload) => {
   
6.   console.log('Viewport changed:', payload);
   : e- \+ z8 f# U3 U8 @1 z
7. });
   2 s( ^+ H# |6 _3 \
8. 
   ; R' k% R! o# |$ E6 J0 J3 a
9. // Remove this event listener.
   8 Q/ v1 \6 B5 i
10. removeListener();

复制代码

7 D5 t& O1 B2 h0 B8 c( \5 p! T( @

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

1. import { on, off, type EventListener } from '@telegram-apps/bridge';
   ( C7 }0 g5 m) ^
2. 
   9 ^5 l2 a3 t1 n# Z5 ^3 g
3. const listener: EventListener<'viewport_changed'> = (payload) => {
   5 i  B' t5 v: O
4.   console.log('Viewport changed:', payload);
   . J/ @$ S& v( E
5. };
   
6. 
   
7. // Start listening to the event.
   " P2 g- i6 S: X0 M# \
8. on('viewport_changed', listener);
   
9. 
   . o) T+ a7 C! E" R1 l% B3 ]# u# ^
10. // Remove the event listener.
    3 e& |7 ]& w0 P$ }) b6 v! u
11. off('viewport_changed', listener);

复制代码

0 r  Q9 x& X- k4 ^, I  ?

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

1. import { on } from '@telegram-apps/bridge';
   
2. 
   7 I3 e2 p  A( O; P
3. // Will automatically be removed after the first listener execution.
   + K, k& G8 Y: `
4. on('viewport_changed', (payload) => {
   4 T7 y: z& n  ], Q% z2 [6 m
5.   console.log('Viewport changed:', payload);
   
6. }, true);

复制代码

subscribe 和 unsubscribe​
* @3 K: J" ~; J* {+ W6 G" I4 m

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

import {
  subscribe,
  unsubscribe,
  type SubscribeListener,
} from '@telegram-apps/bridge';
- T! D7 I) H/ k0 K
const listener: SubscribeListener = (event) => {
  console.log('Received event', event);
; E9 }& @/ B9 C! c5 v( \0 Q};

// Listen to all events.
& ]$ h) k$ s* @) r' L. P2 r- Gsubscribe(listener);
' j( Z8 |; N1 h5 }' @! k' O
// Remove the listener.
unsubscribe(listener);

, |/ X' q" @$ |3 q' Y
" h/ s9 n6 w  v9 l* v2 g6 t& M

1 E& L6 e! F/ [0 _2 O