# 创建源码组件
# 源码组件发布流程
# 准备工作
- 拥有腾讯云账号；
- 开通云开发低码；
- 安装 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": "自定义提示"
}
}