使用微搭自定义组件能力实现「搜索」组件

微搭做为国内第一个微信小程序原生的 Serverless 低代码开发平台，亮点之一就是拖拽化开发，所见即所得，咱们只须要拖选组件就能够快速的完成页面的搭建。但在实际的开发过程当中，很多开发者担忧官方组件库不够丰富限制了应用的开发。

做为一个在飞速发展的平台，微搭考虑到除了平台提供的组件，用户可能还有扩展本身组件的需求，所以微搭上线了「自定义组件」能力，目前支持低码组件和源码组件的引入。

其中，低码组件能够应用官方的低码组件组装出适合本身的业务组件，源码组件支持代码上传这样就不限制开发人员自由发挥了。

本文就利用低码组件来定义一个搜索的组件。整体的步骤为 建立自定义组件库 - 建立自定义组件 - 在应用中使用 这三个步骤。

1、建立自定义组件库

登陆低码控制台，找到组件库管理菜单，点击【新建组件库】按钮，输入组件库的名称和标识。

2、建立组件

点击组件库的名称进入到自定义组件页面，点击【添加组件】按钮：

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

组件建立好后后续的操做须要说明一下，若是点击组件的图标能够修改刚才录入的信息，若是点击编辑按钮就进入到了设计界面：

3、设计组件

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

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

目标是实现一个经常使用的「搜索组件」，能够输入关键词，能够点击搜索按钮。其实低码组件和咱们在应用里搭建的思路是同样的，也是先放置容器，而后放置文本输入组件和按钮组件，下边咱们一步步的实现一下。

首先增长一个容器组件：

而后，切换到样式页签，设置一下组件的高度、边框和布局：

接着，在容器里放置一个文本输入组件，把标题清除就能够：

再增长一个按钮组件，咱们须要依次设置一下按钮的标题、大小、显示效果：

按钮还有一个默认的边框的颜色，这里将边框设置成白色，并设置按钮的布局、外边距和高度；

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

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

而后修改一下title，这里修改成中文：

设置完点击肯定就能够，接着切换到事件属性页签，点击事件属性按钮：

输入事件ID和事件名称点击肯定按钮便可：

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

4、使用自定义组件

组件定义好后，点击发布：

而后，在应用管理就能够看到本身定义的组件了，是否是很方便呢？赶忙试试吧：

产品介绍

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