前言
前段時間筆者一直忙于數據可視化方面的工作，比如如何實現拖拽式生成可視化大屏，如何定制可視化圖表交互和數據導入方案等，這塊需求在B端企業中應用非常大，所以非常有探索價值。
本篇文章并非和數據可視化相關，而是通過抽象技術底層，將其應用于H5頁面可視化搭建上，通過技術的手段實現拖拽式生成H5頁面。這塊也有非常多的應用場景，比如我們需要開發一個移動端網站，一個H5營銷頁面，H5活動頁面等，如果有這樣的傻瓜式拖拽的工具生成H5頁面，將會極大的提高我們的工作效率。
接下來筆者將對h5頁面可視化編輯器－Dooring做詳細的項目分析和原理解讀，來帶大家深入了解h5可視化搭建頁面的原理和技術實現。H5編輯器預覽如下：
H5-dooring
H5-Dooring
github地址：H5-Dooring
技術棧
- React 前端主流框架(react,vue,angular)之一,更適合開發靈活度高且復雜的應用
- dva 主流的react應用狀態管理工具，基于redux
- less css預編譯語言，輕松編寫結構化分明的css
- umi 基于react的前端集成解決方案
- antd 地球人都知道的react組件庫
- axIOS 強大的前端請求庫
- react-dnd 基于react的拖拽組件解決方案，具有優秀的設計哲學
- qrcode.react 基于react的二維碼生成插件
- zarm 基于react的移動端ui庫，輕松實現美觀的H5應用
- koa 基于nodejs的上一代開發框架，輕松實現基于nodejs的后端開發
- @koa/router 基于koa2的服務端路由中間件
- ramda 優秀的函數式js工具庫
需求分析
在思考需求分析之前我們先來看看Dooring的使用演示：
由上面的gif圖我們可以分析出，可視化編輯器主要有以下幾部分組成：
- 可拖拽的組件庫 draggable components
- 盛放組件的畫布 canvas
- 組件編輯器 FormEditor
- 頭部工具欄 toolBar
可拖拽組件我們可以用社區比較火的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編輯器實現
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. 主要實現功能如下:
- 保存模板
- 真機預覽的數據源存儲
- 用戶相關功能
- H5圖床和靜態文件托管
github地址：H5-Dooring
最后
如果想學習更多H5游戲, webpack，node，gulp，css3，JavaScript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在《趣談前端》一起學習討論，共同探索前端的邊界。
