最近總結一下筆者目前開發的h5在線編輯器H5-Dooring. 目前已經在github上開源免費使用. 目前市面上也有很多優秀的H5在線編輯器, 也很強大, 筆者將從幾個維度來介紹H5-Dooring的優點和後期迭代的方向.
趣談前端 – H5頁面可視化編輯器
一. 從開源的角度
目前項目編輯器部分已在github社區完全開源, 大家可以在線體驗也可以下載本地啟動, 如果你是一名技術人員或者有自身技術團隊, 你可以很容易的將H5-Dooring包裝成符合自己企業風格的編輯器產品(GLP開源協議). 其次如果您不想二次開發, 您也可以直接將H5-Dooring通過sdk的方式內嵌到自己的系統, 並且支持定製編輯器, 去除我們不需要的功能.
趣談前端 – H5頁面可視化編輯器
由上圖可以看到我們通過sdk可以輕鬆定製我們想要展示的功能頁頁面大小. 後期我們還會升級我們的後台, 做到真正的技術賦能產品.
再來說說功能, 目前開源項目已經迭代了4個版本, 目前支持的功能如下:
- 提供了豐富的頁面組件和可視化組件
- 提供了模版一鍵導入功能
- 完全的智能布局, 降低用戶配置頁面的成本
- 支持下載源碼, 用戶可以將自己配置的網頁部署到任何伺服器
- 支持真機預覽功能, 提供更精準的頁面還原度和適配性
- 支持PC端模擬預覽
- 支持一鍵生成海報圖, 更自由的將你的頁面分享出去
- 支持下載json和導入json, 如果你對技術有一丁點了解, 你將可以通過json直接配置頁面
- 提供表單製作和數據收集能力, 你可以通過H5-Dooring的後台輕鬆管理你配置的問卷, 還支持數據一鍵下載和導出, 支持使用第三方api介面
- 可視化組件助力移動端BI分析, 支持excel數據一鍵導入生成可視化報表
- 問卷/表單數據自動多維度分析
趣談前端 – H5頁面可視化編輯器
H5-Dooring後台數據分析界面
趣談前端 – H5頁面可視化編輯器
H5-Dooring模版功能介紹
二. 從不同用戶類型使用的角度
站在不同用戶的角度, 筆者也做了一些思考, 並預留了一些可配置和擴展的空間. 比如說你是一名技術人員, 不想做繁瑣的基礎頁面開發, 你可以拖拽式的搭建一個頁面, 然後下載源碼最後部署到伺服器. 過程大概如下:
趣談前端 – H5頁面可視化編輯器
h5-dooring搭建過程
如果你是運營或者產品人員, 你可以使用編輯器已有的組件, 配置不同類似的H5頁面, 也可以保存為模版, 供其他人使用和復用, 目前H50Dooring編輯器已有組件包括:
- 基礎組件(文本, 長文本, 富文本, 圖片, 輪播圖, 按鈕, 空白佔位, 頭部/頁腳組件, 表單Form組件,圖標組件, 卡片組件, 二維碼組件, 消息通知組件)
- 媒體組件(包括音頻組件, 視頻組件, 並支持嵌入第三方腳本, 可以輕鬆把B站, 優酷, 愛奇藝視頻嵌入到H5中)
- 可視化組件(包括折線圖, 柱狀圖, 面積圖, 漏斗模型, 餅圖, 雷達圖等)
- 商品組件(包括商品列表, Tab切換組件, 專欄組件)
後續還會增加更多實用的組件, 通過這些組件以及傻瓜式的操作, 可以讓更多人用到H5-Dooring, 輕鬆搭建自己適合的H5頁面. 如果你是運營人員, 還需要能做分享海報, H5-Dooring 也提供了一鍵將頁面生成海報圖的功能, 輕鬆讓運營一次操作, 多場景使用(H5頁面, H5海報, 統計分析後台).
三. 從市場的角度
筆者一直相信任何技術和產品的誕生都是服務於用戶需求的, 所以仍然需要不斷的適應市場需求, 更大程度的降低使用者的使用成本以及提高公司的開發效能, 所以目前Dooring還在不斷升級優化, 快速響應用戶需求, 迭代產品功能, 來真正解決一些市場痛點. 以下是一個H5-Dooring配置的頁面:
趣談前端 – H5頁面可視化編輯器
四. 版本迭代的角度
最近也收到了很多網友的意見, 目前Dooring也在持續更新和迭代, 筆者後續也會《趣談前端》中同步更新Dooring的最新進度和實現方案, 歡迎大家體驗和提出寶貴的建議.
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/209011.html