微搭低代码基础开发教程-编辑器介绍

2021-07-13 18:06:07 浏览数 (1)

本篇介绍一下微搭的编辑器的各类功能,便于新手小白快速了解软件的各类常规操作

编辑器结构

微搭提供了低代码的编辑器,可以在编辑器中进行组件的拖拽和属性及事件的设置。在应用管理,点击应用的编辑按钮可以进入到编辑器中

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

我们可以通过点击更多,点击编辑器指引来学习每个部分的具体功能

在这里插入图片描述在这里插入图片描述

中间部分是编辑预览区,编辑器可以放入需要的组件,预览区可以看到组件运行后的效果

在这里插入图片描述在这里插入图片描述

左侧为页面及组件区,这里可以创建页面,选择官方提供的各类组件

在这里插入图片描述在这里插入图片描述

右侧为属性配置区,我们可以设置组件的数据、样式及事件

在这里插入图片描述在这里插入图片描述

顶部是菜单区,一般我们代码编辑完后需要提交到服务器里,日常的预览发布也需要在菜单上操作

在这里插入图片描述在这里插入图片描述

我们在数据源中定义的数据,如果需要在页面上使用的,往往需要在变量管理里定义

在这里插入图片描述在这里插入图片描述

在组件的数据页签,每个属性旁边的超链接图标是可以进行数据绑定的,主要是为了进行数据的显示

在这里插入图片描述在这里插入图片描述

页面管理和页面编辑

编辑器左侧的第一个图标可以进行页面管理,如果我们需要新建一个页面,点击创建新页面的按钮即可

在这里插入图片描述在这里插入图片描述

创建页面时候需要录入页面的标题和ID,标题按照页面规划命名,如列表页面、新增页面、修改页面、详情页面等,ID的话是用来页面做跳转的时候使用,使用有意义的英文进行命名如list、detail等

在这里插入图片描述在这里插入图片描述

页面右边的三个小点是更多的功能操作,可以修改页面,克隆和删除

在这里插入图片描述在这里插入图片描述

右侧属性面板的页面编辑页签可以设置页面的样式,通常我们保持默认样式即可

在这里插入图片描述在这里插入图片描述

组件与官方组件库

左侧导航栏的第三个页签是组件页签,可以看到官方提供的各类组件

在这里插入图片描述在这里插入图片描述

不同类别下的组件的用途不一样,布局分类下的各种组件主要是实现页面布局

在这里插入图片描述在这里插入图片描述

通用组件主要是一些常规的组件如按钮、文本、图片、图标等

在这里插入图片描述在这里插入图片描述

容器分类主要包括了容器、滚动容器、轮播等,我们显示类的组件一般是需要放置到容器里才可以控制样式

在这里插入图片描述在这里插入图片描述

导航类组件包括底部的导航条、顶部的导航条和页签(左侧和中间)

在这里插入图片描述在这里插入图片描述

展示类的组件主要是用在列表页面用来显示列表的信息

在这里插入图片描述在这里插入图片描述

我们使用最频繁的组件就是表单类的组件,需要通过表单组件来构造各种功能页

在这里插入图片描述在这里插入图片描述

组件的属性配置

每个组件都有三个页签,分别是数据、样式、事件

在这里插入图片描述在这里插入图片描述

数据一般是和变量管理关联,做数据绑定,用来动态的显示从数据库获取的各类数据;样式主要是用来设置组件的布局,通常会对容器组件设置合适的布局

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

而事件主要是设置组件点击之后需要做出的响应,比如页面跳转

在这里插入图片描述在这里插入图片描述

动作类型有三个选项,低代码是可以自己处理响应;平台方法是平台预置的各类响应;数据源主要可以调用增删改查的方法

全局/页面 变量管理

在变量管理里可以定义各种变量,包括全局变量和页面变量。全局变量每个页面都可以访问到,页面变量只在本页面使用

在这里插入图片描述在这里插入图片描述

组件的数据绑定

组件的属性可以绑定各类变量

在这里插入图片描述在这里插入图片描述

总结

我们本篇概括性的介绍了编辑器的各种操作,熟悉各个操作无疑为我们日常开发打下了坚实的基础。开发工具的功能比较多,日常学习的过程中主要是多实践,慢慢的就能全部掌握。

0 人点赞