Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 组件 | 视口

riyad

1 G3 t) i+ E" U
视口​

实现 Telegram Mini Apps viewport 功能。

初始化​

要初始化组件，请使用 initViewport 函数：

1. import { initViewport } from '@telegram-apps/sdk';
   
2. 
   
3. const [viewport] = initViewport();

复制代码

INFO

由于 Viewport 无法同步实例化，因此该函数返回一个 promise 作为元组中的第一个 值，在检索实际视口状态时，该值将被解析。

尺寸​

应用程序可以只显示迷你应用程序的上半部分，下半部分则保留在 屏幕区域之外。 从这个位置，用户可以将迷你应用程序 "拉 "到最大高度，而 开发人员也可以通过调用 expand 方法（使用isExpanded道具获取当前 的扩展状态）来完成同样的操作：

1. const [viewport] = initViewport();
   
2. 
   : d9 d5 q6 E1 t; @
3. const vp = await viewport;
   : W6 S& C& @% {: u$ L
4. 
   - A# a2 q) W9 W2 a' }% [6 s$ f
5. if (!vp.isExpanded) {
   
6.     vp.expand(); // will expand the Mini App, if it's not
     j5 D. Q% }& b6 z5 E& o
7. }

复制代码

  M' d, ?, f$ @0 C
2 i. G! ]' ~, k& f) |! }7 y事件​

可被 跟踪 的事件列表：

事件	监听器	触发条件
change	() => void	组件中的某些部分发生了变化
change:height	(height: number) => void	高度 "属性已更改
change:isExpanded	(isExpanded: boolean) => void	更改了 isExpanded 属性
change:stableHeight	(stableHeight: boolean) => void	更改了 stableHeight 属性
change:width	(width: boolean) => void	更改了 width 属性

gpbgigawye

回开源帖是美德！