低代码开发指引

与市面上常见的低代码开发工具不同，FinClip Studio 提供的低代码工具更面向于研发人员使用，旨在加速研发人员的开发过程（拒绝重复、低价值的工单循环开发），从而帮助相关项目与应用的开发更加简单。

1. 功能介绍

低代码开发能力拥有非常直观和灵活的可视化建模工具，如列表、动作栏、表单、轮播等，可以满足大多数业务需求，从而减少开发人员的工作量，避免大量的编码工作和测试工作。开发人员可以自行根据需要对各种组件进行配置，创建自定义表单、报告和小程序应用都更加轻便。

• 业务人员的低代码：拖拉组件拼接（组件无法支持特定个性化功能的实现）
• 传统的开发流程：数据库搭建 → 后端代码 → 前端代码 → 部署构建
• FinClip Studio 上：数据库搭建 → 界面化构建（个性化需求可以在组件内添加代码）

2. 使用说明

打开 Finclip Studio 后，选择项目类型为小程序，勾选低代码，点击创建，即可通过拖拉拽方式绘制小程序。

整体介绍

• 左侧为操作面板，用于页面和组件的绘制，以及组件的相关配置

TIP

如果电脑屏幕较小，可以在左侧操作面板中 -> 通过command +/- 可以调整界面大小

• 右侧为模拟器，点击发布会自动打开模拟器，并将左侧绘制内容编译为小程序呈现在模拟器上

2.1 菜单栏

左上角的菜单栏可以控制操作侧边栏的展开与收起，切换编辑和预览模式

2.2 侧边操作栏

• 页面：可以进行页面的相关操作，页面的新增以及相关内容的配置与修改

• 资源管理：管理当前选中页面的组件资源，可新增或删除对应组件，点击对应组件可进行配置及修改

• 添加组件：可在当前页面中添加组件，以及组件的配置及修改，具体组件的操作及配置可参考 链接

• JS对象：为组件提供静态数据来源；用于编写我们的 JS 代码，在右侧的配置区进行配置调用

• 工具库：内置工具库，用来格式化代码、时间格式化、xml 语法解析 以及 代码的压缩库

2.3 添加组件

点击添加组件，将左侧组件拖拽到画布中，进行对应配置，点击右上角的【发布】，即可在模拟器中预览啦，快去试试吧！

2.4 如何获取组件数据

可通过 【组件名称.变量值】 的方式获取对应组件的数据，或者是当前点击项的数据

例如：

{{Text1.value}}

组件	组件名称	变量值
文本	Text	value
多行输入框	textarea	value
标签导航	tabs	tabs1.selectedTab
开关	switch	value
商品规格	sku	submitData
搜索框	search	text
单选	RadioGroup	selectedOption/value
下拉多选	Select	value
列表	list	currentItem
输入框	input	value
网格	grid	currentItem
表单	form	formData
文件上传	fileUploader	currentItem
时间选择	DateTimePicker	value
复选框	checkbox	value
日历	calendar	value
省市区选择	AreaPicker	value
级联选择	cascader	value
数字滑动条	slider	value
下拉单选	Dropdown	value

3. 组件说明

查看低代码开发工具使用组件清单，请点击这里