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

riyad

本文涵盖与 apps communication 事件相关的主题。


* d. o4 v8 w) X9 _定义事件处理程序​

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

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

1. import { defineEventHandlers } from '@telegram-apps/bridge';
   + l5 Q) _& ]# [
2. 
   
3. defineEventHandlers();

复制代码

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

on 和 off​

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

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

1. import { on } from '@telegram-apps/bridge';
   . Y3 o, N8 X$ N* M% r
2. 
   ( W' X& p: i9 o& U: M4 t
3. // Start listening to the "viewport_changed" event. The returned value
   ' k! d1 \' y3 t9 }
4. // is a function that removes this event listener.
   
5. const removeListener = on('viewport_changed', (payload) => {
   
6.   console.log('Viewport changed:', payload);
   5 _& ^* j' H- |4 k4 W: z  u" }
7. });
     {: m1 t$ o$ e  w8 l8 H
8. 
   4 H" v, w. O- L7 ~' U; O
9. // Remove this event listener.
   % N  B' }0 E; k+ ]5 W- z$ P
10. removeListener();

复制代码

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

1. import { on, off, type EventListener } from '@telegram-apps/bridge';
   
2. 
   
3. const listener: EventListener<'viewport_changed'> = (payload) => {
   
4.   console.log('Viewport changed:', payload);
   
5. };
   
6. 
   ; g, g5 j0 p& W7 w- h1 c" B+ b0 d
7. // Start listening to the event.
   ) o8 N3 F  r6 S+ I! |0 W2 }
8. on('viewport_changed', listener);
     H) w+ f2 A2 j& \
9. 
   
10. // Remove the event listener.
    1 ?2 V$ r7 g2 i8 i
11. off('viewport_changed', listener);

复制代码

2 u8 n" D, v& H0 {

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

1. import { on } from '@telegram-apps/bridge';
   3 h, e: [! |8 `( g  l. }
2. 
   
3. // Will automatically be removed after the first listener execution.
   
4. on('viewport_changed', (payload) => {
   
5.   console.log('Viewport changed:', payload);
   
6. }, true);

复制代码

subscribe 和 unsubscribe​
# v  n9 j8 Y. U8 o' L! `! I0 q

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

import {
  subscribe,
  unsubscribe,
  type SubscribeListener,
} from '@telegram-apps/bridge';
. |. p7 I* e3 U8 \$ y, J
0 W- U" G0 h* U( Hconst listener: SubscribeListener = (event) => {
  R1 a" L# x) r  S  console.log('Received event', event);
) H1 {- p3 K* ]* ]};

// Listen to all events.
9 R% C+ A/ G' gsubscribe(listener);
) g- b3 ~* Z0 f1 F
. S# w' B& Z9 z* n+ [% c# B7 z// Remove the listener.
unsubscribe(listener);

4 U* M$ M+ C! [2 n

% w% L- p& o  O; s9 H; k: d
2 [4 N- u9 f/ E% M0 e
: I! F! T- ?( @


7 Y0 [* |5 @+ X0 k# o