实时预览 沉浸式创作
🚀 三步开启实时预览
- 找到按钮：画布右上方找到「👁️ 实时预览」按钮
- 一键启动：点击弹出预览窗口（默认 iPhone 13mini 尺寸）
- 开始创作：在画布拖拽/修改组件，预览窗实时变化
🔧 核心功能详解
一、设备自由切换
点击尺寸标签 → 选择手机型号，常用测试型号如下：
| 热门机型 | 分辨率 | 典型场景 |
|---|---|---|
| iPhone 15 | 375x812 | 主流测试 |
| 华为 Mate60 | 392x853 | 安卓兼容性检查 |
| 小米13 | 393x873 | 大屏适配 |
二、预览交互模拟
真实用户行为复现：
- 点击按钮/图片 → 触发跳转或弹窗
- 滑动页面 → 测试长图文流畅度
❗ 重要提示：弹窗内的跳转仅作演示，不会真实保存，测试后记得回到编辑器保存配置。
三、窗口灵活控制
折叠模式：
- 点击预览窗右上角「缩小」
- 缩成顶栏悬浮条（可拖动位置）
- 点击「扩展」恢复全屏
适用场景：
✅ 画布空间不足时临时收起
✅ 多窗口并行操作时保持可见
🛠️ 常见问题处理
情况1：画面不同步
症状：画布修改后预览窗未更新
解决方案：
- 点击预览窗顶栏的「🔄 刷新」按钮
- 检查网络状态（右上角信号图标）
- 确认组件已正确保存（画布无红色报错）
情况2：元素错位
排查步骤：
- 切换其他机型查看是否普遍存在
📸 最佳实践案例：
当你在做一个抽奖 H5 时：
- 用 iPhone 预览检查转盘动画流畅度
- 切换安卓机确认弹窗位置
- 折叠预览窗腾出空间调整代码
马上点击预览按钮，开启你的沉浸式创作吧！ 🎮