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

riyad

& C7 a9 L* J5 C1 R% s8 m3 Y
视口​

实现 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. 
   " h* ?) x: u$ B  w
3. const vp = await viewport;
   
4. 
   9 I3 M4 j1 P; v/ K  ?' p: R5 F
5. if (!vp.isExpanded) {
   
6.     vp.expand(); // will expand the Mini App, if it's not
   ! {5 U6 z+ c9 {! N8 t3 X1 Q1 z
7. }

复制代码

8 }2 k: t, u; y+ U/ `" R7 i
5 b0 z  D$ B$ a事件​

可被 跟踪 的事件列表：

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

回开源帖是美德！