hi, 大家好, 我是徐小夕.
之前一直在社区分享零代码 &低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：
- H5-Dooring（页面可视化搭建平台）
- V6.Dooring（可视化大屏搭建平台）
- Flowmix/Docx 多模态文档编辑器: 让文档不止于文档
最近也一直在研究可视化搭建 + AI 相关的技术实践, 花了几周的时间，终于把Dooring零代码 的AI模型跑通，我们可以直接用AI，生成符合Dooring可视化搭建 平台规范的页面，即AI直出页面，在2月底我们即将推出Dooring AI能力，帮助没有技术能力的小白，也能通过对话式生成web页面。
接下来就和大家分享一下我们迭代了4年的零代码可视化搭建平台------H5-Dooring。它提供了一个开源版本，大家感兴趣可以参考学习一下：
github地址：github.com/MrXujiang/h...
一. 零代码搭建，究竟是什么？
在数字化浪潮中，"零代码搭建" 已成为一个热门词汇，正逐渐改变着软件开发与应用的格局。零代码搭建，顾名思义，就是无需编写代码，即可完成应用程序或网站的创建。它打破了传统开发中代码的壁垒，让不具备专业编程技能的人也能参与到开发中来。
过去，开发一个简单的应用或网站，往往需要专业的程序员花费大量时间和精力进行代码编写、调试和优化。从需求分析、设计架构到一行行代码的敲入，再到反复测试修复漏洞，整个过程繁琐复杂，开发周期长，成本也居高不下。而零代码搭建则通过可视化的界面和拖拽式的操作，将原本复杂的代码逻辑转化为一个个直观的组件和模块。用户只需像搭建积木一样，将这些组件按照自己的需求进行组合和配置，就能快速构建出满足各种业务需求的应用，极大地降低了开发门槛，提高了开发效率。
想象一下，一位市场营销人员想要创建一个活动宣传网站，以往他可能需要向技术团队提出需求，经过漫长的等待才能看到成果。现在，借助零代码搭建平台，他可以自己动手，在短时间内就搭建出一个功能齐全、页面精美的活动网站，及时满足市场推广的需求。这种便捷性和高效性，使得零代码搭建在各个领域得到了广泛的应用，从企业内部的管理系统到对外的营销展示平台，从小型创业项目到大型企业的数字化转型，零代码搭建都发挥着重要作用。
而 H5 - Dooring，正是在这样的背景下被我们设计出来的。
二. H5-Dooring，从开源到商业化
在开源领域，H5 - Dooring 凭借其卓越的表现脱颖而出，在 GitHub 上收获了近 1w star，成为众多开发者关注和喜爱的对象。这一成绩不仅是对其技术实力的认可，更是其在零代码搭建领域领先地位的有力证明。
H5 - Dooring 提供了开源版本和商业版本，以满足不同用户的需求。开源版本让开发者能够自由地探索和学习其底层代码，进行个性化的定制和二次开发，极大地激发了开发者的创造力和积极性。许多开发者在使用开源版本后，纷纷在技术社区分享自己基于 H5 - Dooring 的创新应用和优化方案，进一步丰富了其生态系统。
而商业版本则为企业用户提供了更全面的功能支持、专业的技术服务以及稳定的性能保障。企业在进行大规模数字化项目建设时，商业版本的 H5 - Dooring 能够确保项目高效、稳定地推进，满足企业复杂的业务需求。无论是追求技术自由的开发者，还是注重效率和服务的企业，H5 - Dooring 都能提供合适的解决方案，这也正是它能够吸引广泛用户群体的关键所在。
三. 功能亮点大揭秘
一. 可视化编辑器，操作超简单
H5 - Dooring 的可视化编辑器堪称零代码搭建的核心利器。进入编辑器界面，就仿佛置身于一个充满无限可能的创意空间。左侧是琳琅满目的组件库，右侧则是宽敞的画布区域，就像一个等待艺术家创作的巨大画板。
搭建页面时，只需轻轻点击并拖动左侧组件库中的组件，如文本框、图片、按钮等，将它们放置在画布的合适位置，就如同在白纸上摆放各种元素。在这个过程中，组件的大小、位置、样式等属性都可以通过简单的鼠标操作进行调整。比如，想要调整文本框的字体大小，只需选中该文本框，在属性编辑面板中即可轻松修改；想要改变图片的尺寸，通过拖动图片边框的控制点就能实现。而且，H5 - Dooring 还支持多页面管理，点击顶部功能区的相关按钮，即可轻松创建新页面，对已有的页面进行编辑、复制、删除等操作，就像管理文件夹里的文件一样便捷。
不仅如此，它还为组件动画提供了丰富的选择。选中一个组件后，在属性编辑面板中找到 "动画" 选项，里面内置了多种动画效果，如淡入淡出、滑动、旋转、缩放等。为一个图片组件添加淡入动画，当页面加载时，图片会从无到有，缓缓地出现在用户眼前，给用户带来惊喜的视觉体验；为按钮添加点击缩放动画，当用户点击按钮时，按钮会瞬间放大，然后再恢复原状，增强了用户与页面的交互感。这些动画效果可以根据用户的喜好和页面的需求进行自由组合和设置，让页面变得更加生动有趣。
二. 丰富组件库，创意随心搭
H5 - Dooring 拥有一个庞大且丰富的组件库，涵盖了基础组件、图表组件、媒体组件、商品组件、功能组件等多个类别。在基础组件中，有用于展示文字信息的文本、长文本、富文本组件，它们各自有着不同的特点和适用场景。文本组件简洁明了，适合展示简短的标题和重要信息；长文本组件则能容纳大量文字，常用于文章内容的展示；富文本组件功能更为强大，支持对文字进行加粗、倾斜、添加链接、插入图片等多种格式设置，满足多样化的文本编辑需求。图片组件用于展示各类图片素材，轮播图组件可以将多张图片以轮播的形式展示，增加页面的视觉吸引力；按钮组件则是用户与页面交互的重要元素，可用于提交表单、跳转页面等操作。
图表组件也是 H5 - Dooring 组件库的一大亮点，包括折线图、柱状图、面积图、漏斗模型、饼图、雷达图等。这些图表组件能够将枯燥的数据以直观、形象的方式展示出来，让用户一目了然。在制作数据分析报告页面时，使用柱状图展示不同产品的销售数据，通过柱子的高低对比，能够快速看出各个产品的销售情况；使用折线图展示公司近一年的业绩变化趋势，清晰地呈现出业绩的起伏波动。
媒体组件为页面增添了丰富的多媒体元素，音频组件可以让页面播放动听的音乐或语音内容，视频组件支持嵌入各类视频，还能轻松将 B 站、优酷、爱奇艺等平台的视频嵌入到 H5 页面中，使页面内容更加丰富多样。商品组件则专门为电商类页面设计，商品列表组件可以展示商品的图片、名称、价格等信息，方便用户浏览和选择商品；Tab 切换组件用于在不同商品分类之间进行切换，提高页面的信息展示效率；专栏组件则可以用于展示商品的详细介绍和相关推荐。
而且，H5 - Dooring 的组件库还在持续更新和完善中，不断引入新的组件和功能，以满足用户日益增长的需求。同时，它还支持组件的定制，用户可以根据自己的业务需求，对组件进行二次开发，创建出符合自己独特需求的组件。无论是制作简单的宣传页面，还是复杂的电商平台页面，H5 - Dooring 的组件库都能提供丰富的素材和强大的支持，让用户的创意得以充分实现。
三. 强大交互设计，页面更灵动
在 H5 - Dooring 中，组件间的交互设计让页面焕发出强大的生命力。通过简单的配置，就能实现组件之间的各种交互效果，极大地提升了用户体验。例如，当用户点击一个按钮时，可以触发另一个组件的显示或隐藏，实现页面内容的动态切换。在制作一个产品介绍页面时，将产品的详细信息放置在一个隐藏的组件中，当用户点击 "查看详情" 按钮时，该组件就会显示出来，为用户提供更深入的产品信息。
还可以实现组件的跳转链接功能，当用户点击某个图片或文本时，能够跳转到指定的页面或链接。在制作一个活动宣传页面时，将活动报名的链接设置在 "立即报名" 按钮上，用户点击按钮后，即可直接跳转到报名页面，方便快捷地完成报名操作。此外，H5 - Dooring 还支持组件的动画交互，当用户进行某些操作时，如鼠标悬停在某个组件上，可以触发该组件的动画效果，如颜色变化、大小缩放等，增强了页面的互动性和趣味性。
在制作一个美食推荐页面时，当鼠标悬停在美食图片上时，图片会逐渐放大，并显示出该美食的名称和简要介绍，吸引用户的注意力，激发用户的兴趣。这种强大的交互设计，让用户在浏览页面时不再是被动的接受信息，而是能够主动参与其中，与页面进行互动，使页面成为一个充满活力的交互平台。
四. 数据管理，轻松又高效
H5 - Dooring 提供了强大的数据管理功能，让数据的处理变得轻松又高效。在数据源配置方面，它支持多种数据源的接入，如 JSON 数据、CSV 文件、API接口等。用户只需在数据源管理界面中，按照提示进行简单的配置，就能将外部数据引入到页面中。在制作一个新闻资讯页面时，可以将来自数据库的新闻数据接入到页面中，通过数据绑定功能，将新闻的标题、图片、内容等信息展示在相应的组件上，实现页面内容的动态更新。
在数据绑定方面，H5 - Dooring 的操作也非常简单。选中需要绑定数据的组件，在属性编辑面板中找到数据绑定选项，选择对应的数据源和数据字段，即可完成数据绑定。而且，它还支持数据的过滤和排序，用户可以根据自己的需求，对数据进行筛选和整理，展示出最符合需求的数据。在制作一个电商产品列表页面时，可以通过数据绑定将商品数据展示在页面上，同时利用数据过滤功能，筛选出特定类别的商品，如只展示服装类商品；利用数据排序功能，按照价格从低到高或从高到低对商品进行排序，方便用户查找和比较商品。
此外，H5 - Dooring 还具备可视化的数据分析功能，能够将数据以图表的形式展示出来，帮助用户更好地理解和分析数据。在制作一个销售数据分析页面时，将销售数据接入到页面中，然后使用图表组件将数据转化为柱状图、折线图等，直观地展示出销售数据的变化趋势和分布情况，为企业的决策提供有力的数据支持。无论是小型项目的数据处理，还是大型企业的复杂数据管理，H5 - Dooring 的数据管理功能都能发挥出重要作用，助力用户实现数据驱动的业务发展。
四.应用场景，全面覆盖
（一）企业宣传，树立品牌形象
在当今竞争激烈的商业环境中，企业官网和营销页面是展示企业形象、传播品牌文化、吸引潜在客户的重要窗口。H5 - Dooring 凭借其强大的功能和便捷的操作，成为企业搭建这些页面的理想选择。
使用 H5 - Dooring 搭建企业官网，能够轻松实现个性化的设计和布局。通过丰富的组件库，企业可以展示公司简介、产品服务、企业文化、成功案例等多方面的信息。利用精美的图片组件展示企业的核心产品，配合详细的文字描述，让用户快速了解产品的特点和优势；通过视频组件，播放企业宣传片，更生动地展现企业的实力和风采。而且，H5 - Dooring 支持多种交互效果，当用户鼠标悬停在导航栏上时，能够显示出下拉菜单，方便用户快速找到所需信息；在页面中添加滚动动画，当用户滚动页面时，不同的内容区域以动画的形式依次出现，增加页面的趣味性和吸引力。
（二）活动营销，吸引海量流量
在举办各类活动时，一个吸引人的活动页面是吸引用户参与的关键。H5 - Dooring 让创建活动页面变得轻松便捷，即使没有专业的技术知识，也能快速搭建出功能齐全、创意十足的活动页面。
从活动页面的创建流程来看，用户只需登录 H5 - Dooring 平台，选择合适的活动模板，然后根据活动的具体信息进行内容替换和样式调整即可。在模板选择上，H5 - Dooring 提供了丰富多样的活动模板，如促销活动、抽奖活动、线下活动报名等，满足不同类型活动的需求。在一个电商平台的促销活动中，运营人员使用 H5 - Dooring 搭建了活动页面。他们选择了一个具有节日氛围的促销模板，将活动的主题、时间、优惠信息等内容替换到相应的组件中，同时利用图片组件展示了参与活动的商品图片，利用按钮组件设置了 "立即购买" 和 "加入购物车" 的链接。
在活动推广方面，H5 - Dooring 的活动页面具有良好的分享性和传播性。用户可以将活动页面通过微信、微博、QQ 等社交媒体平台进行分享，吸引更多的用户参与。而且，H5 - Dooring 还提供了数据统计功能，能够实时统计活动页面的访问量、参与人数、转化率等数据。通过对这些数据的分析，活动组织者可以了解用户的行为和兴趣，及时调整活动策略，优化活动页面，提高活动的效果。例如，通过数据统计发现，某个活动页面的跳出率较高，经过分析发现是页面的加载速度较慢，于是组织者对页面进行了优化，减少了图片的大小，提高了页面的加载速度，从而降低了跳出率，提高了用户的参与度。
（三）教育教学，创新学习体验
在教育领域，在线学习资源的丰富和多样化对于提升教学效果、满足学生个性化学习需求具有重要意义。H5 - Dooring 为教师和教育机构提供了一种全新的制作在线学习资源的方式，让互动式教学内容的制作变得更加简单和高效。
教师可以利用 H5 - Dooring 创建各种类型的在线学习资源，如课程介绍页面、知识点讲解页面、在线测试页面等。在制作课程介绍页面时，通过图文结合的方式，展示课程的大纲、目标、特色等信息，让学生对课程有一个全面的了解；在知识点讲解页面，利用文本、图片、视频、动画等多种组件，将抽象的知识以生动形象的方式呈现出来。在讲解数学几何图形时，使用动画组件展示图形的变化过程，帮助学生更好地理解图形的性质和特点；在制作在线测试页面时，利用表单组件创建各种类型的题目，如选择题、填空题、简答题等，学生完成测试后，系统能够自动批改并给出成绩和答案解析，方便教师了解学生的学习情况。
以某在线教育平台的一门编程课程为例，教师使用 H5 - Dooring 制作了一系列的互动式教学内容。在课程的知识点讲解部分，教师通过动画演示和代码示例，详细讲解了编程的语法和逻辑；在实践环节，设置了在线编程环境，学生可以直接在页面中编写代码并运行，实时查看结果；在课程的每个章节结束后，都有一个在线测试页面，帮助学生巩固所学知识。这些互动式教学内容极大地提高了学生的学习兴趣和参与度，学生的学习效果得到了显著提升。
（四）个人展示，绽放独特风采
对于个人用户来说，H5 - Dooring 也是展示个人风采、提升个人影响力的有力工具。无论是制作个人简历还是个人微官网，H5 - Dooring 都能帮助用户打造出独具特色的展示页面。
在制作个人简历时，H5 - Dooring 提供了丰富的简历模板，涵盖了多种风格和布局，用户可以根据自己的喜好和职业特点进行选择。这些模板不仅在设计上精美独特，而且在功能上也更加丰富和灵活。用户可以在简历中添加个人照片、工作经历、项目经验、技能证书等信息，通过图片组件展示自己的工作成果和项目作品，让简历更加生动直观；利用链接组件添加个人作品集的链接或社交媒体账号的链接，方便招聘者更全面地了解自己。与传统的纸质简历相比，H5 简历具有更好的展示效果和互动性，能够在众多求职者中脱颖而出。
在制作个人微官网方面，H5 - Dooring 同样表现出色。个人微官网可以作为个人品牌的展示平台，用户可以在上面展示自己的兴趣爱好、专业技能、生活感悟等内容。一位自由摄影师利用 H5 - Dooring 搭建了自己的个人微官网，在网站中展示了自己的摄影作品，通过精美的图片展示和简洁的文字说明，吸引了众多摄影爱好者的关注；同时，他还在网站中设置了联系方式和作品购买链接，方便客户与他取得联系并购买他的作品。这个个人微官网不仅提升了他的个人品牌形象，还为他带来了更多的商业机会。
最后
H5 - Dooring 的开源版本是技术爱好者和初学者的宝藏。我们可以在 GitHub 上搜索 "H5 - Dooring"，就能轻松找到它的开源仓库，然后通过 Git 克隆仓库到本地，按照文档提示安装依赖，即可开启零代码搭建学习之旅。
它非常适合个人开发者、学生以及想要学习零代码搭建技术的人员。个人开发者可以利用开源版本进行创意实践，将自己的想法快速转化为实际的页面应用；学生可以通过学习和使用开源版本，深入了解零代码搭建的原理和技术，提升自己的技术能力；想要学习零代码搭建技术的人员，开源版本是一个绝佳的学习资源，通过研究代码和实际操作，能够快速掌握零代码搭建的技能。
为了帮助用户更好地学习和使用开源版本，H5 - Dooring 还提供了丰富的学习资源。在官方文档中，详细介绍了项目的安装指南、使用说明、API 文档以及部署方式等内容，无论你是新手还是有一定经验的开发者，都能从中找到所需的信息。此外，还有许多技术社区和论坛，如 CSDN、掘金等，我都在这些平台上分享自己的使用经验、技巧和遇到的问题，大家有疑问或者对低代码感兴趣的可以随时交流学习。
github地址：github.com/MrXujiang/h...
文档地址：dooring.vip/doc
后期还会持续迭代更新H5-Dooring以及最新的进展，欢迎大家交流反馈，如果你也有好的想法或者产品，欢迎在留言区交流~