创建源码组件
源码组件发布流程
准备工作
- 拥有腾讯云账号;
- 开通云开发低码;
- 安装 Node.js;
- 安装 Cloudbase CLI。
注意
如果 npm install -g @cloudbase/cli
失败,您可能需要修改 npm 权限,或者以系统管理员身份运行:
sudo npm install -g @cloudbase/cli
第 1 步:创建云端组件库
打开 组件库管理 页面,新建组件库 mydemo
。
第 2 步:关联本地组件库
tcb lowcode create mydemo
提示
创建本地组件库使用的标识 mydemo
需要和云端一致,才能关联上云端组件库。
或者使用命令 tcb lowcode create
,通过智能提示来完成关联。
第 3 步:调试本地组件库
cd mydemotcb lowcode debug
执行完以上命令后,会自动打开 调试模式 的应用编辑器,并加载了本地组件库。
第 4 步:发布本地组件库
tcb lowcode publish
提示
发布本地组件库,相当于更新了云端组件库的草稿,还需要到控制台里把草稿发布成正式版本。
第 5 步:发布云端组件库
打开 mydemo
组件库的组件详情页,发布组件库。
第 6 步: 在应用中使用自定义组件库
使用方法和 第 3 步:调试本地组件库 相似,但这是 普通模式 的应用编辑器,编辑完应用可以正常发布。
组件库配置
配置示例
cloudbaserc.json
{ "envId": "{{envId}}", "lowcodeCustomComponents": { "name": "demo", "configRoot": "./src/configs", "platformRoot": { "web": "./src/web", "mp": "./src/mp" } }}
配置参数说明
低码用户只需要关心 lowcodeCustomComponents
下的参数。
name
必填,组件库的标识,用于本地组件库与云端组件库的关联。
configRoot
必填,配置文件的根目录。
组件配置文件与组件图标文件应放在 $configRoot/components 下。
动作配置文件应放在 $configRoot/actions 下。
platformRoot
源码的根目录
platformRoot.mp
小程序源码的根目录
组件源码应放在 ${platformRoot.mp}/components 下。
动作源码应放在 ${platformRoot.mp}/actions 下。
platformRoot.web
#
Web 源码的根目录
组件源码应放在 ${platformRoot.web}/components 下。
动作源码应放在 ${platformRoot.web}/actions 下。
组件配置
配置参数说明
data
选填,组件可以接收的数据, 用作组件入参,需要符合 Json Schema 规范。
低码编辑器也会根据该配置,绘制组件的 数据 面板。
events
选填,组件可以被捕获的事件信息。
低码编辑器也会根据该配置,绘制组件的 事件 面板的 触发条件 。
meta
选填,仅用于在低码平台的信息展示。
meta.title
选填, 组件别名, 建议用中文。
meta.description
选填, 组件简介, 建议用中文。
meta.icon
选填, 组件图标, 暂时只支持本地图片。
meta.category
选填, 组件分类, 建议用中文。
meta.componentOrder
选填, 组件的排序权重。
配置示例
"$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
"data": {
"type": "object",
"properties": {
"text": {
"title": "按钮文字",
"default": "按钮",
"type": "string"
},
"size": {
"title": "按钮大小",
"type": "string",
"default": "default",
"x-component": "radio",
"enum": [
{
"label": "default",
"value": "default"
},
{
"label": "mini",
"value": "mini"
}
]
},
"type": {
"title": "按钮类型",
"type": "string",
"default": "primary",
"x-component": "radio",
"enum": [
{
"label": "default",
"value": "default"
},
{
"label": "primary",
"value": "primary"
},
{
"label": "warn",
"value": "warn"
}
]
},
"loading": {
"title": "加载中",
"type": "boolean",
"default": false
},
"disabled": {
"title": "禁用",
"type": "boolean",
"default": false
},
"plain": {
"title": "镂空",
"type": "boolean",
"default": false
}
}
},
"events": [{ "name": "customevent", "title": "自定义事件" }],
"meta": {
"title": "按钮",
"description": "按钮组件,兼容小程序和H5平台",
"icon": "./icon.svg",
"category": "表单",
"componentOrder": 1
}
}
动作配置
配置参数说明
data
选填, 动作可以接收的数据,需要符合 Json Schema 规范。
低码编辑器也会根据该配置,绘制组件的 事件 面板的 已添加动作 。
meta
选填,仅用于在低码平台的信息展示
meta.title
选填, 动作的别名, 建议用中文
meta.description
选填, 动作的简介, 建议用中文
配置示例
{
"$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
"data": {
"type": "object",
"properties": {
"title": {
"title": "标题",
"type": "string",
"default": "提示的内容"
},
"icon": {
"title": "图标",
"type": "string",
"default": "success",
"x-component": "radio",
"enum": [
{
"label": "success",
"value": "success"
},
{
"label": "loading",
"value": "loading"
},
{
"label": "none",
"value": "none"
}
]
},
"duration": {
"title": "提示的延迟时间",
"type": "number",
"default": 1500
}
}
},
"meta": {
"title": "自定义提示",
"description": "自定义提示"
}
}