当前位置:首页 > 天道酬勤 > 正文内容

可视化h5编辑(h5可视化拖拽框架)

张世龙2021年12月20日 08:05天道酬勤630

介绍

H5-Dooring是功能强大、开源的免费H5可视化页面配置解决方案,致力于提供简单、方便、专业、可靠、无限可能的H5落地页面最佳实践。 h5-Dooring让H5做,更方便!

Github

https://Github.com/Mrxujiang/H5-door ing

产品特点

简单,任何人只需拖动傻瓜或简单的编辑,即可创建美丽的H5页面

插件体验型产品是完全开源的,可以移植到任何系统中,支持二次开发

迭代,无限可能目前正在迭代中,后续可以根据需要开发更强大的可视化系统。

有关技术栈

React前端主流框架(react、vue、angular )之一。 基于reduxless css预编译语言,适用于开发灵活复杂的APP dva主流的react APP状态管理工具。 结构化清晰的cssumi基于react的前端集成解决方案antd地球人都知道的react组件库axios强大的前端请求库基于react-dndreact的拖动组件卓越的设计哲学基于QRcode.reactreact的二维码生成插件基于zarmreact的移动ui库、基于美丽的H5 APP应用koanodejs的上一代开发框架、基于nodejs的后端开发@ KOA/KOA /

varfilesaver=请求(文件-服务器);

varblob=newblob(['Hello,世界!' ],{类型: '文本/平面; charset=utf-8'} ';

filesaver.save as (博客,' hello world.txt ';

在线下载

后端部分知识点很多,不是本文要考虑的重点,所以这里只粗略提几点,用PHP、Java、Python、或者Egg等完全不同的技术实现后台服务。 笔者在这里采用了koa。 主要实现功能有以下:

保存模板实机原理的数据源存储用户相关功能H5图床和静态文件管理

后端部分

推荐yarn代替npm,具体也取决于个人喜好

下载代码git clone https://github.com/mrxujiang/H5-door ing.git并访问项目目录cd ./h5-Dooring,获取相关软件包yarn安装

yarn run start

快速开始

组件库拖动与应用; 显示组件库动态编辑H5页预览功能保存H5页配置文件保存模板移动端跨自适应媒体组件在线下载网站的代码功能添加typescript支持表单设计器/定制窗体组件可视化组件Chart实现在线编程模块(图表组件的面积图、折线图、饼图

目前已具备的功能

模板库的丰富组件库组件) 添加面积图等可视化组件,构成交互式功能组件的细分和代码优化单元测试

后续更新

官网上有视频介绍和操作教程,有兴趣的朋友请去看看

预览截图

市场上有很多H5制作工具,但很少有像h5-dooring这样开源免费的。 如果你觉得h5-dooring是你的菜,请支持很多开发者。 这样的话,h5-dooring也会更有发展,大家也更方便使用。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25497.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。