检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用组件 概述 组件是低代码开发的构建块，就像积木一样。它们是可重复使用的小部件，可以轻松搭建和管理网页。举个例子，按钮、导航栏和表单都可以是组件。这有助于您快速搭建网站。 下面介绍如何在低代码中使用组件，实现页面快速搭建。 从物料面板中添加组件 参考登录AstroPro界面中操作，登录AstroPro界面。
行内绑定状态变量 使用说明 设计器提供了一种功能，允许使用定义变量来动态计算组件的位置。这些计算结果随后可以直接应用到组件的行内样式style属性中，从而实现动态样式的调整和布局的优化。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区和右侧属性设置面板四个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。 ：清空当前画布内容。
配置连接器 应用场景 通过连接器生成客户端，可以将已有服务的接口抽象和封装为一套标准化的客户端库。这样，其他服务可以通过这些客户端库以统一和简化的方式调用已有服务的接口，无需关心服务的具体实现细节。生成的客户端库可以作为服务间通信的标准工具，减少了重复的代码编写，提高了开发效率和代码的可重用性。
如何为对象自定义API 使用说明 当系统提供的基本操作无法满足需求时，可通过自定义API来实现 图1 查看操作类型 约束与限制 如果您的业务设置为聚合关系，则只能在主要方自定义API。 添加自定义API 在业务设计页面，选中某个业务对象。 单击右侧属性配置中的“自定义API”，进入编辑自定义API页面。
使用数据源 使用说明 设计器提供数据源来配合画布上的组件渲染。 本章节以应用于表格组件的表格列为例，为您介绍如何使用数据源。 创建数据源 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。
直接编写样式代码 样式面板提供了可直接配置的样式，满足了大部分的基础样式需求。如果这些样式还是不能满足您的需求，AstroPro还提供了直接编写样式代码的方式来配置样式。 编写行内样式 等效于直接在html标签style属性里直接声明样式，权重高，用于覆盖样式。 参考登录Astr
上传自定义组件物料包 设计器已提供了页面设计的基本组件，您还可以根据自己的特定需求和功能要求创建自定义组件。 约束限制 物料中心为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 上传自定义组件 参考登录AstroPro界面中操作，登录AstroPro界面。
管理前端应用 创建前端应用 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”，单击“创建应用”。 输入应用名称及应用描述。 图1 创建应用 单击“确定”。 编辑前端应用 参考登录AstroPro界面中操作，登录AstroPro界面。
查看大纲树 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开并查看页面大纲树。 图1 设置主页 父主题： 前端应用管理
发布页面模板 使用说明 页面设计完成后，您可以发布为页面模板。当您的业务与模板中的场景相似度较高时，可以直接使用该模板创建页面，并在模板的基础上继续改造页面。 前提条件 已完成页面设计并保存页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
添加静态数据 使用说明 您可以直接通过手动创建的方式添加数据源的字段。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开数据源管理页面。
循环渲染 页面可能有若干份重复的、动态生成的内容，例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
添加工具类 在常规代码开发中，通常会将一些高频率用到的一些代码片段抽离出来业务代码，使其成为一个公共函数，减少重复的代码，从而达到代码复用的目的。 同样，在低代码开发中，不可避免地需要编写一些高代码进行组合开发，这里同样存在存储一些公共函数以供各处调用需求。工具类就是在这样的背景
添加全局变量 使用说明 全局变量是在整个应用中都可访问的变量。它们的作用域是全局的，可以在应用的任何一个页面调用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
使用JS面板 在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。
npm utils使用示例 本章节以按钮组件单击时显示Loading效果为例为您介绍npm utils的使用。 添加组件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
生成业务代码 使用说明 页面设计完成后，您可以根据配置生成应用的基本代码。代码生成后，会下载至本地，供您使用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。
获取数据源远程字段 使用说明 您可以通过已有的远程Http接口，快速地生成数据源的字段。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开数据源管理页面。
新增类名 使用说明 当选中一个组件，还没有自动生成类名时，您可以单击输入框手动输入类名，然后继续编辑样式面板的样式。 此时，组件会自动绑定您输入的类名，然后将在样式面板编辑的样式生成代码，写入到全局样式中。 新增类名 参考登录AstroPro界面中操作，登录AstroPro界面。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
