本章主要介绍如何快速入门，了解如何在Oinone上进行开发。我们将通过准备环境、构建自己的第一个Oinone模块、完成一些小功能等方式来全面了解Oinone，这将是一个很好的开始。
具体来说，本章包括以下几个方面：
环境搭建：准备Windows或Mac版环境。
Oinone以模块为组织：了解Oinone模块的概念和如何创建和使用模块。
Oinone以模型为驱动：了解Oinone模型的概念和如何使用模型来构建应用。
Oinone以函数为内在：了解Oinone函数的概念和如何使用函数来实现应用逻辑。
Oinone以交互为外在：了解Oinone交互的概念和如何使用交互来设计和实现应用界面。
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9223.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
场景说明 全员营销标准软件产品对于视频上传限制为35M,该大小适合管理短视频类的素材。该软件产品的使用方为营销部门，营销部门不仅管理短视频素材，也负责管理电商商品的视频素材、公司团建的素材等，且不少素材的内存都远大于35M。 业务需求：将全员营销中的内容中心扩展成营销部门的内容统一管理中心，管理营销部门工作范围内的所有内容素材，且不受35M的限制。 实战训练 新增一个资源管理页面，替换原来的资源管理，并构建新的上传行为。 Step1 通过界面设计器，设计出必要管理页面 进入界面设计器，应用选择全员营销，模型通过搜索【素材】选择【Gemini素材】，点击添加页面下的直接创建 设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表格）后点击确认按钮进入【内容中心-新素材管理】设计页面 进入页面设计器，对【内容中心-新素材管理】表格页面进行设计（更多细节介绍，请参考界面设计产品使用手册） a. 左侧为物料区：分为组件、模型。 ⅰ. 【组件】选项卡下为通用物料区，我们可以为页面增加对应布局、字段（如同在模型设计器增加字段）、动作、数据、多媒体等等 ⅱ. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作 b. 中间是设计区域 c. 右侧为属性面板，在设计区域选择中组件会显示对应组件的可配置参数 在左侧【模型】选项卡下，分别把系统字段中的【素材名称】、【素材链接】、【素材来源】、【素材类型】、【更新时间】、【创建时间】等字段拖入设计区域的表格区 设置字段在表格中的展示组件，在设计区域切换【素材链接】展示组件为【超链接】 设置字段在表格中的展示组件的属性，在设计区域选中【素材名称】，在右侧属性面板中设置【标题】为【内容名称】 设置字段在表格中的展示组件的属性，在设计区域选中【创建时间】，在右侧属性面板中设置【标题】为【上传时间】 在左侧【模型】选项卡下，把动作分类下的提交类型【下载】和【删除】动作拖入中间设计区的动作区，并选择【删除】按钮，在右侧属性面板中设置【按钮样式】为【次要按钮】 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【上传素材】，数据控制类型为【不进行数据处理】，打开方式为【弹窗打开】，【弹出内容】为【创建新页面】，【弹窗模型】通过搜索【素材】选择【Gemini素材代理-上传】，并点击保存 设计区选中【上传素材】按钮，点击【打开弹窗】设计【素材上传】的操作页面，此时会发现左侧【模型】选项卡下的当前模型切换成了【Gemini素材代理-上传】 a. 分别把系统字段中的【上传素材链接列表】拖入【Gemini素材代理-上传】的弹窗页面设计区。 b. 选中【上传素材链接列表】切换展示组件为【文件上传】 c. 选中【上传素材链接列表】并在右侧属性面板中 ⅰ. 设置【校验】分组下，设置【最大上传文件体积】为空，即不设置 ⅱ. 设置【校验】分组下，设置【限制上传文件类型】为打开，并勾选【图片】和【视频】 ⅲ. 设置【交互】分组下的宽度属性为【1】 在左侧【模型】选项卡下，把动作分类下的提交类型【上传素材】动作拖入中间设计区的动作区 在左侧【组件】选项卡下，把动作分类下的【客户端动作】类型拖入中间设计区的动作区，选中并在右侧属性面板中设置【动作名称】为返回，设置【客户端行为】为【关闭弹窗】，点击【保存】按钮来完成动作的基础设置 选中【返回】按钮、并在右侧属性面板中设置【按钮样式】为【次要按钮】 关闭弹窗返回主模型设计区 点击右上角【显示母版】进入页面最终展示形式，点击添加菜单项，并在输入框中输入【新内容中心】 点击菜单右侧设置图标，选择【绑定已有页面】，进行菜单与页面的绑定操作 在绑定页面中，模型选择【Gemini素材】，视图选择【内容中心-新素材管理】，点击确认按钮提交 最后别忘了点击右上角【发布】按钮对【内容中心-新素材管理】表格页面进行发布，回到界面设计器首页查看刚刚建好的表格页面 Step2 测试完成以后隐藏原【内容中心】菜单 进入【界面设计器】管理页面，通过点击【设计图标】进入任一页面的设计页面 点击右上角【显示母版】进入页面最终展示形式，找菜单【内容中心】点击菜单右侧设置图标，选择【隐藏菜单】，因为【内容中心】菜单是标准产品自带菜单，只能进行隐藏操作，无法进行如绑定页面和调整菜单顺序 Step3 回到全员营销应用，刷新页面体验效果 整个实战训练就到此结束，更多细节请参阅具体的产品使用手册
1. 集成介绍 集成是指平台应用与外部系统之间的集成，平台内部应用之间直接内部服务调用。 在讲解集成设计之前先了解以下概念： 集成资源：在实际业务场景中需要将多个系统打通，针对单一的一方，我们称之为集成资源。集成资源可以是具体的数据服务合集，例如系统应用、数据库、FTP服务、域控服务等。 连接器：连接具体集成资源，以供后续实际集成时使用的connector。 数据流程：通过流程编排的方式，让集成也可以可视化的处理，提升集成作业效率。 集成平台通过连接器、数据流程的编排实现与外部系统的数据互通，包括：连接器、数据流程、流程日志三部分功能。 集成操作整体流程： 2. 连接器 支持集成应用、数据库两大类型的资源。 页面操作包括：新增、编辑、查看引用、删除，点击卡片进入API列表管理接口。 2.1 连接器之应用 2.1.1 新增应用 操作入口：在连接器、应用Tab页面——新增应用资源。 2.1.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.1.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.1.4 应用详情 点击应用卡片进入应用详情，查看应用基础信息、集成的接口清单。 2.1.5 API接口 操作入口：新增资源后，点击连接器卡片，进入API管理页面。 页面操作：新增、删除、编辑、详情、返回连接器。 2.1.5.1 新增API 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：GET、POST、PUT、DELETE 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.2 新增WebService 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：POST 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.3 编辑 编辑同新增页面信息，不做赘述。 2.1.5.4 删除 删除API接口后不能继续使用，请慎重。 2.1.6 查看引用 查看引用应用资源的接口。 2.2 连接器之资源 2.2.1 新增数据库资源 操作入口：在连接器页面，切换到数据库页面——新增DB资源。 2.2.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.2.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.2.4 查看引用 查看引用数据库的接口。 2.2.5 数据库详情 点击应用卡片进入数据库连接器详情，查看应用基础信息、集成的接口清单，新增API。 2.2.6 API接口 2.2.6.1 新增API 输入基础信息、请求参数、数据库操作、定义响应结果。 2.2.6.2 编辑 编辑同新增页面信息，不做赘述。 2.2.6.3 删除 删除API接口后不能继续使用，请慎重。 3. 数据流程 3.1.1 数据流程介绍 数据流程：通过流程编排的手段，可视化的配置、处理集成的数据流程，提升集成作业效率。 主要包含基本操作和流程设计两个部分。前者包含了流程的新增、删除、复制、停用/启用、设计/编辑、搜索。后者包含单一流程的基础信息修改、流程设计、参数配置、保存、发布。 3.1.2 流程的基本操作 3.1.2.1 新增流程 新增流程，点击后进入流程设计页面，流程名默认为“未命名流程”，可自行修改。 3.1.2.2 设计/编辑 点击编辑进入该流程的设计页面。 3.1.2.3 停用/启用 流程需要更新或暂时不用时可以使用停用功能。流程停用后将不会执行流程，正在执行中的流程不受停用影响。 针对停用流程，点击启用按钮，流程恢复启用状态，可正常触发。 3.1.2.4 复制 遇到流程节点动作相似度较高的情况可以使用复制流程的功能，点击按钮后生成一个“原流程名-复制”的流程，并且进入新流程的流程设计界面。 3.1.2.5 删除 遇到流程创建有误，没有使用过且将来也不会使用该流程，可以删除流程。需要注意的是，删除流程的前提是该流程已停用，并且该流程从未执行过。 3.1.3 流程设计 通过新增、编辑/设计动作进入流程设计页后，可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 3.1.3.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 3.1.3.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 3.1.3.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。 3.1.4 流程触发 新增的流程设计页面默认包含两个节点，一个是流程的触发节点：确定流程开始的条件；另一个是流程结束的节点。 流程触发方式有定时触发、消息触发两种方式，未设置流程触发方式时无法继续添加后续流程节点，同时无法进行流程发布，如左下图。触发方式设置完成后，可从左侧菜单栏拖入或流程箭头中的加号点击添加节点动作，如下图。 3.1.4.1 定时触发 定时触发适用于周期性调用流程的场景，设置流程第一次执行的时间，配置循环的周期间隔。 3.1.4.2 消息触发 消息触发方式下，识别消息任务的唯一标识，标识可复用。在发送消息时，必须匹配定义的消息标识。 3.1.5节点动作 3.1.5.1 集成服务 集成服务API，选择集成的应用、此应用下的API，配置相应的参数。 3.1.5.2 数据处理 【新增数据】节点：同流程设计器； 【更新数据】节点：同流程设计器； 【获取数据】节点：同流程设计器； 【删除数据】节点：同流程设计器； 【更新流程参数】节点：同流程设计器； 【引用逻辑】节点：同流程设计器； 3.1.5.3 构建 【延时】节点：同流程设计器； 【条件分支】节点：同流程设计器； 【子流程】节点：同流程设计器； 【循环】节点 循环模式：次数循环、列表循环； 次数循环：需配置循环开始值、循环结束值、循环步长； 列表循环：配置需要循环的列表； 均使用表达式配置相应字段， 3.1.5.4 通知消息 【站内信】节点：同流程设计器； 【邮件】节点：同流程设计器； 【短信】节点：同流程设计器； 4. 流程日志 查看流程执行的情况，包括执行状态、执行时间、执行时长，针对异常流程，可以重试。 详情：查看流程日志、日志详情。
在业务中，可能会遇到需要对多tab的交互或UI做全新设计的需求，这个时候可以自定义多tab组件支持。 首先继承平台的MultiTabsWidget组件，将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样，这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…
