做电报miniapp小程序的api干货分享

TG(Telearama)是一种广受欢迎的社交平台，它提供了丰富的功能和灵活的编程接口，使开发者可以通过编写代码来扩展和定制其功能。在本文中，我们将介绍TG社交平台的一些特点，并提供一些编程实例来说明如何使用它的编程接口。

• TG 社交平台Q简介

TG是一种跨平台的即时通讯应用，允许用户发送文本消息、图片、音频和视频等多种类型的内容。它提供了端到端的加密功能，确保用户的隐私和数据安全。TG还支持群组和频道功能，用户可以创建和加入不同主题的群组，以及订阅自己感兴趣的频道。此外，TG还提供了一些高级功能，如机器人、内联模式和自定义键盘等，使用户可以更好地与其他用户交互和使用平台。

• TG的编程接口(API)

TG提供了一套强大的编程接口，允许开发者通过编写代码与平台进行交互。它的AP|支持多种编程语言，如Python、JavaScript四Java等。通过使用TG的API，开发者可以实现以下功能:

//获取TG用户语言(做语言切换，首次进入获取用户在TG使用的默认语言，从而适配小程序语言)
Telegram.WebApp.initDataUnsafe.user.language_code
// 检查平台信息
Telegram.WebApp.platform
//检查是否可以扩展视图（通常在桌面端可用）
Telegram.WebApp.isExpanded
//检查是否支持主按钮（通常在移动端更常见）
Telegram.WebApp.MainButton
Telegram.WebApp.MainButton.isVisible
//获取TG账号信息
Telegram.WebApp.initDataUnsafe.user
//获取TG用户哈希值（做登录安全参数）
Telegram.WebApp.initData
// 请求将小程序展开到全屏模式
window.Telegram.WebApp.expand();
//小程序下拉不会关闭
window.Telegram.WebApp.disableVerticalSwipes()
//显示miniapp自带返回按钮
window.Telegram.WebApp.BackButton.show()
//隐藏主按钮
window.Telegram.WebApp.MainButton.hide()
//设置TG头部栏背景颜色
Telegram.WebApp.setHeaderColor('#fff');
//设置miniapp背景颜色
Telegram.WebApp.setBackgroundColor('#fff');
window.Telegram.WebApp.requestFullscreen();   //开启全屏
// 4. 错误振动反馈（双震动）
window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');

// 5. 成功振动反馈
window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');

// 6. 警告振动反馈
window.Telegram.WebApp.HapticFeedback.notificationOccurred('warning');
//7.摇一摇
window.Telegram.WebApp.Accelerometer.stop((stopped) => {
	if (stopped) {
		console.log('摇一摇已停止');
	}
});
//8.判断是否可以使用AccelerometerAPI（Bot API遇到8.0+版本）
window.Telegram.WebApp.Accelerometer.isStarted
//9.获取botAPI当前版本
window.Telegram.WebApp.version
window.Telegram.WebApp.requestFullscreen();   //开启全屏
// 4. 错误振动反馈（双震动）
window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');

// 5. 成功振动反馈
window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');

// 6. 警告振动反馈
window.Telegram.WebApp.HapticFeedback.notificationOccurred('warning');

//分享文本到聊天
Telegram.WebApp.switchInlineQuery('your text to share');

// 2. 分享到特定聊天
Telegram.WebApp.switchInlineQuery('your text to share', ['users', 'groups', 'channels']);

// 3. 分享到当前聊天
Telegram.WebApp.switchInlineQuery('your text to share', [], 'current');

//4.客户端会提示用户选择特定聊天，然后打开该聊天并在输入字段中插入机器人的用户名和指定的内联查询。您可以指定用户可以选择的聊天类型。它可以是以下一种或多种类型：用户、机器人、群组、频道。
Telegram.WebApp.switchInlineQuery(innerMode, ["users","groups"])

//5.TG打开外部链接，不关闭miniapp
Telegram.WebApp.openLink(url)

//6.TG打开内部链接，不关闭miniapp
Telegram.WebApp.openTelegramLink(`https://t.me/${e.botName}`)

//7.用来请求用户授权机器人向用户发送消息的权限。
Telegram.WebApp.requestWriteAccess

//关闭miniapp
Telegram.WebApp.close()

//将miniapp宽展全屏
Telegram.WebApp.expand()

//TG原生提示框
Telegram.WebApp.showConfirm('Are you sure you want to proceed?', (confirmed) => {
  if (confirmed) {
    // 用户点击确认
    console.log('User confirmed');
  } else {
    // 用户点击取消
    console.log('User cancelled');
  }
});

//一种在带有“关闭”按钮的简单警报中显示消息的方法。
Telegram.WebApp.showAlert

//显示原生弹窗的方法
Telegram.WebApp.showPopup

// 1. 基本设置和显示按钮
const mainButton = Telegram.WebApp.MainButton;
mainButton
    .setText('确认支付')        // 设置按钮文本
    .setParams({
        color: '#2ECC71',      // 自定义按钮颜色
        text_color: '#FFFFFF', // 自定义文字颜色
    })
    .show();                   // 显示按钮

// 2. 添加点击事件处理
mainButton.onClick(() => {
    // 处理点击事件
    console.log('按钮被点击');
});

// 3. 显示加载状态
mainButton.showProgress(); // 显示加载指示器
// 异步操作完成后
mainButton.hideProgress();

// 4. 禁用/启用按钮
mainButton.disable(); // 按钮变为不可点击状态
mainButton.enable();  // 重新启用按钮
让我们看看不同场景的使用方式：

表单提交场景

JavaScript的复制const mainButton = Telegram.WebApp.MainButton;

// 初始状态设置
mainButton
    .setText('提交表单')
    .show();

// 表单验证
function validateForm() {
    const isValid = // 表单验证逻辑
    mainButton.setActive(isValid); // 根据验证结果启用/禁用按钮
}

// 提交处理
mainButton.onClick(async () => {
    mainButton.showProgress();
    try {
        await submitForm();
        mainButton.hideProgress();
        // 提交成功处理
    } catch (error) {
        mainButton.hideProgress();
        // 错误处理
    }
});

多步骤操作场景

JavaScript的复制const mainButton = Telegram.WebApp.MainButton;
const secondaryButton = Telegram.WebApp.SecondaryButton;

function setupStepOne() {
    mainButton
        .setText('下一步')
        .show();
    
    secondaryButton
        .setText('返回')
        .setPosition('left')
        .show();
}

function setupStepTwo() {
    mainButton.setText('确认完成');
    secondaryButton.setText('上一步');
}

支付场景

JavaScript的复制const mainButton = Telegram.WebApp.MainButton;

function setupPaymentButton(amount) {
    mainButton
        .setText(`支付 ¥${amount}`)
        .setParams({
            color: '#4CAF50',        // 绿色按钮
            has_shine_effect: true   // 添加闪光效果突出显示
        })
        .show();

    mainButton.onClick(async () => {
        mainButton.showProgress();
        try {
            await processPayment();
            mainButton
                .setText('支付成功')
                .setParams({ color: '#2ECC71' });
        } catch (error) {
            mainButton
                .setText('重试支付')
                .setParams({ color: '#E74C3C' });
        }
        mainButton.hideProgress();
    });
}

11月18号，Telegram更新了新的API功能，点这里查看