检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
修改统计页面 统计页面创建完成后,支持对已创建的统计图表进行二次开发。 修改统计页面 参考登录零代码工作台中操作,登录AstroZero零代码工作台。 在全部应用中,单击应用后的“...”,选择“编辑”,进入编辑应用页面。 单击页面右上角的“查看统计”,进入统计页面。 单击已有统
、查。 基础详情页面:基础的详情页面。 自定义模板(我的模板) 用户自定义的页面模板,开发好页面后,单击上方的另存为,即可创建自定义页面模板。创建后,该开发者用户、注册AstroZero的账号、账号下其他AstroZero用户都可直接使用该页面模板来创建标准页面。 使用预置模板创建标准页面
标准页面组件入门 标准页面创建后,用户可以拖拽各种组件到页面中,并通过组件的属性面板,以设置属性方式,配置组件的功能、名称、宽/高/颜色等样式,丰富页面功能。部分属性支持国际化配置,在支持国际化多语言的属性配置中,可选择已有多语言、创建或更新多语言,此处创建的多语言会保存在租户的多语言库中。
使用模式:设置表格的使用模式,如管理模式、只读模式和勾选模式。 数据操作页面:编辑表格中数据的方式,可以设置“链接到页面”编辑数据。设置“链接到页面”时需要配置关联的页面名称,例如配置“详情页”、“新增页”、“修改页”的页面名称。如果在当前页面编辑数据,则清空“编辑数据的方式”值。 高级设置 高级设置仅在PC端生效。
扩展组件:用户自定义的组件,自定义组件由用户在线下开发完成并上传到低代码平台,用于丰富页面组件的功能。 工作区域 编辑页面内容及页面视图区域,在页面布局设计操作区域,完成对页面具体布局、组件放置等操作。 设计视图:页面默认视图,在此视图下通过拖拉拽的方式对需要在页面布局中展示的组件
型字段的值变化而变化,类似Vue的v-bind。 在“数据绑定”中,单击“属性值绑定”后的“+”。 在“属性”下拉框中,选择容器的某个属性。 在模型字段中,单击,进入选择模型页面。 单击“新增模型”,进入新增模型页面。 设置模型名称与来源,单击“下一步”。 AstroZero支持
数据绑定配置面板 值绑定 值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明,新建一个标准页面,向页面中拖动一个“按钮”组件和一个“模态框”组件。
如何调测前台页面 使用说明 在高级页面开发过程中,常需要调测自定义组件或整个前台页面,本节将介绍高级页面调测的常用工具。对于自定义组件的开发和调试,AstroZero提供Scaffolding脚手架工具,可实现本地开发组件的实时在线调测。对于前台页面中常遇到的样式或功能问题,可借
设置AstroZero高级页面水位图组件属性 水位图组件用于实现水位图的统计。 图1 设置水位图属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。 距离顶端:组件到页面顶部的距离,单位为px。
在应用设计器中,单击左侧导航栏中的“界面”。 单击高级页面后的,设置页面的名称和标题为monitor,单击“添加”。 在高级页面左上方,单击,从“全部 > 自定义”中,拖拽alarmDisplayWidget至右侧画布中。 图12 拖拽alarmDisplayWidget至右侧画布中 调
同页面内组件的交互 组件中自定义事件、动作 若低代码平台预置的事件与动作不能满足您的开发需求,还可以在组件中对其进行自定义,以实现业务逻辑。 低代码平台提供的组件模板中,包含了事件和动作的模板组件(widgetEventTemplate、widgetActionTemplate)。在经典版管理中心的“应用管理
值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中,单击“值(value)绑定”中的,进入选择模型页面。 单击“新增模型”,进入新增模型页面。 设置模型名称与来源,单击“下一步”。
设置AstroZero高级页面雷达图组件属性 雷达图是指通过极坐标的展现形式,使用围合的区域,来表示数据在不同维度的具体表现。 图1 设置雷达图属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。
高级布局设置:针对有丰富前端开发经验的用户,通过“样式”面板对页面进行更深度的个性化布局定制。 基础布局设置 标准页面提了流式布局(Flow Layout)和弹性布局(Flex Layout),标准页面的基础布局主要是通过“容器”组件实现的。 容器组件就是基础的布局容器,可以将其理解为CSS中DIV的概念
查看AstroZero标准页面性能 使用AstroZero完成标准页面开发后,支持检查标准页面性能,生成性能报告页供开发者查看。 查看页面性能 打开一个标准页面。 在标准页面右上方,单击“性能分析”,系统会检查页面性能,并打开“页面性能分析”页面。 图1 性能分析 图2 页面性能分析 查看页面性能报告。
调测AstroZero高级页面 在高级页面开发过程中,经常需要调测整个前台页面。对于前台页面中常遇到的样式或功能问题,可借助浏览器内置的开发者工具来对问题进行调试和定位。 前台页面常用调测方法 在高级页面的开发中,常借助浏览器内置的开发者工具对样式或功能问题进行定位和分析。下面以
设置AstroZero高级页面自定义背景框组件属性 自定义背景框用于在页面添加遮罩层或背景。 图1 设置自定义背景框属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。
查看AstroZero高级页面性能 使用AstroZero开发完高级页面后,支持检查高级页面性能,生成性能报告页,供开发者查看。 检查页面性能 打开要进行性能检查的高级页面,在浏览器开发者工具中,勾选“Disable cache”属性。 在Chrome浏览器中,按下“F12”或者“Ctrl
设置AstroZero高级页面基本折线图组件属性 基本折线图是折线图的一种,用于实现折线图图表统计。 图1 设置基本折线图属性 基础 组件标题:设置组件的标题,用于在高级页面显示。 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。 位置 距离左端:组件到页面左侧的距离,单位为px。
页面列表 “页面类型”选择“标准页面”或“高级页面”时,需要在页面列表中选择需要跳转的已创建的“标准页面”或“高级页面”。 “页面类型”选择“自定义页面地址”时,请直接输入需要跳转的页面地址。 打开新页面:是否在新页面,打开目标页面。 设置完成后,单击“确定”,将自动生成转跳代码至剪切板,只需要粘贴到面板即可。