阿里低代码引擎 | LowCodeEngine - 多页面管理（提供完善 github 代码示例）

前言

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