最近看了不少关于 h5 页面制作工具端午闲来无事，决定尝试下一个页面搭建工具效果如下：

gif 录制效果不佳，可以访问以下链接进行体验

• next.js：前端模块化开发

前端开发组件库，完善组件类型编辑器读取组件完成页面搭建，将页面数据发送至服务端保存 访问页面，从服务端拉取页面数据前端渲染页面即可。

既然是可视化页面搭建那么页面必须可以以某种数据结构进行描述。比如：

页面核心是由组件搭建而成的那么就要定义组件的數据结构。

不可能把组件源代码保存到服务端所以这里只保存组件的名称，前端渲染时根据该名称找到对应组件渲染即可（类似 Vue.js 的动態组件）

对应 props 各个属性的描述，用于编辑器针对进行渲染进行组件编辑，实际上编辑的是组件的 propsprops 改变组件的渲染结果自然改变。为了對 props 进行编辑需要定义 props 的描述语言，通过 props 描述来进行属性编辑这里使用如下的 schema。

对应组件 props.title通过 type 可以决定如何渲染编辑器组件。

可能光能渲染组件是不够的也许需要更多的功能包装，比如埋点这一类函数本质上也是组件。可以通过 schema 定义进行 props 编辑举个例子：

1. 优化编辑器：比如添加组件拖拽功能。