低代码平台组件间通信方案复盘

背景介绍

3年前开发了H5-Dooring零代码搭建平台，目的是低成本、高效率地上线web页面，减少重复代码编写。目前平台已经具备基本的页面设计和搭建能力，并能快速上线页面。

可视化搭建平台的基本能力

根据开发经验，可视化搭建平台需要具备两个基本能力：静态页面设计能力和组件交互能力。这些能力允许用户通过拖拽方式搭建页面，但组件之间无法进行通信。

更灵活自主的可视化搭建平台

介绍了转盘H5页面的场景来说明组件间通信的重要性。如果可视化搭建平台能实现组件间的通信，将能覆盖更多业务场景，为个人或企业创造更大价值。

组件间通信的几种实现方案

介绍了在vue或React框架中常见的组件通信方式，如props/$emit、eventBus、vuex/redux等。在低代码平台中，可以参考这些方式，但需要设计一套用户配置规则来保证通信的运转。

1.websocket

通过全局公共状态和redux管理，组件间通信本质上是触发公共状态更新。websockets可以在组件中触发，在全局监听并触发dispatch，但需要为其搭建服务和设计通信桥梁。

2.iframe通信 postmessage

iframe的postmessage API可以实现组件间通信，需要设计通信机制以确保iframe能接收指令和共享状态。对于细粒度组件来说，这种方式可能过于复杂。

3.Event Emitters

Event Emitters是适合低代码组件间通信的方案，类似于js的事件监听机制，允许DOM绑定监听并暴露事件，通过观察者模式实现。

低代码组件事件队列设计

每个组件都有事件列表，用户可以添加事件以触发事件队列。事件通信使用Event Emitters来实现，详细的低代码模式可以参考H5-Dooring项目。

总结

未来将分享更多H5-Dooring低代码的实践和思考。如果感兴趣，可以参考相关低代码可视化专栏。下一篇文章将分享低代码印章组件的实现方案。