在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——需不需要自定义请求，不同场景下怎么自定义请求的维度，提供渐进式的自定义请求介绍。 1. 什么场景不需要自定义请求 自定义请求的背后是获取数据，如果数据已经拿到了，就不需要自定义请求了。首先，Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。这意味着，当我们简单替换组件，不需要特殊获取数据的时候，如果需要拿值，不需要自定义请求，直接从props里接就好，例如： 自定义表格 这里继承平台的表格组件，就有了平台表格自动获取数据的能力 import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: ['table', TABLE_WIDGET] }) ) export class TestWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 dataSource，就能获取数据 <template> <div class="Test"> {{ dataSource }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['dataSource'] }); </script> 效果如下： 自定义表单 这里继承平台的表单组件，就有了平台表单自动获取数据的能力 import { BaseElementWidget, SPI, FORM_WIDGET, FormWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: ['form', FORM_WIDGET] }) ) export class TestWidget extends FormWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 formData，就能获取数据 <template> <div class="Test"> {{ formData }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['formData'] }); </script> 效果如下： 自定义字段 这里以单行文本字段为例，继承平台的单行文本字段组件，字段的数据实际上是从表单或表格里拿的，可以通过 value 快捷地拿到字段值。如果是关系型字段，想拿到选项数据而不是字段值，可以参考方法3、方法4。 import { SPI, ViewType, FormStringFieldSingleWidget, BaseFieldWidget, ModelFieldType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class TestWidget extends…

开发过程中，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，这时候我们需要引入微前端作为渐进式重构的手段和策略。为了满足将Oinone无缝接入现有项目，能在现有项目和Oinone之间路由、嵌套、通信等的需求，现整理出了Oinone接入乾坤的模版工程——工程压缩包地址 模版工程启动 工程结构目录介绍 最外层micro-front-end用pnpm工作区来管理多工程仓库，维护统一的安装、运行、清除、构建等的脚本。micro-main是主应用，micro-son是子应用，模拟重构工作量巨大的老应用，ss-front-modules是Oinone应用。micro-front-end/│── packages/│ ├── micro-main/│ │ ├── package.json│ ├── micro-son/│ │ ├── package.json│ ├── ss-front-modules/│ │ ├── packages/│ │ │ ├── ss-admin-widget/│ │ │ ├── ss-boot/│ │ │ ├── ss-oinone/│ │ │ ├── ss-project/│ │ ├── package.json│── package.json 模版工程安装、运行 1. 安装 在micro-front-end目录下 pnpm install 2. 运行 在micro-front-end目录下 pnpm run dev，这里应当能看到启动了三个服务（端口8888～8890），其中http://localhost:8888/是主应用。 3. 效果 进入 http://localhost:8888/主应用 ，可以路由到Oinone应用看效果 接入步骤分析 1. 主应用搭建 微应用注册配置 配置了一个oinone的子应用，name是ss-boot。 export const SUB_APP_CONFIG = { subApps: [ { name: 'micro-son', // 子应用名称，跟package.json一致 entry: '//localhost:8889', // 子应用入口，本地环境下指定端口 container: '#micro-son', // 挂载子应用的dom activeRule: '/app/micro-son', // 路由匹配规则 props: {}, // 主应用与子应用通信传值 sandbox: { strictStyleIsolation: false, // 关闭严格样式隔离 experimentalStyleIsolation: false // 关闭实验性样式隔离 } }, { name: 'ss-boot', // 子应用名称，跟package.json一致 entry: '//localhost:8890', // 子应用入口，本地环境下指定端口 container: '#app-oinone', // 挂载子应用的dom activeRule: '/app/ss-boot', // 路由匹配规则 props: {}, // 主应用与子应用通信传值 sandbox: { strictStyleIsolation: false, // 关闭严格样式隔离 experimentalStyleIsolation: false // 关闭实验性样式隔离 } } ] }; main.ts 执行注册逻辑 import { registerMicroApps } from "qiankun"; function registerApps() { try { // 调用乾坤注册微应用方法，subApps 就是上面的配置 registerMicroApps(subApps, { beforeLoad: [ (app) => { console.log("before load", app); return Promise.resolve(); }, ], beforeMount: [ (app) => { console.log("before mount", app); return Promise.resolve(); }, ], afterUnmount:…