前言

前段時(shí)間筆者一直忙于數(shù)據(jù)可視化方面的工作，比如如何實(shí)現(xiàn)拖拽式生成可視化大屏，如何定制可視化圖表交互和數(shù)據(jù)導(dǎo)入方案等，這塊需求在B端企業(yè)中應(yīng)用非常大，所以非常有探索價(jià)值。

本篇文章并非和數(shù)據(jù)可視化相關(guān)，而是通過抽象技術(shù)底層，將其應(yīng)用于H5頁面可視化搭建上，通過技術(shù)的手段實(shí)現(xiàn)拖拽式生成H5頁面。這塊也有非常多的應(yīng)用場景，比如我們需要開發(fā)一個(gè)移動(dòng)端網(wǎng)站，一個(gè)H5營銷頁面，H5活動(dòng)頁面等，如果有這樣的傻瓜式拖拽的工具生成H5頁面，將會(huì)極大的提高我們的工作效率。

接下來筆者將對h5頁面可視化編輯器－Dooring做詳細(xì)的項(xiàng)目分析和原理解讀，來帶大家深入了解h5可視化搭建頁面的原理和技術(shù)實(shí)現(xiàn)。H5編輯器預(yù)覽如下：

H5-dooring

H5-Dooring

github地址：H5-Dooring

技術(shù)棧React 前端主流框架(react,vue,angular)之一,更適合開發(fā)靈活度高且復(fù)雜的應(yīng)用dva 主流的react應(yīng)用狀態(tài)管理工具，基于reduxless css預(yù)編譯語言，輕松編寫結(jié)構(gòu)化分明的cssumi 基于react的前端集成解決方案antd 地球人都知道的react組件庫axios 強(qiáng)大的前端請求庫react-dnd 基于react的拖拽組件解決方案，具有優(yōu)秀的設(shè)計(jì)哲學(xué)qrcode.react 基于react的二維碼生成插件zarm 基于react的移動(dòng)端ui庫，輕松實(shí)現(xiàn)美觀的H5應(yīng)用koa 基于nodejs的上一代開發(fā)框架，輕松實(shí)現(xiàn)基于nodejs的后端開發(fā)@koa/router 基于koa2的服務(wù)端路由中間件ramda 優(yōu)秀的函數(shù)式j(luò)s工具庫需求分析

在思考需求分析之前我們先來看看Dooring的使用演示：

由上面的gif圖我們可以分析出，可視化編輯器主要有以下幾部分組成：

可拖拽的組件庫 draggable components盛放組件的畫布 canvas組件編輯器 FormEditor頭部工具欄 toolBar

可拖拽組件我們可以用社區(qū)比較火的react-dnd，react-draggable來實(shí)現(xiàn)，由于我們的畫布是可拖拽可放大縮小的，所以這里需要對畫布賦能，具體實(shí)現(xiàn)可參考下文。

其次就是H5編輯器部分，這部分是核心功能，后面我們會(huì)詳細(xì)分析。還有就是預(yù)覽，生成預(yù)覽鏈接，保存json文件， 保存模版這些功能本質(zhì)上是對我們json文件的操作，可是目前可視化搭建技術(shù)的常用手段之一。

基礎(chǔ)準(zhǔn)備

我們的h5頁面可視化編輯器采用umi來作為腳手架工具.

umi是可擴(kuò)展的企業(yè)級前端應(yīng)用框架,以路由為基礎(chǔ)的，同時(shí)支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求.

這樣我們不會(huì)關(guān)注繁瑣的工程配置細(xì)節(jié), 可以直接在項(xiàng)目中使用 antd 和 less 這些方案, 并且集成了目前比較流行的css module, 可以方便我們在項(xiàng)目里對css進(jìn)行模塊化開發(fā). umi創(chuàng)建項(xiàng)目的具體使用流程如下:

// 創(chuàng)建并進(jìn)入工程目錄mkdir dooring && cd dooring// 創(chuàng)建umi應(yīng)用yarn create @umijs/umi-app// 安裝依賴yarn // 或者使用npm install

簡單的三步走策略就能輕松搭建我們的項(xiàng)目工程, 是不是省去了很多麻煩? (在使用這些方式之前我們首先確保自己本地的node 版本是 10.13 或以上)

【限時(shí)免費(fèi)】AI大廠面試核心考點(diǎn)，六大方向一網(wǎng)打盡

已失效

在項(xiàng)目搭建完成之后我們調(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

page目錄下的editor使我們的主頁面, components存放我們的公共組件, models和service主要負(fù)責(zé)處理dva的狀態(tài)管理邏輯, 其他部分大家可以更具需求自由定義.此處僅供學(xué)習(xí)參考.

在項(xiàng)目創(chuàng)建完之后我們還需要安裝可視化方面必備的第三方組件, 筆者調(diào)研社區(qū)精選組件之后采用了一下方案: react-dnd react拖拽組件 react-color react顏色選擇組件,用于H5編輯器的編輯顏色部分 react-draggable 用于組件或者畫布的拖拽移動(dòng) react.qrcode 基于react的二維碼生成組件, 能以react組件的方式生成二維碼

以上組件在運(yùn)行項(xiàng)目前大家可以自行安裝.

正文

在最好項(xiàng)目開發(fā)準(zhǔn)備之后,我們就來開始設(shè)計(jì)我們的h5頁面可視化編輯器－Dooring.

H5編輯器實(shí)現(xiàn)

H5可視化編輯器主要需要4個(gè)部分,在文章開頭也分析過, 這里用圖來鞏固一下:

以上是最基本也是最核心的功能展示模型,接下來我們會(huì)一一將其拆解并逐個(gè)實(shí)現(xiàn).

實(shí)現(xiàn)原理

我們都知道, 目前比較流行的頁面可視化搭建方案可以有如下幾種: 在線編輯代碼實(shí)現(xiàn) 在線編輯json實(shí)現(xiàn) * 無代碼化拖拽實(shí)現(xiàn)(底層基于json配置文件)

筆者做了一下優(yōu)缺點(diǎn)對比圖,如下:

| 方案 | 定制化程度 | 缺點(diǎn) | | :--------- | :--: | -----------: | | 在線編輯代碼 | 最高 | 使用成本高,對非技術(shù)人員不友好,效率低 | | 在線編輯json | 較高 | 需要熟悉json,有一定使用成本, 對非技術(shù)人員不友好,效率一般 | | 無代碼化拖拽實(shí)現(xiàn) | 高 | 使用成本低, 操作基本無門檻,效率較高 |

由以上分析來看, 為了開發(fā)一個(gè)低門檻, 對任何人適用的可視化編輯器, 筆者將采用第三種方案來實(shí)現(xiàn), 目前市面上已有的產(chǎn)品也有很多, 比如說易企秀, 兔展, 百度H5等等. 實(shí)現(xiàn)原理其實(shí)還是基于json, 我們通過可視化的手段將自己配置的 頁面轉(zhuǎn)化為json數(shù)據(jù),最后在基于json渲染器來動(dòng)態(tài)生成H5站點(diǎn).

數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

為了提供組件的自定義能力,我們需要定義一套高可用的數(shù)據(jù)結(jié)構(gòu), 這樣才能實(shí)現(xiàn)因組件需求變更而帶來的維護(hù)性優(yōu)勢.

在開始設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)之前我們先來拆解一下模塊:

H5-Dooring

不同的組件都對應(yīng)不同的"編輯區(qū)域".我們需要設(shè)計(jì)一套統(tǒng)一的標(biāo)準(zhǔn)的配置來約定它, 這樣對于表單編輯器的設(shè)計(jì)也非常有利, 具體拆解如下:

經(jīng)過以上分析之后, 筆者設(shè)計(jì)了類似下面的數(shù)據(jù)結(jié)構(gòu):

"Text": { "editData": [ { "key": "text", "name": "文字", "type": "Text" }, { "key": "color", "name": "標(biāo)題顏色", "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 }}

通過這種標(biāo)準(zhǔn)化結(jié)構(gòu)設(shè)計(jì)之后,我們可以很方便的實(shí)現(xiàn)我們所需要的編輯頁面的功能, 并且后期擴(kuò)展非常方便, 只需要往editData添加配置即可. 至于動(dòng)態(tài)表單編輯器的實(shí)現(xiàn),方案有很多, 筆者之前也寫過相關(guān)的文章, 這里就不詳細(xì)介紹了.

組件庫設(shè)計(jì)

組件庫設(shè)計(jì)考慮的一個(gè)重要的問題就是體積和渲染問題, 一旦組件庫變得越來越多, 那意味著頁面加載會(huì)非常慢,所以我們需要實(shí)現(xiàn)異步加載組件和代碼分割的能力, umi提供了這樣的功能,我們可以基于它提供的api去實(shí)現(xiàn)自己的額按需組件.

import { dynamic } from 'umi';export default dynamic({ loader: async function() { // 這里的注釋 webpackChunkName 可以指導(dǎo) webpack 將該組件 HugeA 以這個(gè)名字單獨(dú)拆出去 const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA'); return HugeA; },});

通過以上的方式來定義包裹我們的每一個(gè)組件, 這樣就能實(shí)現(xiàn)按需加載了, 但是最好的建議是不需要每個(gè)組件都按需加載和拆包,對于標(biāo)題, 通知欄,頁頭,頁腳這些組件, 我們完全可以把它放在一個(gè)組里,這樣不但對不會(huì)影響加載速度, 還能減少一定的http請求.

筆者這里簡單舉一個(gè)組件實(shí)現(xiàn)的例子，方便大家理解：

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屬性完全是由我們之前設(shè)計(jì)的json結(jié)構(gòu)來定義的，在用戶編輯的過程中將收據(jù)收集并傳給Header組件。最后一步是將這些組件動(dòng)態(tài)傳給dynamic組件， 這塊在上文也介紹過了，大家可以根據(jù)自己的實(shí)現(xiàn)來做動(dòng)態(tài)化渲染。

實(shí)現(xiàn)預(yù)覽功能

預(yù)覽功能這塊比較簡單, 我們只需要將用戶生成的json數(shù)據(jù)丟進(jìn)H5渲染器中即可, 這里我們需要做一個(gè)渲染頁面單獨(dú)用來預(yù)覽組件. 先來看看幾個(gè)預(yù)覽效果:

前面的渲染器原理已經(jīng)介紹了, 這里就不一一介紹了,感興趣的可以交流討論.

實(shí)現(xiàn)在線下載功能

在線下載這塊我們需要用到一個(gè)開源庫: 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");

以上代碼可以實(shí)現(xiàn)將傳入的數(shù)據(jù)下載為txt文件, 如果是Blob, 是不是還能在線下載圖片, html呢? 答案是肯定的, 所以我們的下載任務(wù)采用該方案來實(shí)現(xiàn).

后端部分實(shí)現(xiàn)

后端部分由于涉及的知識點(diǎn)比較多, 不是本文考慮的重點(diǎn), 所以這里大致提幾個(gè)點(diǎn), 大家可以用完全不同的技術(shù)來實(shí)現(xiàn)后臺服務(wù), 比如說PHP, Java, Python或者Egg. 筆者這里采用的是koa. 主要實(shí)現(xiàn)功能如下:

保存模板 真機(jī)預(yù)覽的數(shù)據(jù)源存儲 用戶相關(guān)功能 H5圖床和靜態(tài)文件托管

github地址：H5-Dooring

最后

如果想學(xué)習(xí)更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識和實(shí)戰(zhàn)，歡迎在《趣談前端》一起學(xué)習(xí)討論，共同探索前端的邊界。