Use widget capabilities to implement "search" components

As the first serverless low-code development platform for WeChat applets in China, WeChat is one of the highlights of drag-and-drop development. What you see is what you get. We only need to drag and select components to quickly complete the page construction. But in the actual development process, many developers worry that the official component library is not rich enough to limit the development of applications.

As a fast-developing platform, Wi-Fi takes into account that in addition to the components provided by the platform, users may also need to expand their own components. Therefore, "custom components" capability, and currently supports low-code components and source code components. The introduction.

Among them, low-code components can be used to assemble official low-code components to assemble suitable business components, and source code components support code upload so that developers are not restricted from being free to play.

This article uses low-code components to define a search component. The overall steps are to create a custom component library-create a custom component-use these three steps in the application.

One, create a custom component library

Log in to the low-code console, find the component library management menu, click the [New Component Library] button, and enter the name and logo of the component library.

Two, create components

Click the name of the component library to enter the custom component page, and click the [Add component] button:

We need to define the name, logo, classification of the component, upload the icon of the component, and click the [OK] button

After the component is created, the subsequent operations need to be explained. If you click the icon of the component, you can modify the information you just entered. If you click the edit button, you will enter the design interface:

Three, design components

We click the edit button to enter the component design interface:

Let's take a look at the final effect of the components to be designed in this actual combat:

The goal is to achieve a commonly used "search component", you can enter keywords, you can click the search button. In fact, the low-code component is the same as our idea of building in the application. It is also to place the container first, and then place the text input component and button component. Let's implement it step by step.

First add a container component:

Then, switch to the style tab and set the height, border and layout of the component:

Then, place a text input component in the container and clear the title:

To add another button component, we need to set the title, size, and display effect of the button in turn:

The button also has a default border color, here the border is set to white, and the layout, margin and height of the button are set;

In this way, the effect of the component is complete. A custom component is not enough to have a display effect. It also needs to be able to bind data and expose response events to the outside. We switch to the component edit tab:

First set which data the component can bind to, click the Edit Data Properties button, we receive a text message, the field name is defined as text, give a default value, and then click the >> button, the editor will automatically generate the code:

Then modify the title, here is modified to Chinese:

After setting, click OK, then switch to the event properties tab, and click the event properties button:

Enter the event ID and event name and click the OK button:

In this way, the data and events are defined.

Fourth, use custom components

After the component is defined, click Publish:

Then, in the application management, you can see the components you define. Isn't it convenient? Try it now:

product description

Tencent Cloud Microcode is an efficient and high-performance drag-and-drop low-code development platform that connects up to the front-end industry business and down to the massive capabilities of cloud computing to help enterprises go to the cloud vertically. Tencent Cloud’s low-code build abstracts the cumbersome underlying architecture and infrastructure into a graphical interface, and quickly builds multi-terminal applications (small programs, H5 applications, Web applications, etc.) through industrial templates, drag-and-drop components, and visual configuration, eliminating the need In order to write the code, you can fully focus on the business scenario. Tencent Cloud's low code uses cloud development as the underlying support. The cloud native capability opens up the full link of application construction, provides a highly open development environment, and escorts your applications at all times.
Open low code: https://cloud.tencent.com/product/lowcode
Product documentation: https://cloud.tencent.com/document/product/1301/48874
Technical exchange group, latest information, follow WeChat public account [Tencent cloud low code]