在H5页面可视化搭建平台中, 我们也希望能实时的看到我们配置页面的效果, 比如改变了某个属性,能在画布中实时生效, 还能在手机上查看真机效果, 提供这一实时预览功能无疑是可视化配置平台的刚需....所以我们设计实时预览的关键就在于如何高保真的去还原用户在画布中的配置, 让误差和体验做到极致.
接下来笔者将具体介绍如何实现以上几种预览方式,以及如何设计一款高可用的预览方案.
1....本质上就是在属性编辑器里触发action, 修改对应组件的config, 然后差量更新画布内容. pointData是画布上组件的数据集, 用来展示H5页面以及动态渲染属性编辑器的编辑项...., 也就是用户在需要预览的时候可以手动去模拟真机预览或者真机预览, 这里我们通常会在编辑器界面里提供预览按钮, 当用户点击时可以跳到预览视图,如下:
?...总结
以上教程笔者已经集成到H5-Dooring中,对于一些更复杂的交互功能,通过合理的设计也是可以实现的,大家可以自行探索研究。