步骤一：获取自定义组件模板包 为了增强标准页面组件的丰富性，华为云Astro轻应用为您提供了一个自定义组件模板workCards.zip，您可以基于该模板包自定义标准页面组件。开发标准页面组件前，请先了解自定义组件模板包的结构及定义规范，便于快速上手。 单击链接，获取华为云Astro轻应用自定义组件模板workCards.zip。 解压获取的workCards.zip包，了解自定义组件模板包的结构及定义规范。 图1 workCards.zip模板包结构 表1 workCards.zip模板包目录及文件说明 目录及文件 说明 build 用于存放组件的打包脚本。 dist 组件打包文件目录，文件打包后生成于此目录下。 preview 组件预览文件夹。 src 组件的主文件夹，组件的内容位于此文件夹中。 本实践中，自定义组件仅涉及修改“src\components\workCards”目录下的内容，详细介绍请参见表2。 .gitignore Git的忽略文件。 .npmrc 设置package.json中依赖包的安装源。 package.json 项目的依赖文件。 package-lock.json 用于锁定依赖文件的安装版本号。 README.md 项目提示文件，用于编写对该组件的描述。 vite.config.js Vite的配置文件。 图2 src\components\workCards目录结构 表2 src\components\workCards目录结构说明 目录及文件 说明 design-time 开发态组件文件目录。 static 静态文件目录。 cube.svg/workCards.svg 业务中使用的图标。 index.js 组件主入口文件。 workCards.json 组件的描述文件，用于自定义组件配置面板的规格，即校验和辅助编写自定义组件配置面板的JSON文件。workCards.json文件的编写需遵循JSON Schema规范，以便与主流的编辑器（如vscode、atom、sublime text、webstorm）集成。 workCards.json可以在插件包开发时修改，也可以在插件包编译后修改，编译前workCards.json文件存放在“src\components\workCards”目录下（如图3），编译后“dist\components\workCards”目录下（如表3）。 workCards.vue 组件的主文件。 图3 编译前workCards.json文件所在位置 图4 编译后workCards.json文件所在位置 表3 workCards.json参数说明 参数 说明 name 组件的名称，此处配置的名称主要用于后台元数据的存储和解析等。 长度不能超过64个字符，必须以英文字母开头，只能由英文字母、数字和特殊字符（_和-）组成。建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件的名称会存放在界面元数据的type中，如type: "my-component1"。 zip包的名称应该和此处name的取值保持一致，例如name设置为imgbutton，zip包名必须为imgbutton.zip。 title 组件别名会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 取值范围：1~100个字符。 description 组件的描述信息，即当鼠标悬停在组件上时，展示的组件描述信息。 取值范围：1~200个字符。 category 组件的分类，为了保持界面构建器组件分类的一致性，请使用华为云Astro轻应用提供的组件分类，具体分类如表4所示。 icon 组件的图标，分为未选中时和选中时两个，必须为png格式，且每个png的大小不能超过16KB。 其他 用于定义包大小，编译后的组件包大小不能超过1MB。 表4 华为云Astro轻应用组件分类 分类 说明 navigation 导航组件，如菜单、工具栏或侧边栏。 data 数据组件，可以查看和编辑应用程序中的数据，例如Form、Table或List。 common 通用组件，如标签、图片、标题或段落。 container 容器组件，即包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。 input 显示和编辑实体属性，如文本框、日期选择器。 file 文件处理组件，例如文件上传下载组件、图片浏览组件或PDF预览组件。 button 触发动作的按钮，如保存按钮、页面跳转按钮。 report 聚合数据并以表格或图表的形式显示，如图表、透视表。 widget 业务卡片。 add-on 扩展组件。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义 开发者自行定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 文本类型：设置文本类型，如输入框、密码。 标签：输入框在界面展示的标签名，必须是输入框存在于某个表单组件中，该标签设置才生效。 占位符：设置占位符，可辅助元素对齐，让页面更整齐。 可清空：是否可清空输入值。 默认值：输入框默认值。 图标：输入框图标，仅在输入框类型下有效。 图标位置：输入框中的图标位置。 最大字符长度：输入框取值最大字符长度。 最大宽度：输入框最大的宽度。

标准页面组件分类 标准页面组件包括系统预置的基本组件和用户自定义的扩展组件，基本组件具体说明如表1所示。如果需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上方会出现问号图标，单击该图标会出现该基本组件的使用说明。 表1 基本组件分类说明 分类 说明 布局 用于控制页面的布局，即将页面划分为几行几列。例如，先拖入一个栅格容器，将栅格容器用行列划分成小区域后，再向单元格中拖入其他组件。容器本身可以包含容器，也可以包含其他组件。 表单：具有数据收集、校验和提交功能的表单，通常用于制作带数据的交易类页面。 表格/表格(新)：主要用于展示大量结构化的数据，使用时需要通过数据绑定数据模型。适用于通过一个表格，完成数据对象的增、删、改、查的操作场景。 容器：基本的布局容器，支持拖拽放置任何组件进去，按照流式布局模式布局（非独占整行组件如按钮组件，从左往右排列，占满整行即换行；独占整行组件如标题组件，则默认独占一行）。 分栏：容器组件，相当于行，内部支持分为多栏（列）。通过该组件，可将页面划分为两栏或多栏，每一栏都可以拖入其他组件。 折叠面板：用于对页面的某些区域进行折叠和展开。 页签：选项卡切换组件，通常用于平级区域大块内容的收纳和展示。 列表视图：用于灵活组合列表项的内容，并且根据实例化数据动态展示。 模态框：模态对话框，在保留当前页面状态的情况下，在浮层中显示。 表单 输入框：文本输入框，关联对象文本（text）类型，可编辑一行的文本控件，包含标签。适用于普通文本输入。 多行输入框：多行文本输入区域，关联对象文本区（Text Area）类型，多行可编辑的文本控件。适用于多行文本输入。 日期选择框：用于选择或输入日期，关联对象日期（Date）类型、日期/时间（Date/Time）类型，可以选择或输入日期，支持年、月、日期等类型。 数字输入框：数字（Number）类型的输入框，关联对象数字类型。 金额：用于输入金额。 复选按钮：该控件允许用户从多个选项中进行多种选择。 单选按钮：用于一组可选项的单项选择，或者切换某个选项的选中状态，以实现从一组互斥的选项组中选择一项。 下拉框：使用下拉菜单，展示并选择内容。 级联选择框：从一组相关的数据集合中进行选择，和下拉框相比，可一次性完成选择，体验更好。 开关：在两种状态间切换时用到的开关选择器。 上传：文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。 自动完成：带有提示的文本输入框。 关联选择框：一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。 弹出对话框：弹出对象选择框，可弹出自定义页面。 多语言选择框：多语言切换组件，根据系统设置的多语言信息，展示配置项。 评分：评分、评价组件。 基本 按钮：通过编排事件实现Button，触发业务逻辑使用。 按钮卡：包含多个按钮（两个或更多）的整体面板。该组件可用于构建多项菜单，用于在视图之间导航。 标签：用于显示页面信息的静态文本。 图标：用于辅助相关文字进行展示，也可当做按钮单击使用，通常需要配合其他组件一起使用。 标题：用于添加具有标题意义的文字，可以通过选择属性“标题类型”的值，来控制添加标题的文字大小。 链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。 图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。 面包屑：显示网站的层级结构，告知用户当前所在的位置，如“首页/菜单1/菜单2/菜单3”。 滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等组件中。当鼠标在轨道上单击时，滚动球会移动到当前鼠标单击的位置，单击过的地方会以蓝色显示，未单击的地方是灰色。 分页：当数据量较多时，使用分页可快速进行数据切换。 二维码：二维码生成组件。 高级 选项树：数据为树形结构时，可使用该组件，以完整展示树形结构数据的层级关系，并具有展示、收起、选择等交互功能。 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。 时间轴：一般绑定数据服务使用，动态的展示时间轴的内容。 走马灯：常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 可收缩面板：弹性伸缩布局，用于将内容区域收缩/展开。 滚动容器：当页面内容已超出屏幕的范围时，需要拉动滚动条，在有限的屏幕中浏览更多内容。 选择卡：用于将多个项目，从一边移动到另一边。 栅格容器：用于控制页面的布局，即将页面设计几行几列，先设置元素在页面中纵向排列，然后在每一行中又可设置元素横向排列。 代码块：用于代码块展示。 富文本：富文本编辑器。 视频播放：视频播放组件，用于播放视频。 流程 流程-动作：流程中使用的动作组件。 流程-历史：流程中使用的历史记录组件。 流程-附件：流程中使用的附件组件。 流程图：流程中使用的流程图组件。

使用预置模板创建标准页面 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 单击“页面”后的“+”，在添加标准页面中选中“基于模板”。 设置页面的标签和名称，单击“下一步”。 图1 设置标准页面基本信息 表1 标准页面参数说明 参数 说明 标签 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~64个字符。 名称 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 在选择模板页面，选中所需的模板，单击“添加”。 图2 选择所需模板 单击页面上方的，保存标准页面。 保存成功后，单击，预览标准页面。 您可以基于模板，进行二次开发。

使用自定义模板创建标准页面 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 单击“页面”后的“+”，在添加标准页面中选中“基于模板”。 设置页面的标签和名称，单击“下一步”。 表2 标准页面参数说明 参数 说明 标签 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~64个字符。 名称 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 在“我的模板”中，选中自定义模板，单击“添加”。 图3 选中自定义模板 单击页面上方的，保存标准页面。 保存成功后，单击，预览标准页面。 您也可以基于模板，进行二次开发。

操作场景 系统预置了一些典型场景的标准页面模板，如果业务场景贴合已有模板，建议选择“基于模板”来快速创建标准页面。页面模板包括预置模板（通用模板）和自定义模板两大类。 预置模板（通用模板） 基础表单：基本的表单页面。 多区域表单：有间隔区域的多区域表单页面。 基础表格：单张表生成表格模板，包含增、删、改、查。 基础详情页面：基础的详情页面。 自定义模板（我的模板） 用户自定义的页面模板，开发好页面后，单击上方的另存为，即可创建自定义页面模板。创建后，该开发者用户、注册华为云Astro轻应用的账号、账号下其他华为云Astro轻应用用户都可直接使用该页面模板来创建标准页面。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义 开发者自行定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面 CSS 属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写 CS S代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持“px”、“em”和“%”三种单位。 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 标题：模态框的标题。 确定按钮文字：模态框的“确定”按钮上的文字。 取消按钮文字：模态框的“取消”按钮上的文字。 显示Loading：开启后，确定按钮显示loading状态。 显示遮罩层：开启后，显示遮罩层。 点击遮罩层关闭：开启后，允许单击模态框外的遮罩层关闭模态框。关闭后，必须先对该模态框进行响应，才能将该模态框关闭，例如单击模态框中的按钮（“确定”、“取消”）以及图标。 可拖动：开启后，该容器可拖动。 不显示底部：开启后，隐藏“确认”和“取消”按钮区域。 显示取消按钮：开启后，显示取消按钮。 确定按钮在前：开启后，确认按钮在前。 确定按钮禁用：开启后，确认按钮被禁用。 懒加载：开启后，弹框不打开不渲染，以提高性能。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义 开发者自行定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。