Telegram Web Apps 方法 Expand 不起作用

Question

我发现 window.Telegram.WebApp 对象的 Expand 方法在计算机和平板电脑上的 Windows 和 IOS 的 Telegram 客户端中不起作用。 如何增加这些设备的 Web Apps 框架的大小？

Answer 1

function buttonOn(){
     // do something on btn click
}

let main_page = document.querySelector('#main_page');


if  (main_page){
    window.Telegram.WebApp.expand() //expand window after page loading

    window.Telegram.WebApp.MainButton.onClick(buttonOn) //set func on main button click
    window.Telegram.WebApp.MainButton.setParams({'text': 'Корзина'}) // set byn params
    window.Telegram.WebApp.MainButton.show() //show telegram btn
}

其他按钮 活动

Answer 2

从函数中删除该行：

window.Telegram.WebApp.expand() //expand window after page loading

并在主要 javascript 代码的开头/顶部调用它 。 （用户单击按钮后将开始运行的代码）

此外，您可以通过将

window.Telegram.WebApp

放入变量中来缩短代码，例如：

const tele = window.Telegram.WebApp; //Initializes the TELEGRAM BOT and
  //Gets the user's Telegram ID from the Telegram API

tele.expand(); //Expands the app on the users' phone to 100% height

Answer 3

原因可能是，您对“扩展”的理解有点不正确。该术语仅适用于具有 Android 或 iOS 等操作系统的移动设备。 Web 应用程序显示在诸如 BottomSheet 之类的本机组件中，并插入包含您的 Web 应用程序的 WebView。最初，在移动设备中，应用程序以最小化方式打开（而不是展开）。要使其使用屏幕允许的最大高度，您可以调用

expand()

方法。它必须通过

window.Telegram.WebApp.expand()

工作。

在桌面版或网页版 Telegram 中，Web App 显示在单独的组件中，不允许更改其大小。

您可能会在这里找到有关视口和扩展的更多有用信息，或者使用替代库，例如

twa-bridge

或

twa-sdk

Answer 4

我找到了解决方法。 您需要设置初始 window.Telegram.WebApp.isExpanded = false 然后展开它：

window.Telegram.WebApp.isExpanded = false

document.addEventListener("DOMContentLoaded", () => {
  window.Telegram.WebApp.expand();
})