检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
上传自定义登录组件 自定义登录组件开发完成，并上传到AstroZero后，才能通过高级页面调用。 您可以直接使用文中提供的已开发完成的登录组件，上传到AstroZero中。也可以自行在AstroZero上，下载自定义组件模板，进行线下开发，然后再上传到AstroZero中。 操作步骤
全局高级组件 轮播 图片 文本 自定义背景框 基本柱图 基本折线图 基本饼图 水位图 散点图 雷达图 仪表盘 翻牌器 路由导航和路由视图 父主题： 高级页面
设置AstroZero高级页面基本折线图组件属性 基本折线图是折线图的一种，用于实现折线图图表统计。 图1 设置基本折线图属性 基础 组件标题：设置组件的标题，用于在高级页面显示。 组件名称：设置组件的名称，名称是该组件在页面中的唯一标识。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。
视频播放 视频播放组件用于播放视频，支持MP4、OGV和WebM格式。 在标准页面设计界面，从“基本组件 > 高级”中，拖拽“视频播放”组件至页面工作区域，如图1。 图1 视频播放 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。 图2 查看组件说明 属性 数据绑定：
高级页面中预置的API 在开发高级页面过程中，系统为页面组件和桥接器提供了一些预置API。 组件 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见表1。
设置AstroZero高级页面仪表盘组件属性 仪表盘是指通过仪表的特殊展示方式，对数据进行展示。 图1 设置仪表盘组件属性 基础 组件标题：设置组件的标题，用于在高级页面显示。 组件名称：设置组件的名称，名称是该组件在页面中的唯一标识。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。
步骤二：上传自定义登录组件 自定义组件开发完成后，需要上传到AstroZero组件库中，供高级页面使用。 在AstroZero环境配置页面，单击主菜单中的“维护”。 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件”。 单击“提交新组件”，进入提交新组件页面。 单击“上传”，上传自定义组件包“userLogin
分栏是一种高级的容器组件，分栏相当于行，内部可分多栏（列）。使用该组件，可将页面划分为两栏或多栏，每一栏都可以拖入其它组件。 在标准页面设计界面，从“基本组件”中，拖拽“分栏”组件至页面工作区域，如图1。 图1 分栏 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。 图2 查看组件说明
按钮一般在用户单击触发业务逻辑时使用，按钮组件提供单击触发事件能力。 在标准页面设计界面，从“基本组件 > 基本”中，拖拽“按钮”组件至页面工作区域，如图1。 图1 按钮 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。 图2 查看组件说明 属性 数据绑定：通过建立不同类型
文本 文本编辑器组件，用于在页面插入文字。 在高级页面设计器中，单击，从“文本 > 通用”中，拖拽“文本”组件到画布中，如图1所示。 图1 文本 属性 在属性中，设置文本组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距
通过宏实现AstroZero高级页面间组件的交互 操作场景 页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widget
图1 进入表单编辑页面 在左侧“数据组件”中，拖拽“关联组件”到画布中间。 图2 拖拽关联组件到画布中间 在右侧属性面板中，设置关联组件属性。 图3 设置关联组件属性 显示名称：修改为“热卖午餐”。 关联目标：设置为“菜品信息”中的“热卖中”。 显示方式：设置为“选项列表”，并设置为“竖排”。
在设计页面左上方，单击，从“导航”的自定义组件中，拖拽11中上传的组件到设计区。 选中该组件，在“路由”页签，配置不同路由关联的页面。 自定义组件的“路由”页签中，出现了页面3，结果符合场景要求。 图8 拖拽自定义组件并配置路由 在设计页面左上方，单击，从“导航”中拖拽路由视图组件至设计页面自定义组件下方。 单击页面上方的，保存页面。
面包屑 面包屑组件用于显示网站的层级结构，告知用户当前所在位置以及在需要向上级导航时显示。 在标准页面设计界面，从“基本组件 > 基本”中，拖拽“面包屑”组件至页面工作区域，如图1。 图1 面包屑 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。 图2 查看组件说明 属性
轮播是媒体组件的一种，是多图片轮播组件，可实现多图片的切换和对应事件。 在高级页面设计器中，单击，从“媒体 > 通用”中，拖拽“轮播”组件到画布中，如图1所示。 图1 轮播 属性 在属性中，设置轮播组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。
属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都
基本柱图组件用于实现柱状图的图表统计。 在高级页面设计器中，单击，从“图表 > 柱状图”中，拖拽“基本柱图”组件到画布中，如图1所示。 图1 基本柱图 属性 在属性中，设置基本柱图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。
水位图 水位图组件用于实现水位图的统计。 在高级页面设计器中，单击，从“图表 > 水位图”中，拖拽“基本饼图”组件到画布中，如图1所示。 图1 水位图 属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置
公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 禁用：是否禁用该组件。 只读：值是否只读。 样式
在高级页面设计器中，单击，从“图表 > 饼图”中，拖拽“基本饼图”组件到画布中，如图1所示。 图1 基本饼图 属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
