Telegram WebApp主按钮异常求助：sendData失效、按钮不显示

1. iPhone端tg.sendData()未触发，机器人无消息 #

核心原因 #

• 未等待Telegram Web App环境就绪就执行API操作，iPhone端对初始化时机要求更严格
• 缺少接收sendData数据的后端逻辑：Telegram会把sendData的内容以POST请求发送到Web App URL，但当前代码仅实现了doGet，未处理POST请求

修复步骤 #

• 用tg.ready()包裹初始化代码：确保Telegram环境完全加载后再调用API
• 添加doPost方法处理数据接收：在Google Apps Script中实现POST接口，将Web App发送的数据转发给机器人

修改后的index1.html脚本部分：

document.addEventListener('DOMContentLoaded', function() {
  let tg = window.Telegram.WebApp;
  tg.ready(function() {
    tg.MainButton.text = "My Text";
    tg.MainButton.show();

    let btn = document.getElementById("btn");
    btn.addEventListener('click', function(){
      if (tg.MainButton.isVisible){
        tg.MainButton.hide();
      } else {
        tg.MainButton.show();
      }
    });

    tg.onEvent("mainButtonClicked", function(){
      tg.sendData("some string that we need to send"); 
    });
  });
});

添加到Google Apps Script的doPost方法：

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const chatId = data.chat_id; // 可从Web App初始参数或Telegram传递的data中获取
  const sentData = data.data;

  // 转发数据到机器人
  let payload = {
    chat_id: String(chatId),
    text: `收到Web App数据：${sentData}`,
    parse_mode: "HTML"
  };
  UrlFetchApp.fetch(tgAPI + "/sendMessage", {
    method: "post",
    payload: payload
  });

  return ContentService.createTextOutput(JSON.stringify({})).setMimeType(ContentService.MimeType.JSON);
}

2. Windows桌面端MainButton完全不显示 #

核心原因 #

• 桌面端Telegram要求Web App必须全屏显示才会渲染MainButton，当前代码未调用tg.expand()
• 初始化时机错误，未等待Telegram环境就绪

修复步骤 #

在tg.ready()回调中添加tg.expand()：

tg.ready(function() {
  tg.expand(); // 强制Web App占满Telegram窗口，桌面端必填
  tg.MainButton.text = "My Text";
  tg.MainButton.show();
  // 其他逻辑...
});

3. 页面btn按钮click事件无效 #

核心原因 #

DOM元素未完全渲染就执行了获取元素的代码，导致btn为null，无法绑定点击事件

修复步骤 #

将所有DOM操作代码放在DOMContentLoaded事件回调中（如第一个问题的修复代码所示），确保按钮元素已加载完成后再进行事件绑定。

内容的提问来源于stack exchange，提问作者RKuznetsov