Github

https://github.com/MrXujiang/h5-Dooring

产品特点大略方便

任何人只须要傻瓜式拖拽或进行大略编辑即可天生精美的H5页面

插拔式体验

产品完备开源，可植入任何系统，并支持二次开拓

phpcoder制作页面开源免费的H5可视化页面设置装备摆设解决计划h5Dooring Bootstrap

持续迭代，无限可能

目前正在持续迭代中，后续可根据需求开拓功能更强大的可视化系统.

有关技能栈React 前端主流框架(react,vue,angular)之一,更适宜开拓灵巧度高且繁芜的运用dva 主流的react运用状态管理工具，基于reduxless css预编译措辞，轻松编写构造化分明的cssumi 基于react的前端集成办理方案antd 地球人都知道的react组件库axios 强大的前端要求库react-dnd 基于react的拖拽组件办理方案，具有精良的设计哲学qrcode.react 基于react的二维码天生插件zarm 基于react的移动端ui库，轻松实现都雅的H5运用koa 基于nodejs的上一代开拓框架，轻松实现基于nodejs的后端开拓@koa/router 基于koa2的做事端路由中间件ramda 精良的函数式js工具库在线下载

用到了之前文章中先容到的FileSaver.js

var FileSaver = require('file-saver');var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});FileSaver.saveAs(blob, "hello world.txt");后端部分

后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 以是这里大致提几个点, 大家可以用完备不同的技能来实现后台做事, 比如说PHP, Java, Python或者Egg. 笔者这里采取的是koa. 紧张实现功能如下:

保存模板真机事理的数据源存储用户干系功能H5图床和静态文件托管快速开始

推举利用yarn替代npm，详细还得看个人喜好

下载代码

git clone https://github.com/MrXujiang/h5-Dooring.git进入项目目录

cd ./h5-Dooring安装依赖包

yarn installUsage

启动运用

yarn run start目前已具备的功能组件库拖拽和显示组件库动态编辑H5页面预览功能保存H5页面配置文件保存为模版移动端跨端适配媒体组件在线下载网站代码功能添加typescript支持表单设计器/自定义表单组件可视化组件Chart实现在线编程模块(Mini Web IDE)新增图表组件 面积图，折线图， 饼图后续更新升级模版库丰富组件库组件，添加可视化组件如折线图, 饼图, 面积图等添加配置交互功能组件细分和代码优化单元测试预览截图

官网有视频先容和操作教程，感兴趣的小伙伴可以去看看

总结

市情上很多H5制作工具，但是像h5-dooring这样开源且免费的是不多见的，如果你以为h5-dooring是你的菜，可以多多支持它的开拓者，这样h5-dooring也能更好的得到发展，更加方便大家利用！