本章主要介绍如何快速入门，了解如何在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低代码应用平台体验
1. 主业务流程图 2. 主业务流程操作图解 创建图表—创建报表/数据大屏—发布图表/报表—前端业务系统可引用 2.1 创建图表分组 1）操作流程：创建图表分组 2）操作路径：数据可视化-图表-创建图表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建图表 2.2 创建图表 1）操作流程：选择图表二级分组-创建图表 2）操作路径：数据可视化-图表-二级分组-创建图表 3）鼠标移动至需要创建图表的二级分组上，出现「+」，点击图标后弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进图表设计页面（详见图表-图表设计页面），设计完成后点击保存，图表创建成功 2.3 创建报表分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.4 创建数据大屏分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.5 创建报表 1）操作流程：选择报表二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 2.6 为报表选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-图表-二级分组-报表-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a需要选择图表的一级分组后才能选择图表； b可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 2.7 创建数据大屏 1）操作流程：选择数据大屏二级分组-创建数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-创建 3）鼠标移动至需要创建数据大屏的二级分组上，出现「+」，点击图标后进入数据大屏设计页面； a. 选择图表组件组合成数据大屏，还有其他诸如时间、图片等组件可供选择； b. 数据大屏标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）选择完成后可以保存，则创建数据大屏成功 2.8 发布图表/报表/数据大屏 1）操作流程：选择图表/报表-发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-发布 3）选择单个未发布且没有被隐藏的图表/报表/数据大屏，点击【发布】按钮，图表/报表发布后可以被前端引用，数据大屏可被屏幕演示，图表/报表/数据大屏状态变为已发布，展示最近发布时间； a. 如果图表发布后有更新内容，会展示的更新类型：更新图表信息/更新图表内容； b. 如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表； c. 如果数据大屏发布后有更新内容，会展示的更新类型：更新数据大屏信息/更新数据大屏内容； 4）发布后可以修改 2.9更新发布图表/报表/数据大屏 1）操作流程：选择图表/报表-更新发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-更新发布图表/报表/数据大屏 3）选择单个已发布且没有被隐藏的图表/报表/数据大屏，并且该图表/报表/数据大屏在上次发布后有所更新，可以点击【更新发布】按钮，将最新的图表/报表内容发布至业务系统，业务系统引用的图表/报表为最新内容，屏幕展示的数据大屏是最新的大屏内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的图表/报表仍为最近发布的内容，屏幕展示的数据大屏仍是最近发布的内容
随着企业从信息化向数字化转变，软件公司提供的产品也由传统的企业管理软件向企业商业支撑软件发展。这一变化带来了许多技术上的挑战和机遇。在之前的章节中，我们提到企业的视角已经从内部管理转向业务在线和生态在线协同，这也带来了一系列新的需求。但是，我们常常会忽视这一变化所带来的对系统要求的变化。在本章中，我们将探讨这些技术上的变化，以及这些变化所带来的机遇和挑战。 图2-1 从信息化到数字化软件本质变化 在信息化时代，企业的业务围绕着内部管理效率展开，借鉴国外优秀的管理经验，企业将其管理流程固化下来，典型的例子是ERP项目。这类项目上线后往往长期稳定，不轻易更改，因此信息化时代软件的技术流派侧重于通过模型对业务进行全面支持。例如，SAP具有丰富的配置能力，将已有企业管理思想抽象到极致。其功能基本上可以通过配置来实现，因此其模型设计特别复杂。但是，我们也应该清楚地了解到，配置是面向已知问题的。在数字化时代，创新和业务迭代速度非常快，这种方法可能就不太适合了。我们知道，模型抽象是在设计时具有前瞻性的，一旦不适合，修改起来就会异常困难。 随着数字化时代的到来，企业主的关注点已经从单一企业内部管理转变为了围绕企业上下游价值链的协同展开。这种变化给企业信息化系统提出了更高的要求，例如业务需求的响应速度、系统性能和用户体验等方面。现在，企业对软件不仅是管理需求的承载，更是业务在线化的承载。传统的重模型设计软件模式已经不再适用，因为业务本身不断创新和变化。因此，数字化时代需要新的软件技术流派，这种流派必须是轻模型加上低代码技术的结合体。通过模型抽象80%的通用场景，剩余的20%个性化需求可以通过技术手段来完成。这样的设计可以让每家企业的研发人员轻松理解模型，而不像ERP模型那样异常复杂，无法进行修改。此外，配合低代码技术可以快速研发和上线。如果说配置化是面向已知问题的，那么低代码就是面向未知问题设计的。虽然低代码的概念可以追溯到上个世纪80年代，当时是为了满足企业内部部门之间有协同需求，但又没有专业软件支撑，定制化开发又不划算的辅助场景。但现在它的核心原因是企业数字化的核心场景不稳定，变化很快，每家企业都有强烈的个性化需求。因此，低代码成为解决这些问题的核心手段，数字化时代的低代码需要具备处理复杂场景的能力，而不仅仅是围绕着内部管理展开。 企业在数字化转型的过程中需要考虑到不仅是成熟的全链路业务解决方案，还要应对数字化场景的快速变化和持续创新的需求。为此，Oinone打造了一站式低代码商业支撑平台，从业务与技术两个维度来帮助企业建立开放、链接、安全的数字化平台。这将在水平和垂直两个维度上全面推动企业数字化转型。 另外，低代码的另一个好处是完成了软件本身的数字化建设。通过基于元数据设计，元数据成为软件中数据、逻辑和交互的数据，软件结合AI可以有更多的创造可能。想象一下，AI了解软件的元数据后可以自我运作，人在极少情况下才需要参与，人机交互也会发生大的改变。未来的软件交互不再需要研发提前预设，而是能够实现用户所需即所呈现的效果。作为一家帮助企业进行数字化转型的软件公司，请问您的数字化转型是否已经完成呢？
在设计页面时，页面中的所有内容均是由组件组成，每个组件有不同的属性，可以灵活的对每个组件的属性进行设置，以满足业务场景。 组件分为四类，分别是布局、字段、动作、数据 1. 布局 布局类组件主要用于页面的样式排版。 分组：类似一个容器，可以把业务含义相近的内容放在这个分组容器内。 选项卡：类似一个容器，每个选项卡可以添加多个选项页，可以把业务含义相近的内容放在选项卡的选项页容器内。 2. 字段 字段型组件是常用，也是用于支撑页面的主要组件类，每个字段型组件都对应一个模型字段。 单行文本：常用于记录名称、身份证号或其他普通的文字内容。 多行文本：常用于记录字数较多的文字，如意见、复杂备注等。 整数：常用于输入整数的天数、数量等，如果会出现小数，请使用小数组件。 小数：常用于输入金额、单价等，会出现小数的数值。 下拉单选：从多个选项中下拉选择一个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典或布尔型开关。 下拉多选：从多个选项中下拉选择多个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典。 开关：常用于只有是否两种对立选项的选择。 单选框：常用于在直接展示的选现中单选一个值，例如选择性别。 复选框：常用于在直接展示的选现中多选一个值，例如选择爱好、选择课程等。 富文本编辑器：一种可内嵌于浏览器，所见即所得的文本编辑器，类似于Office Word 的编辑功能，常应用于篇幅较长的说明性文字，支持改变字体样式、插入图片等。 年份：常用于选择出身年份、一项计划的年份等。 日期：常用于选择颗粒度到日期的Date类型字段，例如出生日期、入职日期、入驻日期等。 日期时间：常用于选择颗粒度到时间的DateTime类型的字段，例如下单时间、发货时间、审批时间等。 时间：常用于选择仅时间无日期的Time类型的字段，如设置规章中的上班时间、日志的提交时间等。 颜色选择器：应用于自定义颜色，如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。 文件上传：常用于上传附件、文件，例如Office文档、图片、视频、音频、其他格式的文件等。 图片上传：常用于上传记录的图片，例如上传身份证照片、头像、商品图片等。 标签：可输入保存多值，例如用户的标记标签。 3. 数据 与数据可视化设计器进行联动，可以选择自定义的图表或报表，在页面展示。 图表：可以选择数据可视化设计器中允许被引用的图表，展示在页面中 报表：可以选择数据可视化设计器中允许被引用的报表，展示在页面中
页面是什么 在Oinone前端体系中，页面是一个核心概念，它代表着终端用户所看到的当前视图。这个视图可以有多种形式，主要取决于页面是如何定义和构建的。在深入理解页面之前，我们需要了解两个关键的功能：自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能，但在某些情况下，它可能无法完全满足特定的需求。这时，自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充，允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时，自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计，添加特定的交互元素，或者整合复杂的业务逻辑，以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例，展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./view： 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先，我们定义了一个名为 CustomViewWidget 的 TypeScript 组件，并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次，我们创建了对应的 Vue 单文件组件 CustomView.vue，用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来，我们使用 registerLayout 函数注册了一个表格视图布局，并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后，它就可以在表格视图中被使用。在表格视图的布局中，我们通过 标签将自定义视图嵌套在表格中，从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是，registerLayout 函数和自定义布局的规则是一致的，这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则，从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先，我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…
