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

创建源码组件

源码组件发布流程

准备工作

  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": "自定义提示"
  }
}
回到顶部