# 低代码开发指引

与市面上常见的低代码开发工具不同，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，可填写带单位的值
是否显示边框	控制是否展示网格边框
标题颜色	用于修改标题的文本颜色