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

riyad

本文涵盖与 apps communication 事件相关的主题。
- C0 `& @" |4 M% S" n; [2 I3 ?

定义事件处理程序​

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

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

1. import { defineEventHandlers } from '@telegram-apps/bridge';
   2 X. {  a2 G" w- V1 Y' _% c0 |
2. 
   . h9 f. B' G9 t  E2 L+ Q
3. defineEventHandlers();

复制代码

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

on 和 off​

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

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

1. import { on } from '@telegram-apps/bridge';
   
2. 
   " t/ Z3 d& w$ F) ^* A) C# H
3. // Start listening to the "viewport_changed" event. The returned value
   
4. // is a function that removes this event listener.
   
5. const removeListener = on('viewport_changed', (payload) => {
   ! ^6 ~7 R9 W6 ]) Z% M7 f2 }) Z0 {
6.   console.log('Viewport changed:', payload);
   
7. });
   ) ^+ Z0 y) m% i
8. 
   
9. // Remove this event listener.
     U/ ]4 ?% }  |4 ~# Q
10. removeListener();

复制代码

7 Q8 {( _9 h3 r: n

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

1. import { on, off, type EventListener } from '@telegram-apps/bridge';
   
2. 
   : g5 y" X; [/ A- p1 e2 B$ }1 z% R
3. const listener: EventListener<'viewport_changed'> = (payload) => {
   
4.   console.log('Viewport changed:', payload);
   
5. };
   ! _4 v6 f5 ]# R4 j9 K; W
6. 
   
7. // Start listening to the event.
   
8. on('viewport_changed', listener);
   
9. 
   
10. // Remove the event listener.
    
11. off('viewport_changed', listener);

复制代码

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

1. import { on } from '@telegram-apps/bridge';
   0 Q: Q6 O  d* j1 g9 G
2. 
   
3. // Will automatically be removed after the first listener execution.
   
4. on('viewport_changed', (payload) => {
   
5.   console.log('Viewport changed:', payload);
   ) o" I1 h7 ^. T
6. }, true);

复制代码

subscribe 和 unsubscribe​

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

import {
  subscribe,
5 m* {& _+ G  f8 n% f  unsubscribe,
9 B- r: n4 u, M7 c2 A0 X8 i  type SubscribeListener,
} from '@telegram-apps/bridge';

const listener: SubscribeListener = (event) => {
5 q/ n# t, u' c" N  console.log('Received event', event);
};
) [4 B3 e* Z5 n  x& t2 {2 S
  H. S+ a& t; |) @9 ~// Listen to all events.
% O4 f$ k* E) T* |1 k# @4 V% ~& ksubscribe(listener);

5 B5 i/ `$ N1 k& t: B// Remove the listener.
unsubscribe(listener);

' T$ T7 v" E1 g6 {& A0 q/ @
% U+ g) H: K3 `# q, @

0 U5 c/ b9 E9 a' S

% V6 \" F$ D7 k/ v# |( m