基于js开发的一个h5页面可视化布局器-阿里云开发者社区

开发者社区> 开发与运维> 正文

基于js开发的一个h5页面可视化布局器

简介: 前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值。 本篇文章并非和数据可视化相关,而是通过抽象技术底层,将其应用于H5页面可视化搭建上,通过技术的手段实现拖拽式生成H5页面。这块也有非常多的应用场景,比如我们需要开发一个移动端网站,一个H5营销页面,H5活动页面等,如果有这样的傻瓜式拖拽的工具生成H5页面,将会极大的提高我们的工作效率。 接下来笔者将对h5页面可视化编辑器做详细的演示

先来看一下这款布局器在线地址 magicalcoder.com 请用电脑访问
image.png
特点:

1 支持多种ui(vue jquery react...)  element layui antdesign bootstrap miniui vant 
2  支持echarts可视化图表
3 布局器的使用就不细说了 拖拽式开发
4 可视化编写脚本js(vue的ui新特性)
5 支持自由拖拽定位+拖拽插入混合模式
6 可嵌入 jquery vue react angular框架的ui
7 快捷键操作
8  自定义皮肤和换肤
9 对齐线 辅助线 网格
10 导航树
11 右键菜单
12 支持样式 脚本 HTML同时编写
13 拖拽改变宽高 旋转 
14 自定义组件和属性 只要配置json便可完成
15 支持 二次定制化开发 支持嵌入到您的web系统种 支持扩展基于jquery 或者vue的各种前端开源ui
16 成果物,就是当前ui的代码,自适应移动端,直接面向业务,减轻前端工程师的介入和工作量
17 视频教程+开发文档齐全

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章