php可视化编纂技巧_推荐从零设计所见即所得的H5编辑器

本篇文章并非和数据可视化干系，而是通过抽象技能底层，将其运用于H5页面可视化搭建上，通过技能的手段实现拖拽式天生H5页面。
这块也有非常多的运用处景，比如我们须要开拓一个移动端网站，一个H5营销页面，H5活动页面等，如果有这样的傻瓜式拖拽的工具天生H5页面，将会极大的提高我们的事情效率。

接下来笔者将对h5页面可视化编辑器－Dooring做详细的项目剖析和事理解读，来带大家深入理解h5可视化搭建页面的事理和技能实现。
H5编辑器预览如下：

H5-dooring

H5-Dooring

github地址：H5-Dooring

在思考需求剖析之前我们先来看看Dooring的利用演示：

由上面的gif图我们可以剖析出，可视化编辑器紧张有以下几部分组成：

可拖拽组件我们可以用社区比较火的react-dnd，react-draggable来实现，由于我们的画布是可拖拽可放大缩小的，以是这里须要对画布赋能，详细实现可参考下文。

其次便是H5编辑器部分，这部分是核心功能，后面我们会详细剖析。
还有便是预览，天生预览链接，保存json文件， 保存模版这些功能实质上是对我们json文件的操作，可是目前可视化搭建技能的常用手段之一。

我们的h5页面可视化编辑器采取umi来作为脚手架工具.

umi是可扩展的企业级前端运用框架,以路由为根本的，同时支持配置式路由和约定式路由，担保路由的功能完备，并以此进行功能扩展。
然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求.

这样我们不会关注繁琐的工程配置细节, 可以直接在项目中利用 antd 和 less 这些方案, 并且集成了目前比较盛行的css module, 可以方便我们在项目里对css进行模块化开拓. umi创建项目的详细利用流程如下:

// 创建并进入工程目录mkdir dooring && cd dooring// 创建umi运用yarn create @umijs/umi-app// 安装依赖yarn // 或者利用npm install

大略的三步走策略就能轻松搭建我们的项目工程, 是不是省去了很多麻烦? (在利用这些办法之前我们首先确保自己本地的node 版本是 10.13 或以上)

【限时免费】AI大厂口试核心考点，六大方向一扫而空

已失落效

在项目搭建完成之后我们调度一下目录构造, 详细如下:

dooring ├─ src │ ├─ assets │ │ └─ yay.jpg │ ├─ components │ ├─ layouts │ │ ├─ __tests__ │ │ │ └─ index.test.js │ │ ├─ index.css │ │ └─ index.js │ ├─ models │ │ └─ editor.js │ ├─ pages │ │ ├─ __tests__ │ │ │ └─ index.test.js │ │ ├─ editor │ │ │ ├─ components │ │ │ │ └─ FormEditor │ │ │ │ ├─ index.js │ │ │ │ └─ index.less │ │ │ ├─ container.js │ │ │ ├─ index.js │ │ │ └─ index.less │ │ ├─ index.css │ │ └─ index.js │ ├─ service │ │ └─ editor.js │ ├─ app.js │ └─ global.css ├─ package.json └─ webpack.config.js

page目录下的editor使我们的主页面, components存放我们的公共组件, models和service紧张卖力处理dva的状态管理逻辑, 其他部分大家可以更具需求自由定义.此处仅供学习参考.

在项目创建完之后我们还须要安装可视化方面必备的第三方组件, 笔者调研社区精选组件之后采取了一下方案: react-dnd react拖拽组件 react-color react颜色选择组件,用于H5编辑器的编辑颜色部分 react-draggable 用于组件或者画布的拖拽移动 react.qrcode 基于react的二维码天生组件, 能以react组件的办法天生二维码

以上组件在运行项目前大家可以自行安装.

在最好项目开拓准备之后,我们就来开始设计我们的h5页面可视化编辑器－Dooring.

H5可视化编辑器紧张须要4个部分,在文章开头也剖析过, 这里用图来巩固一下:

以上是最基本也是最核心的功能展示模型,接下来我们会逐一将其拆解并逐个实现.

我们都知道, 目前比较盛行的页面可视化搭建方案可以有如下几种: 在线编辑代码实现 在线编辑json实现 无代码化拖拽实现(底层基于json配置文件)

笔者做了一下优缺陷比拟图,如下:

| 方案 | 定制化程度 | 缺陷 | | :--------- | :--: | -----------: | | 在线编辑代码 | 最高 | 利用本钱高,对非技能职员不友好,效率低 | | 在线编辑json | 较高 | 须要熟习json,有一定利用本钱, 对非技能职员不友好,效率一样平常 | | 无代码化拖拽实现 | 高 | 利用本钱低, 操作基本无门槛,效率较高 |

由以上剖析来看, 为了开拓一个低门槛, 对任何人适用的可视化编辑器, 笔者将采取第三种方案来实现, 目前市情上已有的产品也有很多, 比如说易企秀, 兔展, 百度H5等等. 实现事理实在还是基于json, 我们通过可视化的手段将自己配置的 页面转化为json数据,末了在基于json渲染器来动态天生H5站点.

数据构造设计

为了供应组件的自定义能力,我们须要定义一套高可用的数据构造, 这样才能实现因组件需求变更而带来的掩护性上风.

在开始设计数据构造之前我们先来拆解一下模块:

H5-Dooring

不同的组件都对应不同的"编辑区域".我们须要设计一套统一的标准的配置来约定它, 这样对付表单编辑器的设计也非常有利, 详细拆解如下:

经由以上剖析之后, 笔者设计了类似下面的数据构造:

"Text": { "editData": [ { "key": "text", "name": "笔墨", "type": "Text" }, { "key": "color", "name": "标题颜色", "type": "Color" }, { "key": "fontSize", "name": "字体大小", "type": "Number" }, { "key": "align", "name": "对齐办法", "type": "Select", "range": [ { "key": "left", "text": "左对齐" }, { "key": "center", "text": "居中对齐" }, { "key": "right", "text": "右对齐" } ] }, { "key": "lineHeight", "name": "行高", "type": "Number" } ], "config": { "text": "我是文本", "color": "rgba(60,60,60,1)", "fontSize": 18, "align": "center", "lineHeight": 2 }}

通过这种标准化构造设计之后,我们可以很方便的实现我们所须要的编辑页面的功能, 并且后期扩展非常方便, 只须要往editData添加配置即可. 至于动态表单编辑器的实现,方案有很多, 笔者之前也写过干系的文章, 这里就不详细先容了.

组件库设计

组件库设计考虑的一个主要的问题便是体积和渲染问题, 一旦组件库变得越来越多, 那意味着页面加载会非常慢,以是我们须要实现异步加载组件和代码分割的能力, umi供应了这样的功能,我们可以基于它供应的api去实现自己的额按需组件.

import { dynamic } from 'umi';export default dynamic({ loader: async function() { // 这里的注释 webpackChunkName 可以辅导 webpack 将该组件 HugeA 以这个名字单独拆出去 const { default: HugeA } = await import(/ webpackChunkName: "external_A" / './HugeA'); return HugeA; },});

通过以上的办法来定义包裹我们的每一个组件, 这样就能实现按需加载了, 但是最好的建议是不须要每个组件都按需加载和拆包,对付标题, 关照栏,页头,页脚这些组件, 我们完备可以把它放在一个组里,这样不但对不会影响加载速率, 还能减少一定的http要求.

笔者这里大略举一个组件实现的例子，方便大家理解：

const Header = memo((props) => { const { bgColor, logo, logoText, fontSize, color } = props return <header className={styles.header} style={{backgroundColor: bgColor}}> <div className={styles.logo}> <img src={logo && logo[0].url} alt={logoText} /> </div> <div className={styles.title} style={{fontSize, color}}>{ logoText }</div> </header>})

上面的Header组件的props属性完备是由我们之前设计的json构造来定义的，在用户编辑的过程中将收据网络并传给Header组件。
末了一步是将这些组件动态传给dynamic组件， 这块在上文也先容过了，大家可以根据自己的实现来做动态化渲染。

预览功能这块比较大略, 我们只须要将用户天生的json数据丢进H5渲染器中即可, 这里我们须要做一个渲染页面单独用来预览组件. 先来看看几个预览效果:

前面的渲染器事理已经先容了, 这里就不一一先容了,感兴趣的可以互换谈论.

在线下载这块我们须要用到一个开源库: file-saver, 专门办理前端下载文件困难的窘境. 详细利用举例:

var FileSaver = require('file-saver');var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});FileSaver.saveAs(blob, "hello world.txt");

以上代码可以实现将传入的数据下载为txt文件, 如果是Blob, 是不是还能在线下载图片, html呢? 答案是肯定的, 以是我们的下载任务采取该方案来实现.

后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 以是这里大致提几个点, 大家可以用完备不同的技能来实现后台做事, 比如说PHP, Java, Python或者Egg. 笔者这里采取的是koa. 紧张实现功能如下:

github地址：H5-Dooring

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习谈论，共同探索前真个边界。