H5 Dooring Vue
1.0.0
H5-Dooring是一款功能強大，開源免費的H5可視化頁面配置解決方案，致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react為主， 後台採用nodejs開發。
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ️ if this project helped you!
可視化編輯器主要有以下幾部分組成：
可拖拽組件我們可以用社區比較火的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 或以上)
在項目創建完之後我們還需要安裝可視化方面必備的第三方組件, 筆者調研社區精選組件之後採用了一下方案:
以上組件在運行項目前大家可以自行安裝.
在最好項目開發準備之後,我們就來開始設計我們的h5頁面可視化編輯器－ Dooring .
H5可視化編輯器主要需要4個部分,在文章開頭也分析過, 這裡用圖來鞏固一下: 以上是最基本也是最核心的功能展示模型,接下來我們會一一將其拆解並逐個實現.
我們都知道, 目前比較流行的頁面可視化搭建方案可以有如下幾種:
筆者做了一下優缺點對比圖,如下:
| 方案 | 定制化程度 | 缺點 |
|---|---|---|
| 在線編輯代碼 | 最高 | 使用成本高,對非技術人員不友好,效率低 |
| 在線編輯json | 較高 | 需要熟悉json,有一定使用成本, 對非技術人員不友好,效率一般 |
| 無代碼化拖拽實現 | 高 | 使用成本低, 操作基本無門檻,效率較高 |
由以上分析來看, 為了開發一個低門檻, 對任何人適用的可視化編輯器, 筆者將採用第三種方案來實現, 目前市面上已有的產品也有很多, 比如說易企秀, 兔展, 百度H5等等.實現原理其實還是基於json, 我們通過可視化的手段將自己配置的頁面轉化為json數據,最後在基於json渲染器來動態生成H5站點.
為了提供組件的自定義能力,我們需要定義一套高可用的數據結構, 這樣才能實現因組件需求變更而帶來的維護性優勢.
在開始設計數據結構之前我們先來拆解一下模塊: 不同的組件都對應不同的"編輯區域".我們需要設計一套統一的標準的配置來約定它, 這樣對於表單編輯器的設計也非常有利, 具體拆解如下:
經過以上分析之後, 筆者設計了類似下面的數據結構:
"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添加配置即可. 至於動態表單編輯器的實現,方案有很多, 筆者之前也寫過相關的文章, 這裡就不詳細介紹了.
基於react搭建一個通用的表單管理配置平台（vue同）
組件庫設計考慮的一個重要的問題就是體積和渲染問題, 一旦組件庫變的越來越多, 那意味著頁面加載會非常慢,所以我們需要實現異步加載組件和代碼分割的能力, 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 . 主要實現功能如下:
具體代碼可以參考筆者的另一篇全棧開發文章
基於nodeJS從0到1實現一個CMS全棧項目
模式基本一致.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn install啟動應用
yarn run start正在升級1.3版本，敬請期待...
