Skip to content

快速入门

注册账号

  在了解浮木云平台的使用技巧前,我们首先需要注册一个账号。

  1. 点击链接https://www.fumuyun.com/ 进入浮木云登录页面,点击立即注册。

2.输入手机号并填入验证码后,点击下一步。

3.点击“注册”,并设置密码后,账号注册完成。

登录账号

  浮木云平台支持密码登录和验证码登录两种登录方式。

密码登录

验证码登录

平台基本概念介绍

核心概念

概念含义示例
AI设计大师AI设计大师是浮木云平台的核心驱动力,它是一个将自然语言需求转化为专业应用原型的智能化引擎。极大地降低了应用开发的技术和设计门槛,将复杂的设计和编码工作简化为清晰的对话。它不仅能将构思效率提升数倍,更能依托智能化的最佳实践,为最终应用的专业性与可用性保驾护航,让用户得以专注于业务创新本身。
应用浮木云应用是浮木云平台中用于实现特定业务功能的软件系统。它可以是一个网站、一个移动应用,或者是一个内部管理系统。应用由页面、数据模型、流程引擎、表单等功能模块组成,用于满足企业或个人的业务需求。
应用管理应用管理是浮木云平台中用于管理和维护应用的功能模块。它包括应用的创建、配置、发布和版本控制等功能。通过应用管理,用户可以控制应用的生命周期,确保应用的稳定运行和高效使用。
团队管理团队管理是浮木云平台中用于管理和协作的功能模块。它允许用户创建团队、添加成员、分配角色和权限,从而实现多人协作开发和维护应用。团队管理确保团队成员能够高效地分工合作,提高开发效率。
团队角色团队角色用于定义团队成员的权限和职责。常见的角色包括团队管理员(负责整体管理)和普通用户(负责使用或测试应用)。通过角色分配,可以确保团队成员在平台上操作的合规性和安全性。
团队资源团队资源是指团队成员在浮木云平台中可以共享和使用的资源,例如数据模型、组件、模板、API等。通过团队资源管理,团队成员可以方便地复用和共享资源,减少重复工作,提高开发效率。
模板中心模板中心是浮木云平台中提供预设模板的功能模块。这些模板是预先设计好的应用、页面或组件,用户可以直接使用或根据需求进行修改。模板中心帮助用户快速启动项目,减少开发时间,尤其适合新手或需要快速交付的场景。
页面设计页面设计是通过可视化工具(如拖拽组件、调整布局)创建应用界面的过程,用于定义用户界面的外观和交互逻辑。
子应用子应用是指在一个主应用架构下,将应用拆分为多个独立的功能模块,每个模块可以独立开发、部署和运行。
应用设置应用设置是用于配置应用基本信息、权限、主题等功能的模块,是应用的基础配置入口。
应用发布应用发布是将开发完成的应用部署到生产环境的过程,支持每个子应用单独发布,每个子应用共用一个数据jar包。
协作管理协作管理是支持团队成员协作的功能模块,用于分配角色、权限和管理团队资源,确保多人高效合作。
数据字典数据字典是定义和管理数据标准的工具,用于规范字段类型、枚举值和数据格式,确保数据一致性和准确性。
服务关联服务关联是用于配置和管理应用与其他系统或服务集成的模块,支持数据同步、外部API调用等功能。

AI设计大师

概念含义示例
设计应用需求输入想要生成的应用相关信息,比如应用的功能、场景和布局样式等内容。输入完成后,点击右侧蓝色带箭头的发送按钮,AI便会根据输入的应用描述,结合所选的“网页端”“移动端”或“可视化大屏”等选项,生成相应的设计页面。
选择应用类型AI智能设计功能提供网页端、移动端、可视化大屏共3种应用类型,选择需求的类型生成相应页面。满足了不同场景下用户对于应用页面生成的多样化需求,为用户在不同的使用情境中打造合适的应用界面提供了便利。
历史对话记录AI智能设计功能的对话历史区域,展示了过往的对话记录,方便用户查看之前的操作和生成结果。能帮助用户高效管理与AI的对话过程,快速回顾历史任务。点击“开启新对话”按钮,可发起新的AI设计请求,帮助快速开启新任务。
生成示例生成示例区展示了一个具体的生成案例,该区域的作用是给用户提供参考,让用户更清楚地了解应该如何描述想要生成的应用,以便在上方的输入框中输入符合要求的应用描述,从而更高效地利用AI智能设计功能。
AI对话输入修改功能需求,AI会据此输出涵盖多方面的方案内容。首先是需求收集与分析,明确项目概述、目标用户、核心功能和业务场景;接着进行页面功能设计,分别从功能定位、页面标签、核心功能等维度规划;还会涉及系统整体架构,阐述数据流转关系、用户角色权限、移动端协同等内容,为平台设计与开发提供全面且清晰的思路和框架支持。
AI应用生成AI根据提供的设计描述,生成页面菜单以及相对应的可视化页面,用户可通过点击菜单目录上的页面名称对相应页面进行预览。

页面设计

概念含义示例
页面页面是用户在应用中看到的可视化界面,由多个组件组成,用于展示内容和实现交互功能。它是用户与应用交互的直接入口。
组件库组件库是页面设计中提供的一系列可复用的界面元素集合,如按钮、文本框、图片、表格等。用户可以通过拖拽组件到页面上快速搭建界面。
结构树结构树是页面布局的可视化表示,以树状结构展示页面中各个组件的层级关系。它帮助用户清晰地管理和调整组件的嵌套和布局。
样式配置样式配置是用于调整组件外观和布局的功能,支持设置颜色、字体、边距等属性,以实现页面的视觉效果和风格一致性。
属性配置属性配置是用于设置组件功能和行为的参数,包括是否隐藏、拖拽提示等。
交互编排交互编排以组件行为变化为触发起点,通过拖拽、连接等方式,将不同的动作串联起来,形成一个完整的交互。在浮木云中支持配置的常见交互有:加载、点击、数据改变、单击、双击、要素点击、标注点击、地图加载、单体化点击、绘制结束等。交互编排由动作组成。
动作动作指的是当事件被触发时,执行的一些逻辑序列。动作与交互编排之间的关系类似机器与部件:只有用一个个的部件(动作)进行组装,机器(交互编排)才能运转起来。
变量变量是用来存储数据或信息的容器。可以把变量想象成一个标签,用来标记或储存各种不同类型的数据,比如数字、文字等。通过给变量取一个名称,就可以在程序中方便地引用和操作这些数据。交互编排过程中常常需要定义一些变量,变量可分为页面级变量和局部变量。

AI设计大师介绍

1.输入应用需求

在AI对话框中输入应用的功能、场景和布局样式,完成后点击右侧蓝色带箭头的发送按钮,AI便会根据输入的应用描述,结合所选的 “网页端”“移动端”或“可视化大屏”等tab选项,生成相应的设计方案和应用页面。 1

2. AI设计应用方案

用户输入应用的功能、场景和布局样式等内容后,AI会据此需求提供涵盖多方面的方案内容。首先是需求收集与分析,明确项目概述、目标用户、核心功能和业务场景;接着进行页面功能设计,分别从功能定位、页面标签、核心功能等维度规划;还会涉及系统整体架构,阐述数据流转关系、用户角色权限、移动端协同等内容,为平台设计与开发提供全面且清晰的思路和框架支持。 1

3. AI对话修改需求

可在对话框再次输入需求,点击对话框右下角蓝色带箭头的发送按钮发送需求,AI可根据输入要求重新调整设计方案内容,反复输入调整直至生成用户需求方案内容。 2

4. AI应用生成

1.根据AI提供设计描述,生成页面菜单,右侧生成页面菜单相对应的可视化页面。 3 2.可通过点击菜单目录上的页面名称对相应页面进行预览。 4

5. 应用继续生成

页面列表目录栏右侧状态显示“已中止”时,可点击对话框底部“继续生成”按钮进行继续生成页面。

5

6. 应用保存

实时预览编辑效果,确保修改符合预期后,点击右下“保存”按钮保存应用。

6

应用创建介绍

1.创建新应用

在「浮木云」中,每一个应用都可以被视为一个软件项目或一个软件系统。创建应用提供「创建空白应用」、「从模板中创建」、「智能创建应用」3 种方式,这 3 种方式的区别在于:「创建空白应用」在创建应用时你需要填写一些必要信息并选择「应用类型」和「页面布局」。「从模板中创建」可以直接从「模板中心」中选择模板生成完整的应用。创建应用时你需要填写一些必要信息并选择「应用类型」和「页面布局」。「智能创建应用」则可以直接通过AI智能生成完整的应用。

2.选择应用类型

「浮木云」提供 WEB、APP、可视化大屏及 WEB+APP 共 4 种「应用类型」,选择不同的「应用类型」创建会自动生成不同终端的应用。

3.设置导航类型

「页面布局」设置的是应用的「导航类型」,WEB 类应用提供顶部导航、侧边导航、融合导航及无导航共 4 种导航类型;APP 类应用提供底部导航、无导航这 2 种导航类型;可视化大屏提供无导航的导航类型;WEB+APP 类应用提供顶部导航、侧边导航、融合导航、底部导航及无导航共 5 种导航类型。
顶部导航和侧边导航支持二级菜单层级,融合导航支持三级菜单层级,底部导航支持一级菜单层级,无导航不支持设置菜单。

创建空白应用

  1. 点击左侧导航栏的应用管理模块,点击“创建空白应用”按钮,可打开创建新应用的弹窗界面。

  2. 填写应用基本信息,包括应用名称、行业分类等;选择应用类型,包含WEB、APP、可视化大屏和WEB+APP应用四种;选择合适的页面布局。点击“确认”,即可创建一个空白应用。

从模板中创建模板中心

  1. 点击“从模板中创建”按钮,可打开模板中心弹窗。
    1

搜索模板

  1. 在搜索框内输入模板名称,可直接对模板中心的模板进行搜索筛选(支持模糊查询)。
    1

模板分类

  1. 在行业分类栏中选择需要查询的分类,可对模板进行分类筛选。
    1

模板预览

  1. 鼠标选中想要预览的模板,模板处会浮现“预览”和“使用”,点击“预览”按钮,可打开模板预览的弹窗。
    1

  2. 在打开的模板预览弹窗内可查看该模板的页面设计。
    1

模板预览页面缩放

  1. 鼠标选中想要预览的模板,模板处会浮现“预览”和“使用”,点击“预览”按钮,可打开模板预览的弹窗。
    1

  2. 在预览页面的右上角处,点击“-”或“+”按钮,可对预览页面进行缩放。
    1

模板子应用切换

  1. 鼠标选中想要预览的模板,模板处会浮现“预览”和“使用”,点击“预览”按钮,可打开模板预览的弹窗。
    1

  2. 模板子应用切换,在下拉框内选择子应用可切换子应用进行页面的预览。
    1

模板运行

  1. 鼠标选中想要预览的模板,模板处会浮现“预览”和“使用”,点击“预览”按钮,可打开模板预览的弹窗。
    1

  2. 模板子应用运行,点击“运行”按钮可打开子应用的运行页面。
    1

  3. 在运行页面可进行交互操作。
    1

模板使用

  1. 鼠标选中想要预览的模板,模板处会浮现“预览”和“使用”,点击“使用”按钮,可打开模板使用的提示弹窗。
    1

  2. 在打开的提示弹窗内,点击“确定”按钮即可创建和该模板一样的应用。
    1

智能创建应用

  1. 点击左侧导航栏的应用管理模块,点击“智能创建应用”按钮,弹出AI设计应用的对话框
    1

  2. 选择应用类型WEB、APP、可视化大屏,输入自然语言生成应用,点击“保存”即可保存完整的应用
    2

页面设计介绍

「浮木云」页面设计分为以下 4 个部分:顶部功能栏、左侧功能栏、右侧功能栏和页面画布。
  ​ 1

顶部功能栏

   顶部功能栏位于界面的顶部区域,分为上下两行。上面一行主要对应用、子应用进行操作,下面一行主要对页面画布及搭建内容进行操作。
  ​ 1

左侧功能栏

   左侧功能栏位于界面的左侧区域,包括页面、组件库、结构树、自定义组件 4 个标签页。
  ​ 1

页面

  页面标签页主要对页面分组及页面进行管理,支持新增分组、编辑分组和删除分组等分组管理功能和新增页面、编辑页面、克隆页面、移动页面、删除页面等页面管理功能。
  ​ 1
  ​ 1

组件库

  组件库标签页提供包括容器组件、基础组件、输入组件、地图组件、图表组件、高级组件等多类型丰富组件。
  1

结构树

  结构树标签页用来控制页面的组件层级结构,提供对组件的移动、复制、粘贴、删除、保存等操作。
  1

右侧功能栏

   右侧功能栏位于界面的右侧区域,包括样式配置、属性配置、数据绑定、交互编排4 个标签页。
  1

样式配置

  样式配置标签页用来对页面中的组件样式进行设置调整。
  1

属性配置

  属性配置标签页用来对页面中的组件属性进行设置调整。
  1

交互编排

  交互编排标签页用来配置组件事件被触发后执行的交互行为。
  1

页面画布

   页面画布位于界面的中心区域,页面设计的绝大部分工作都将体现在页面画布中,你可以随心地在画布中添加组件、设置参数和编排交互事件。
1

实现页面交互和业务功能

添加交互事件

  静态页面搭建完成后,可以添加交互事件使页面“动”起来。

事件与动作

  在开始添加交互事件之前,首先需要明确「事件」与「动作」的概念。「事件」是指用户与页面交互时触发的行为,由事件对象、事件名称、事件参数组成。
​ 而「动作」则指的是当事件被触发时,执行的一些逻辑序列,由对象来源、入参、出参组成。

编排交互事件

在「浮木云」中,交互事件需要结合具体的应用场景编排,我们以一个例子来具体演示。
​假定现在有一个「办理箱」表格页面需要配置「详情」的跳转事件,操作步骤如下:

  1. 选中表格后将右侧功能栏切换至「交互编排」标签页;
    1

  2. 点击「详情按钮【点击】」卡片中的「新增事件编排」图标按钮,进入交互事件编排界面。
    1

  3. 从左侧「操作页面」标签页中拖拽「打开新的页面」动作卡片至界面中,配置属性后点击「保存并退出」按钮后事件配置完毕。
    1

应用发布运行与源码导出

应用发布

   只有在应用发布运行后交互事件的编排效果才会生效。如果你希望演示动态交互的应用,请进行「应用发布」。

​ 在发布应用后,通过「运行应用」,你能随时随地访问部署至「浮木云」服务器上的应用、查看完整的软件设计成果并向其他人进行应用动态演示。

源码导出

  为了满足客户二次开发的需求,「浮木云」提供「源码导出」的功能。应用源码导出是指将子应用中的页面和页面交互的源代码打包成压缩文件,并下载到本地。导出的源码不仅可供研发人员进行修改,降低他们编写代码的工作量,同时还能提高开发效率。

版权所有:武汉浮木科技有限公司