Telegram-WebApp-开发日记

📱 Telegram WebApp 开发经验总结

一份专注于用户体验的 SPA 应用开发技巧汇总（包含震动反馈、弹窗设计、导航建议等）。

✅ 一、Telegram WebApp 的震动反馈（Haptic Feedback）

Telegram 提供的震动反馈 API：

类型 方法 说明
轻微反馈 Telegram.WebApp.HapticFeedback.impactOccurred(‘light’) 轻点击、轻提示
中等反馈 Telegram.WebApp.HapticFeedback.impactOccurred(‘medium’) 按钮、确认动作
重度反馈 Telegram.WebApp.HapticFeedback.impactOccurred(‘rigid’) 删除、错误等关键操作
选择改变反馈 Telegram.WebApp.HapticFeedback.selectionChanged() 用于选项切换
成功/警告/错误通知 Telegram.WebApp.HapticFeedback.notificationOccurred(type) type: "success"、"warning"、"error"

🪟 二、弹窗类型归纳

1. 原生浏览器弹窗（兼容性差，不推荐）

类型 示例 特点
输入框 prompt(‘请输入’, ‘默认值’) 简洁但不可定制 UI
确认框 confirm(‘确定操作吗？’) 同上
提示框 alert(‘提示信息’) 同上

2. Telegram 原生 API 弹窗（推荐）

方法 用法 说明
启用关闭确认提示 Telegram.WebApp.enableClosingConfirmation() 离开页面前确认
显示确认弹窗（有返回 Promise） Telegram.WebApp.showConfirm(‘message’) 更推荐的交互方式
显示提醒弹窗 Telegram.WebApp.showAlert(‘message’) 提示信息

3. HTML 自定义弹窗（强烈推荐）

  • 模态弹窗（Modal）
    居中显示，适用于表单、输入框、编辑器等
  • 底部弹窗（Bottom Sheet）
    适用于套餐选择、操作菜单
  • 轻提示框（Toast）
    一般自动消失，用于提示“复制成功”、“保存失败”等

✅ 优点：

  • 自由控制样式、动画
  • 支持嵌套内容、表单
  • 可与震动反馈配合使用

📱 三、SPA 页面设计建议（仿 Telegram/WeChat/TikTok）

推荐结构：

1
2
3
4
5
6
7
8
9
10
11
<!-- 页面结构 -->
<div class="page" id="home">主页内容</div>
<div class="page" id="mybots">我的机器人</div>
<div class="page" id="settings">设置</div>

<!-- 底部导航 -->
<nav class="bottom-nav">
  <button class="nav-btn" data-target="home">🏠</button>
  <button class="nav-btn" data-target="mybots">🤖</button>
  <button class="nav-btn" data-target="settings">⚙️</button>
</nav>

✅ 页面切换逻辑

1
2
3
4
5
6
7
8
9
function switchPage(id) {
  document.querySelectorAll('.page').forEach(p => {
    p.classList.toggle('active', p.id === id);
  });

  document.querySelectorAll('.nav-btn').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.target === id);
  });
}

✅ 页面样式建议

  • .page 使用 position: absolute 让页面堆叠在一起
  • .active 页面 display: block，其他为 display: none
  • .bottom-nav 使用 position: fixed 固定底部
  • 建议导航栏高度为 60px，按钮使用 SVG 图标或 emoji
  • 页面切换时加入 HapticFeedback.impactOccurred('soft') 增强反馈感

🔜 明日计划：手指滑动切换页面

明天将学习实现：

  • 支持 手指左右滑动切换页面
  • 自动切换 .active 页面与底部按钮状态
  • 原生实现（使用 touchstart / touchmove / touchend）
  • 可选使用辅助库：Hammer.js、Swiper.js

本文档由 Telegram WebApp 项目开发总结
后续将加入：页面切换动画、异步接口封装、多语言支持等优化方案。