正在生成
详细信息:
检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用模板创建页面 使用已创建的模板,一键生成页面,轻松实现个性化网站构建,节省时间,提高效率。 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击应用模块内的“应用开发”,进入设计器。 在左侧插件栏中,单击,进入“页面管理”页面。
组件是低代码开发的构建块,就像积木一样。它们是可重复使用的小部件,可以轻松搭建和管理网页。举个例子,按钮、导航栏和表单都可以是组件。这有助于您快速搭建网站。 下面介绍如何在低代码中使用组件,实现页面快速搭建。 从物料面板中添加组件 参考登录AstroPro界面中操作,登录AstroPro界面。
已参考申请AstroPro公测中操作,申请公测。 已参考购买基础版实例或购买专业版实例中操作,购买AstroPro实例。 操作步骤 使用华为账号,登录华为云网站。 在顶部导航栏右侧单击“控制台”,进入华为云控制台。 在“产品”中,选择“开发与运维 > 低代码平台 Astro > Astro企业应用
添加工具类 在常规代码开发中,通常会将一些高频率用到的一些代码片段抽离出来业务代码,使其成为一个公共函数,减少重复的代码,从而达到代码复用的目的。 同样,在低代码开发中,不可避免的需要编写一些高代码进行组合开发,这里同样存在存储一些公共函数以供各处调用需求。工具类就是在这样的背景
使用工具类方法 添加工具类 npm utils使用示例 function utils使用示例 父主题: 前端应用管理
InstanceManagement”系统策略,如图2。 图1 通过用户组为用户授权 图2 自定义用户组必须具备权限 用户申请角色 IAM用户1,登录华为云网站。 在顶部导航栏右侧单击“控制台”,进入华为云控制台。 在“产品”中,选择“开发与运维 > 低代码平台 Astro > Astro企业应用
function utils使用示例 添加function utils 在左侧插件栏中,单击,展开资源管理页面。 单击,进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称,并编写函数代码。 function isNil(value) { return
npm utils使用示例 本章节以按钮组件单击时显示Loading效果为例为您介绍npm utils的使用。 添加组件 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“应用开发”,进入设计器。
InstanceManagement”系统策略,如图3。 图2 通过用户组为用户授权 图3 自定义用户组必须具备权限 用户申请角色 IAM用户2,登录华为云网站。 在顶部导航栏右侧单击“控制台”,进入华为云控制台。 在“产品”中,选择“开发与运维 > 低代码平台 Astro > Astro企业应用
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区、右侧属性设置面板几个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括: :撤销上一步的操作。 :恢复上次撤销的内容。 :保存当前页面数据。 :发布页面模板。 :清空当前画布内容。
前端应用管理 初识应用设计器 设计前端应用流程 前端开发视频指导 前端应用管理 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
生成业务代码 使用说明 页面设计完成后,您可以根据配置生成应用的基本代码。代码生成后,会下载至本地,供您使用。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 选择待操作应用,单击模块内的“应用开发”,进入设计器。
发布页面模板 使用说明 页面设计完成后,您可以发布为页面模板。当您的业务与模板中的场景相似度较高时,可以直接使用该模板创建页面,并在模板的基础上继续改造页面。 前提条件 已完成页面设计并保存页面。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
base/service 工程目录结构 “代码风格 > 工程目录”设置为“base/service”时,会生成base、service和client(如servicedemo-client)三个模块。其中,client为客户端模块,在AstroPro中添加服务时,开启“是否生成客户端”配置后才会生成。
单Module 工程目录结构 “代码风格 > 工程目录”设置为“单Module”,仅会生成“src”一个模块,如图1所示。 图1 单Module 代码结构说明 代码结构说明中的“{biz}”,为在AstroPro的业务设计中定义的对象,如BO、Abstract BO等。 com.astropro
登录页面设计开发示例 业务场景及设计流程说明 应用可以由一个或多个页面组成一个完整的业务系统。 本入门为创建一个简单的登录页面,帮助您快速上手AstroPro前端应用开发。登录页面中包括图片、文本、输入框和按钮四个基础组件,且用到Box布局容器组件,便于整体排版布局。在Astro
设计前端应用流程 前端应用可以由一个或多个页面组成一个完整的业务系统。在AstroPro中,通过创建应用、(可选)创建文件夹、创建页面、页面设计和生成应用代码五步,即可快速完成前端应用设计,具体流程如图1所示。 图1 创建应用 步骤一:新建一个应用 参考登录AstroPro界面中操作,登录AstroPro界面。
自定义组件开发指南 在这个快速发展的前端开发时代中,组件化是构建可维护和可扩展应用程序的关键。 本章节帮助您了解自定义模板结构及开发流程。 模板结构介绍 public文件夹通常是用来存放 Web 应用程序的静态资源。 src文件夹是用来存放源代码文件,它包含assets和components两个子文件夹。
国际化资源管理 使用说明 同一个项目,可能需要同时支持多个语言,设计器提供了中英文切换,在能够一键切换语言,提升开发效率与开发体验。 国际化是应用级别的,在任何一个页面都可以访问。 注意的是国际化只针对画布中的项目,不针对设计器本身。 添加国际化词条 参考登录AstroPro界面中操作,登录AstroPro界面。
使用JS面板 在常规代码开发中,您需要为某个区块或者某个元素添加一些事件,比如单击事件,同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑,也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数,不能使用函数表达式声明函数,也不能在页面JS中定义其他的变量。