检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在AstroZero高级页面中,如何实现所有组件都加载完成后,再执行某段逻辑? 问题描述 高级页面开发中,需要在所有组件都加载完成后,再执行某段逻辑,该如何处理? 解决方法 可通过绑定readerPageWidgetReady事件实现,代码示例如下: $(document).bi
选择“标准页面”,设置页面标签和名称,即可创建一个全新空白的标准页面。页面创建后,自动进入标准页面开发界面,您可以阅读以下内容初步了解标准页面。 图1 标准页面开发界面 标准页面开发界面由四部分组成,分别是:左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域,具体功能说明如下表所示。
参考登录AstroZero新版应用设计器中操作,登录应用设计器。 在左侧导航栏中,选择“界面”。 (可选)单击高级页面后的,为高级页面添加目录。 高级页面默认存放在根目录下,在创建高级页面前,您可以先创建高级页面存放的目录,也可以在高级页面创建后将其拖拽到指定目录。 将鼠标放在已创建的高级页面目录上,单击,进入添加高级页面。
型字段的值变化而变化,类似Vue的v-bind。 在“数据绑定”中,单击“属性值绑定”后的“+”。 在“属性”下拉框中,选择容器的某个属性。 在模型字段中,单击,进入选择模型页面。 单击“新增模型”,进入新增模型页面。 设置模型名称与来源,单击“下一步”。 AstroZero支持
值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中,单击“值(value)绑定”中的,进入选择模型页面。 单击“新增模型”,进入新增模型页面。 设置模型名称与来源,单击“下一步”。
中操作,为标准页面添加组件。 参考设置AstroZero标准页面组件属性中操作,设置标准页面组件属性。 参考添加事件实现AstroZero组件间交互中操作,为组件添加交互动作。 设计完成后,单击页面上方的,保存标准页面。 保存成功后,单击,预览标准页面。 如果预览效果和预期不符,可返回标准页面进行修改,直至符合预期。
将开发完的自定义组件上传到组件库,并在高级页面中使用。 本章节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。参考消费者业务网站(如图1所示),页面中主要包含标签栏和详情展示模块两部分,可以通过切换标签来控制详情展示模块中的展示内容。 图1 消费者业务网站示例 本章节主要在高级页面中,通过
PROXY类型连接器,选择具体的存储桶、连接器实现获取图片功能。 连接器:OBS/MINIO/OBJECTSTORAGEPROXY类型的连接器。 桶:OBS/MINIO类型连接器的存储桶。 SFTP:选择SFTP后,图片将加密上传至nginx服务器的本地文件系统中。 OBS/MI
根据ID查询标准页面 功能介绍 按view_id查询标准页面。 URI GET AstroZero域名/u-route/baas/metadata/v1.0/View/{view_id} 表1 参数说明 参数 是否必选 参数类型 描述 view_id 是 String 参数解释:
如何调测前台页面 使用说明 在高级页面开发过程中,常需要调测自定义组件或整个前台页面,本节将介绍高级页面调测的常用工具。对于自定义组件的开发和调试,AstroZero提供Scaffolding脚手架工具,可实现本地开发组件的实时在线调测。对于前台页面中常遇到的样式或功能问题,可借
控件名称:设置容器组件在页面的显示名称。 隐藏:预览标准页面时,是否隐藏容器组件。 样式 针对有丰富前端开发经验的用户,可通过“样式”面板对页面进行更深度的个性化布局定制。 布局:对页面CSS属性进行直接配置,如设置组件的宽度、高度等。您也可以在“高级设置”中,直接编写CSS代码进行更深度的个性化布局定制。
BPM与页面的交互模式采用了业界“依赖反转”的设计模式。一般情况下,页面之间的跳转应该在页面的事件代码中定义,但在页面上是无法确定下一步应该做什么,因此,又需要依赖BPM进行页面的跳转,即“依赖反转”。这种做法的好处在于,可以复用页面而无需考虑页面的下一步是什么。 在标准页面中与BPM交互
cache”属性 在已发布的高级页面上方,单击“性能分析”,进入页面性能分析报告页面。 开发者工具请保持打开状态,关闭后“Disable cache”属性会自动不勾选。同时请确保高级页面已发布,若未发布,单击高级页面上方的,发布页面。 图3 查看性能分析报告 在页面性能报告中,单击各指标后的“展开”,可查看性能指标详情。
标准页面 相对于高级页面,标准页面主要用于对前端页面的样式要求相对简单的场景,这种页面一般只是针对业务数据的增、删、改、查等基础功能。 标准页面主要是通过对前端页面组件的组合编排,以及为组件配置属性、关联事件实现业务功能的,在组装“编辑设备”页面章节,则会详细介绍组件、组件属性以及事件之间的调用及相关配置。
设置AstroZero高级页面文本编辑组件属性 文本编辑是文本组件的一种,用于显示多行文本。 图1 属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。 距离顶端:组件到页面顶部的距离,单位为px。
设置AstroZero高级页面基本饼图组件属性 基本饼图是饼图图表的一种,用于实现饼图图表统计。 图1 属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。 距离
设置AstroZero高级页面散点图组件属性 散点图组件主要使用散点的形式展示数据。气泡图和散点图类似,气泡图使用气泡来展示数据。 图1 设置散点图属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。
设置AstroZero高级页面基本柱图组件属性 基本柱图是柱状图的一种,通过柱形图来呈现数据整体的表现。 图1 设置基本柱图属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。
型字段的值变化而变化,类似Vue的v-bind。 在“数据绑定”中,单击“属性值绑定”后的“+”。 在“属性”下拉框中,选择容器的某个属性。 在模型字段中,单击,进入选择模型页面。 单击“新增模型”,进入新增模型页面。 设置模型名称与来源,单击“下一步”。 AstroZero支持
将AstroZero标准页面保存为模板 标准页面开发完成后,支持将该页面保存为模板。标准页面保存为模板后,该开发者用户、注册AstroZero的华为账号、华为账号下其他AstroZero开发者可直接使用该页面模板来创建标准页面。 自定义标准模板 参考登录AstroZero新版应用设计器中操作,进入应用设计器。