浮木云学习小记(2)---基础知识

133 阅读6分钟

通过这段时间的学习,这次就国产化软件设计平台--浮木云的基本概念简单形成简单的学习记录。

这是官网链接:https://www.fumucloud.com/,感兴趣的小伙伴可以去尝试使用。

官网.png 下面介绍的就是浮木云的基础概念了,有:应用、子应用、导航、页面、画布、组件、交互编排、动作卡片、属性配置、样式配置、结构树、自定义组件、源码导出、应用发布等。

1. 应用

在浮木云平台中,每个应用都被视为单个完整的软件项目或软件系统。这意味着每个应用都有其独特的需求和特点,可以对其进行单独规划、设计和开发。在应用管理下不同软件项目或系统都是单独的应用。

应用.png

2. 子应用

所谓的子应用就是在应用下的小应用,打个比方就是单独的购物系统项目中可以有前台购物系统和后台商品管理系统;这个购物系统项目就是应用,而前台购物系统和后台商品管理系统就是两个子应用,下面用红色标记的就是应用下的子应用。

子应用.png

3. 导航

导航指的是页面中的菜单;导航也分为好几种样式:顶部导航、侧边导航、融合导航、无导航。可以给不同的子应用选择不同的导航样式。对于不同的导航也可以进行自定义的配置。

1、顶部导航:页面中的菜单在页面上方。

2、侧边导航:页面中的菜单在页面侧边。

3、融合导航:页面中的菜单在页面上方和侧边;上方是一级菜单、侧边是二级菜单。

4、无导航:页面中没有菜单。 自定义配置就是通过导航菜单数据配置和导航菜单样式配置对选中的导航进行样式和数据的配置。

导航.png

自定义配置就是通过导航菜单数据配置和导航菜单样式配置对选中的导航进行样式和数据的配置。

自定义配置导航.png

1、导航菜单数据配置是可以配置菜单数据,即菜单的名称,如下图:

导航菜单数据配置.png

2、导航菜单样式配置是配置菜单的背景颜色、选中颜色等样式,如下图:

导航菜单样式配置.png

4. 页面

每个子应用包含多个页面,不同的页面展示不同的设计内容。页面分为web页面和app页面,同时web页面也有很多不同的尺寸,使用者可以根据实际的需求选择不同的尺寸页面。

页面尺寸.png

 

这就是在浮木云上搭建的页面,如下图:

页面搭建.png

5. 画布

画布位于工作台界面的中间区域,就是用来承载页面的。

画布.png

6. 组件

组件就是在搭建页面时使用的元素,通过使用不同效果的组件来搭建出不同样式的页面。组件分为:容器、基础组件、输入组件、地图组件、图标组件等。

1、容器:容器可以确立页面框架,内部可以放置其他组件。

2、基础组件:基础组件中有按钮组件、文字组件等组件,就是系统中使用频率较高的组件。

3、输入组件:输入组件中有输入框、文本域等组件;能够在这类组件中输入文字。

4、地图组件:当页面中需要地图相关功能时,可以使用地图组件来完成相关功能。在一些地图导航场景中就可以使用地图组件。

5、图表组件:通过可视化图表组件来展示业务中的统计数据。

还有些创意组件适用于比较复杂的业务场景中使用可以支持复杂的交互效果和样式,比如:日历、表格等。日历组件可以用作筛选日期等业务场景、表格组件能详细的展示相关信息。

组件.png

7. 交互编排

交互编排就是给组件配置事件。通过给不同的组件配置不同的事件来实现页面的动态交互效果;例如:点击某个按钮就进行页面的跳转、点击按钮就有弹窗弹出。

交互编排.png

8. 动作卡片

动作卡片是给组件配置的事件,可以通过拖拽多个相应的动作卡片和编排这些动作卡片的顺序来实现组件事件,满足动态交互的效果。比如需要实现页面跳转的效果,就将当前页面跳转卡片拖拽到画布中,使用箭头将画布中的首尾图标进行连接,并配置跳转到哪个页面即可。

动作卡片.png

9. 属性配置****

属性配置就是给被选中的组件配置属性。不同的组件有不同的属性,可以通过配置原生属性、扩展设置等属性来调整组件,从而调整搭建的页面。

原生属性中就是设置组件名称、尺寸等属性。

在表格的扩展设置中可以设置表格数据、表格列、操作按钮设置等。

属性配置.png

10. 样式配置

样式配置就是给选中的组件配置布局样式、背景样式等,布局样式中可以设置被选中组件的高度、宽度、顶部、左侧、右侧、底部等边距,背景样式中可以设置背景图片、颜色、边框的样式等。

样式配置.png

11. 结构树

结构树就是在搭建页面时使用的组件由于嵌套关系而形成的树状结构,下图就是当前页面的结构树:

结构树.png

12. 自定义组件

自定义组件是将搭建的组件保存下来,可以供后面搭建页面时多次使用。

自定义组件.png

13. 源码导出

源码导出就是将搭建的模板导出对应的前端代码,代码是vue格式的,需要对应的环境才能运行。

点击浮木云页面中的源码导出,如下图:

源码导出.png

 

点击源码导出后,导出的源码如下:

源代码.png

14. 应用发布

应用发布是将构建完成的应用托管到浮木云,之后我们可以通过浏览器访问已经发布的应用。

应用发布.png

 

此外,浮木云包含多种类型模板,可以根据自己的实际业务需求引用这些应用模版,通过应用这些模块,无需手写代码,便可快速形成业务系统的基础页面。

模版中心.png

15. 结语

以上分享的就是浮木云的基础知识了,希望对大家的浮木云学习带来帮助,少走弯路,后期还会继续分享自己的学习心得,大家感兴趣的话可以持续关注。