Umi4 集成阿里低代码框架lowcode-engine

这篇具有很好参考价值的文章主要介绍了Umi4 集成阿里低代码框架lowcode-engine。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近准备研究下阿里低代码框架lowcode-engine, 官方Demo是提供好的脚手架,由于我们的框架使用的是umi,官方文档提供了一些教程,在此记录下在umi4集成lowcode-engine.

实现

搭建umi4项目

1.通过官方文档的快速开始,我们可以快速创建出项目

先找个地方建个空目录

mkdir myapp && cd myapp

通过官方工具创建项目, 这里我们采用pnpm包管理工具

$ pnpm dlx create-umi@latest
✔ Install the following package: create-umi? (Y/n) · true
✔ Pick Npm Client › pnpm
✔ Pick Npm Registry › taobao
Write: .gitignore
Write: .npmrc
Write: .umirc.ts
Copy:  layouts/index.tsx
Write: package.json
Copy:  pages/index.tsx
Copy:  pages/users.tsx
Copy:  pages/users/foo.tsx
> @ postinstall /private/tmp/sorrycc-vylwuW
> umi setup
info  - generate files

创建完成后,安装依赖, 执行 pnpm dev就可以看到我们的项目启动起来了。

集成lowcode-engine
  1. 引入UMD包, 我们在 .umirc.ts中配置externals,styles和scripts
 externals: {
    'react': 'var window.React',
    'react-dom': 'var window.ReactDOM',
    'prop-types': 'var window.PropTypes',
    '@alifd/next': 'var window.Next',
    '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
    '@alilc/lowcode-editor-core': 'var window.AliLowCodeEngine.common.editorCabin',
    '@alilc/lowcode-editor-skeleton': 'var window.AliLowCodeEngine.common.skeletonCabin',
    '@alilc/lowcode-designer': 'var window.AliLowCodeEngine.common.designerCabin',
    '@alilc/lowcode-engine-ext': 'var window.AliLowCodeEngineExt',
    '@ali/lowcode-engine': 'var window.AliLowCodeEngine',
    'moment': 'var window.moment',
    'lodash': 'var window._',
  },
  styles: [
    'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css',
    'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css',
    'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css',
    'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css'
  ],
  scripts: [
    {
      src: 'https://g.alicdn.com/code/lib/react/18.0.0/umd/react.development.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/react-dom/18.0.0/umd/react-dom.development.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js',
      defer: false,
    },
    {
      src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js',
      defer: false,
    },
    {
      src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js',
      defer: false,
    }
  1. 我们使用lowcode-enginey引擎提供的init进行初始化,init() 内部会调用 ReactDOM.render() 函数,这样初始化有些弊端。一些内容没有办法与外部的 React 组件进行通信,也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容,但也有好处,就是低代码引擎比较独立,后期可以拆出供多个项目使用。

我们参考官方提供的Demo的入口文件。在我们这里封装成一个LowcodeEditor组件。


import { init, plugins } from '@alilc/lowcode-engine';
import { useEffect } from 'react';
import registerPlugins from './plugin';

import './global.less';

export default function LowcodeEditor() {
  useEffect(() => {
    const preference = new Map();
    preference.set('DataSourcePane', {
      importPlugins: [],
      dataSourceTypes: [
        {
          type: 'fetch',
        },
        {
          type: 'jsonp',
        },
      ],
    });

    (async function main() {
      await registerPlugins();
      console.log('first-2')

      init(
        document.getElementById('engine-container')!, {
          // designMode: 'live',
          // locale: 'zh-CN',
          enableCondition: true,
          enableCanvasLock: true,
          // 默认绑定变量
          supportVariableGlobally: true,
          // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的!!!
          // 这里因为用的是 alifd cdn,在不同 npm 包,engine-core.js 和 react-simulator-renderer.js 是不同路径
          simulatorUrl: [
            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js',
          ],
          requestHandlersMap: {
            fetch: async () => {}
          }
        },
        preference,
      );
    })();
  }, []);
  return <div id='engine-container' style={{backgroundColor: 'red'}}></div>;
}

这里只是入口组件的初始化,组件内部还有很多内容,我们重Deom中copy出来。比如pluginassets.josn,schem.json等,这里不做过多的介绍,里面的内容好多,后续我们一边学习,一边慢慢拆解,分享。

Umi4 集成阿里低代码框架lowcode-engine

  1. 使用LowcodeEditor组件,在我们需要的地方直接导入,使用就行
import yayJpg from '../assets/yay.jpg';
import LowcodeEditor from '@/components/lowcode-editor2';

export default function HomePage() {
  return (
    <div style={{height: '100%'}}>
      <LowcodeEditor />
    </div>
  );
}

4.访问页面
Umi4 集成阿里低代码框架lowcode-engine

结束语

代码已上传到github,请查看mi4-lowcode-app。

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章文章来源地址https://www.toymoban.com/news/detail-483040.html

到了这里,关于Umi4 集成阿里低代码框架lowcode-engine的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant design pro + umi4的动态菜单与动态路由

    困扰我好多天的自定义菜单及路由终于完成了,首先虽然看似为一个功能,但在umi4中是两项配置。 先说说我浪费了大量时间使用的处理方式:因为曾经的项目是umi3的,所以我就想原样搬过来,结果发现,布局页BasicLayout的子children不见了!     如果这个子路由能正常显示,

    2024年02月11日
    浏览(41)
  • LowCode 低代码平台集成 AI 大模型会产生怎样的化学反应?

    低代码平台(LowCode Platform)是一种新型的应用开发方式,它将应用开发的过程简化为“拖拽组件、配置属性、生成代码”的方式,使得应用开发变得更加简单和快捷。而AI大模型(AI Big Model)则是一种利用深度学习技术构建的大规模神经网络,它可以对海量数据进行训练和预

    2024年02月15日
    浏览(45)
  • umi框架的使用

    安装 npm i -g yrm 查看yarn镜像源 yrm ls 切换源 yrm use taobao 创建项目 yarn create @umijs/umi-app 安装依赖 yarn 启动项目 yarn start 路由组件还可以进行children进行子路由渲染 打个比方,现在有头部导航跟侧边是一致的我们只希望修改每个应用的内容这时候就用到子路由 路由权限配置,鉴

    2024年02月16日
    浏览(29)
  • 万物皆可集成系列:低代码对接阿里物流API实现快递跟踪

    随着各大电商网购平台的发展,快递业已形成一个规模庞大的产业,据统计,全球快递企业已超过千家,而快递查询对于电商平台而言是最基础的功能之一,通过输入快递单号,不用区分具体是哪家快递公司,即可查询到快递的实时状态。目前的主流方法都是调用第三方快递

    2024年02月16日
    浏览(42)
  • 简单5分钟,将lowcode低代码融入到你的中后台管理系统

    你是否在做中后台项目中经常要重复做 crud 的业务逻辑,花费大量时间还时常有 bug 发生,但是现在只要几分钟就能让你快速连通前后端,拖拉拽实现后台业务逻辑。你就问香不香! 🚀 ✈️ 🚁 基于 amis-editor(React + TS),通过封装 json 数据上报、配置、自定义组件等,实现

    2023年04月08日
    浏览(31)
  • Umi3 创建,配置环境,路由传参(代码示例)

    目录 创建项目 配置环境 创建脚手架 项目结构及其目录、 路由 配置路由 嵌套路由 编程式导航和声明式导航 声明式导航 编程式导航 约定式路由 路由传参 query传参(问号) 接收参数 params传参(动态传参) 接收参数 配置环境 首先得有 node,并确保 node 版本是 10.13 或以上。

    2024年01月19日
    浏览(50)
  • Taurus.MVC 微服务框架 入门开发教程:项目集成:7、微服务间的调用方式(调整):引用程序集及代码下载(新增)

    今天补充一下 Taurus.MVC 微服务教程,介绍一下微服务中针对RPC方面调整或新增的功能。 之前系列文章目录: Taurus.MVC 微服务框架 入门开发教程:项目集成:1、服务端:注册中心、网关(提供可运行程序下载)。 Taurus.MVC 微服务框架 入门开发教程:项目集成:2、客户端:

    2024年04月25日
    浏览(37)
  • springBoot 集成阿里云Elasticsearch

        原系统使用tcp方式接入ES,使用 ElasticsearchTemplate API方式交互ES。原springes的yml配置如下:         由于接入阿里云的ES,且加上了X-PACK验证模式,必须有用户名和密码。故拉取新的分支支持阿里云ES的配置。         由于A项目是SpringMvc方式的配置,下面讲一下遇到的问题

    2024年02月16日
    浏览(35)
  • springboot集成阿里云短信验证码

    1.添加pom.xml依赖 2.application.yml添加配置文件 3.创建随机验证码工具类 4.创建发送验证码工具类 注意事项 :在 application.yml 中配置了 accessKeyID等参数 ,想在一个工具类里面的静态方法使用,于是使用了静态变量。使用 @Value 注解获取值,如下: debug发现获取不到,为 null 。原因

    2024年02月01日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包