页面搭建

使用Mobi低代码研发平台,通过可视化界面,对应用页面进行搭建。

前提条件

  • 已创建应用页面,并打开相应的开发界面,具体操作参见页面管理

搭建页面

  1. 在应用页面的开发界面,从左侧组件区域选择并拖拽组件到工作区域。

  2. 在工作区域对已选组建进行合理布局。

  3. 选中工作区域的组件,在右侧组件属性区域进行数据/样式/事件等属性的配置,具体说明参见样式编排/数据编排/事件编排

  4. 在顶部功能区,显示当前搭建的应用页面的名称。从下拉列表中选择应用页面,可进行切换。

截屏2021-01-12 下午3

样式编排

页面样式设置

选中工作区页面,您可以为页面设置内边距、背景颜色。

组件样式设置

说明

每个组件可设置的样式不同,每个组件可设置的样式以平台上展示的样式为准。

组件样式包含:

  • 文字大小:支持选择14px、18px、24px、32px,4种文字大小

  • 文字颜色:自定义颜色支持RGB色值、Hex色值、色板取色

  • 文字粗细:普通、粗体

  • 内/外间距:设置组件内/外间距

  • 宽度/高度:支持按像素值和百分比方式进行设置

  • 布局方向:水平排列、垂直排列

  • 布局方向排版方式:居左或置顶、居右或置底、居中、两端平铺、两端留白

  • 组件自身对齐方式:

    • 垂直拉伸占满、垂直居中、顶部对齐、底部对齐

    • 水平拉伸占满、水平居中、左对齐、右对齐

  • 背景颜色

  • 背景图片

  • 边框宽度/边框颜色/边框角度

  • 图片宽度/图片高度

将组件保存为区块

您可以将已进行样式编排的组件保存为区块,区块会保留样式设置,不保留数据和事件设置。

选中组件,单击保存区块,填写区块名称或单击确定。

保存区块后,您可以直接进行复用。保存为区块

数据编排

组件属性配置

如果页面上有以下组件,单击选中可在右侧设置组件属性。

  • Data:用于提交数据,需绑定数据表或绑定接口数据

  • List:用于展示或删除数据,需绑定数据表或绑定接口数据

  • 图片:设置图片地址

  • 输入框:设置提示文字、输入框大小、是否必填、是否密码、输入框类型和最大长度

  • 文本域:设置提示文字、最大长度

  • 按钮:设置按钮文字、按钮类型、按钮尺寸、按钮圆角

组件数据配置

如果页面上有以下组件,单击选中后可在右侧设置数据。

  • 文字:绑定数据字段

  • 输入框:绑定数据表字段、绑定API数据字段

  • 文本域:填写静态文本、绑定动态数据(包含数据表字段、数据接口字段)

注意

  • 需要绑定数据字段的组件必须放置到已绑定数据表的组件中。

  • 需要绑定API据字段的组件必须放置到已绑定API接口的组件中。

事件编排

图片、按钮组件是事件触发组件,您可以为图片和按钮进行事件编排。

触发动作

说明

内部转跳

内部转跳为事件触发后转跳到应用内其他页面,您可以选择已存在的页面作为转跳落地页。

外部链接

转跳到外部链接,此处需设置外部链接的URL。

更多

表单提交:是和数据交互组件配合使用的组件,触发后会上传数据到数据表。

表单重置:是和数据交互组件配合使用的组件,触发后会清空待上传数据。

创建数据:是页面转跳的触发动作,需设置触发后的转跳的落地页。

编辑数据:触发后可以修改本条数据,需设置触发后的转跳页面。

删除数据:触发后会删除本条数据。

发送API请求:触发当前数据容器中的接口方法操作。

后续操作

提交变更:页面搭建完成后,单击页面右上方的提交,保存当前模型版本。

说明

未主动提交的模型修改后直接退出了编辑或浏览器,即记录开发者最后尚未主动提交的修改为草稿版本,下次进入页面时则直接进入草稿版本。

提交回滚:在页面搭建界面单击右侧功能区的提交记录,进入提交记录页面。你可以选择需要回滚的版本继续进行搭建。

说明

回滚前建议提交当前模型版本。