H5-Dooring零代碼搭建平臺指南

H5-Dooring 是一款功能強大，高可擴展的 H5 可視化頁面配置解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的 H5 落地頁最佳實踐。

隨著?H5-Dooring的持續(xù)迭代, 目前已不僅僅局限于H5頁面的搭建, 我們基于它的渲染架構還可以輕松擴展出PC端編輯器, 目前我還在研究響應式設計, 最終目標是實現(xiàn)一端搭建, 多端適配.

背景介紹

「LowCode」 平臺這兩年在國內熱度很高, 也有很多公司在著手設計能支撐更多業(yè)務場景的低代碼平臺, 但是國內發(fā)展仍然處于起步階段, 還有非常多的問題需要處理。就我本人服務過的多家上市公司, 中后臺業(yè)務非常復雜, 但是通用性非常高, 業(yè)務邏輯和展現(xiàn)形態(tài)有很多復用性, 為了解決復用性低和研發(fā)效能低的問題, 「規(guī)則引擎」 孕育而生, 當然這只是 「Lowcode/nocode」 的一個過渡方案, 但已經能為企業(yè)提高20%以上的研發(fā)效率。

當然很多企業(yè)早已看到這樣的機會, 也研發(fā)出了非常優(yōu)秀的 「LowCode」 產品, 但是由于國內企業(yè)業(yè)務的復雜性, 很多 「LowCode」 產品都存在一定的局限, 所以各大中小企業(yè)也開始研究可視化搭建相關的產品, 可謂“百花齊放”。

「H5-Dooring」 正是為了解決企業(yè)內部可視化搭建需求的解決方案, 它更多的是提供一套可視化搭建解決方案, 以源碼的方式交付企業(yè), 使得企業(yè)能從此方案中受益, 二次開發(fā)適合自身業(yè)務需求的搭建平臺。當然隨著 「H5-Dooring」 ?的不斷更新和完善, 部分企業(yè)甚至不需要二次開發(fā)就能直接使用 「H5-Dooring」 , 我們也提供部署服務, 來快速幫企業(yè)做項目部署。目前已完成了常用的功能:

• 雙布局搭建解決方案(支持「智能網格布局」和「自由布局」)
• 通用組件搭建協(xié)議和組件資產
• 頁面模版, 定制組件, 多預覽模式
• 出碼能力(源碼 & 編譯包)
• 設計輔助功能(網格線,層級操作,尺寸參考線,快捷鍵等)
• 微信/QQ分享(支持配置微信分享文案, 自定義分享圖標)
• https服務支持解決方案
• oss解決方案(已跑通七牛云上傳服務)
• 國際化方案

同時由于 「H5-Dooring」 的核心在編輯器前端, 也是其最大價值所在, 我們服務層主要提供基礎的數據支持服務(用戶管理, H5頁面管理, 模版管理, 基本頁面統(tǒng)計等), 企業(yè)也可以輕松接入自己的服務后臺,如 「java, php, go, python」 等。所以不用擔心整合內部系統(tǒng)之后的數據問題, 同時我建議有二次開發(fā)需求的企業(yè)需要具備一定的技術能力, 比如「React, Nodejs」 等的開發(fā)經驗。

H5編輯器介紹

接下來和大家詳細介紹一下 「H5-Dooring」 編輯器的功能模塊。

1.入口頁面

入口頁面主要是我們在編輯器前臺管理用戶頁面的一個入口, 我們可以創(chuàng)建H5頁面, 在線編程等, 同時也能基于已有的精選模版來快速的創(chuàng)建頁面:

2.編輯器頁面

編輯器頁面的內容比較多, 也是最為重要的部分。我們可以從幾個部分來介紹:

• 組件區(qū)
• 畫布區(qū)
• 頂部功能區(qū)
• 屬性編輯面板
• 數據源
• 快捷鍵
• 國際化

2.1 組件區(qū)

組件主要包括 基礎組件, 圖表組件, 媒體組件, 商品組件, 功能組件, 當然企業(yè)也可以基于自身業(yè)務劃分不同的分類, 并進行組件的二次開發(fā)。我們只需要從左側拖拽組件到畫布, 即可使用該組件。

同時 「H5-Dooring」 還提供了組件定制的能力, 讓用戶選擇自己常用的組件, 這樣用戶可以更高效的搭建頁面:

由上圖所示, 用戶只需要選擇或者取消選擇, 可以決定組件是否在編輯器頁面顯示, 如果后期用戶想恢復設置, 也可以在該頁面恢復。

2.2 畫布區(qū)

畫布區(qū)可以動態(tài)調整畫布大小來試試預覽不同尺寸的樣式, 也可以移動畫布, 縮放畫布來快捷的操作頁面:

多種布局任意切換:

2.3 頂部功能區(qū)

頂部功能區(qū)包括的功能有:

• 模版庫
• 保存
• 下載源碼
• 導出json
• 導入json
• 預覽
• 真機預覽
• 撤銷/重做
• 刪除
• 截圖
• 頁面設置

大家可以親自體驗一下。

2.4 屬性編輯面板

屬性編輯面板可以對組件的外觀, 邏輯, 交互進行配置, 比較簡單但大部分滿足業(yè)務搭建需求, 企業(yè)技術人員也可以增量式地添加更多屬性配置。

2.5 數據源

數據源主要為瓶平臺用戶提供一種高效的數據接入機制, 不同頁面或者統(tǒng)同一頁面的不同組件可以共享數據:

更詳細的數據源介紹可以參考我的文章 Dooring可視化搭建平臺數據源設計剖析

2.6 快捷鍵

快捷鍵主要分為畫布內組件的快捷鍵(復制, 刪除)和全局的快捷鍵, 如下圖所示:

2.7 國際化

國際化目前已支持, 我們只需要在入口頁面切換即可:

3.預覽頁面

用戶可以點擊頂部功能區(qū)的預覽按鈕一鍵預覽:

也可以在預覽頁面, 打開控制臺調整為谷歌的仿真預覽模式:

4.真機預覽

5.登錄頁面

Dooring后臺管理介紹

「Dooring后臺管理」 主要是為 「H5-Dooring」 提供數據支撐, 比如增刪查改等操作, 同時隨著用戶需求的不斷增加, 「Dooring后臺管理」 目前已實現(xiàn)了非常多的功能, 比如說表單數據收集, 表單數據分析, 導出數據, 基本的頁面數據監(jiān)控等, 接下來我就來帶大家介紹一下。

我們可以從上圖的編輯器界面右上角頭像下拉框中進入后臺管理系統(tǒng)。

1.后臺主頁

后臺主頁主要是對編輯器頁面提供基本的訪問量統(tǒng)計, 同時對用戶數, 模版數, 頁面數進行統(tǒng)計, 企業(yè)可以根據自身需求二次開發(fā)更多數據統(tǒng)計方案。

2.用戶管理

用戶管理主要是對網站用戶進行管理(注冊, 修改, 刪除, 查看等), 當然只有超級管理員能看到, 目前我們做了簡單的權限管理: 超級管理員, 普通用戶. 普通用戶可以管理自己的頁面, 查看頁面數據分析等,超級管理員可以使用所有功能, 比如管理用戶, 生成注冊鏈接, 模版管理, 頁面管理等, 同時可以審核頁面, 一鍵刪除其他用戶產生的不符合規(guī)定的頁面。

3.頁面管理

頁面管理主要是對用戶搭建的H5頁面進行管理, 我們可以查看頁面的鏈接, 頁面訪問量, 編輯頁面標題, 刪除頁面等,如果這個頁面包含表單, 我們還能一鍵查看表單數據的收集情況,并一鍵進行數據分析。

3.1表單頁面數據分析

表單數據分析主要針對有表單的頁面, 我們可以一鍵統(tǒng)計表單數據, 并生成分析報告, 如下圖:

同時我們可以將數據導出為 excel, 或者將數據導入, 一鍵生成數據分析報告, 當然更多分析維度開發(fā)者也可以二次開發(fā)。

4.模版管理

超級管理員可以對用戶產生的模版進行預覽, 審核, 刪除, 保證線上用戶使用的模版都是精美可用的:

5.精選模版管理

精選模版主要是用來管理 「H5-Dooring」 入口頁面中的模版, 我們可以把精美的行業(yè)模版上傳到精選模版中, 讓用戶更高效的搭建頁面:

Dooring后臺服務介紹

后臺服務主要采用的 koa + nodejs, 同時還使用了微信 sdk, 輕松幫我們實現(xiàn)微信相關的功能, 接口遵循 restful 規(guī)范, 并且提供了接口文檔, 企業(yè)可以輕松基于此使用自己的后端語言來接入, 比如 java, python, go, php等。

后續(xù)「H5-Dooring」 會持續(xù)迭代,?歡迎各位反饋, 提出寶貴的建議.