在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 mask、自定义表格(表单等)、自定义字段三个实际场景的角度，介绍自定义请求。这篇文章把请求都写在了 ts 中，这样便于继承重写，如果不习惯 ts 的写法，把请求写在 vue 里也是可以的。 1. 自定义 mask mask 组件通常会有一个特点：在不同页面不同模型或不同应用下都展示，与业务模型无关，且往往只需要请求一次。同时可能有精确控制请求体大小的需求，这就很适合采取手写 GraphQL 的方式。 例如，我要重写顶部 mask 中的用户组件，展示用户信息。这个请求就只需请求一次，而且不需要复用，就很适合手写 GraphQL。 这里继承平台的用户组件，然后在代码中写死 GraphQL 发起请求。但是 GraphQL 语句怎么拼呢？我们可以去默认页面，打开浏览器控制台，找到相应的请求，把 GraphQL 语句复制出来，这里复制下默认的用户请求。 http.query 参数的构造、相应结果的获取都能从请求中得到。可以看到我这里精简了请求，只取了用户名。 TS import { SPI, UserWidget, MaskWidget, Widget, http } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class TestWidget extends UserWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } // 添加响应式注解，这样能在 vue 中接受到 ts 中的变量 @Widget.Reactive() public testUserInfo: { pamirsUser: { name: string } } | undefined; public async queryUser() { const query = ` { topBarUserBlockQuery { construct(data: {}) { pamirsUser { name } } } } `; const result = await http.query('user', query); this.testUserInfo = result.data['topBarUserBlockQuery']['construct'] as { pamirsUser: { name: string } }; } public mounted() { this.queryUser(); } } VUE <template> <div class="Test"> {{ testUserInfo }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['testUserInfo'] }); </script> 效果如下： 2. 自定义表格(表单)等视图元素组件 2-1. 自定义表格 2-1-1. 自定义表格自动获取数据 Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。所以这里继承平台的表格组件，就有了平台表格自动获取数据的能力。 TS import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget:…

开发过程中，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，这时候我们需要引入微前端作为渐进式重构的手段和策略。为了满足将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:…