接入运行时

低代码引擎的编辑器将产出两份数据：

经过上述两份数据，可以直接交由渲染模块或者出码模块来运行，二者的区别在于：

  • 渲染模块：使用资产包数据、页面数据和低代码运行时，并且允许维护者在低代码编辑器中用 Low Code 的方式继续维护；
  • 出码模块：不依赖低代码运行时和页面数据，直接生成可直接运行的代码，并且允许维护者用 Pro Code 的方式继续维护，但无法再利用用低代码编辑器；

渲染模块

在 Demo 中，右上角有渲染模块的示例使用方式：

接入运行时 - 图1

基于官方提供的渲染模块 @alifd/lowcode-react-renderer，你可以在 React 上下文渲染低代码编辑器产出的页面。

构造渲染模块所需数据

渲染模块所需要的数据需要通过编辑器产出的数据进行一定的转换，规则如下：

  • schema：从编辑器产出的 projectSchema 中拿到 componentsTree 中的首项，即 projectSchema.componentsTree[0]；
  • components：需要根据编辑器产出的资产包 assets 中，根据页面 projectSchema 中声明依赖的 componentsMap，来加载所有依赖的资产包，最后获取资产包的实例并声成物料 - 资产包的键值对 components。

这个过程可以参考 demo 项目中的 src/preview.tsx：

  1. async function getSchemaAndComponents() {
  2.   const packages = JSON.parse(window.localStorage.getItem('packages') || '');
  3.   const projectSchema = JSON.parse(window.localStorage.getItem('projectSchema') || '');
  4.   const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
  5.   const componentsMap: any = {};
  6.   componentsMapArray.forEach((component: any) => {
  7.     componentsMap[component.componentName] = component;
  8.   });
  9.   const schema = componentsTree[0];
  11.   const libraryMap = {};
  12.   const libraryAsset = [];
  13.   packages.forEach(({ package: _package, library, urls, renderUrls }) => {
  14.     libraryMap[_package] = library;
  15.     if (renderUrls) {
  16.       libraryAsset.push(renderUrls);
  17.     } else if (urls) {
  18.       libraryAsset.push(urls);
  19.     }
  20.   });
  22.   const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
  24.   const assetLoader = new AssetLoader();
  25.   await assetLoader.load(libraryAsset);
  26.   const components = await injectComponents(buildComponents(libraryMap, componentsMap));
  28.   return {
  29.     schema,
  30.     components,
  31.   };
  32. }

进行渲染

拿到 schema 和 components 以后，您可以借由资产包数据和页面数据来完成页面的渲染：

  1. import React from 'react';
  2. import ReactRenderer from '@alilc/lowcode-react-renderer';
  4. const SamplePreview = () => {
  5.   return (
  6.     <ReactRenderer
  7.       schema={schema}
  8.       components={components}
  9.     />
  10.   )
  11. }

注：您可以注意到，此处是依赖了 React 进行渲染的，对于 Vue 形态的渲染或编辑器支持，详见对应公告。

本节示例可在 Demo 代码里找到：https://github.com/alibaba/lowcode-demo/blob/main/src/preview.tsx

出码模块

在 Demo 中，右上角有出码模块的示例使用方式：

接入运行时 - 图2

本节示例可在出码插件里找到：https://github.com/alibaba/lowcode-code-generator-demo

低代码的生产和消费

经过“接入编辑器” - “接入运行时” 这两节的介绍，我们已经可以了解到低代码所构建的生产和消费流程了，梳理如下图：

接入运行时 - 图3

如上述流程所示，您一般需要一个后端项目来保存页面数据信息，如果资产包信息是动态的，也需要保存资产包信息。