组件库|飞书低代码平台

组件库|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
功能介绍
「组件库」主要用于组件的共享。
如果你开发了一个比较通用的能力,比如:一个“轮播图”组件、一个“进度条”样式,或者一个“与外部系统打通”的脚本,想要在自己的多个应用中复用,或者提供给其他企业内成员使用,就可以使用「组件库」。
把要复用的元素放到「组件库」里,通过发布并设置分享范围,被分享的人就可以在「组件库」列表中安装你的库、使用其中的组件了。
这里再明确两个概念:
  • 组件:组件是应用中功能相对独立的一部分,可以由多种类型的元素组成,既可以包含页面组件,也可以包含函数、连接器、流程、数据模型等元素中的一种或多种。
  • 组件库:是组件流通的载体,可以支持组件的跨应用复用。组件库中可以包含一个或多个组件,组件库有版本概念,一个组件库统一共享、安装、升级。
如图所示:开发 & 使用组件库
250px|700px|reset
250px|700px|reset
使用指南
(一)开发 & 管理组件库
新建组件库
  1. 未创建过「组件库」时,组件库列表隐藏
  1. 点击「新建应用」左侧图标,即可创建一个新组件库
250px|700px|reset
  1. 已创建过「组件库」时,「组件库」列表会出现在「应用」列表右侧。
250px|700px|reset
开发 & 管理组件
进入组件库开发后台,可创建页面组件、函数两种组件类型。(页面组件当前仅支持通过低代码创建,后续会支持通过拖拉拽无代码创建。)
  • 组件的具体开发,与在应用中相同,此处不再赘述。如需帮助,可以参考:
注意:
  • 组件库中的组件 api name 都需要带上组件库命名空间的前缀,格式为 {组件库命名空间}__{组件名称},例如 compLib_91eb16__c__DateDisplay 。
  • 在组件库中创建的组件都会自带前缀,如从其他工程中复制组件,需要手动将组件更名。
250px|700px|reset
250px|700px|reset
  1. 开发组件库时,对组件分组
  • 效果:安装时可以按分组查看组件;安装完成后页面编辑器的组件面板按分组展示,方便用户查找:
250px|700px|reset
250px|700px|reset
250px|700px|reset
  • 组件库开发时可以通过 categories.json 文件配置组件的分组和排序,代码示例如下:
注意:分组文件需要先更新为最新版 CLI 后使用,更新指令:npm install -g @byted-apaas/cli
  • 分组信息选填,如果不配置,那么默认平铺展示
  • 如果有配置分组信息,且有部分组件没有配置所属分组,那么展示时未配置分组的组件将展示在顶部(例如上图的导航栏组件)
[
{
"name": {
"zh_CN": "按钮类", // 分组的中文名
"en_US": "button" // 分组的英文名
},
"items": [ // 当前分组内包含的组件,分组内组件按配置的顺序展示
"button1",
"button2", // 组件的 API 名称
"button3"]
},
{
"name": {
"zh_CN": "信息展示", // 多个分组时,按顺序展示分组
"en_US": "data display"
},
"items": [
"chart",
"form",
"table"]
}
]
250px|700px|reset
  • 上传代码时,会对配置文件进行校验,如不正确会报错
  • 请确认组件的 API 名称正确,如不正确会报错
  • 一个组件只能属于一个分组,如果重复分到多个分组,会报错
250px|700px|reset
250px|700px|reset
  • 上传代码时,会对配置文件进行校验,如不正确会报错
  • 请确认组件的 API 名称正确,如不正确会报错
  • 一个组件只能属于一个分组,如果重复分到多个分组,会报错
250px|700px|reset
b.调试组件库
  • 开发组件的过程中,如需调试组件效果,可以点击右上角的「调试」进入调试模式。调试模式下相当于进入了一个虚拟应用,每个组件库都预置了一个虚拟应用,组件库中的任何改动都会实时同步到该应用中,可以方便地调试组件效果。
  • 另外还有一种进入「调试模式」的方式,如果在本地进行工程化开发,在经过 ae component dev 编译完成后,也会自动打开组件库调试模式页面,可在其中调试低码组件的功能。
  • 注意:直接编译和调试看不到组件分组效果,需要 push 代码后才能调试组件分组效果,
250px|700px|reset
250px|700px|reset
250px|700px|reset
发布 & 上架组件库
组件开发完成后,点击「创建版本」。
  • 填写版本信息:版本说明会展示给安装组件库的用户,建议尽量详尽一些。
  • 设置上架范围:上架范围内的用户可以查看、安装组件库。支持按照部门或用户维度设置范围。
  • 创建版本后,可以设置上架范围
250px|700px|reset
管理组件库
组件库管理页与应用类似,但更为简单,包含以下功能:
  • 查看和编辑组件库名称、命名空间、描述、所有者、创建时间等基本信息
  • 转移所有者
  • 查看组件库的使用情况
  • 管理组件库管理页、开发者
  • 设置组件库上架范围
  • 查看组件信息(不同类型组件的数量统计)
  • 查看组件库版本记录
250px|700px|reset
组件库版本列表
  • 所有创建成功的版本会在版本列表里展示,已上架的版本会有「上架版本」标签。
  • 系统默认给每个版本生成一个安装链接,你可以先将安装链接指定发给企业内的开发者安装后进行测试验证,验证无误后,再将稳定的版本更新上架
250px|700px|reset
  • 可以对版本安装链接进行重置或停用
  • 重置安装链接后,之前已获得安装链接的开发者再打开时会提示失效,需获取新的安装链接
250px|700px|reset
250px|700px|reset
  • 停用安装链接后,之前已获得安装链接的开发者再打开时会提示失效
  • 重置或停用安装链接,不会影响通过组件市场安装组件,也不会影响已安装组件库的应用使用
250px|700px|reset
组件库版本上架
  • 创建版本后,可以直接将版本进行上架,也可以先通过安装链接安装到指定应用测试验证无误后,在组件库管理页进行上架
250px|700px|reset
250px|700px|reset
  • 首次上架时,可以选择版本并指定上架范围
  • 如果上架范围是企业内部分用户,那么上架状态为灰度上架;
  • 如果上架范围是企业内全部用户,那么上架状态为全量上架;
  • 在上架范围内的用户可以在开发应用时,通过组件市场获取当前组件的上架版本。
  • 更新上架时,版本可以不变仅更新上架范围,也可以更新为其他的版本。
250px|700px|reset
250px|700px|reset
(二)使用组件库
通过组件市场获取组件库
在应用中有两个入口可以添加组件库。
方式一:在任意页面编辑器,点击组件栏右上角的「+」,点击「添加组件库」:
250px|700px|reset
方式二:在应用「设置」-「组件库」管理中,可以看到「+添加」按钮:
250px|700px|reset
添加组件库时,会出现可安装的组件库列表,列表中展示企业内组件库共享范围包含当前操作人的所有组件库,以及组件库内包含的组件列表。
  • 找到目标组件库,点击「安装」即可在应用中安装该组件库。如组件库内容较多、等待时间较长,可关闭弹窗,组件库安装将在后台继续运行,完成后通过消息中心提醒。
250px|700px|reset
250px|700px|reset
  • 安装完成,页面组件栏中会出现已安装好的组件库,与官方组件一样可以直接拖拽到画布中使用。
250px|700px|reset
通过安装链接获取组件库
  • 开发者获得组件库版本安装链接后,可以将组件库安装到自己有权限的应用
  • 打开安装链接时需先登录飞书账号,系统会获取飞书企业对应的飞书低代码平台组织
  • 安装组件库时,可以安装到新应用或升级已安装低版本的应用,可以同时安装到有权限的多个应用;
  • 如果应用已安装了当前版本或更高版本,那么不可安装。
250px|700px|reset
升级组件库
当应用中已安装的组件库有了新的版本,会在三个地方看到通知提示。我们先来看第一个位置:
  • 当有组件库有新版本时,在页面编辑器的组件管理按钮上会出现小红点,点击后可以看到该组件库「发现新版本」的标记,点击可查看版本详情
250px|700px|reset
250px|700px|reset
250px|700px|reset
  • 除此以外,在页面编辑器对应组件库旁边、设置-组件库管理页中也能看到新版本的提示,点击「升级」即可打开新版本详情
250px|700px|reset
250px|700px|reset
  • 在版本详情页上可以看到当前和最新版本的对比、最新版本的描述,如确定需要更新,点击「升级」即可。
需要注意:一旦组件库升级,应用内所有使用过相关组件的内容将同步升级
250px|700px|reset
  • 如组件库新版本相对当前版本有删除的内容,则会展示高危提示,如应用中有依赖被删减的组件,建议谨慎升级
250px|700px|reset
降级/回退组件库版本
  • 如果升级后的组件库运行有问题需要回退,可以联系开发者获取历史版本的组件库安装链接
  • 可以对应用覆盖安装,降级到旧版本
250px|700px|reset
  • 如果是服务商上架到方案中心的组件库,开发者更新上架版本后,也可以通过方案中心重新安装进行降级安装
250px|700px|reset
卸载组件库
如不需要某个组件库,可在页面编辑器或设置-组件库列表中点击「卸载」。
250px|700px|reset
250px|700px|reset
  • 卸载后,应用中已使用该组件库的内容将无法正常使用,需谨慎操作
250px|700px|reset
常见问题
为什么应用里看不到添加组件库的入口?
可能应用是旧版本应用,该功能仅支持在新版应用中使用
为什么应用添加组件库的列表里看不到具体某一个组件库?
可能你不在目标组件库的共享范围内,每个人只能看到上架范围范围包含自己的组件库
我可以把组件库分享给其他企业的成员吗?
支持,需要认证成为服务商伙伴后,通过 ISV 开发中心能力开发 ISV 组件库
企业内组件库版本安装链接可以发给其他企业用户吗?
不可以,只能发给企业内的开发者,其他企业用户打开时会提示无权限
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用