- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
-
用户指南(低代码)
- AstroZero低代码使用流程
- 授权用户使用AstroZero并购买实例
- 添加AstroZero开发者用户
- 使用AstroZero创建应用
-
使用AstroZero开发应用后端
- 应用后端开发概述
- 对象
- 事件
- 脚本
-
服务编排
- AstroZero服务编排概述
- 创建空白AstroZero服务编排
- 定制已有AstroZero服务编排
-
为AstroZero服务编排设置图元
- 为AstroZero服务编排添加子服务编排图元
- 为AstroZero服务编排添加脚本图元
- 为AstroZero服务编排添加记录创建图元
- 为AstroZero服务编排添加记录删除图元
- 为AstroZero服务编排添加记录查询图元
- 为AstroZero服务编排添加记录更新图元
- 为AstroZero服务编排添加发送邮件图元
- 为AstroZero服务编排添加发送事件图元
- 为AstroZero服务编排添加赋值图元
- 为AstroZero服务编排添加循环图元
- 为AstroZero服务编排添加跳出循环图元
- 为AstroZero服务编排添加决策图元
- 为AstroZero服务编排添加等待图元
- 为AstroZero服务编排添加BO图元
- 为AstroZero服务编排添加连接器图元
- 为AstroZero服务编排添加生成文档图元
- 管理AstroZero服务编排
- 自定义AstroZero服务编排的URL
- 触发器
- 工作流
- 定时任务
-
使用AstroZero开发应用前端
- 应用前端开发概述
-
标准页面
- AstroZero标准页面概述
- 创建空白AstroZero标准页面
- 使用模板创建AstroZero标准页面
- 为AstroZero标准页面添加组件
-
设置AstroZero标准页面组件属性
- 设置AstroZero标准页面容器组件属性
- 设置AstroZero标准页面表单组件属性
- 设置AstroZero标准页面表格组件属性
- 设置AstroZero标准页面分栏组件属性
- 设置AstroZero标准页面栅格容器组件属性
- 设置AstroZero标准页面列表视图组件属性
- 设置AstroZero标准页面表格(新)组件属性
- 设置AstroZero标准页面图片组件属性
- 设置AstroZero标准页面二维码组件属性
- 设置AstroZero标准页面分页组件属性
- 设置AstroZero标准页面模态框组件
- 设置AstroZero标准页面输入框组件属性
- 设置AstroZero标准页面下拉框组件属性
- 设置AstroZero标准页面按钮组件属性
- 设置AstroZero标准页面上传组件属性
- 设置AstroZero标准页面面包屑组件属性
- 设置AstroZero标准页面视频播放组件属性
- 添加事件实现AstroZero组件间交互
- 添加库扩展AstroZero标准页面功能
- 查看AstroZero标准页面性能
- 调测AstroZero标准页面
- 将AstroZero标准页面保存为模板
- 管理AstroZero标准页面
-
高级页面
- AstroZero高级页面概述
- 创建AstroZero高级页面
- 为AstroZero高级页面添加组件
-
设置AstroZero高级页面预置组件属性
- 设置AstroZero高级页面轮播组件属性
- 设置AstroZero高级页面图片组件属性
- 设置AstroZero高级页面文本编辑组件属性
- 设置AstroZero高级页面自定义背景框组件属性
- 设置AstroZero高级页面基本柱图组件属性
- 设置AstroZero高级页面基本折线图组件属性
- 设置AstroZero高级页面基本饼图组件属性
- 设置AstroZero高级页面水位图组件属性
- 设置AstroZero高级页面散点图组件属性
- 设置AstroZero高级页面雷达图组件属性
- 设置AstroZero高级页面仪表盘组件属性
- 设置AstroZero高级页面翻牌器组件属性
- 设置AstroZero高级页面路由导航和路由视图组件属性
- 为AstroZero高级页面添加自定义组件
- 为AstroZero高级页面组件绑定数据
- 添加事件或宏实现AstroZero高级页面组件交互
- 调测AstroZero高级页面
- 查看AstroZero高级页面性能
- 管理AstroZero高级页面
- 报表
- 使用AstroZero进行应用集成开发
- 使用AstroZero对应用进行个性化设置
- 发布并部署AstroZero开发的应用
- 管理AstroZero中已安装的应用
- AstroZero低代码平台管理中心
-
经典版开发指导
- 经典版入门必读
- 应用
- 对象
- 标准页面
- 高级页面
- 服务编排
- 脚本开发
- BPM服务编排
- API接口
- 集成开发
- 消息事件
- 触发器
- 报表和仪表板
- CICD持续集成与交付
- 服务组件(BO)
- 调测能力
- 工程能力
- 原生服务
- 其他功能
- 管理中心
- 白名单特性
- 用户指南(零代码)
- 最佳实践
- API参考
-
常见问题
- 高频常见问题
- 产品咨询类
-
应用后端开发
- 如何区分不同账户间的数据库对象?
- 在AstroZero对象中删除字段后重新创建时,引用的地方报错
- 如何刷新AstroZero对象的页面布局?
- 如何彻底删除AstroZero应用目录树中的数据?
- AstroZero自定义对象预置的owner字段,用于记录什么用户?
- AstroZero脚本支持使用哪些语言和库?
- 在AstroZero脚本中执行sql语句时,可以不用@useObject修饰数据对象吗?
- 在AstroZero脚本中,如何返回zip压缩文件内容?
- 如何通过AstroZero脚本,导出xls文件让用户下载?
- AstroZero脚本中是否支持multipart/form-data请求?
- AstroZero服务编排中涉及数据操作的脚本图元,在其他图元操作失败的情况下,是否可以回滚?
- 事件触发的AstroZero服务编排,发送事件后,服务编排没有运行?
- 在AstroZero服务编排或工作流中,引用的资源无法编辑
- 如何实现一个资源被多个AstroZero应用的服务编排调用?
- 在AstroZero服务编排中,支持跨应用引用资源吗?
- 在AstroZero服务编排、工作流或脚本中,邮件发送功能不可用?
- AstroZero开发者如何使用自己的邮箱发送邮件?
-
应用前端开发
- 在AstroZero标准页面中,如何调用服务编排或脚本?
- 在AstroZero标准页面组件较多时,如何快速选中组件?
- 表格字段太多,导致AstroZero标准页面无法完整显示,该如何处理?
- 在AstroZero标准页面中,如何实现有子表的表格?
- 在AstroZero标准页面中,如何实现下拉框选项值的筛选功能?
- 在AstroZero标准页面中,如何实现移动端上拉异步加载数据功能?
- 如何查看AstroZero标准页面的URL格式?
- 在AstroZero标准页面弹窗的onOk事件中,不想关闭弹窗该怎么处理?
- 在AstroZero中编排高级页面时,如何实现不加载组件库资源?
- 在AstroZero中自定义高级页面组件(widget)时,修改了JS文件,修改部分不生效?
- 在AstroZero组件库中,部分组件在组件详情页看不到更新和编辑入口
- 在AstroZero高级页面中,如何进行统一的HTTP状态拦截?
- 配置高级页面组件桥接器实例属性时,如何设置下拉框中的选项值?
- 在AstroZero高级页面中,如何实现所有组件都加载完成后,再执行某段逻辑?
- 在AstroZero中,如何实现多人协作开发?
- 在AstroZero运行环境中,如何实现游客访问标准页面?
- 应用发布与部署
- Astro轻应用平台管理中心
- 视频帮助
- 文档下载
- 通用参考
链接复制成功!
如何引入第三方库
使用说明
在高级页面组件开发过程中,低代码平台支持开发者直接引用第三方库,在降低组件开发复杂度的同时,丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖,若缺少相应的库,则高级页面组件不能正常运行。
低代码平台提供了一些系统预置库,若不满足现有需求,支持开发者制作并上传新的库。
- 系统预置库
系统预置库是平台已定义好的库,可在高级页面组件中直接引用或在页面设置中直接进行加载并使用。在经典版应用设计器的左侧列表中,单击
,在“高级页面 > 库 > 全局”中,可查看预置库。
图1 查看系统预置库说明:
系统预置库的版本号是在资源上传或更新时,平台赋予的版本管理号,和实际官网版本不存在对应关系。
场景描述
本章节以某Widget中需要使用Vue(系统预置库)以及MintUI(自定义库)为例,介绍如何上传自定义库,并在Widget使用库。
操作步骤
- 将自定义库MintUI的相关文件打成Zip包。
例如,在MintUI官网下载组件库的代码,增加一个packageinfo.json元数据描述文件,在该文件中列出Library包含的js和css文件名,并打成Zip包,如图2。您也可以单击链接,获取该包。
packageinfo.json中必选要包含待引入的文件。例如,MintUI库需要引入文件“js/index.js”和“css/index.css”,请在packageinfo.json中添加这两个文件的描述。其中,“js”和“css”用于定义文件类型,“name”用于定义文件路径及名称。
{ "js": [ { "name": "js/index" } ], "css": [ { "name": "css/index" } ] }
- 上传自定义库。
- 参考登录经典应用设计器中操作,登录经典版应用设计器。
- 在左侧列表中,单击
,选择“高级页面 > 库”。
- 单击“提交新库”,进入提交新库页面。
- 设置库的基本信息,上传1中的zip包后,单击“提交”。
表1 上传组件参数说明 参数
说明
名字
新建库的名称。
上传图标
库的显示图标。
上传源文件
库文件包。
库ID
上传库的ID,由字母及数字组成,且必须以字母开头。
分类
库所属的分类。
库类型
上传的库,所属的类型。
发行说明
上传库的发布描述信息。
上传成功后,在库的“租户”中,可查看到上传的库。
图3 上传完成说明:
“全局”页签中的库,是系统预置的库,不可编辑和禁用,只能下载。
- (可选)查看该库的版本号和库ID。
单击已上传的组件,进入库的详情页面,即可查看到库ID。在详情页的“更改历史”中,可查看库的版本号(按照版本依次排序显示,最近版本号在最上面)。
图4 库详情页说明:
库详情页面中的库ID和版本号,在高级页面组件中引用库时,会使用到。
- 高级页面组件中,引用库。
以自定义组件(widget_demo_mintui)为例,在该组件引用第三方库,单击widget_demo_mintui.zip,获取该组件包。
- 在组件包的“packageinfo.json”文件中,增加requires节点,指定需要依赖库的库ID和版本号。
其中,“name”为库ID、“version”为库版本号数字部分。
例如,增加如下requires节点,库文件名称和版本号在库详情页面获取。"requires": [ { "name": "global_Vue", "version": "100.7" }, { "name": "t0000000000fcsfrfcaks_MintUI", "version": "1.0" } ]
注意:
在“requires”里增加库文件时,需要注意某些库文件之间有依赖关系,增加库文件需要有先后顺序,例如“global_VueI18n”是基于“global_Vue”的,需要写在“global_Vue”之后。
- 在高级页面组件包的widget_demo_mintui.ftl中,写一个简单的表单DOM。
<div id="widget_demo_mintui"> <mt-field label="username" placeholder="Input username" v-model="username"></mt-field> <mt-field label="email" placeholder="Input email" type="email" v-model="email"></mt-field> <mt-field label="password" placeholder="Input password" type="password" v-modal="password"></mt-field> <mt-button type="primary" @click="submit">Register</mt-button> </div>
- 在高级页面组件包的widget_demo_mintui.js/render方法中,新增Vue实例。
更多关于Vue的使用,可参考Vue官网。
Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui", elem)[0], data:{ username: "", email: "", password: "" }, methods:{ submit: function(){ console.log(this.username + " registers"); } } })
- 将修改后的组件Widget包,重新打包。
- 参考开发高级组件中操作,将高级页面组件包上传至组件库中,在页面上中添加该高级页面组件。
说明:
当高级页面中拖入widget_demo_mintui高级页面组件后,即可在“页面设置 > 资源”中发现Vue库和MintUI库已加载,表示引用成功。
图5 库的引用情况 - 保存发布页面,页面效果如下图所示。
图6 页面效果
- (可选)当该方式上传的Library有新版本时,需要执行该操作。
- 在该Library详情页面,单击“更新”。
- 选择新的Library包单击“上传”,再单击“更新”,更新资产库中的Library。
- 进入经典版应用设计器,在左侧菜单栏下方选择“页面设置”。
- 在“资源”页签,单击该Library所在行的
,更新站点内的Library。
- 在使用到该Library的页面中,重新保存发布即可更新。
- 在组件包的“packageinfo.json”文件中,增加requires节点,指定需要依赖库的库ID和版本号。
- 页面设置加载使用库。
- 在经典版应用设计器的左侧菜单栏下方,选择“页面设置”。
- 在“资源”页签,单击“新建资源”。
图7 在站点内引用库
- 在“新建资源”页面,选择资源库,设置作用域,单击“新增”。
图8 新建资源