低代码介绍

零代码、低代码的概念在整个全球行业内已经流行了很长一段时间。通常意义上的低代码定义会有三个关键点：

1. 一个用于生产软件的可视化编辑器
2. 中间包含了一些用于组装的物料，可以通过编排、组合和配置它们以生成丰富的功能或表现
3. 最后的实施结果是成本降低

通常情况下低代码平台会具备以下的几个能力：

• 可视化页面搭建，通过简单的拖拽完成应用页面开发，对前端技能没有要求或不需要特别专业的了解；
• 可视化模型设计，与业务相关的数据存储变得更容易理解，甚至大多数简单场景可以做到表单即模型，模型字段的类型更加业务化；
• 可视化流程设计，不管是业务流程还是审批流程，都可以通过简单的点线连接来进行配置；
• 可视化报表及数据分析，BI数据分析能力成为标配，随时随地通过拖拽选择来定义自定义分析报表；
• 可视化服务与数据开放、集成，具备与其他系统互联互通的配置；
• 权限、角色设置标准化和业务化，通过策略规则配置来将数据、操作的权限进行精细化管理；
• 无需关心服务器、数据库等底层运维、计算设施设备、网络等等复杂技术概念，具备安全、性能的统一解决方案，开发者只需要专注于业务本身；

有了上面这些，你会发现即使是个技术小白，只要你了解业务，就能不受束缚的完成大多数业务应用的搭建。但低代码本身也不仅仅是为技术小白准备的。在实践中，低代码因为通过组件化、模块化的思路让业务的抽象更加容易，而且在扩展及配置化上带来了更加新鲜的模式探索，技术人员的架构设计成本和实施成本也就降了很多。

特性

• 提炼自企业级低代码平台的面向扩展设计的内核引擎，奉行最小内核，最强生态的设计理念
• 开箱即用的高质量生态元素，包括 物料体系、设置器、插件 等
• 完善的工具链，支持 物料体系、设置器、插件 等生态元素的全链路研发周期
• 强大的扩展能力，已支撑近 100 个各种垂直类低代码平台
• 使用 TypeScript 开发，提供完整的类型定义文件

使用示例

npm install @alilc/lowcode-engine --save-dev

TIPS：仅支持 cdn 方式引入，npm 包用于提供 typings 等代码提示能力

import { init, skeleton } from '@alilc/lowcode-engine';

skeleton.add({
  area: 'topArea',
  type: 'Widget',
  name: 'logo',
  content: YourFantaticLogo,
  contentProps: {
    logo:
      'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
    href: '/',
  },
  props: {
    align: 'left',
    width: 100,
  },
});

init(document.getElementById('lce'));

工程化配置：

{
  "externals": {
    "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
    "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt"
  }
}

cdn 可选方式：

方式 1（推荐）：alifd cdn

https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.0/dist/js/engine-core.js

https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.0/dist/js/react-simulator-renderer.js

方式 2：unpkg

https://unpkg.com/@alilc/lowcode-engine@1.0.0/dist/js/engine-core.js

https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.0/dist/js/react-simulator-renderer.js

方式 3：jsdelivr

https://cdn.jsdelivr.net/npm/@alilc/lowcode-engine@1.0.0/dist/js/engine-core.js

https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@1.0.0/dist/js/react-simulator-renderer.js

方式 4：使用自有 cdn

将源码中 packages/engine/dist 和 packages/(react|rax)-simulator-renderer/dist 下的文件传至你的 cdn 提供商

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3890