nodejs抓取动态网页( H5页面可视化编辑器的实时预览和真机扫码预览功能 )

　　nodejs抓取动态网页(

H5页面可视化编辑器的实时预览和真机扫码预览功能

)

　　前言

　　所见即所得的设计理念一直是WEB IDE领域备受瞩目的功能亮点，同时也可以极大的提升web编码器的编程体验和编程效率。接下来笔者将实时预览和预览H5可视化编辑器。真机扫码预览功能做方案分析，为大家在设计同类产品时提供一些思路。

　　我们还是以作者开发的H5-Dooring可视化编辑器为例来分析上述功能的实现。

　　你会收获文字

　　一般情况下，实时预览功能会交给前端来实现，比如我们经常看到的微信开发者工具的预览，支付宝小程序的预览，vscode的预览插件，比较经典的DW还集成了强大的实时预览功能，接下来我们来看一个H5-Dooring在线编程的实时预览模块：

　　在H5页面可视化平台中，我们也希望能实时看到我们配置页面的效果，比如改变某个属性，可以在canvas中实时生效，也可以在canvas上查看真机效果手机，提供这种实时预览功能，无疑是可视化配置平台刚需。以下情况：

　　在PC上模拟手机预览：

　　真机预览入口及效果：

　　（自动识别二维码）

　　因此，我们实时预览设计的关键是如何高保真还原用户在画布中的配置，使误差和体验最大化。

　　接下来，笔者将具体介绍如何实现上述预览方式，以及如何设计一个高可用的预览程序。

　　1. canvas元素与属性编辑器实时联动方案

　　canvas元素和属性编辑器的实时联动方案主要是指属性编辑器的修改如何实时同步到canvas元素，抽象为如下概念：

　　为了实现右边的属性编辑器已经修改了内容，并且画布可以实时更新，我们需要实现一种模式来关联左右，这就是“联动”的概念。众所周知，每一个可视化组件都有对应一个独特的schema（在H5-Dooring的文章中已经介绍过，有兴趣的朋友可以学习了解），schema的结构类似如下：

　　{

　　一旦设计了这样的数据结构，我们就可以动态渲染编辑器的表单（通过editData），并将修改后的值同步到组件（通过editData -> config mapping）。

　　其次，我们需要定义共享数据源。我们可以使用vuex（比如你是vue技术栈）或者dva（如果你是react技术栈）。总体设计思路如下：

　　本质上是在属性编辑器中触发动作，修改相应组件的配置，并通过差异更新画布内容。pointData是画布上组件的数据集，用于显示H5页面的编辑项和动态渲染属性编辑器。后面我们介绍的预览功能也依赖于pointData提供的数据。

　　2. 实时预览的大体思路

　　笔者之前的文章详细介绍了如何实现Web IDE的实时预览，即nodejs+iframe的方式，但是对于我们H5门的可视化编辑器来说，可能还需要另一种方式。即用户可以在需要预览时手动模拟真机预览或真机预览。这里我们通常会在编辑器界面中提供一个预览按钮，当用户点击时，可以跳转到预览视图，如下：

　　基于我们前面提到的json schema作为预览的数据源，我们很容易想到通过预览页面上的数据源重新渲染一个H5页面。思路如下：

　　如果预览页面是新打开的页面，比如H5-Dooring的实现，那么这个数据源需要在预览前存储在localStorage中。由于localStorage的特性，我们可以在同一个域内跨页面共享数据，所以实现我们的需求非常方便。至于渲染引擎部分，我们只需要使用react-grid-layout提供的数据供给方案即可。代码如下：

<p>