juejin.cn/post/6844904083120193543 前言 公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为了提高运营的工作效率，减少开发成本，基于此开发一个活动可视化搭建项目 ，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线，在此做一个小小的总结。 html文件，静态资源， obj通过模版传递挂载在window上，并生成唯一访问路径 发布时改变当前活动页面可访问状态 展示时，根据obj渲染指定的定制组件生成页面 重点 1.节点操作 不操作dom节点 ，通过对数组对象的增删改查来更新视图 2.拖拽与判定 编辑时，涉及到拖拽，判断点与矩形相交，设置偏移量，来区分同级插入，或子级插入，以及提示信息 拖拽：也不是完全利用HTML5 拖放（Drag 和 drop ，渲染展示时，判断当前平台进而作出相应的展示 h5预览使用iframe，h5预览单独占一个路由，赋值给iframe的src属性 5.文字快速编辑 活动页面上会涉及很多文字，用户想修改，有几种方法 编辑按钮
mobile.png pc.png 特性： 任意拖拽嵌套：通过组件预览面板拖拽组件，到设计面板实现任意嵌套，设计面板中的组件也可随意拖拽嵌套 实时预览：设计面板中会实时展示组件的属性效果和样式效果， 并且与真实页面无异 DomTree展示：页面组件dom树的展示并实现dom实时追踪 可视化属性配置：结合React 特性和JS语法定制了可视化的组件属性配置，实现复杂数据结构的可视化配置 可视化样式配置 通过样式配置面板修改样式，实时在页面中显示样式效果 模板功能：可以选中局部或者整个页面做为可复用的模板，提高页面配置效率减少重复工作 组件约束：根据组件特性配置组件约束，减少组件间的错误嵌套和报错 预览与代码生成
接下来按照完成功能点介绍下，主要包括： 编辑器 状态管理 自定义生成组件（目前完成文本、按钮、图片组件） 拖拽 组件属性编辑 放大、缩小 删除组件、调整图层层级 撤销、重做 动画 生成器 介绍 lowcode lowcode平台其实就是通过拖拽或者点击预定义好的组件来生成页面，比较多的应用场景就是产品经理或者运维或者销售来自定义生成活动页，这样的操作简直不要太好，因为再也不需要一堆产品经理、交互、设计以及程序员开会才能完成一个活动页了 这个项目可以分成两部分，一部分是编辑器，一部分是生成器。编辑器用于生成页面，其实就是生成一个包含页面所有组件信息的对象值，如下： 然后可以把这个对象转成字符串存入数据库，对应一个id。 作为第三方来管理画布数据，起初小操作很好，但是因为涉及到组件数据里style、value等的修改，嵌套层级有点深，很多增删改查函数需要复用，但是使用reducer的话，很多修改逻辑要写在组件里，但是我不想组件过于臃肿，拆成工具函数又和 拖拽组件 画布上的组件需要是可拖拽的，通过拖拽控制位置，这个时候其实就是获取x与y轴上的移动距离，那么只需要用这次位置减去初始值位置就可以了。
很多时候，你并不需要很多专业知识，你就可以写出非常出色软件，而这一切都得益于很多低代码编程工具，这些拖拽工具可以非常方便地让你生成页面，甚至是获取数据。接下来我们就来盘点一下可视化代码生成工具。 Wix 一款非常出色的代码拖拽生成工具，它有着丰富的模板库，对于初学者，你可以从众多优秀的模板库中选择一款来开始自己的网页设计之旅。 SITE123 site123是一个非常简洁的网页生成器，使用它你可以拖拽生成一个网页。 码良 一个在线生成h5页面并提供页面管理和页面编辑的平台，用于快速制作H5页面。用户无需掌握复杂的编程技术，通过简单拖拽、少量配置即可制作精美的页面，可用于营销场景下的页面制作。 TaskBuilder 它是一款面向IT技术支持人员和专业程序员的低代码开发工具，可以通过组件化、可视化、模板化和向导化等多种手段，快速构建数据库增删改查类的Web和手机H5应用，大幅提升开发效率。
， 可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本 。 项目链接：https://github.com/ymm-tech/gods-pen 最新star：4247 10 luban-h5 鲁班H5是基于Vue2.0开发的支持拖拽方式来快速生成页面的低代码平台 项目链接：https://github.com/imcuttle/mometa 最新star：3469 12 h5-factory h5-factory是专题页面可视化编辑工具，可以通过拖拽来设计页面， github.com/xuhaiqing/h5-factory 最新star：6 13 steedos-platform steedos-platform是 Salesforce 低代码平台的开源替代方案，使用可视化工具进行模型设计 支持拖拽式、可视化、低代码数据可视化开发，你可以用它自由的拼接成各种炫酷的大屏，同时支持接入开发者自己开发的组件接入平台。
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面拖拽布局配置解决方案，让你轻松实现拖拽式生成html5页面，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 基于react的二维码生成插件 zarm 基于react的移动端ui库，轻松实现美观的H5应用 koa 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发 @koa/router 基于 koa2的服务端路由中间件 ramda 优秀的函数式js工具库 # 已完成功能 组件库拖拽和显示 组件库动态编辑 H5页面预览功能 保存H5页面配置文件 保存为模版 移动端跨端适配 媒体组件 在线下载网站代码功能 升级图片组件为图文组件 添加模版库 添加可视化组件(基于g2)如折线图, 饼图, 面积图等 # to do list 丰富组件库组件 添加配置交互功能 组件细分和代码优化 单元测试 # 参考文档 H5 可视化编辑器(H5 Dooring)介绍 Form Editor(动态表单设计器) 基于f2实现移动端可视化编辑器(dooring升级版) 实现H5可视化编辑器的实时预览和真机扫码预览功能 基于
前言 前段时间笔者一直忙于数据可视化方面的工作，比如如何实现拖拽式生成可视化大屏，如何定制可视化图表交互和数据导入方案等，这块需求在B端企业中应用非常大，所以非常有探索价值。 本篇文章并非和数据可视化相关，而是通过抽象技术底层，将其应用于H5页面可视化搭建上，通过技术的手段实现拖拽式生成H5页面。 这块也有非常多的应用场景，比如我们需要开发一个移动端网站，一个H5营销页面，H5活动页面等，如果有这样的傻瓜式拖拽的工具生成H5页面，将会极大的提高我们的工作效率。 由上面的gif图我们可以分析出，可视化编辑器主要有以下几部分组成： 可拖拽的组件库 draggable components 盛放组件的画布 canvas 组件编辑器 FormEditor 头部工具栏 实现原理其实还是基于json, 我们通过可视化的手段将自己配置的 页面转化为json数据,最后在基于json渲染器来动态生成H5站点. ?
于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢？于是leggo就此诞生，名字来源于乐高Lego，寓意像搭积木一样完成表单的设计。 leggo哲学 虽然利用了“拖拽”这一最直观简单的交互方式。 但leggo并非面向非前端人员，leggo是一个为专业前端开发者提升效率的工具 leggo从一开始就没有想要做成一个大而全的表单配置解决方案。 第一版甚至只是花了一个下午便告完成。 不但可拖拽的表单组件库能够被自由注册。所有通过leggo模板渲染的组件也可以轻松的被整体覆盖、组装或重写属性。你甚至可以暴露各种公共状态和函数给leggo消费。 这种个性化的组件并没有办法通过拖拽完成全部设计。 不要着急，我们先通过拖拽完成左侧经典表单组件部分的设计。 这个对象非常重要，它来自schemaModel，你通过leggo表单设计器拖拽和设置的几乎所有参数都存在这个对象中。实际上，我们正是通过中间件函数在改造由表单设计器生成的schemaModel。
/ layout 合集 https://vuejsexamples.com/tag/layout/ 鲁班H5- 类似易企秀的H5制作、建站工具 https://github.com/ly525/luban-h5 码良快速制作H5页面 https://github.com/ymm-tech/gods-pen Panel-Magic 是基于 Angular8 实现的在线可视化编辑应用 https://github.com web编辑器 https://github.com/page-pipepline/pipeline-editor 拖拽生成落地页，app，小程序实现测试开发运维部署客服一体化 https://github.com /zhangyuhuihh/vue-page-produce 基于vue2 + koa2的 H5制作工具。 类似易企秀、百度H5等H5制作、建站工具 https://github.com/huangwei9527/quark-h5 VUE FLOW DESIGN 流程设计器 https://gitee.com
我今天我给大家来介绍一个低代码工具，是我的朋友徐小夕开发的。这个项目在Github已经开源并且拥有了 4.3k star . 使用这个工具你可以可视化飞速搭建你的站点。 深切 缅怀 国之伟人 接下来给大家介绍的工具,不仅可以通过拖拽的方式制作H5页面, PC页面, 还可以制作可视化大屏应用. 最关键的是, 完全免费使用哦! Nocode/Lowcode Dooring 没错, 这个工具就是Dooring, 其中包含了 H5-Dooring(h5页面搭建), PC-Dooring(pc页面搭建), V6.Dooring(可视化大屏搭建 使用Dooring搭建的移动端产物和依赖的资源非常少, 并且在webpack层和服务器层做了优化, 所以移动端访问H5页面会非常快, 这块优化在公众号《趣谈前端》的可视化专栏里有详细的介绍, 目前对性能这块还在持续优化 V6.Dooring · 拖拽式搭建可视化大屏 ? 目前很多企业或多或少的面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。
国内外已经有不少发展相当不错的产品，作为一名资深的BI爱好者，这次我认真试用了目前市面上比较热门的2款国产BI工具，写下这篇测评。 接下来，将从产品定位、产品功能的角度来进行对比。 都可以快速进行处理，且可视化无代码。 亿信ABI中的数据整合模块相当于一整套数仓实施工具，通过拖拽式的流程设计，实现了数据抽取、清洗、转换、装载及调度。 ，支持H5格式，图表类型有限，基本用定制来实现复杂图。 流向图、H5主干线图、H5双线图、H5渲染图、H5标点图，每种类型还包括EXCEL、Fusion，Flash，H5格式，图表丰富度更好。 用户通过简单拖拽即可生成复杂报表，丰富的可视化展示以及可视化长报告，并且支持将多个报告整合成一个看板集合，共享查询条件。 4、3D可视化 FineBI不支持3D可视化功能。
受到了百度H5的启发，我们最终想到要通过一个平台来解决这些问题。百度H5是通过拖拽的方式来生成H5活动页面的一个平台，它的组件非常丰富。它整个页面的设计思路和现在一些组件化框架的思路很相似。 我们想要的得是一个简单的平台，所有角色都能使用，拖拽界面适用度高，大家乐于接受。 我们希望任何页面都能用可视化的方式去完成。 Blocks是一个拖拽+配置生成的系统。组件是页面中的最小单位，Blocks有拖拽形式的页面画布，可以支持组件的添加和扩展、支持自定义脚本。Blocks是基于vue2.0开发。 ? 3 脚本配置模块 因为现在还没有完全实现可视化，我们在JSON文件里开发扩展脚本，生成了一些事件钩子去更快地开发代码。 4 页面渲染引擎 页面渲染引擎是最核心的部分。 通过拖拽的方式生成，质量会很高。 原来基本所有的工作都是由研发完成的，现在部分工作可以外放，甚至当页面简单或者平台做到极致的时候，就可以实现0成本开发。 ?
形式上，Low-Code表现为，事先通过工具生成部分代码，然后开发者需要在这份代码基础上再继续开发。 Odoo-准备进军中国的低代码编程工具。 PowerApps：微软旗下 AppMaker: 谷歌旗下 牛刀：可以搭小程序等 搭搭云 APICloud iVX-国内的可视化编程工具代表。 可视化拖拽 参考《可视化拖拽组件库一些技术要点原理分析》 2. 配置 从可视化拖拽/填写->配置文件/表->渲染。 生成配置过程比较麻烦，苦力活，需要根据设定好的协议，例如比较火的JSON Schema，生成配置。 由于DSL是一种编程的语言，所以，目标是简单，因此，对于使用者而言，可以不需要可视化拖拽界面，而是直接写DSL即可，例如腾讯问卷可以使用文本方式编辑和生成问卷，以及使用高级方式编辑问卷各个题目之间的逻辑关系
发布者通过数据源-数据模型-数据管理后台进行管理，点击“管理数据”可以查看录入信息，点击“导出”生成excel表格。 目前，我们的模板也已在微信开发者工具中上线，支持识别广东粤省事、北京健康宝和上海随申办的核酸检测统计。 鼠标拖一拖，3分钟即可生成一份页面，可用于快速发布小程序、H5、Web等多端应用。 小程序、H5 应用的搭建、云构建、发布，满足高性能应用搭建需求； PC Web 项目的搭建、云构建、发布，满足后台系统的快速搭建； 企业数字化需求，OA 平台工作流联通。 微搭有何优势？ 拖拽开发 页面可视化拖拽搭建和布局，上手门槛低。 一页多端 拖拽搭建一份前端页面可用于发布多端应用。 云原生一体化 以云开发作为强大的底层支持，应用生产的全链路天然打通，具备云开发的高性能。
从上面的定义可以看出，低代码平台是一种可视化的应用开发方法，用较少的代码、以较快的速度来交付应用程序，将程序员不想开发的代码做到自动化。 今天给大家推荐一个基于 vue 开发可视化商城搭建平台，支持生成H5、小程序多端商城项目 -- Mall-Cook。 功能简介 拖拽式生成页面 可生成 H5、小程序多端商城应用 生成商城支持屏幕适配 实时预览页面 包含多领域模板，可以手机预览模板 支持多种模块，魔方、倒计时、广告轮播、商品、新闻公告，搜锁功能等 自定义底部菜单 地址,本地开发可改为本地启动的H5地址 } 运行项目 npm run dev node服务，启动之前要修改 mogodb 地址。 mongodb数据库地址 格式：mongodb://username:password@host:port/name } module.exports = config 总结 Mall-Cook 通过拖拽的方式
from gooey import GooeyParser,Gooey from MyQR import myqr @Gooey(encoding='utf-8',program_name='二维码生成器 ',program_description='生成动态、彩色、黑白二维码',language='chinese') def main(): parser = GooeyParser(description ="生成动态、彩色、黑白二维码") parser.add_argument('文本', widget="TextField") parser.add_argument('文件', widget= parser.add_argument('文件保存路径',widget='DirChooser') args = parser.parse_args() if args.样式选择 == '黑白': # 生成二维码
工具类 ? 数据可视化 ? 拖拽/排序 ? react-image-crop 强大的图片裁切库 react-sparklines 基于数据自动生成趋势线 dom-to-image 基于dom生成图片的canvas库 react-img-editor 编辑器 h5-dooring H5页面编辑器 9.
通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。 可视化开发， 通过GUI生成页面代码源文件。 资产市场， 代码资源共享，包含组件、编辑区块、静态区块、搜索业务组件、插件、场景搭建编辑器。 ，具备可视化拖拽 可视化编辑器 visual editor。 类似易企秀的H5制作、建站工具、可视化搭建工具。 设计器界面： ---- 上述主要是偏前端的低代码开源项目，接下来分享几个偏后端的低代码开源项目。 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。
.❞ js相关库 js 常用工具类 「lodash」 一个一致性、模块化、高性能的 JavaScript 实用工具库。 「SortableJS」 功能强大的 JavaScript 拖拽库 图形/图像处理库 「html2canvas」 一个强大的使用 js 开发的浏览器网页截图工具 「dom-to-image」 一个可以将任意 构建的自定义的图表库 Viser 支持多种主流框架的可视化库 拖拽/排序 react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离 react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库 react-grid-layout 强大的网格拖拽排序缩放库 mixitup 强大且高性能的列表卡片排序动画库 动画/ 文档编辑器 mitu 图片编辑器 h5-dooring H5 页面编辑器 GGEditor 可视化图编辑器 react-codemirror2 代码编辑器 jsoneditor json 编辑器 地图相关
几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化 C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易 我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 组件拖拽可以采用市面已有的Dragable等插件, 也可以采用H5-Dooring的智能网格拖拽. 这里笔者选择自由拖拽来实现. 具体拖拽呈现流程如下: ? 具体拖拽流程就是: 使用H5 dragable API拖拽左侧组件(component data)进入目标容器(targetBox) 监听拖拽结束事件拿到拖拽事件传递的data来渲染真实的可视化组件 可视化组件挂载
腾讯云微搭低代码 WeDa 是高效、高性能的拖拽式低代码开发平台，向上连接前端的行业业务，向下连接云计算的海量能力，助力企业垂直上云。微搭将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建小程序、H5应用、Web应用等多端应用，免去了代码编写工作，让您能够完全专注于业务场景。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
即时通信 IM
网站备案
对象存储
实时音视频
