乐趣区

关于前端:阿里低代码引擎-LowCodeEngine-多页面管理提供完善-github-代码示例

jiezi

前言

自阿里低代码引擎 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。

参考

你还能够在以下地址找到本文：

  • 语雀 @blueju
  • 掘金 @blueju
  1. https://lowcode-engine.cn
  2. https://github.com/mark-ck
  3. https://github.com/alibaba/lowcode-engine
退出移动版