检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在AstroZero高级页面中使用轮播组件实现图片展示和URL跳转 期望实现效果 高级页面中的轮播组件主要用于多个图片的自动循环切换。您也可以为图片添加超链接,即单击图片,跳转到指定的网站。 图1 最终实现效果 功能实现方法 在应用设计器中,选择“界面”,单击高级页面后的“+”,新建一个高级页面。
在左侧导航栏中,选择“系统管理 > 域名配置”。 在右侧域名配置区域,单击“默认域名”后的“编辑”,设置默认域名,单击“保存”。 图1 设置域名 域名设置完成后,将域名分享给业务用户,业务用户在浏览器中输入域名,即可访问业务应用的登录页。 应用可见设置,支持一个运行环境同时部署面向不同用户类型的多个应用,不同的应用的登录入口都不相同。
e 此地址即为下一步需要访问的高级页面地址。 在无痕模式下,访问高级页面(即上一步改造后的地址)。 因高级页面中的跳转事件,访问高级页面时,将直接跳转至标准页面,在页面中提交打卡信息,验证页面功能。 图27 访问高级页面,验证页面功能 扩展知识 标准页面预置了二维码组件,用于生成
sys_portal_url 访问。 单击,设置默认域名,如https://example.com。 编辑平台域名。 平台域名是平台为当前环境分配的一个子域名,用于企业成员用户登录访问。 在右侧域名配置区域,单击“平台域名”后的“编辑”,编辑域名配置,单击“保存”。 域名设置完成后,将域名分享给业务
应用开发页面。 单击页面左上角的,选择“环境管理 > 环境配置”,进入环境配置页面。 在左侧导航栏中,选择“系统设置 > 域名与登录”。 单击平台域名后的“编辑”,进入编辑域名页面。 平台域名是平台为当前环境分配了一个子域名,用于企业成员用户登录访问。 图1 编辑平台域名 在输入框中,输入域名,单击“保存”。
联的页面名称,例如配置“详情页”、“新增页”、“修改页”的页面名称。如果在当前页面编辑数据,则清空“编辑数据的方式”值。 高级设置 高级设置仅在PC端生效。 调整列宽:是否支持拖拽调整列宽。 表头溢出省略:当每列的表头内容超过表格当前列宽后,是否设置超过的部分为省略号。 内容溢出
为AstroZero标准页面中表格的数据增加链接 期望实现效果 在标准页面中,支持为表格中的数据增加超链接,来提升用户体验和数据交互的便捷性。例如,在表格的webName列中,将鼠标移动至WEB A上在页面的左下角可查看到对应的链接地址,单击会跳转到对应的页面。 图1 实现效果 功能实现方法
要选用表格(新)中介绍的表格组件。 在标准页面设计界面,从“基本组件 > 布局”中,拖拽“表格(新)”组件至页面工作区域,如图1。 图1 表格(新) 查看组件帮助 将鼠标放在对应的组件上,单击,可查看组件说明。 图2 查看组件说明 属性 数据绑定:通过建立不同类型的视图模型,将各
跳转至其他页面,配置参数说明: 页面类型:设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。 高级页面、标准页面、外部页面:选择高级页面、标准页面或输入外部页面的地址。 动作参数:通过页面宏传递参数,可暂且不关注。 页面打开方式:设置跳转页面的打开方式,可选项包含当前浏览器窗口打开或新窗口打开。
te,单击Page1页面中的OK按钮,输入框中的数据会通过页面宏传递给Page2。 图1 页面间组件交互场景示例 页面间的组件交互原理如下图所示,在配置事件时,选择“默认”类别中的页面跳转,并通过新增动作参数将事件的参数传给页面宏,在跳转的目标页面中读取页面宏数据。 图2 Page传值原理
包含HTML5的DOCTYPE标签:勾选后,在发布后的页面中包含HTML5的DOCTYPE标签。 启用页面默认加载效果:勾选后,在发布页面时启用页面加载效果。 是否可匿名访问:勾选后,运行时访问此应用页面,如果请求携带的token超时或不属于当前租户,会自动刷新匿名访问token。
如果成功状态,通常会返回“Success”,其他情况会返回具体的错误信息。 result Array 参数解释: 成功返回会返回所有标准页面信息,以一个列表展示,每个值是一个标准页面。 请求示例 查询标准页面列表。 GET https://AstroZero域名/u-route/baas/metadata/v1
在应用设计器中,单击左侧导航栏中的“设置”。 在“高级设置”中,取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。 图5 取消选中 在应用设计器中,选择“界面”,单击高级页面后的“+”,新建一个高级页面。 在设计页面左上方单击,从“自定义”组件中拖拽3中的组件至右侧空白页面。 选中该组件,会在右侧显示该组件的属性配置面板。
如何实现页面组件间的交互 组件之间的交互主要依托数据的变化和传输实现,将组件的属性与对应的数据进行绑定。当其他组件的事件、服务编排、事件等使属性绑定值发生变化时,绑定的属性也随即发生变化,实现了组件之间的交互。 数据绑定方式 在标准页面开发界面,选中任意组件,在右侧“属性”页签进行数据绑定。
高级页面中预置的API 在开发高级页面过程中,系统为页面组件和桥接器提供了一些预置API。 组件 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明,请参见表1。
新建字段在系统中的标识,创建后不支持修改。命名要求如下: 长度不能超过63个字符,包括前缀命名空间的长度。 必须以英文字母开头,只能由英文字母,数字和单下划线组成,且不能以下划线结尾。 productName 字段类型 单击,在弹出的页面中,根据页面提供的参数解释,选择新建字段所属的类型。
如果成功状态,通常会返回“Success”,其他情况会返回具体的错误信息。 result Object 参数解释: 成功返回标准页面的详细信息。 请求示例 按照标准页面ID“003g000001DHkGa4LkkC”查询该应用详细信息。 GET https://AstroZero域名/u-route/baas/metadata/v1
同页面内组件的交互 组件中自定义事件、动作 若低代码平台预置的事件与动作不能满足您的开发需求,还可以在组件中对其进行自定义,以实现业务逻辑。 低代码平台提供的组件模板中,包含了事件和动作的模板组件(widgetEventTemplate、widgetActionTemplate)。在经典版管理中心的“应用管理
在左侧导航栏中,选择“全局元素 > 页面资产管理 > 页面模板”,可查看到当前环境该账号下已有的高级页面模板。 在页面模板列表中,单击具体页面模板后的,可预览相应的页面模板。 单击,在弹出的对话框中单击“确认”,即可删除相应的页面模板。 父主题: 管理应用中的页面资源
内置的模板代码,主要包括组件、消息&弹窗、页面、表单、表格、服务等。在编写JS代码时,可直接使用系统预置的API,相关API说明,请参见标准页面中预置的API。 图1 使用内置的模块代码 图2 内置模板代码 当代码较多时,可以单击代码编辑区域右上侧的,最大化代码编辑页面。 单击具体模板代码事件左侧的,可复制该模