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

riyad

视口​

实现 Telegram Mini Apps viewport 功能。

初始化​

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

1. import { initViewport } from '@telegram-apps/sdk';
   1 m$ y, B6 w3 E
2. 
   % n% H$ H  c, T9 \+ _' p
3. const [viewport] = initViewport();

复制代码

INFO

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

尺寸​

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

1. const [viewport] = initViewport();
   # h4 r) R% Z2 d) e- C
2. 
   
3. const vp = await viewport;
   
4. 
   
5. if (!vp.isExpanded) {
   - K, U' N7 h) d" A7 S: [
6.     vp.expand(); // will expand the Mini App, if it's not
   
7. }

复制代码

; @; m0 ^5 w3 H0 |- m: b& S
事件​

可被 跟踪 的事件列表：

6 ]: l9 o. p( @6 @9 U" e

事件	监听器	触发条件
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

回开源帖是美德！