如何在微搭低代码平台自定义组件

创建一个组件库前的准备工作：

1、拥有腾讯云账号；

2、开通微搭低代码；

3、安装 Node.js；

4、安装 Cloudbase CLI。

注意：

如果 npm install -g @cloudbase/cli 失败，您可能需要修改npm权限，或者以系统管理员身份运行：

sudo npm install -g @cloudbase/cli

第 1 步：创建云端组件库

打开控制台左侧的【组件库管理】页面，点击 新建组件库 ，此处命名为mydemo。

目前，微搭低代码的组件主要分为“低码组件”（通过线上编辑器拖拽生成的组件）和“源码组件”（通过本地代码开发生成的组件）两种，开发者可以按需点击“添加组件”或“导入组件”，分别添加“低码组件”或“源码组件”。

接下来着重介绍源码组件的导入方式。

第 2 步：关联本地组件库

利用CloudBase CLI工具进行关联：

tcb lowcode create mydemo

提示：

创建本地组件库使用的标识 mydemo 需要和云端一致，才能关联上云端组件库。或者使用命令 tcb lowcode create，通过智能提示来完成关联。

第 3 步：调试本地组件库

cd mydemo

tcb lowcode debug

执行完以上命令后，会自动打开 调试模式 的应用编辑器，并加载了本地组件库。

可以在该页面进行调试：

• 拖拽组件到 编辑区 内，并查看 预览区 效果；
• 在组件的 数据 栏，配置数据，并查看 预览区 效果；
• 在组件的 样式 栏，配置样式，并查看 预览区 效果；
• 在组件的 事件 栏，绑定自定义事件和自定义动作，并在 预览区 触发事件；
• 通过 IDE 预览 在微信开发者工具上打开小程序，查看预览效果；
• 通过 手机预览 在手机上打开小程序，查看预览效果。

第 4 步：发布本地组件库

调试完成后，继续在CLI中运行如下代码，以完成刚刚调试的本地组件库的发布：

tcb lowcode publish

提示：

发布本地组件库，相当于更新了云端组件库的草稿，还需要到控制台里把草稿发布成正式版本。

第 5 步：发布云端组件库

在控制台打开 mydemo 组件库的组件详情页，会发现刚刚调试完的组件已经显示在组件库中，点击发布组件库。

第 6 步: 在应用中使用自定义组件库

进入低码编辑页面，点击左侧的组件栏，选择你发布的组件库，即可自由使用你的自定义组件进行低码应用的创作了！

产品介绍

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台，向上连接前端的行业业务，向下连接云计算的海量能力，助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、Web 应用等），免去了代码编写工作，让您能够完全专注于业务场景。腾讯云微搭低代码以云开发作为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。 开通低代码：https://cloud.tencent.com/product/lowcode 产品文档：https://cloud.tencent.com/document/product/1301/48874 技术交流群、最新资讯关注微信公众号【腾讯云低代码】