微件

微件是用于创建页面的构建块。它们可以是任何对象,涵盖的范围从显示文本的简单标签到允许用户查看和修改数据的复杂表单。

应用制作工具的拖放页面创建功能使得微件可以直接投入使用,而微件的各种属性则能够让您自定义微件并添加功能以构建功能完善的界面。

微件类型

您可以通过页面编辑器左上角的微件面板 访问微件。应用制作工具对该面板的微件进行了归类整理,以使其更易于查找:

类别用途示例
数据 能够显示或修改模型数据的微件。这些微件是复合微件(具有微件层次结构),包括面板、标签、文本框、按钮。您可以修改向导的输出。 表单、表格
输入 处理点击或文本输入等用户输入的微件。 按钮、标签、文本框、文本区域、复选框、下拉列表、日期框、单选按钮组、星级、滑块、建议框、文本编辑器、多选、用户选择器、云端硬盘选择器
显示 显示文本、图片和其他相对非交互式界面元素的微件。 链接、图片、Google 地图、帮助图标、旋转进度条、HTML、分页器
布局 用于安排其他微件的微件。这些微件还可以分配数据源。 固定面板、水平面板、垂直面板、列表、网格、手风琴式折叠、标签页、水平拆分、垂直拆分
图表 将数据的可视化形式显示为图表的微件。 条形图、折线图、饼图、表格图
页面片段 您创建的页面片段的面板。 在多个页面上重复显示的界面元素,例如页眉和页脚
您的图片 您为应用上传的图片的面板。 产品徽标、自定义图标

微件属性

每个微件都具有可修改的属性,可让您指定各种设置,例如微件所显示的数据、微件的位置、微件对用户输入的响应方式。使用页面画布右侧的属性编辑器可以查看和修改当前所选微件的属性。

属性编辑器会按功能对属性进行分组。每一组中的确切属性因微件而异。

属性组 说明
微件名称 该组包含两个基本的微件属性(名称和数据源)以及特定于微件功能的一个或多个其他属性。
性能设置 该组具有单个属性,用于控制子级微件的加载时间。该属性仅针对页面、布局微件以及包含布局微件的数据微件而显示。
布局 该组中的属性指定微件的位置和大小。
间距 该组中的属性指定微件的外边距和内边距。
事件 该组中的属性确定微件如何响应事件(例如数据加载和用户输入)。
数据验证 该组中的属性设置文本输入微件的验证要求。它仅针对相关的输入微件而显示。
显示 该组中的属性会影响微件的外观和可见性。
流程 该组中的属性确定启用流程的布局微件如何放置其子级微件。它仅针对布局微件而显示。
其他 该组中的属性控制系统在验证出错时如何显示和设置微件的 HTML 标题。在大多数浏览器中,HTML 标题会显示为提示。

基本属性

每个微件都有两个基本属性:

  • 名称 - 用于在数据绑定、脚本、样式等使用场景中引用微件的标识符。微件名称对其页面而言必须是唯一的,并且不能以数字开头或包含空格。将微件添加到页面时,应用制作工具会自动生成名称,但我们建议您将微件重命名为易于记忆的名称,这对于以后参考通常很有帮助。
  • 数据源 - 分配数据源以使微件可以轻松访问相关来源的数据。您只能在表单微件和布局微件上分配数据源。其他所有微件都会从其父级布局微件继承其数据源。

微件生命周期

微件的生命周期很简单:首先,应用制作工具会创建微件,然后将其附加到页面上,这样用户就可以看到微件。不再需要微件时,应用制作工具会分离微件。应用制作工具可以多次附加和分离微件,但只能创建微件一次。

创建

创建微件时,应用制作工具会设置微件的属性并构建其 HTML。创建好以后,即使微件尚未附加到页面,您也可以通过 app.pages 属性立即访问微件属性。默认情况下,应用制作工具会在用户访问应用后立即创建大多数微件。列表微件和相关的微件属于例外情况 - 此类微件的数据源加载以后,应用制作工具只会创建其子级微件。

附加

在将微件附加到页面时,应用制作工具实际上是在该页面的 HTML 结构或 DOM 中插入该微件,从而使其对用户可见。应用制作工具会在用户访问某个页面时附加该页面的大多数微件,而在用户离开该页面时会卸载这些微件。同样地,列表微件和相关的微件属于例外情况,因为它们的子级微件只有在它们的数据源加载以后才会附加到页面,并且它们可以在其数据源发生变化时附加和分离新行。

应用制作工具在附加微件时会设置微件绑定,而在分离微件时会移除微件绑定。这意味着以下两点:您不能依赖微件属性在附加微件之前设置值;在系统加载数据源以填充绑定时,附加微件的操作通常会触发服务器请求。

所有微件都具有 onAttachonDetachonDataLoad 事件,用于执行代码以响应微件生命周期的变化。如需详细了解这些事件,请参阅微件逻辑

性能设置

您可以控制何时初始化应用的页面和微件。默认情况下,当用户打开应用时,应用制作工具会下载所有内容。不过,在添加页面时,您可能需要延迟加载某些内容,以防止应用打开的时间过长。

如需控制应用初始化内容的方式,请点击页面或面板,然后在属性编辑器中点击 Performance settings。选择以下一个选项:

  • Complete initialization - 用户打开应用时,应用制作工具会初始化所有页面和微件。这是应用制作工具的默认设置,最适合较小的应用。如果在每个页面上都使用该选项,则具有复杂页面的大型应用可能要花费很长时间才能打开。
  • Partial initialization - 请为大型应用中的面板或轻量级页面选择该选项。用户打开应用时,应用制作工具会下载页面或面板的内容和结构。不过,直到用户打开其父级页面,微件才会初始化。该选项使应用的加载速度比默认设置更快,但可能会增加个别页面的加载时间。
  • Deferred initialization - 该选项最适合大型应用中的复杂页面。除非用户打开父级页面,否则应用制作工具不会加载页面或面板结构。当应用制作工具下载内容并构建页面时,应用会显示动画式进度指示器。该选项使应用的加载速度变得更快,但具有该设置的个别页面的加载速度会变慢。
  • Script-based initialization - 如果您的应用所包含的微件仅在满足某些条件时才会用到,请使用该选项。您可以编写一个脚本,以便在用户执行您指定的操作时调用 createChildren。除非需要,否则应用制作工具不会加载子级微件。

例如,如果您的应用加载时间太长,可以将应用中最关键的页面设置为 Complete initialization。然后,您可以通过将其他页面设置为 Partial initialization 来延迟加载其他页面。如果您发现应用的加载时间仍然太长,请尝试将某些页面设置为 Deferred initialization

请记住,在微件完成初始化之前,您无法访问该微件的属性和绑定。在将相关更改部署到用户之前,您需要彻底测试任何自定义性能设置。

详细了解应用设计的最佳做法