创建一个组件库前的准备工作:
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 技术交流群、最新资讯关注微信公众号【腾讯云低代码】