检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
单击具体模板代码事件左侧的,可复制该模板代码。复制后,可在右侧代码编辑区域中进行粘贴。 单击具体模板代码事件右侧的,可打开该模板代码进行编辑,编辑后支持拷贝。关闭模板代码后,模板代码还是初始代码,不会将您在模板代码中编辑后的内容,保存到该事件的模板代码中。 AI代码补全功能 功能描述
标准页面中预置的API 在开发标准页面时,可以通过编写JS代码,来实现页面组件与后台接口之间的交互。如图1所示,在编写JS代码时,可直接使用系统预置的API。 系统预置的API代码结构样例如下,提供事件上下文context,用于封装常用的对象及API。 context ├──$app
选择“自定义动作”,在右侧事件定义区域,输入实现事件逻辑的JS代码,也可从左侧拖动相关模板至右侧事件定义区域,单击“创建”。 内置JS事件说明及使用方法,请参见如何通过JS代码,实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下: //获取当前组件 var _component
从左侧“动作”区,设置“内置动作”或“自定义动作”,自定义动作需自定义JS代码逻辑,可单击代码区域右侧的,最大化自定义JS代码页面。 图1 页面自定义JS代码 在左侧模板代码中,单击服务编排或脚本左侧的,复制代码到右侧代码编辑区域,即可出现系统预置的经典接口。 图2 预置接口代码 方式二:通过定义服务模型实现 定义
查看解压后的组件目录。 目录结构如图3所示,其中userLogin.js文件是写vue业务逻辑的代码,userLogin.ftl用于写html代码,userLogin.css用于写样式代码,userLogin.editor.js以及packageinfo.json是配置文件。 图3 目录结构
在AstroZero中自定义高级页面组件(widget)时,修改了JS文件,修改部分不生效? 问题描述 修改自定义组件widget的JS文件后,修改部分未生效。 解决方法 自定义组件(widget)上传新的版本后,需要在“页面设置”中,对插件进行升级更新。升级后,js文件才能生效。 参考登录经典应用设计器操作,进入应用经典版设计器。
TypeScript执行引擎没有自带模块管理,嵌入引擎时,需要开发人员手动引用。 模块管理机制类似Node.js,但因为平台是基于数据库存放脚本,没有目录与路径的概念,所以下面的module管理只是一个简化版本的Node.js模块管理,也不支持npm的整套机制。 脚本文件和模块是一一对应的,每个脚本被视为一
如何检查页面性能 使用说明 低代码平台支持检查高级页面性能,生成性能报告页,供开发者查看。 操作步骤 确认高级页面属性开关“合并并压缩资源”已关闭。 参考登录经典应用设计器中操作,登录经典版应用设计器。 在应用设计器下方,选择“页面设置”。 获取锁后,在“属性”页签,去勾选“合并并压缩资源”。
API。 组件 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明,请参见表1。 表1 组件名.js中预置API说明 分类 API及说明 组件实例预置API
通过上传,新增该JS/CSS库,并在页面中设计并使用该库,实现引入第三方库的功能。 什么是库 库是指在设计页面时,需要依赖的库,如果缺少相应的依赖库,则页面中无法实现某些功能。例如,页面需要具有地图选址功能,则系统需要先加载百度地图库,才能实现相应的功能。低代码平台中的库,分为系统预置库和自定义库。
在“widget_demo_property.editor.js”的“propertiesConfig”中,定义Widget属性,包含属性的类型、名称和在界面展示的标签名。 如下加粗代码所示,“widget_demo_property.editor.js”中分别定义了text、 checkbox以及select类型的三个属性参数。
复杂的页面拆分成多个低耦合的模块,有助于代码维护。 使用语言 Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是可以自底向上逐层应用Vue。Vue易于上手,也便于与系统进行整合。 开发自定义组件前,请先了解JS和Vue相关知识,具备一定的JS和Vue开发经验。 自定义组件结构
json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。 { "js": [ {
TabsWidget.js 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属
单击上传按钮上传文件,由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点,因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点,按“F10”可跳转下一行,根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码 调试DOM及样式 在标准页面开发界面,单击,预览标准页面。
选中“按钮”组件,在“事件”页签,单击“点击”后面的“+”号,进入添加动作页面。 输入自定义JS代码,调用库中的方法获取git仓库的地址。 关于fetch的使用方法及介绍,请参考Fetch API。 图9 自定义JS代码 fetch('https://api.github.com/users/chriscoyier/repos')
文件说明 TabsWidget.js 组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明,请参见高级页面和Astro大屏应用中预置的API。 TabsWidget.editor.js 组件属性定义文件,负责组件在编辑状态时,需要渲染的界面和逻辑。“*
源码包主要用于同一租户内,在不同环境之间的资产迁移,以源环境的状态继续开发(类似自己的代码仓库),或者用于备份租户自己的代码,以便在需要恢复时使用。 跨账号或环境安装AstroZero低代码应用:AstroZero默认为每个账号分配了“我的仓库”,开发者开发好应用后,可将应用发
错误信息:正则表达式校验失败时,提示的错误信息。 自定义校验:是否进行自定义校验,打开后需要设置校验JS代码。当输入框在表单组件中,该设置才会生效。 校验方法:输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。 布尔类型:返回为“false”表示未通过校验,即校验失败,
主要事件说明 事件编排器说明 如何通过JS代码,实现页面与后台接口间的交互 页面级常见操作 控制组件是否可见可用可编辑 BPM相关预置事件说明 父主题: 标准页面