实时预览（Mirror）

功能简介

实时预览（Mirror）是 Zion 平台为开发者和运营人员提供的高效页面与数据预览、调试工具。通过 Mirror，用户可以在开发过程中实时查看页面效果、模拟不同设备和用户场景、调试数据与权限，极大提升开发与测试效率。

主要能力

• 多端预览：支持桌面端、平板端、移动端等多种设备尺寸的实时切换与预览，支持自定义设备分辨率。
• 页面参数与全局变量模拟：可自定义页面入参、路径参数、查询参数、全局变量等，模拟不同业务场景。
• 模拟登录与用户权限：支持模拟不同用户身份、角色权限，便于测试个性化内容与权限逻辑。
• 实时刷新与调试：支持一键刷新、调试模式切换，便于快速定位和修复问题。

典型使用场景

• 页面开发过程中，实时查看页面在不同设备下的展示效果。
• 业务测试时，模拟不同用户、不同权限、不同数据下的页面行为。
• 设计师、产品经理验收页面交互与视觉效果。
• 回归测试、自动化测试前的手动验证。

操作步骤

1. 从首页开始实时预览：在 Zion 平台编辑器右上角，点击“实时预览”入口。
2. 从某个页面开始实时预览：在画布上选择页面，点击页面工具栏右侧的“实时预览”入口。
3. 选择设备类型：可在底部工具栏切换桌面、平板、移动端等设备，或根据需要切换全屏或自定义设备尺寸。
4. 模拟登录：点击“模拟登录”，选择或创建测试用户，模拟不同角色权限。
5. 编辑 Mock 数据：在“初始化配置”区域，添加或编辑页面所需的 Mock 数据。
6. 实时刷新：如有参数或数据变更，点击“重新加载（刷新）”按钮实时查看效果。
7. 查看组件内部数据状态：点击“调试”（扳手图标），打开调试模式，可以点击组件查看内部数据状态，便于调试和验证。

常见问题解答

• Q: Mirror 预览与线上环境有差异怎么办？
  • 请检查 Mock 数据、参数配置与线上环境是否一致。
• Q: 如何模拟复杂的用户权限？
  • 在“模拟登录”中选择不同角色，或自定义用户权限字段。
• Q: 预览页面加载缓慢？
  • 检查网络环境，或尝试刷新页面。

相关术语