基于React+Koa實現(xiàn)一個h5頁面可視化編輯器－Dooring
前言
前段時間筆者一直忙于數(shù)據(jù)可視化方面的工作，比如如何實現(xiàn)拖拽式生成可視化大屏，如何定制可視化圖表交互和數(shù)據(jù)導(dǎo)入方案等，這塊需求在B端企業(yè)中應(yīng)用非常大，所以非常有探索價值。
本篇文章并非和數(shù)據(jù)可視化相關(guān)，而是通過抽象技術(shù)底層，將其應(yīng)用于H5頁面可視化搭建上，通過技術(shù)的手段實現(xiàn)拖拽式生成H5頁面。這塊也有非常多的應(yīng)用場景，比如我們需要開發(fā)一個移動端網(wǎng)站，一個H5營銷頁面，H5活動頁面等，如果有這樣的傻瓜式拖拽的工具生成H5頁面，將會極大的提高我們的工作效率。
接下來筆者將對h5頁面可視化編輯器－Dooring做詳細的項目分析和原理解讀，來帶大家深入了解h5可視化搭建頁面的原理和技術(shù)實現(xiàn)。H5編輯器預(yù)覽如下：
技術(shù)棧
React?前端主流框架(react,vue,angular)之一,更適合開發(fā)靈活度高且復(fù)雜的應(yīng)用 dva?主流的react應(yīng)用狀態(tài)管理工具，基于redux less?css預(yù)編譯語言，輕松編寫結(jié)構(gòu)化分明的css umi?基于react的前端集成解決方案 antd?地球人都知道的react組件庫 axios?強大的前端請求庫 react-dnd?基于react的拖拽組件解決方案，具有優(yōu)秀的設(shè)計哲學(xué) qrcode.react?基于react的二維碼生成插件 zarm?基于react的移動端ui庫，輕松實現(xiàn)美觀的H5應(yīng)用 koa?基于nodejs的上一代開發(fā)框架，輕松實現(xiàn)基于nodejs的后端開發(fā) @koa/router?基于koa2的服務(wù)端路由中間件 ramda?優(yōu)秀的函數(shù)式j(luò)s工具庫
需求分析
由上面的gif圖我們可以分析出，可視化編輯器主要有以下幾部分組成：
可拖拽的組件庫 draggable components 盛放組件的畫布 canvas 組件編輯器 FormEditor 頭部工具欄 toolBar
可拖拽組件我們可以用社區(qū)比較火的react-dnd，react-draggable來實現(xiàn)，由于我們的畫布是可拖拽可放大縮小的，所以這里需要對畫布賦能，具體實現(xiàn)可參考下文。
其次就是H5編輯器部分，這部分是核心功能，后面我們會詳細分析。還有就是預(yù)覽，生成預(yù)覽鏈接，保存json文件， 保存模版這些功能本質(zhì)上是對我們json文件的操作，可是目前可視化搭建技術(shù)的常用手段之一。先來看看這些功能的演示：
基礎(chǔ)準備
umi是可擴展的企業(yè)級前端應(yīng)用框架,以路由為基礎(chǔ)的，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進行功能擴展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴展和業(yè)務(wù)需求.
// 創(chuàng)建并進入工程目錄
mkdir dooring && cd dooring
// 創(chuàng)建umi應(yīng)用
yarn create @umijs/umi-app
// 安裝依賴
yarn // 或者使用npm install
復(fù)制代碼簡單的三步走策略就能輕松搭建我們的項目工程, 是不是省去了很多麻煩? (在使用這些方式之前我們首先確保自己本地的node?版本是 10.13 或以上)
在項目搭建完成之后我們調(diào)整一下目錄結(jié)構(gòu), 具體如下:
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
復(fù)制代碼page目錄下的editor使我們的主頁面, components存放我們的公共組件, models和service主要負責處理dva的狀態(tài)管理邏輯, 其他部分大家可以更具需求自由定義.此處僅供學(xué)習(xí)參考.
react-dnd?react拖拽組件 react-color?react顏色選擇組件,用于H5編輯器的編輯顏色部分 react-draggable?用于組件或者畫布的拖拽移動 react.qrcode?基于react的二維碼生成組件, 能以react組件的方式生成二維碼
正文
在最好項目開發(fā)準備之后,我們就來開始設(shè)計我們的h5頁面可視化編輯器－Dooring.
H5編輯器實現(xiàn)
H5可視化編輯器主要需要4個部分,在文章開頭也分析過, 這里用圖來鞏固一下:
以上是最基本也是最核心的功能展示模型,接下來我們會一一將其拆解并逐個實現(xiàn).
實現(xiàn)原理
在線編輯代碼實現(xiàn) 在線編輯json實現(xiàn) 無代碼化拖拽實現(xiàn)(底層基于json配置文件)
| 方案 | 定制化程度 | 缺點 |
|---|---|---|
| 在線編輯代碼 | 最高 | 使用成本高,對非技術(shù)人員不友好,效率低 |
| 在線編輯json | 較高 | 需要熟悉json,有一定使用成本, 對非技術(shù)人員不友好,效率一般 |
| 無代碼化拖拽實現(xiàn) | 高 | 使用成本低, 操作基本無門檻,效率較高 |
由以上分析來看, 為了開發(fā)一個低門檻, 對任何人適用的可視化編輯器, 筆者將采用第三種方案來實現(xiàn), 目前市面上已有的產(chǎn)品也有很多, 比如說易企秀, 兔展, 百度H5等等.?實現(xiàn)原理其實還是基于json, 我們通過可視化的手段將自己配置的 頁面轉(zhuǎn)化為json數(shù)據(jù),最后在基于json渲染器來動態(tài)生成H5站點.
數(shù)據(jù)結(jié)構(gòu)設(shè)計
為了提供組件的自定義能力,我們需要定義一套高可用的數(shù)據(jù)結(jié)構(gòu), 這樣才能實現(xiàn)因組件需求變更而帶來的維護性優(yōu)勢.
在開始設(shè)計數(shù)據(jù)結(jié)構(gòu)之前我們先來拆解一下模塊:
不同的組件都對應(yīng)不同的"編輯區(qū)域".我們需要設(shè)計一套統(tǒng)一的標準的配置來約定它, 這樣對于表單編輯器的設(shè)計也非常有利, 具體拆解如下:
經(jīng)過以上分析之后, 筆者設(shè)計了類似下面的數(shù)據(jù)結(jié)構(gòu):
"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
}
}
復(fù)制代碼
通過這種標準化結(jié)構(gòu)設(shè)計之后,我們可以很方便的實現(xiàn)我們所需要的編輯頁面的功能, 并且后期擴展非常方便, 只需要往editData添加配置即可. 至于動態(tài)表單編輯器的實現(xiàn),方案有很多, 筆者之前也寫過相關(guān)的文章, 這里就不詳細介紹了.
組件庫設(shè)計
組件庫設(shè)計考慮的一個重要的問題就是體積和渲染問題, 一旦組件庫變的越來越多, 那意味著頁面加載會非常慢,所以我們需要實現(xiàn)異步加載組件和代碼分割的能力, umi提供了這樣的功能,我們可以基于它提供的api去實現(xiàn)自己的額按需組件.
import { dynamic } from 'umi';
export default dynamic({
loader: async function() {
// 這里的注釋 webpackChunkName 可以指導(dǎo) webpack 將該組件 HugeA 以這個名字單獨拆出去
const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
return HugeA;
},
});
復(fù)制代碼
通過以上的方式來定義包裹我們的每一個組件, 這樣就能實現(xiàn)按需加載了, 但是最好的建議是不需要每個組件都按需加載和拆包,對于標題,?通知欄,頁頭,頁腳這些組件, 我們完全可以把它放在一個組里,這樣不但對不會影響加載速度, 還能減少一定的http請求.
筆者這里簡單舉一個組件實現(xiàn)的例子，方便大家理解：
const Header = memo((props) => {
const {
bgColor,
logo,
logoText,
fontSize,
color
} = props
returnclassName ={styles.header} style={{backgroundColor: bgColor}}>
className={styles.logo}>
src={logo && logo[0].url} alt={logoText} />
className={styles.title} style={{fontSize, color}}>{ logoText }
})
復(fù)制代碼
上面的Header組件的props屬性完全是由我們之前設(shè)計的json結(jié)構(gòu)來定義的，在用戶編輯的過程中將收據(jù)收集并傳給Header組件。最后一步是將這些組件動態(tài)傳給dynamic組件， 這塊在上文也介紹過了，大家可以根據(jù)自己的實現(xiàn)來做動態(tài)化渲染。
實現(xiàn)預(yù)覽功能
預(yù)覽功能這塊比較簡單, 我們只需要將用戶生成的json數(shù)據(jù)丟進H5渲染器中即可, 這里我們需要做一個渲染頁面單獨用來預(yù)覽組件. 先來看看幾個預(yù)覽效果:
實現(xiàn)在線下載功能
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
復(fù)制代碼
后端部分實現(xiàn)
保存模板 真機原理的數(shù)據(jù)源存儲 用戶相關(guān)功能 H5圖床和靜態(tài)文件托管
后期規(guī)劃
添加模版庫模塊 添加在線下載網(wǎng)站代碼功能 豐富組件庫組件，添加可視化組件 添加配置交互功能 組件細分和代碼優(yōu)化 添加typescript支持和單元測試
推薦閱讀
1、力扣刷題插件
2、你不知道的 TypeScript 泛型（萬字長文，建議收藏）
4、immutablejs 是如何優(yōu)化我們的代碼的？
?關(guān)注加加，星標加加～
?
如果覺得文章不錯，幫忙點個在看唄