微信开发者工具篇「微搭低代码」如何创建源码组件
发布于 3 年前 作者 pingmeng 2651 次浏览 来自 分享

创建源码组件

源码组件发布流程

准备工作

  1. 拥有腾讯云账号;
  2. 开通云开发低码;
  3. 安装 Node.js
  4. 安装 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": "自定义提示"
  }
}
回到顶部