检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
标准页面 相对于高级页面,标准页面主要用于对前端页面的样式要求相对简单的场景,这种页面一般只是针对业务数据的增、删、改、查等基础功能。 标准页面主要是通过对前端页面组件的组合编排,以及为组件配置属性、关联事件实现业务功能的,在组装“编辑设备”页面章节,则会详细介绍组件、组件属性以及事件之间的调用及相关配置。
标准页面 AstroZero标准页面概述 创建空白AstroZero标准页面 使用模板创建AstroZero标准页面 为AstroZero标准页面添加组件 设置AstroZero标准页面组件属性 添加事件实现AstroZero组件间交互 添加库扩展AstroZero标准页面功能 查看AstroZero标准页面性能
标准页面 什么是标准页面 创建一个标准页面 开发调查问卷标准页面示例 标准页面布局 如何实现页面组件间的交互 如何实现页面转跳 如何获取后台数据 如何执行后台逻辑 如何调测标准页面 查看页面性能 主要事件说明 平台标准组件介绍 创建自定义标准组件 创建标准页面模板 如何自定义主题样式
和仪表板。 初识标准页面 将光标放在应用目录上之后,应用目录右侧会出现“+”,单击“+”,选择“标准页面”,设置页面标签和名称,即可创建一个全新空白的标准页面。页面创建后,自动进入标准页面开发界面,您可以阅读以下内容初步了解标准页面。 图1 标准页面开发界面 标准页面开发界面由四
标准页面布局 标准页面的布局设置一般有以下3种场景: 基础布局设置:适合对CSS与HTML不是非常了解的用户,通过在“基本属性”面板简单配置属性实现基本的布局。 自适应布局:适合使用标准页面在不同大小屏幕(PC、平板、手机等)下呈现出开发者想要的显示效果场景。 高级布局设置:针对
调测AstroZero标准页面 使用AstroZero完成标准页面开发后,需要进行预览调测、验证页面是否符合预期效果,例如根据相关数据判断页面逻辑是否正确执行。标准页面的调测分为“调试事件”和“调试页面样式”两类。 调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件,
标准页面组件入门 标准页面创建后,用户可以拖拽各种组件到页面中,并通过组件的属性面板,以设置属性方式,配置组件的功能、名称、宽/高/颜色等样式,丰富页面功能。部分属性支持国际化配置,在支持国际化多语言的属性配置中,可选择已有多语言、创建或更新多语言,此处创建的多语言会保存在租户的多语言库中。
如何调测标准页面 标准页面开发完成后,需要预览调测,验证页面是否实现了想要的效果。标准页面的调测分为调试事件和调试DOM及样式两类。 使用说明 标准页面开发完成后,需要预览调测,验证页面是否实现了预期效果。标准页面的调测分为调试事件和调试DOM及样式两类。 调试事件 打开一个标准页面。
标准页面专项 为AstroZero标准页面中表格的数据增加链接 为AstroZero标准页面中的表格增加求和等计算能力 为AstroZero调查问卷应用新增调查项 在AstroZero标准页面的表格中显示图片
设置AstroZero标准页面上传组件属性 在标准页面中,使用上传组件来上传文件。 图1 上传组件 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑
图片压缩至指定大小(kb):将图片压缩至指定的大小以下。当“图片压缩”开关打开时,该参数才会显示。 公开读:文件的访问控制权限,默认为“private”(私有),否则为“public-read”(公共读)。 可选择:文件列表是否可以选择,仅为图片时有效。 是否多选:文件列表是否支持多选。
设置AstroZero标准页面容器组件属性 标准页面提供了流式布局(Flow Layout)和弹性布局(Flex Layout),标准页面的基础布局主要是通过“容器”组件实现的。 容器组件就是基础的布局容器,可以将其理解为CSS中DIV的概念。DIV是层叠样式表中的定位技术,全称
设置AstroZero标准页面模态框组件 模态框作为一个模态对话框的容器,支持向模态框中拖入各种组件,用于在模态框弹出时,用户必须先响应模态框后,才能对其他对象进行操作的场景。 模态对话框功能:当一个模态对话框弹出时,用户想要对模态框以外的应用程序进行操作时,必须先对该对话框进行
参考登录经典应用设计器中,进入经典版应用设计器。 在左侧导航栏中,单击。 鼠标放在应用下的页面文件夹上,单击加号,选择“标准页面”,也可以参考什么是标准页面来创建标准页面。 页面开发完成后,单击页面上方的。 在“另存为...”页面中,设置模板标签和模板名,打开“另存为模板”开关,单击“创建”,将应用另存为模板。
设置AstroZero标准页面按钮组件属性 按钮一般在用户单击触发业务逻辑时使用,按钮组件提供单击触发事件能力。 图1 按钮组件 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法
设置AstroZero标准页面表格(新)组件属性 表格(新)为数据表格组件,主要用于展示大量的结构化数据,支持电脑端和移动端。使用时,需要先通过数据绑定来绑定数据模型,再设置表格属性。 表格(新)相对于设置AstroZero标准页面表格组件属性中的表格组件来说,更适用于移动端,但
设置AstroZero标准页面分栏组件属性 分栏是一种高级的容器组件,分栏相当于行,内部可分多栏(列)。使用该组件,可将页面划分为两栏或多栏,每一栏都可以拖入其它组件。 图1 分栏组件 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。
于模板创建一个标准页面。页面创建后,自动进入标准页面开发界面,您可以阅读以下内容初步了解标准页面。 图1 标准页面开发界面 标准页面开发界面由左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域四部分组成。各区域功能介绍,请参见表1。 表1 标准页面区域功能说明 分类
设置AstroZero标准页面输入框组件属性 输入框是基础输入组件,输入框中的内容可以通过鼠标或键盘输入。输入框一般在有需要输入内容、提供组合型条件查询或有其他资料需要提交时使用。 图1 输入框组件 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。
查看AstroZero标准页面性能 使用AstroZero完成标准页面开发后,支持检查标准页面性能,生成性能报告页供开发者查看。 查看页面性能 打开一个标准页面。 在标准页面右上方,单击“性能分析”,系统会检查页面性能,并打开“页面性能分析”页面。 图1 性能分析 图2 页面性能分析