最近总结一下笔者目前开发的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的最新进度和实现方案, 欢迎大家体验和提出宝贵的建议.

开源地址: MrXujiang/h5-Dooring