如果之前没了解过GraphQL，可以先查看GraphQL的文档
介绍信息来源于Oinone 7天从入门到精通，如提示无权限，则需要申请
我们可以看出，GraphQL提供的特性可以满足我们对元数据的描述需求，因此我们选用GraphQL。
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/19.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
阅读之前 本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 概述 平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。 面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。 通过界面设计器可以创建自定义组件，并为组件添加对应的元件。 界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。 在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。 界面设计器-组件管理 名词解释 页面设计：使用界面设计器设计页面的页面。 属性面板设计：使用界面设计器设计属性面板的页面。 设计页面：页面设计和属性面板设计的统称。 组件库：展示在设计页面左侧的全部可拖拽组件。 组件：在组件库中可拖拽的最小单元。 元件：一个组件中的具体实现，是组件的最小单元。 属性面板：展示在设计页面右侧的元件属性。 页面设计 属性面板设计 组件管理入口 进入界面设计器后，可通过上方标签页切换至【组件】管理页面。 创建第一个组件 点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。 创建第一个元件 点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。 点击【添加元件】，可以看到如下【创建元件】弹窗。 表单字段解释 元件名称：显示名称，仅在管理页面做展示使用。 API名称：SPI中的widget属性。 支持字段业务类型：SPI中的ttype属性。 支持多值：SPI中的multi属性。 支持视图类型：SPI中的viewType属性。 元件描述：元件功能描述内容，仅在管理页面做展示使用。 填入以下内容，并点击【确定】。 设计元件属性面板 点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。 从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。 点击【发布】按钮进行页面的发布。 至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。 在页面中使用【文本输入框】 由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。 从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。 属性变化 在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。 由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。 组件变化 由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。 组件可切换规则 只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。 【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。 （右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。） 所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。 字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。 是否多值：否。当【支持多值】相同时条件成立。 使用低无一体为组件上传代码实现 进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。 按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。 PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。 结语 至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。 通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。
阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…
介绍 在使用 Oinone 平台开发过程中，开发者可能会遇到自定义动作需要获取搜索条件并传递给后端的情况。本文将介绍如何利用 Oinone平台 实现此功能。 技术基础知识 当我们在自定义一个动作的时候要先明确自定义的动作类型是什么样的，在Oinone平台中，分为了如下几个动作： 1: 视图动作2: 服务端动作3: 客户端动作3: URL动作 功能步骤或代码示例 案例1、服务端动作，动作点击时候要拿到搜索内容，然后传递给后端。 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model', actionType: ActionType.Server }) ) export class MyServerActionWidget extends ServerActionWidget { protected async clickAction() { const rst = this.getSearchRsqlAndQueryParams(); } } 案例2、视图动作点击的时候把搜索内容带到另外一个视图或者弹窗 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model' }) ) export class MyDialogViewActionWidget extends DialogViewActionWidget { // 继承当前动作原本的class protected async clickAction() { const { queryData } = this.getSearchRsqlAndQueryParams(); this.action.context = queryData super.clickAction() return true } } 在上述代码中，我们自定义了一个服务器动作，并在点击触发函数中调用了getSearchRsqlAndQueryParams方法，该方法会返回一个对象： { rsql: String, // 搜索内容对应的rsql queryData: Object, // 搜索的数据 condition: Condition, // 搜索内容对应的数据结构 queryDataToString: Function // 将搜索内容转成JSON字符串 } 这样我们就可以根据业务场景使用对应的值。 注意事项 1: 确保正确导入所需的依赖包。2: 理解并适当修改代码以满足特定业务需求。 总结 本文介绍了在 Oinone 平台中如何自定义一个服务端动作，并获取搜索条件传递给后端的方法。通过合理利用这些功能，开发者可以更灵活地定制应用程序，满足不同的业务需求。 实践案例 如何自定义点击导出动作绑定指定模板
场景 客户在个性化程度比较高的h5工程中想使用平台的服务端能力，这个时候需要调用后端的gql请求，此时需要引入平台的请求库依赖 npm的package.json中加入依赖 此文档以4.x举例，使用其他版本的请自行修改版本号 "dependencies": { "@kunlun/request": "~4.3.0", "@kunlun/state": "~4.3.0" } 使用示例 import { HttpClient } from ‘@kunlun/request’ const http = HttpClient.getInstance() http.setBaseURL(”) export const login = (data) => { const gqlBody = `mutation { pamirsUserTransientMutation { login(user: {login: “${data.username}”, password: “${data.password}”}) { broken errorMsg errorCode errorField } } }` return http.mutate(‘user’, gqlBody) } 注意事项 开发环境记得配置oinone请求的路由转发规则，这里以vite.config.js举例 import { defineConfig } from ‘vite’ export default defineConfig({ server: { port: 8088, open: true, proxy: { ‘/pamirs’: { changeOrigin: true, // 服务端请求地址 target: ‘http://127.0.0.1:8091’ } } } })
在阅读本篇文章之前，您需要学习以下知识点： 1: 元数据 视图的元数据 在日常开发中，我们会经常遇到自定义的字段、动作、视图需要界面设计器配置的数据，这些数据可能是当前页面的字段，也有可能动作，那么如何获取呢？ 视图元数据分为两种：1: 当前视图(metadataRuntimeContext)2: 根视图(rootRuntimeContext) 那么这两种类型怎么区分呢？ 举个例子：1: 如果当前字段是在表单中，那么当前视图就是表单，根视图就表单的父级视图，如果只有一个表单视图，那么当前视图就是根视图。2: 如果当前视图是表单，但是表单里面有个表格，对于表格字段而言，当前视图就是表格，根视图就是表单。 当前视图的元数据(metadataRuntimeContext) 在前端，我们通过 metadataRuntimeContext 来获取视图的元数据，例如： export class CustomFormStringFieldSingleWidget extends FormStringFieldSingleWidget { protected mounted(): void { console.log(this.metadataRuntimeContext); } /** * 界面设计器配置的动作 */ @Widget.Reactive() protected get modelActions() { return this.metadataRuntimeContext.model.modelActions } /** * 界面设计器配置的字段 */ @Widget.Reactive() protected get modelFields() { return this.metadataRuntimeContext.model.modelFields } } 属性名 类型 可选性 描述 viewAction RuntimeViewAction 是 运行时跳转动作（通过跳转动作创建的运行时上下文具备该属性） module RuntimeModule 否 运行时模块 model RuntimeModel 否 运行时模型 view RuntimeView 否 运行时视图 viewLayout DslDefinition \| undefined 否 视图布局 DSL，从运行时视图解析获得 viewDsl DslDefinition \| undefined 否 视图模板 DSL，从运行时视图解析获得 viewTemplate DslDefinition 否 视图最终执行 DSL，从运行时视图解析获得或根据布局 DSL 和模板 DSL 合并生成 getModel (model: string, isBelong?: boolean) => GetModelResult \| undefined 否 获取模型，返回获取的模型和所在的运行时上下文 getModelField (data: string, isBelong?: boolean) => GetModelFieldResult \| undefined 否 获取模型字段，返回获取的模型字段和所在的运行时上下文 getRequestModelFields (options?: GetRequestModelFieldsOptions) => RequestModelField[] 否 获取请求字段 getDefaultValue () => Promise<Record<string, unknown>> 否 获取默认值 getInitialValue () => Promise<Record<string, unknown>> 否 获取初始值 运行时模型(model) 属性名 类型 可选性 描述 id string 是 模型 id model string 否 模型编码 name string 否 技术名称 modelFields RuntimeModelField[] 否 模型字段 modelActions RuntimeAction[] 否 模型动作 type ModelType 是 模型类型 module string 是 模块编码 moduleName string 否 模块名称 moduleDefinition RuntimeModule 是…
