关于低代码:使用微搭自定义组件能力实现搜索组件

4次阅读

共计 1394 个字符,预计需要花费 4 分钟才能阅读完成。

微搭作为国内第一个微信小程序原生的 Serverless 低代码开发平台,亮点之一就是拖拽化开发,所见即所得,咱们只须要拖选组件就能够疾速的实现页面的搭建。但在理论的开发过程中,不少开发者放心官网组件库不够丰盛限度了利用的开发。

作为一个在飞速发展的平台,微搭思考到除了平台提供的组件,用户可能还有扩大本人组件的需要,因而微搭上线了「自定义组件」能力,目前反对低码组件和源码组件的引入。

其中,低码组件能够利用官网的低码组件组装出适宜本人的业务组件,源码组件反对代码上传这样就不限度开发人员自由发挥了。

本文就利用低码组件来定义一个搜寻的组件。总体的步骤为 创立自定义组件库 – 创立自定义组件 – 在利用中应用 这三个步骤。

一、创立自定义组件库

登录低码控制台,找到组件库治理菜单,点击【新建组件库】按钮,输出组件库的名称和标识。

二、创立组件

点击组件库的名称进入到自定义组件页面,点击【增加组件】按钮:

咱们须要定义组件的名称、标识、分类,上传组件的图标,点击【确定】按钮

组件创立好后后续的操作须要阐明一下,如果点击组件的图标能够批改方才录入的信息,如果点击编辑按钮就进入到了设计界面:

三、设计组件

咱们点击编辑按钮,进入到组件设计界面:

先看一下本次实战要设计的组件的最终成果:

指标是实现一个罕用的「搜寻组件」,能够输出关键词,能够点击搜寻按钮。其实低码组件和咱们在利用里搭建的思路是一样的,也是先搁置容器,而后搁置文本输出组件和按钮组件,下边咱们一步步的实现一下。

首先减少一个容器组件:

而后,切换到款式页签,设置一下组件的高度、边框和布局:

接着,在容器里搁置一个文本输出组件,把题目革除就能够:

再减少一个按钮组件,咱们须要顺次设置一下按钮的题目、大小、显示成果:

按钮还有一个默认的边框的色彩,这里将边框设置成红色,并设置按钮的布局、外边距和高度;

这样组件的成果就做好了,一个自定义组件光有显示成果还不行,还须要能够绑定数据和对外裸露响应的事件,咱们切换到组件编辑页签:

先设置组件能够绑定哪些数据,点击编辑数据属性按钮,咱们接管一个文本信息,字段名称定义为 text,给一个默认值,而后点击 >> 按钮,编辑器会主动生成代码:

而后批改一下 title,这里批改为中文:

设置完点击确定就能够,接着切换到事件属性页签,点击事件属性按钮:

输出事件 ID 和事件名称点击确定按钮即可:

这样数据和事件都定义好了。

四、应用自定义组件

组件定义好后,点击公布:

而后,在利用治理就能够看到本人定义的组件了,是不是很不便呢?连忙试试吧:

产品介绍

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

正文完
 0