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

2021-04-22 16:14:15 浏览数 (1)

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

1、拥有腾讯云账号;

2、开通微搭低代码;

3、安装 Node.js;

4、安装 Cloudbase CLI

注意:

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

代码语言:javascript复制
sudo npm install -g @cloudbase/cli

第 1 步:创建云端组件库

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

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

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

第 2 步:关联本地组件库

利用CloudBase CLI工具进行关联:

代码语言:javascript复制
tcb lowcode create mydemo

提示:

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

第 3 步:调试本地组件库

代码语言:javascript复制
cd mydemo
代码语言:javascript复制
tcb lowcode debug

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

可以在该页面进行调试:

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

第 4 步:发布本地组件库

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

代码语言:javascript复制
tcb lowcode publish

提示:

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

第 5 步:发布云端组件库

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

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

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

产品介绍

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

0 人点赞