# 低代码开发指引
与市面上常见的低代码开发工具不同,FinClip Studio 提供的低代码工具更面向于研发人员使用,旨在加速研发人员的开发过程(拒绝重复、低价值的工单循环开发),从而帮助相关项目与应用的开发更加简单。
# 1. 功能介绍
低代码开发能力拥有非常直观和灵活的可视化建模工具,如列表、动作栏、表单、轮播等,可以满足大多数业务需求,从而减少开发人员的工作量,避免大量的编码工作和测试工作。开发人员可以自行根据需要对各种组件进行配置,创建自定义表单、报告和小程序应用都更加轻便。
- 业务人员的低代码:拖拉组件拼接(组件无法支持特定个性化功能的实现)
- 传统的开发流程:数据库搭建 → 后端代码 → 前端代码 → 部署构建
- FinClip Studio 上:数据库搭建 → 界面化构建(个性化需求可以在组件内添加代码)
# 2. 使用说明
打开 Finclip Studio 后,选择项目类型为小程序,勾选低代码,点击创建,即可通过拖拉拽方式绘制小程序。
整体介绍 左侧为操作面板,用于页面和组件的绘制,以及组件的相关配置
TIP
如果电脑屏幕较小,可以在左侧操作面板中 -> 通过command +/- 可以调整界面大小
右侧为模拟器,点击发布会自动打开模拟器,并将左侧绘制内容编译为小程序呈现在模拟器上
菜单栏
左上角的菜单栏可以控制操作侧边栏的展开与收起,切换编辑和预览模式
侧边操作栏
- 页面:可以进行页面的相关操作,页面的新增以及相关内容的配置与修改
- 资源管理:管理当前选中页面的组件资源,可新增或删除对应组件,点击对应组件可进行配置及修改
- 添加组件:可在当前页面中添加组件,以及组件的配置及修改,具体组件的操作及配置可参考 链接
- JS对象:为组件提供静态数据来源;用于编写我们的 JS 代码,在右侧的配置区进行配置调用
- 工具库:内置工具库,用来格式化代码、时间格式化、xml 语法解析 以及 代码的压缩库
添加组件
点击添加组件,将左侧组件拖拽到画布中,进行对应配置,点击右上角的【发布】,即可在模拟器中预览啦,快去试试吧!
# 3. 低代码组件
# 3.1 页面
页面容器,可放不同组件,通过路由跳转来切换不同页面
属性
字段 | 描述 |
---|---|
页面名称 | 用于修改当前页面的名称 |
添加到底部导航栏 | 用于修改是否在底部导航栏中展示 |
导航栏图标 | 用于设置底部导航栏对应的图标,只在添加到底部导航栏选中状态下有效 |
# 3.2 HTMl
属性
字段 | 描述 |
---|---|
html 内容 | html 代码内容的编写及修改,格式要符合 html 规范 |
# 3.3 列表
属性
字段 | 描述 |
---|---|
数据 | 获取一个对象,用于生成一个列表 |
内容类型 | 可选择列表呈现的内容类型,包含价格、控件等内容 |
图片字段 | 数据对象中获取图片地址的字段名 |
标题字段 | 数据对象中获取标题的字段名 |
描述字段 | 数据对象中获取描述文案的字段名 |
显示复选框 | 控制列表内容是否展示为复选框的形式 |
滑动删除 | 向左滑动列表,展示删除功能,可在动作模块中配置点击删除执行的动作 |
样式
字段 | 描述 |
---|---|
数据加载时显示加载动画 | 用于修改数据正在加载时,是否展示加载动画 |
圆角风格 | 对列表边框样式进行修改 |
图片宽度 | 修改列表中图片的宽度 |
图片高度 | 修改列表中图片的高度 |
标题颜色 | 修改列表中标题的颜色 |
描述颜色 | 修改列表中描述文案的颜色 |
空数据格式
字段 | 描述 |
---|---|
空数据图片 | 当数据为空时,将显示该图像。 |
空数据文案 | 当数据为空时,将显示该文案。 |
显示空数据按钮 | 当数据为空时,是否显示按钮 |
按钮文本 | 当数据为空时,按钮内的文案 |
按钮动作 | 当数据为空时,按钮执行的动作 |
动作
字段 | 描述 |
---|---|
onItemClicked | 点击列表时触发的动作 |
onDeleteClicked | 向左滑动item 时,点击删除时触发的动作 |
# 3.4 加载遮罩
加载图标,用于表示加载中的过渡状态。
属性
字段 | 描述 |
---|---|
加载文案 | 可以修改加载文案。 |
显示加载中 | 用于绑定动作的运行状态 |
# 3.5 动作栏
内容
字段 | 描述 |
---|---|
动作单元 | 可新增或删除动作单元,点击配置可对其进行配置 |
动作单元配置
字段 | 描述 |
---|---|
类型 | 修改动作单元的展示类型,可为按钮和图标 |
图标 | 如果动作单元为图标,则展示为该图标,用于修改图标 |
小红点提示 | 是否有右上角的小红点提示 |
颜色 | 图标的颜色 |
动作 | 点击动作单元触发的动作 |
# 3.6 单元格
内容
字段 | 描述 |
---|---|
单元格列表 | 单元格列表中的条目添加及单元格的配置,可通过点击右侧设置图标进行单元格配置 |
属性
字段 | 描述 |
---|---|
圆角卡片风格 | 对单元格边框样式进行修改 |
显示外边框 | 控制是否显示外边框样式 |
标题 | 修改标题内文案,如果有文案则展示标题,如果没有内容,则不展示标题 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
# 3.7 商品规格
用于展示商品信息,包括价格、库存、商品展示等相关信息,同时可进行加入购物车和立即购买的操作
数据
字段 | 描述 |
---|---|
商品ID | 商品的ID |
价格 | 展示默认商品的价格 |
图片 | 展示默认商品的图片 |
库存 | 展示默认商品的库存 |
商品规格 | 商品的规格,数据格式为数组,每个规格必须包含字段:name(名称), key(键值), values(可选值) |
商品库存 | 商品的库存,数据格式为数组,对应的是商品规格中每件商品必须包含字段:id,paice(价格), stock(库存), category(规格值) |
样式
字段 | 描述 |
---|---|
主题色 | 修改主题颜色 |
动作
字段 | 描述 |
---|---|
点击加入购物车 | 点击加入购物车按钮时,触发的动作 |
点击立即购买 | 点击立即购买按钮时,触发的动作 |
# 3.8 图片
图片组件可以显示应用程序中的图像。图片格式必须是 URL 或有效的 base64。
属性
字段 | 描述 |
---|---|
图片地址 | 设置图像的来源。支持图像 URL、数据 URI 或 base64 编码图像数据 |
图片填充方式 | 设置图片填充父容器方式,支持“包含”、“封面”、“自动”三种形式,如有其他形式的疑惑,可以参阅 CSSobject-fit文档 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
圆角大小 | 对图片组件的圆角边框进行修改 |
动作
字段 | 描述 |
---|---|
onClick | 点击图片组件时候触发的动作 |
例子说明
几乎所有主要图像格式都支持,包括:
- PNG
- JPG
- GIF
- WebP
- SVG
你可以将下列地址输入到图片组件中体验查看
//png:
https://assets.appsmith.com/widgets/default.png
//jpg:
https://jpeg.org/images/jpegsystems-home.jpg
//gif:
https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5eeea355389655.59822ff824b72.gif
//webp:
https://www.gstatic.com/webp/gallery/4.sm.webp
//svg:
https://assets.codepen.io/3/kiwi.svg
内嵌说明
内联 SVG 是指包含在网页标记中的 SVG 标记。要显示内联 SVG,可以试下以下步骤操作:
- 将图像小部件拖放到画布中
- 现在在图像部分,将下面提到的 URL 与您的 SVG 代码粘贴在一起:
data:image/svg+xml;charset=UTF-8,{{encodeURI('<svg..<your-svg>.. ></svg>')}}
您甚至可以使用这样的编码 URL:
example 1:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E
example 2:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /%3E%3C/svg%3E
# 3.9 复选框
属性
字段 | 描述 |
---|---|
文本 | 复选框对应的文案内容 |
默认选中 | 修改默认选中状态 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
是否禁用 | 使该组件不可点击或不可用。该组件对用户保持可见,但不允许用户交互。 |
数据加载时显示加载动画 | 用于修改数据正在加载时,是否展示加载动画 |
动作
字段 | 描述 |
---|---|
onCheckChange | 当复选框的选中状态改变时,触发的动作 |
可进行 JS 交互
# 3.10 底部弹窗
从页面底部弹起的一个浮层
属性
字段 | 描述 |
---|---|
弹窗高度 | 修改弹窗的高度,只能填写不带单位的数字 |
点击背景关闭 | |
圆角风格 | 修改弹窗圆角边框样式 |
动作
字段 | 描述 |
---|---|
onClose | 当点击关闭弹窗时,触发的动作 |
# 3.11底部面板
固定在页面底部的面板,不会随着页面滑动而滚动
属性
字段 | 描述 |
---|---|
面板高度 | 修改面板的高度,只能填写不带单位的数字 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
# 3.12 按钮组件
按钮组件是一个可点击的实体,可以触发附加到它的任何事件。
属性
字段 | 描述 |
---|---|
按钮文字 | 可设置按钮内的文案 |
背景颜色 | 对按钮背景颜色进行修改 |
文本颜色 | 修改按钮文案的字体颜色 |
字体大小 | 修改按钮文案的字体大小 |
字体加粗 | 修改按钮文案加粗样式 |
是否圆角 | 对按钮边框样式进行修改 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
禁用 | 使该组件不可点击或不可用。该组件对用户保持可见,但不允许用户交互。 |
显示加载动画 | 您可以使用拨动开关将其打开/关闭。您还可以使用 JavaScript 关闭/打开它 |
动作
字段 | 描述 |
---|---|
onClick | 设置单击此组件时触发的动作,可进行跳转,提示,以及 JS 函数的执行 |
举例
动作中选择打开弹窗,直接可以通过下拉选择需要打开的弹框名称即可
动作中选择跳转到,直接可以通过下拉选择需要打开的页面名称即可
# 3.13 搜索框
字段 | 描述 |
---|---|
占位提示 | 当搜索框内文本为空时的占位文案展示 |
圆角风格 | 控制搜索框是否使用圆角边框样式 |
显示搜索按钮 | 是否展示右侧搜索按钮 |
只读模式 | 用于修改搜索框只读模式,当为只读模式时,不可编辑 |
文本对齐 | 用于修改搜索框内文案的对其方式 |
动作
字段 | 描述 |
---|---|
onTextChanged | 当搜索框的输入内容发生变化时触发的动作 |
onSearch | 当点击搜索按钮时触发的动作 |
onClick | 点击搜索框时触发的动作 |
# 3.14 文本
一个不可编辑的文本内容块
属性
字段 | 描述 |
---|---|
文本 | 文本块内展示的文案内容 |
允许滚动 | 当文本超出文本块是,是否可以进行滚动 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
样式
字段 | 描述 |
---|---|
背景颜色 | 用于修改文本块的背景颜色 |
文本颜色 | 用于修改文本内文案的颜色 |
字体大小 | 用于修改字体的大小 |
字体风格 | 用于修改字体样式,包括加粗,斜体等 |
文字对齐 | 用于修改文本对齐方式 |
# 3.15 标签导航
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
属性
字段 | 描述 |
---|---|
数据 | 格式为数组 |
标题字段 | 标签中的文案,用于修改从数据中的哪个字段中获取数据 |
默认选中索引 | 修改默认高亮选中的标签 |
是否可见 | 控制组件在页面上的可见性。关闭时:当应用程序发布时,组件将不可见。在编辑模式下它看起来是半透明的 |
数据加载时显示加载动画 | 用于修改数据正在加载时,是否展示加载动画 |
动作
字段 | 描述 |
---|---|
onTabSelected | 当点击标签时,触发的动作 |
# 3.16 网格
以网格形式展示的图文区域,默认为4列展示
属性
字段 | 描述 |
---|---|
数据 | 网格内展示的数据,为数组格式,可通过 {{}} 进行数据绑定 |
内容类型 | 控制单个网格的内容类型,可包含标题,描述以及按钮 |
图片字段 | 用于展示图片的字段,在数据中获取 |
红点字段 | |
标题字段 | 用于展示标题的字段,在数据中获取 |
样式
字段 | 描述 |
---|---|
图片高度 | 用于修改图片的高度 |
图片宽度 | 用于修改图片的宽度 |
列数 | 用于修改网格展示的列数,最小展示两列 |
网格间距 | 两个网格之间的横向间距,默认单位为 px,可填写带单位的值 |
是否显示边框 | 控制是否展示网格边框 |
标题颜色 | 用于修改标题的文本颜色 |
空数据格式
字段 | 描述 |
---|---|
空数据图片 | 当数据为空时展示的图片内容 |
空数据文案 | 当数据为空时展示的文案 |
动作
字段 | 描述 |
---|---|
onItemCliked | 当点击网格时触发的动作 |
# 3.17 表单组件
表单组件可以满足您捕获输入的数据并将其连接到数据库查询或 API 的所有需求。
表单组件可以用作父组件,可以存储不同的组件,例如用于显示要捕获的信息的文本、用于捕获用户所需输入的输入框、允许选择的下拉列表等等。
内容
字段 | 描述 |
---|---|
表单字段 | 表单字段,可以新增和修改,也可以修改对应的配置 |
字段配置
字段 | 描述 |
---|---|
字段名称 | 提交时该字段的名称 |
必填 | 是否为必填,如果必填,失去焦点会有警告提示 |
字段控件 | 控件类型,例如单选框、复选框、省市区选择 |
输入类型 | 控制输入内容的类型,会有相应的校验,如数字、身份证号 |
缺省提示 | 表单为空时的默认展示内容 |
属性
字段 | 描述 |
---|---|
表单默认值 | 表单默认取值 |
提交按钮文本 | 用于提交操作的按钮文本内容 |
圆角卡片风格 | 对表单组件的边框样式进行修改 |
主题颜色 | 对表单组件的主题样式进行修改,控制提交按钮的颜色 |
动作
字段 | 描述 |
---|---|
onSubmit | 表单提交时候触发的动作,可进行跳转,提示,以及 JS 函数的执行 |
# 3.18 轮播
用于循环播放一组图片内容。
属性
字段 | 描述 |
---|---|
数据 | 组件中需要用到的图片数据地址 |
图片字段 | 表示图片的字段,可在数据中获取 |
# 3.19 键值对
属性
字段 | 描述 |
---|---|
数据 | 用于展示的数据,格式为数组 |
键字段 | 键内的文案,在数据中获取 |
值字段 | 值内的文案,在数据中获取 |
样式
字段 | 描述 |
---|---|
圆角风格背景 | 用于修改边框样式 |
布局 | 用于修改键值的布局样式 |
数据加载时显示加载动画 | 用于修改数据正在加载时,是否展示加载动画 |
键样式 & 值样式
字段 | 描述 |
---|---|
颜色 | 用于修改文案的颜色 |
字体大小 | 用于修改字体的大小 |
粗体 | 控制字体的样式是否为加粗显示 |
文字对齐 | 设置文字的对齐方式 |