检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 图1 添加function工具类 单击“保存”，完成function工具类添加。 添加npm工具类 对于一些简单的公共函数来说，直接添加function工具类会很方便，但是对于
使用工具类方法 添加工具类 npm utils使用示例 function utils使用示例 父主题： 前端应用管理
单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 function isNil(value) { return value == null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function
在物料资产包中选择按钮组件，并拖拽至中心画布中。 添加npm utils 在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“npm”。 参考表1配置工具类的参数。 表1 参数说明 参数 示例 名称 Loading 包名 @opentiny/vue 导出名称 Loading
None 入门指导 华为云Astro企业应用服务 前端开发入门 04:50 登录页面设计开发 华为云Astro企业应用服务 后端开发入门 03:33 订单系统服务开发
前端开发视频指导 本视频通过创建一个简单的登录页面，帮助您快速上手AstroPro前端开发。 业务场景及设计流程说明 在AstroPro中，用户通过业务建模，可生成高可用、高可靠、以及安全稳定的企业级IT应用框架。本入门通过创建一个简单的订单系统，帮助您快速上手AstroPro。
后端开发视频指导 本视频通过创建一个简单的订单系统，帮助您快速上手AstroPro后端开发。 业务场景及设计流程说明 应用可以由一个或多个页面组成一个完整的业务系统。 本入门为创建一个简单的登录页面，帮助您快速上手AstroPro前端应用开发。登录页面中包括图片、文本、输入框和按
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区和右侧属性设置面板四个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。 ：清空当前画布内容。
初识应用设计器 设计前端应用流程 前端开发视频指导 创建前端应用 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
这样，其他服务可以通过这些客户端库以统一和简化的方式调用已有服务的接口，无需关心服务的具体实现细节。生成的客户端库可以作为服务间通信的标准工具，减少了重复的代码编写，提高了开发效率和代码的可重用性。 配置连接器为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro
troPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 您可以选择全量或指定部分文件内容。 图1 选择生成文件 单击“确定”，代码将下载至本地路径。
在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 选择已设计完成的页面，单击顶部工具栏。 在弹框中输入页面模板标题及模板描述。 图1 设置模板信息 单击“确定”，完成发布页面模板。发布完成后，可在模板管理中查看。 图2 查看页面模板
前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在设计器中可根据您的需求设计前端页面，可参考设计前端应用流程进行开发。 单击顶部工具栏的“下载源码”按钮，可根据配置的页面设计，生成应用的基本代码。 代码生成后，会下载至本地，供您使用。 删除前端应用 参考登录AstroP
用户预先定义好的数据传输对象（可选项） |-- utils # 工具类（必填项） |-- resources # 资源目录结构 |--
# 配置类（必填项） |-- utils # 工具类（必填项） |-- exception # 异常类（必填项） |--
选择“属性”，文本输入“设置/忘记密码”。 图9 整体页面效果 单击顶部工具栏的，保存页面设计。 步骤四：生成代码 根据配置的页面设计，生成应用的基本代码。代码生成后，会下载至本地，供您使用。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 图10 选择生成文件
ents两个子文件夹。 assets：作为存放项目特定资源的地方。 components：用来存放应用程序的组件代码，如自定义的类、服务、工具类等。 模板文件介绍 所有的自定义组件都在src/components文件夹里面内开发，模板内提供了两个预置模板componentA和co
设置组件样式 图8 设置组件高级属性 步骤五：生成代码 根据配置的页面设计，生成应用的基本代码。代码生成后，会下载至本地，供您使用。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 图9 选择生成文件 单击“确定”，代码将下载至本地路径。 父主题： 前端应用管理
样式管理 通过样式面板配置样式 直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理 使用JS面板 添加变量 物料中心 自定义组件开发指南 上传自定义组件物料包 更新自定义组件物料包 下载自定义组件物料包
67564435')，其中lowcode.67564435为词条的key值，可参考复制词条键值获取。 图6 绑定变量 单击“确定”，变量绑定完成。 单击顶部工具栏的中英文切换按钮，可进行中英文切换。 图7 中文显示 图8 切换英语 父主题： 前端应用管理
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
