代码集成

提示

通过本章节，了解如何部署低码产物，集成到主应用中。

1. 主应用准备

主应用支持主流前端框架（如 Vue、React 等），并通过 qiankun 框架加载低代码产物

1. 准备好主应用项目，确保项目已初始化，且可以正常运行

2. 安装 qiankun 框架

   npm install qiankun

2. 产物部署

主应用内

将低码产物下载至主应用的 ~/public/lowcode 目录下，每个 .html 文件即协作组中构建的一个页面，得到页面相对路径

/lowcode/519366490558533.html

服务器单独部署

可直接通过 nginx 部署，得到页面访问链接

http://xxxx/lowcode/519366490558533.html

3. 代码集成

使用 React 集成

示例下载： React 集成示例代码

配置路由

注意 loader 的配置，entry 为产物部署后得到的相对路径/访问链接

/src/router.tsx

import { RouterProvider, redirect, createBrowserRouter } from 'react-router-dom'
const routers = createBrowserRouter([
  {
    path: '',
    loader: () => {
      return redirect('/workbench/user')
    },
  },
  {
    path: 'workbench',
    lazy: () => import('./pages/workbench/workbench'),
    children: [
      {
        path: 'user',
        loader: () =>
          Promise.resolve({
            name: 'user',
            entry: '/lowcode/519366490558533.html',
          }),
        lazy: () => import('./pages/workbench/children/lowcode'),
      },
      {
        path: 'role',
        loader: () =>
          Promise.resolve({
            name: 'role',
            entry: '/lowcode/519366566789189.html',
          }),
        lazy: () => import('./pages/workbench/children/lowcode'),
      },
    ],
  },
  {
    path: '*',
    loader: () => {
      return redirect('/workbench/user')
    },
  },
])

export const Routers = () => {
  return <RouterProvider router={routers} />
}

加载低代码页

• 注意 userLoaderData 的使用，与路由配置的 loader 结合使用
• 关键点在于 qiankun 的 API，loadMicroApp 的使用
• 创建 dom
• 将低代码页面加载到此 dom
• 然后将此 dom 显示到页面上

/src/pages/workbench/children/lowcode.tsx

import { useEffect, useRef } from 'react'
import { useLoaderData } from 'react-router'
import { loadMicroApp } from 'qiankun'
export type InvalidValue = undefined | null | ''
export const invalidValueList: InvalidValue[] = [undefined, null, '']
export const isInvalid = (v: unknown): boolean =>
  invalidValueList.includes(v as any)
export default function Lowcode() {
  // 因为所有低代码页面，都使用同一个组件，所以需要useLoaderData获取配置的name,entry进行加载
  const data = useLoaderData() as any
  const domRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const { name, entry } = data
    const dom = domRef.current
    if (!name || !entry || !dom) {
      return
    }
    const container = document.createElement('div')
    const microApp = loadMicroApp({ name, entry, container })
    if (dom.append) dom.append(container)
    else if (dom.appendChild) dom.appendChild(container)

    return () => {
      microApp.unmount()
    }
  }, [data, domRef])
  return <div ref={domRef}></div>
}

export const Component = Lowcode

使用 Vue3 集成

示例下载： Vue3 集成示例代码

配置路由

/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '',
      redirect: '/workbench/user',
    },
    {
      path: '/workbench',
      name: 'Workbench',
      component: () => import('../views/workbench/work-bench.vue'),
      children: [
        {
          path: 'user',
          name: 'User',
          component: () => import('../views/workbench/lowcode/low-code.vue'),
          meta: {
            name: 'user',
            entry: '/lowcode/519366490558533.html',
          },
        },
        {
          path: 'role',
          name: 'Role',
          component: () => import('../views/workbench/lowcode/low-code.vue'),
          meta: {
            name: 'role',
            entry: '/lowcode/519366566789189.html',
          },
        },
      ],
    },
  ],
})

export default router

加载低代码页

• 注意$route 的使用，与路由配置的 meta 结合使用
• 关键点在于 qiankun 的 API，loadMicroApp 的使用
• 创建 dom
• 将低代码页面加载到此 dom
• 然后将此 dom 显示到页面上

/src/views/workbench/lowcode/low-code.vue

<template>
  <div></div>
</template>
<script>
import { loadMicroApp } from 'qiankun'
export default {
  microApp: null,
  mounted() {
    const { entry, name = this.$route.name } = this.$route.meta || {}
    if (!name || !entry) return
    const container = document.createElement('div')
    this.microApp = loadMicroApp({ name, entry, container })
    if (this.$el.append) this.$el.append(container)
    else if (this.$el.appendChild) this.$el.appendChild(container)
  },
  unmounted() {
    if (this.microApp) {
      this.microApp.unmount()
      this.microApp = null
    }
  },
}
</script>

使用 Vue2 集成

示例下载： Vue2 集成示例代码

配置路由

/src/router/index.ts

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '',
      redirect: '/workbench/user',
    },
    {
      path: '/workbench',
      name: 'WorkbenchView',
      component: () => import('../views/workbench/work-bench.vue'),
      children: [
        {
          path: 'user',
          component: () => import('../views/workbench/lowcode/low-code.vue'),
          name: 'User',
          meta: {
            name: 'User',
            entry: '/lowcode/519366490558533.html',
          },
        },
        {
          path: 'role',
          component: () => import('../views/workbench/lowcode/low-code.vue'),
          name: 'Role',
          meta: {
            name: 'Role',
            entry: '/lowcode/519366566789189.html',
          },
        },
      ],
    },
  ],
})

加载低代码页

• 注意$route 的使用，与路由配置的 meta 结合使用
• 关键点在于 qiankun 的 API，loadMicroApp 的使用
• 创建 dom
• 将低代码页面加载到此 dom
• 然后将此 dom 显示到页面上

/src/views/workbench/lowcode/low-code.vue

<template>
  <div></div>
</template>
<script>
import { loadMicroApp } from 'qiankun'
export default {
  microApp: null,
  mounted() {
    const { entry, name = this.$route.name } = this.$route.meta || {}
    if (!name || !entry) return
    const container = document.createElement('div')
    this.microApp = loadMicroApp({ name, entry, container })
    if (this.$el.append) this.$el.append(container)
    else if (this.$el.appendChild) this.$el.appendChild(container)
  },
  unmounted() {
    if (this.microApp) {
      this.microApp.unmount()
      this.microApp = null
    }
  },
}
</script>

长亮系统

集成海牛低代码页面

4. 项目组沉淀主应用

工程：scaffold_front

参考：芋道管理后台