检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用JS面板 在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。
选择已有类名 使用说明 除了自动生成和手动新增类名之外，您也可以通过输入框的下拉框来选择已有的类名。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
删除类名 使用说明 当类名不再使用，可进行删除操作。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待操作应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。
生成业务代码 使用说明 页面设计完成后，您可以根据配置生成应用的基本代码。代码生成后，会下载至本地，供您使用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。
修改类名 使用说明 已创建的类名支持修改。 类名修改，需注意以下事项： 当前组件绑定的类名会被修改。 全局样式中同类名会被修改成新类名。 其他组件绑定的同类名不会被修改。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
发布页面模板 使用说明 页面设计完成后，您可以发布为页面模板。当您的业务与模板中的场景相似度较高时，可以直接使用该模板创建页面，并在模板的基础上继续改造页面。 前提条件 已完成页面设计并保存页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
获取数据源远程字段 使用说明 您可以通过已有的远程Http接口，快速地生成数据源的字段。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开数据源管理页面。
添加静态数据 使用说明 您可以直接通过手动创建的方式添加数据源的字段。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开数据源管理页面。
条件渲染 在页面开发中，可能需要根据某些条件来动态显示或隐藏页面中的内容，例如：如果您希望当用户已经登录的时候，显示“欢迎登录”的文字，未登录的时候，显示“请登录”的文字。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
新增类名 使用说明 当选中一个组件，还没有自动生成类名时，您可以单击输入框手动输入类名，然后继续编辑样式面板的样式。 此时，组件会自动绑定您输入的类名，然后将在样式面板编辑的样式生成代码，写入到全局样式中。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。
绑定事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击需要绑定的事件。
添加全局变量 使用说明 全局变量是在整个应用中都可访问的变量。它们的作用域是全局的，可以在应用的任何一个页面调用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
AstroPro提供了BO、Abstract BO和Value Object三种类型的对象，请根据业务需求进行选择。 BO：业务对象，业务对象映射到服务中的一个实体，对应数据库中的一张表。 Abstract BO：抽象对象，不能实例化，没有对应的数据库表，需要和业务对象有个继承的操作。例如
循环渲染 页面可能有若干份重复的、动态生成的内容，例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
npm utils使用示例 本章节以按钮组件单击时显示Loading效果为例为您介绍npm utils的使用。 添加组件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
添加页面变量 使用说明 页面状态变量仅适用于当前页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开状态管理页面。 选择“页面状态”，单击“添加变量”。
使用模板创建页面 使用已创建的模板，一键生成页面，轻松实现个性化网站构建，节省时间，提高效率。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，进入“页面管理”页面。
设计前端应用流程 前端应用可以由一个或多个页面组成一个完整的业务系统。在AstroPro中，通过创建应用、（可选）创建文件夹、创建页面、页面设计和生成应用代码五步，即可快速完成前端应用设计，具体流程如图1所示。 图1 创建应用 步骤一：新建一个应用 参考登录AstroPro界面中操作，登录AstroPro界面。
ponents两个子文件夹。 assets：作为存放项目特定资源的地方。 components：用来存放应用程序的组件代码，如自定义的类、服务、工具类等。 模板文件介绍 所有的自定义组件都在src/components文件夹里面内开发，模板内提供了两个预置模板componentA
name; } } 表2 DataEvent参数说明 参数名称 数据类型 描述 metaDocument MetaDocument 服务的元数据对象。 operation Operation 资源操作类型，包含增删改查、批量增删改查，自定义等操作。 customMethod
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
