浮木云---基础知识

这段时间对浮木云这个原型工具开始展开研究,希望有朝一日让他成为我的原型标配工具。所以我会针对浮木云所学到的知识进行简单的记录,以便后续回头翻阅查看。

接下来,我针对浮木云的基本知识形成简单的记录,基本知识包括:应用、子应用、导航、页面、画布、组件、交互编排、动作卡片、属性配置、样式配置、结构树、自定义组件、源码导出、应用发布等。

应用

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

 

子应用

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

导航

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

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

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

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

(4)无导航:页面中没有菜单。

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

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

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

页面

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

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

画布

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

组件

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

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

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

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

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

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

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

交互编排

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

动作卡片

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

属性配置

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

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

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

样式配置

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

结构树

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

自定义组件

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

源码导出

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

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

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

应用发布

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    Neo_duan阅读 2,167评论 1 1
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    __Mr_Xie__阅读 1,473评论 0 1
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 2,327评论 0 12
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    伍华聪_开发框架阅读 1,623评论 0 53
  • 哈喽哈喽 大家好,今天给大家分享一个vue的进阶课程。 在大部分的vue教学课程中,介绍的内容都比较基础,其实呢,...
    田_9425阅读 1,103评论 0 0