检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
事件:事件编排器的入口,通过系统预置的事件编排器,或者直接定义JS代码,来实现页面组件与后台接口之间的交互。 库:加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成,用户可以在该页签下新增或删除某些库。
操作示例 将模板组件widgetEventTemplate(若widgetEventTemplate已上传,请不要重复上传)、widgetPageMacroTemplate上传至组件库,操作方法请参见在线开发高级组件中“上传自定义组件”。
页面间组件的交互 将模板组件widgetEventTemplate(如果widgetEventTemplate已上传,请不要重复上传)、widgetPageMacroTemplate上传至组件库,操作方法请参见在线开发AstroZero高级页面自定义组件中“上传自定义组件”。
在组件详情页面,单击“预览”,可在线预览组件模板。 下载组件模板 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。 在页面左上方单击,选择“环境管理 > 环境配置”,进入环境配置。 在顶部主菜单中,选择“维护”。
图1 事件、动作组件模板 组件模板中包含多种功能的示例组件,可以参考组件模板开发自定义组件,组件模板的下载及说明请参见在线开发高级组件。 在组件模板代码中,包含低代码平台定义的事件、动作的注册和触发API(应用程序接口),详细介绍如表1所示。
输入自定义JS代码,调用库中的方法获取git仓库的地址。 关于fetch的使用方法及介绍,请参考Fetch API。
表1 组件文件结构 文件名 文件说明 TabsWidget.js 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。
若为公共接口,支持查看接口参数并进行在线测试。若为私有接口,只可查看接口的入参和出参。 单击接口URL后的,可查看接口的参数。 若为公共接口,单击“测试一下”,填写输入参数,单击“执行”,可运行该接口。返回成功响应,表示接口调用成功。
若为公共接口,支持查看接口参数并进行在线测试。若为私有接口,只可查看接口的入参和出参。 图2 公共接口 图3 私有接口 单击接口URL后的,可查看接口的参数。 若为公共接口,单击“测试一下”,填写输入参数,单击“执行”,可运行该接口。返回成功响应,表示接口调用成功。
例如,MintUI库需要引入文件“js/index.js”和“css/index.css”,请在packageinfo.json中添加这两个文件的描述。其中,“js”和“css”用于定义文件类型,“name”用于定义文件路径及名称。
开发自定义组件前,请先了解JS和Vue相关知识,具备一定的JS和Vue开发经验。 自定义组件结构 自定义组件包,目录结构如下。
例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。
例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。
事件:进入事件编排器的入口,您可通过系统预置的事件编排器,或者直接通过定义JS代码,来实现页面组件与后台接口之间的交互。 库:加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成,用户可以在该页签下新增或删除某些库。
自定义校验:是否进行自定义校验,打开后需要设置校验JS代码。当输入框在表单组件中,该设置才会生效。 校验方法:输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。
主要事件说明 事件编排器说明 如何通过JS代码,实现页面与后台接口间的交互 页面级常见操作 控制组件是否可见可用可编辑 BPM相关预置事件说明 父主题: 标准页面
例如,MintUI库需要引入文件“js/index.js”和“css/index.css”,请在packageinfo.json中添加这两个文件的描述。其中,“js”和“css”用于定义文件类型,“name”用于定义文件路径及名称。
在“概况”页签下看查看该桥接器的描述信息;在“更改历史”可查看该桥接器的历史版本(按照版本依次排序显示,最近版本号在最上面),可下载、在线预览代码和发布上传不同版本的桥接器。 图15 图6 该桥接器详情页面 在组件中,配置该桥接器,详细操作请参见4。 父主题: 高级页面
图6 调试js代码 调试DOM及样式 在标准页面开发界面,单击,预览标准页面。 在弹出的预览页面,按“F12”或者“Ctrl + Shift + I”,开启浏览器调试工具。 在“Elements”页签,单击左边选择器。
+[a-z]{2,}$"); return reg.test(value); 校验错误信息 当“自定义校验”中,JS代码返回值类型为布尔类型时,会取该参数的值为错误提示信息。 当“自定义校验”中,JS代码返回值类型为对象类型时,直接取返回值中的message值为错误提示信息。