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

riyad

+ \5 U! ^) T% Y  f  F; K' ^* J
+ H" U5 R/ |2 E) O视口​

实现 Telegram Mini Apps viewport 功能。

初始化​

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

1. import { initViewport } from '@telegram-apps/sdk';
   6 y& H# K2 S/ h
2. 
   
3. const [viewport] = initViewport();

复制代码

INFO

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

尺寸​

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

1. const [viewport] = initViewport();
   * @' f( w4 j* P8 W
2. 
   1 T$ r# a+ r' u' C, k: W
3. const vp = await viewport;
   
4. 
   , U: e& S; T. n; Q8 a
5. if (!vp.isExpanded) {
   * Z  Z. A; Q; K- b& Y/ ~
6.     vp.expand(); // will expand the Mini App, if it's not
   , J3 ], |. r  [$ |) b' p- a/ E( @
7. }

复制代码

事件​

可被 跟踪 的事件列表：

$ d1 o: ]  P1 f/ W1 \

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

回开源帖是美德！