阿里低代码引擎 | LowCodeEngine - 多页面管理功能(提供完善 github 代码示例)

blueju
• 阅读 530

前言

自阿里低代码引擎 lowcode-engine 发布后,经常能看到钉钉社区、github issue、掘金等博客有多页面管理的需求。

我们在基于阿里低代码引擎 lowcode-engine 二开低代码平台的时候也遇到了这个问题,并付诸了实践。

其实阿里低代码引擎 lowcode-engine 本身是支持该功能,提供了 openDocument、documents、removeDocument、exportSchema 的 API,在《低代码引擎搭建协议规范》中有所体现。同时在钉钉社区、github、哔哩哔哩中,金蝉大佬也点明了实现多页面管理功能的关键点及 API。

接下来,我将简单阐述一下我们的阿里低代码引擎 lowcode-engine 多页面管理功能实践,并提供代码示例。

实现方式

① 纯前端实现,手动保存

逻辑

阿里低代码引擎 lowcode-engine 提供多页面管理列表(documents)及相应 API,我们可以

  • 通过 project.documents 获取到;
  • 通过 createDocument 创建新页面;
  • 通过 removeDocument 删除指定页面;
  • 通过 project.exportSchema 获取项目 Schema;
  • 通过 project.documents[x].exportSchema 获取指定页面的页面 Schema;
  • 通过 project.currentDocument 获取到指定页面;
  • ......

(善用 typescript 的 d.ts 文件和将 project 暴露为全局变量并在控制台操控,可以挖掘出更多 API)

代码

在公司电脑里,不太方便提供,重新实现较麻烦(至于为什么继续往下看),后续有空重新实现了再提供,

TODO 🤣🤣🤣

结论

整体开发及使用下来,感觉较为复杂麻烦。
同时由于阿里低代码引擎 lowcode-engine 插件生态(如:数据源面板、源代码面板、Schema 面板)的源码中取当前页 Schema 逻辑使用的是 projectSchema.componentsTree[0],如果需要实现该功能,需要一并修改插件生态中的源码。

② 配合后台服务,实时保存

本次提供的代码示例就是这种实现方式

逻辑

还是 ① 中的那些 API,但是稍微有些区别:

  1. 创建页面,可以直接 openDocument,不需要像 ① 中需要 createDocument 手动开辟新页面等更便捷一点的操作。
  2. 不需要修改插件生态源码中部分鲁棒性不足的逻辑
  3. 实时保存,心智负担小,不用太担心前端崩溃导致已配置的数据丢失
  4. 为了防止接口响应慢及失败等导致的体验性问题(如切换页面需先确保上一页面保存成功、多页面菜单选中高亮项),需要做一些缓存优化及回滚
  5. 需要考虑实时保存异步请求与后续画布操作的执行顺序问题(毕竟实时保存请求没有 localStorage.setItem 快)

    代码(欢迎⭐⭐,谢谢~)

    https://github.com/blueju/lowcode-multi-page-demo

    结论

    整体开发和使用下来,感觉更舒适及方便。(哈哈或者也是金蝉大佬选择这种方式的原因吧)
    由于 lowcode-demo 甚至 lowcode-engine 及生态已经根据 提供等一系列完整操作闭环,而我们剩下的操作,就是在恰当的时机去 removeDocument 和 openDocument

另外最后需要注意的是:
project.importSchema 方法会重置 project.currentDocument,要特别注意 importSchema 前后的 currentDocument 是否一致,以免错误获取、更新、保存当前页 Schema。

参考

你还可以在以下地址找到本文:

  1. https://lowcode-engine.cn
  2. https://github.com/mark-ck
  3. https://github.com/alibaba/lowcode-engine
点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
3年前
2B 领域下的低代码探索之路
前言大家好,我是钉钉宜搭前端一个小团队的负责人,在阿里做了五年的低代码。今天的分享我们不讲技术细节,主要会分享下我们这五年的探索过程和当前的市场分析,希望能给大家带来一个对低代码搭建不一样视角的认识。什么是低代码说起低代码(LowCode)这个词,是在2014年,ForresterResearch第一次正式使用低代码来描述这个市场
保卫大萝卜 保卫大萝卜
2年前
阿里低代码引擎 LowCodeEngine 正式开源!
低代码引擎是什么?低代码引擎是一款为低代码平台开发者提供的,具备强大扩展能力的低代码研发框架。低代码引擎由阿里巴巴前端委员会、钉钉宜搭联合出品。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。同时,低代码引擎还在标准低代码设计器的基础上提供了简单易用的定制扩展能力,能够满足业务独特的功能需要。为什么我们要开发低代码引擎?2019年7
飞速低代码:低代码,真神器还是伪风口?
​开发者:听说你能让我们告别996?引用低代码:试试就知道!如果一个概念能在科技圈火起来,它往往兼具字面简明和内涵丰富的特征,并具有某种重塑产业格局的潜力。低代码(LowCode)就是这样一个典型。顾名思义,低代码是指少用代码,甚至不用代码,仅通过拖拽模块的方式实现应用开发。2021年以来,低代码成为智能产业圈的一大热词。不仅阿里、腾讯、百度等互
企业如何选型低代码才能避免踩坑 | 飞速低代码
​低代码开发平台该怎么选型?现如今,低代码开发平台又再次进到公众视野。对于企业来说,使用低代码开发平台不仅仅意味着数字化转型的开始,也意味着内部开发效率提升、业务流程梳理更加清晰。市场上的低代码平台非常多,企业应该怎么选型才能避免踩坑呢?1、软件开发的灵活性企业不断发展扩大,标准化的产品软件已经难以满足企业的需求,在这种情况下,低代码平台的灵活性就显得十分重
企业级飞速低代码开发平台 | 产品介绍 | APass平台 | 全场景适用
​1、低代码是什么低代码通常是指APaas产品,通过为开发者提供可视化的应用开发环境,降低或去除应用开发对原生代码编写的需求量,进而实现便捷构建应用程序的一种解决方案。因此,低代码平台也常备成为APaas平台。广义上低代码概念涵盖所有能够完成代码的集成,减少代码开发的应用过程和服务,但狭义上低代码的概念更倾向定位满足企业业务端应用需求,通过可视化界面,利用少
履约核心引擎低代码化原理与实践
业界,规则引擎是一个非常普遍的技术类工具,也有很多非常优秀的开源工具,例如Drools等,它是一种嵌入在应用程序中的组件,主要解决易变逻辑和业务耦合的问题,把易变的规则从应用程序代码中分离出来,进而提升交付效率,降低应用程序维护和可扩展性成本。
企业级飞速低代码开发平台 | 低代码并不意味着低风险
在过去的几年中,低代码和无代码工具以及平台在企业中兴起。2021年,Gartner魔力象限在关于低代码的报告中指出,41%的非IT从业人员使用低代码/无代码工具来定制、构建数据,或提出技术解决方案。同时Gartner预测到2025年底,将有一半的新增低代码用户来自从事非IT行业的商业客户。​低代码/无代码工具提供支持拖放的交互界面,使得即使非程序员也能够创
Stella981 Stella981
2年前
Alibaba Cloud Linux 2 LTS 正式发布,提供更高性能和更多保障
AlibabaCloudLinux2LTS版本发布后,阿里云将会为该版本提供长达5年的软件维护、问题修复服务。从20190327开始到20240331结束。包括:免费的服务和支持:AlibabaCloudLinux2的客户可以通过阿里云工单系统、钉钉或者社区等途径来寻求阿里云的免费支持服务。软件持续更新
飞速 | 巨头下场,生态聚合,低代码不再是个伪命题
和许多坐在风口上的概念一样,“低代码”似乎在一夕间变得火热起来,但也饱受争议。“低代码将替代开发者”、“低代码是伪命题”的说法,频频被业内人士拿来讨论。如今,随着更多企业的入局,中国低代码市场显现出巨大的增长空间,“该不该做低代码”已不再是个问题。近日,字节跳动收购低代码厂商“黑帕云”,钉钉提出在低代码APaaS的基础上进一步做BPaaS(Business
企业级飞速低代码 | 这是一篇关于低代码平台的非完整推荐!
面向软件开发人员的低代码功能现在我们来看看那些为软件开发人员提供机器学习功能的低代码平台。这些平台根据它们的编程模型和它们公开的低代码功能类型来选择机器学习的算法。Appian可以提供与多个GoogleAPI的集成,包括GCPNativeLanguage、GCPTranslation、GCPVision和AzureLanguageUnd