检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开物料资产包。 在物料资产包中选择按钮组件，并拖拽至中心画布中。 添加npm utils 在左侧插件栏中，单击，展开资源管理页面。
下面将通过两个示例分别展示如何使用。 为组件添加单击事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。
实现零代码设计。 通过样式面板配置样式 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 在样式面板中设置组件样式。
输入物料包补充描述说明。 物料包封面 选择物料包封面，默认为导入时选择的封面。 图1 导入物料包 单击“确定”，完成物料包导入。 导入成功后，可进入前端应用设计器，直接拖拽物料资产包中自定义组件进行页面设计。 图2 导入成功 图3 查看并使用自定义组件 父主题： 物料中心
自定义组件开发指南 在这个快速发展的前端开发时代中，组件化是构建可维护和可扩展应用程序的关键。 本章节帮助您了解自定义模板结构及开发流程。 模板结构介绍 public文件夹通常是用来存放Web应用程序的静态资源。 src文件夹是用来存放源代码文件，它包含assets和components两个子文件夹。
设置服务的架构、数据库、缓存和安全认证等信息，请根据实际业务直接在界面进行勾选。 生成策略 设置服务的API、代码风格、部署和性能测试等信息，请根据实际业务直接在界面进行勾选。 业务设计 基本配置、框架配置和生成策略需要用户根据自身业务的实际情况进行配置，配置不同生成的效果有所不同。业务设计是AstroPro的核心能力，是用户设计自己业务的基础。
在AstroPro中完成服务的开发后，会生成一个服务代码压缩包，命名为“服务名称+唯一ID”。假设服务名称为Servicedemo，则生成的代码压缩包名称，如图1所示。 图1 代码压缩包名称 了解代码结构 在AstroPro中编辑服务时，可在“生成策略 > 代码风格”中定义生成代码的工程目录结构，如图2、图3。
务。 步骤四：生成服务代码 基于配置的业务模型生成服务的基本代码。代码生成后，会提供一个压缩包，供您直接使用。 在服务依赖页面，单击“创建”。 图17 创建服务 输入变更日志描述信息，单击“创建”。 系统开始创建服务，并生成该服务的基本代码。代码生成后，将直接生成一个压缩包，下载
etadata.json元数据，来重新生成base层。使用该插件重新生成base层时，service层不会重新生成。不建议采用上述方式在本地修改metadata.json，容易引入其他未知错误，建议还是在AstroPro前端重新进行编排生成。 图1 base层 service：当
可以根据路由访问对应的页面。 新增文件夹 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，进入“页面管理”页面。 单击“页面管理”的新增文件夹按钮。
参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开并查看页面大纲树。 图1 设置主页 父主题： 前端应用管理
前提条件 已完成页面设计并保存页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 选择已设计完成的页面，单击顶部工具栏。 在弹框中输入页面模板标题及模板描述。
在左侧导航栏中，选择“前端开发平台 > 模板管理”。 可查看已发布的页面模板信息，如模板名称，模板描述及模板预览图。 图1 查看已发布模板 单个删除页面模板 模板删除后不可恢复，请谨慎操作。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 >
等效于直接在html标签style属性里直接声明样式，权重高，用于覆盖样式。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 单击行内样式的编辑框。
绑定事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击需要绑定的事件。
页面状态变量仅适用于当前页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开状态管理页面。 选择“页面状态”，单击“添加变量”。
新建一个服务 编辑服务 生成服务代码 前端快速入门 通过创建一个简单的登录页面，帮助您快速上手AstroPro前端开发。 创建应用 创建页面 页面设计 生成代码 04 使用 如何构建企业应用 了解构建流程 创建项目 创建服务组 创建服务 编辑服务（业务建模） 生成服务代码 项目管理 编辑项目
您可以直接通过手动创建的方式添加数据源的字段。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开数据源管理页面。 单击，展开设置数据源页面。 选择
现动态样式的调整和布局的优化。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 添加变量，例如：bgcolor，用来控制背景颜色；color，用来控制字体颜色，具体操作请参考添加页面变量。
可以在应用的任何一个页面调用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开状态管理页面。 选择“应用状态”，单击“添加全局变量”。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
