使用微搭自定義組件能力實現「搜索」組件

微搭做爲國內第一個微信小程序原生的 Serverless 低代碼開發平臺，亮點之一就是拖拽化開發，所見即所得，咱們只須要拖選組件就能夠快速的完成頁面的搭建。但在實際的開發過程當中，很多開發者擔憂官方組件庫不夠豐富限制了應用的開發。

做爲一個在飛速發展的平臺，微搭考慮到除了平臺提供的組件，用戶可能還有擴展本身組件的需求，所以微搭上線了「自定義組件」能力，目前支持低碼組件和源碼組件的引入。

其中，低碼組件能夠應用官方的低碼組件組裝出適合本身的業務組件，源碼組件支持代碼上傳這樣就不限制開發人員自由發揮了。

本文就利用低碼組件來定義一個搜索的組件。整體的步驟爲 建立自定義組件庫 - 建立自定義組件 - 在應用中使用 這三個步驟。

1、建立自定義組件庫

登陸低碼控制檯，找到組件庫管理菜單，點擊【新建組件庫】按鈕，輸入組件庫的名稱和標識。

2、建立組件

點擊組件庫的名稱進入到自定義組件頁面，點擊【添加組件】按鈕：

咱們須要定義組件的名稱、標識、分類，上傳組件的圖標，點擊【肯定】按鈕

組件建立好後後續的操做須要說明一下，若是點擊組件的圖標能夠修改剛纔錄入的信息，若是點擊編輯按鈕就進入到了設計界面：

3、設計組件

咱們點擊編輯按鈕，進入到組件設計界面：

先看一下本次實戰要設計的組件的最終效果：

目標是實現一個經常使用的「搜索組件」，能夠輸入關鍵詞，能夠點擊搜索按鈕。其實低碼組件和咱們在應用裏搭建的思路是同樣的，也是先放置容器，而後放置文本輸入組件和按鈕組件，下邊咱們一步步的實現一下。

首先增長一個容器組件：

而後，切換到樣式頁籤，設置一下組件的高度、邊框和佈局：

接着，在容器裏放置一個文本輸入組件，把標題清除就能夠：

再增長一個按鈕組件，咱們須要依次設置一下按鈕的標題、大小、顯示效果：

按鈕還有一個默認的邊框的顏色，這裏將邊框設置成白色，並設置按鈕的佈局、外邊距和高度；

這樣組件的效果就作好了，一個自定義組件光有顯示效果還不行，還須要能夠綁定數據和對外暴露響應的事件，咱們切換到組件編輯頁籤：

先設置組件能夠綁定哪些數據，點擊編輯數據屬性按鈕，咱們接收一個文本信息，字段名稱定義爲text，給一個默認值，而後點擊>>按鈕，編輯器會自動生成代碼：

而後修改一下title，這裏修改成中文：

設置完點擊肯定就能夠，接着切換到事件屬性頁籤，點擊事件屬性按鈕：

輸入事件ID和事件名稱點擊肯定按鈕便可：

這樣數據和事件都定義好了。

4、使用自定義組件

組件定義好後，點擊發布：

而後，在應用管理就能夠看到本身定義的組件了，是否是很方便呢？趕忙試試吧：

產品介紹

騰訊雲微搭低代碼是高效、高性能的拖拽式低代碼開發平臺，向上鏈接前端的行業業務，向下鏈接雲計算的海量能力，助力企業垂直上雲。騰訊雲微搭低代碼將繁瑣的底層架構和基礎設施抽象化爲圖形界面，經過行業化模板、拖放式組件和可視化配置快速構建多端應用（小程序、H5 應用、Web 應用等），免去了代碼編寫工做，讓您可以徹底專一於業務場景。騰訊雲微搭低代碼以雲開發做爲底層支撐，雲原生能力將應用搭建的全鏈路打通，提供高度開放的開發環境，且時刻爲您的應用保駕護航。
開通低代碼：https://cloud.tencent.com/product/lowcode
產品文檔：https://cloud.tencent.com/document/product/1301/48874技術交流羣、最新資訊關注微信公衆號【騰訊雲低代碼】