构建交互式应用指南
支持团队在操作从未安装过的应用时经常感到吃力。PDF 手册并不是一个好的解决方案，因为根本没人看。
我开发了一个工具，让用户可以在浏览器中与真实的 App 截图进行交互。体验就像在使用真实的手机一样。你点击截图上的一个按钮，下一个屏幕就会出现。
工作原理
我使用 Firebase Storage 存储图片，并使用原生 JavaScript 处理逻辑。为了保持轻量化，我避免了使用外部库。
秘诀在于使用基于百分比的热点（hotspots）。我没有使用固定像素，而是使用 0 到 100 的坐标来定义可点击区域。这使得即使在窗口大小改变时，按钮也能保持对齐。
系统使用一个简单的状态机。每个屏幕包含：
- 一个图片 ID
- 一个热点列表
- 一个目标目的地
我开发的工具
用肉眼测量坐标太慢了。我构建了一个独立的 HTML 编辑器来加速这一过程。
- 将截图上传到 canvas。
- 拖动鼠标绘制矩形。
- 编辑器会自动计算百分比坐标。
- 通过下拉菜单将该区域链接到另一个屏幕。
- 将最终对象直接导出到你的代码中。
为了帮助用户，我为可点击区域添加了脉冲式的蓝色光晕。这能准确显示他们可以点击的位置。
关键技术经验
Firebase 安全：不要手动构建存储 URL。请使用 SDK 中的
getDownloadURL方法。这会包含必要的身份验证令牌（auth token）。如果没有它，图片将无法加载，且不会显示任何错误。布局修复：在 flex column 布局中，为父元素设置明确的高度。为子元素设置
min-height: 0。这可以防止布局塌陷和溢出问题。缩放：使用 CSS
transform: scale属性。这允许图片和热点同步缩放。无论屏幕大小如何，都能保持比例一致。速度：逐个获取 URL 会导致延迟。我实现了一个内存缓存（in-memory cache）和一个后台预加载函数。当模态框打开时，所有图片都会并行加载。这使得导航体验非常流畅，几乎是瞬间完成。
成果
- 20 个屏幕，具备完整的导航功能。
- 52 个交互式热点。
- 得益于自动缩放，实现了零滚动条。
- 通过预加载实现了瞬时过渡。