前言
项目的github 地址： https://github.com/zhhb/ramiko
最近看了不少关于 h5 页面制作工具。端午闲来无事，决定尝试下一个页面搭建工具。效果如下：
gif 录制效果不佳，可以访问以下链接进行体验。
技术栈
next.js：前端模块化开发
sass: 配合使用 css modules
nest.js：服务端语言
MySQL：数据存储
整体架构
前端开发组件库，完善组件类型，编辑器读取组件完成页面搭建，将页面数据发送至服务端保存。 访问页面，从服务端拉取页面数据，前端渲染页面即可。
编辑器设计
.|____index.tsx|____plugins ## 组件库管理|____Editor.tsx ## 编辑器|____type.ts ## 类型定义|____components| |____Pannel ## 左侧组件面板| |____Preview ## 中间预览面板| |____Editor ## 组件编辑器实现| | |____index.tsx| | |____PropsEditor| | | |____index.tsx| | | |____components| | | | |____SwitchEditor| | | | |____RadioEditor| | | | |____ImgEditor| | | | |____ColorEditor| | | | |____TextEditor| | | | |____TextareaEditor| | | | |____NumberEditor| | | |____renderEditorItem.tsx| | | |____UnionEditor.tsx| | |____FunctionEditor| | |____SettingEditor|____renderPage.tsx
数据结构
定义页面数据结构
既然是可视化页面搭建，那么页面必须可以以某种数据结构进行描述。比如：
{
setting: {
} // 页面设置
components: []; // 页面使用到的组件}定义组件数据结构
页面核心是由组件搭建而成的，那么就要定义组件的数据结构。
import React from 'react';export const Title = ({ title, style }) => {
return <h1>{title}</h1>;};Title.defaultProps = {
title: '标题'};Title.schema = {
title: {
title: '标题',
type: 'text'
}};核心可以抽象为：
{
name: 'Title'; // 对应组件名
props: {
}
schema: {
}}name
不可能把组件源代码保存到服务端，所以这里只保存组件的名称，前端渲染时，根据该名称找到对应组件渲染即可（类似 Vue.js 的动态组件）
props
React 组件的 props，这里使用 defaultProps 赋值默认值
schema
对应 props 各个属性的描述，用于编辑器针对进行渲染。进行组件编辑，实际上编辑的是组件的 props，props 改变组件的渲染结果自然改变。为了对 props 进行编辑，需要定义 props 的描述语言，通过 props 描述来进行属性编辑。这里使用如下的 schema。
{
title: '标题';
type: 'text';}对应组件 props.title，通过 type 可以决定如何渲染编辑器组件。
无渲染组件
可能光能渲染组件是不够的，也许需要更多的功能包装，比如埋点。这一类函数本质上也是组件。可以通过 schema 定义进行 props 编辑。举个例子：
import React from 'react';export const Tracking = ({ op, pageSn, pageElSn, children }) => {
const onClick = () => {
alert('埋点测试：' + op + '_' + pageSn + '_' + pageElSn);
};
return <div onClick={onClick}>{children}</div>;};Tracking.defaultProps = {
op: 'click',
pageSn: null,
pageElSn: null};Tracking.schema = {
op: {
title: '曝光方式',
type: 'radio',
options: ['click', 'pv']
},
pageSn: {
title: '页面编号',
type: 'number'
},
pageElSn: {
title: '元素编号',
type: 'number'
}};丰富完善
丰富组件库
优化编辑器：比如添加组件拖拽功能。
项目启动
Github：传送门
在 client 和 server 分别执行 yarn dev 即可。
