Teach you step by step how to develop a search input box component in a mini program

This article will share with you a practical application of small program development and introduce how to develop a search input box component. I hope it will be helpful to everyone!

Let’s talk about the development ofcomponentsthis time. Since a mini program may be composed of many pages, and different pages may havesimilarparts, we need to reasonably split the pages into different components, just likebuilding blocks, and then complete the assembly of each page by combining different components. This is why there is the concept of component development. [Related learning recommendations:小program development tutorial]

Practical Exercise

So without further ado, let’s start the actual combat directly. How to split a page into components is guided by the experience accumulated after developing a series of pages. Let's first make a few pages to get a feel for it.

For example, let’s make a small program homepage first. Most of the homepages of many of our common applications are a content list. In fact, it has a more professional name called “feed flow”.

For example, in the picture above, they are the homepages of the mini programs of Weibo, Zhihu, Meituan and Boss Direct Recruitment. As you can see, they are basically composed of asearch input boxat the top and a content list in the main part that can be continuously scrolled up.

Home page development

Then according to this idea, we start to develop our own small program home page.

First, we open theapp.jsonfile, in which the first configured item inpagesis the mini program homepage.

Next, we open theindex.wxmlfile on the homepage and clear it, and then start writing our own homepage content.

Before clearing

After clearing

We can change the # indicated in the above picture ##Hot reloadTurn on, so that you can see the modification effect in real time after modifying the content of the page, without having to manually click compile every time.

In addition, we found that the homepages of the above four mainstream mini programs have no title content, so we also changed the

navigationBarTitleTextfield inapp.jsonto empty characters. Just skewer.

Search box component

As we mentioned above, the homepage consists of a search input box at the top and a list in the main part, which naturally separates the homepage. It is divided into

Search input boxContent listtwo components, because both elements may bereusedby other pages.

Then let’s develop the search input box first. Let’s take the simplest form as an example, such as the second and fourth in the mainstream applet above. That is, a

rounded cornersinput box. There is asearch iconon the far left side of the input box, and there is a line of defaultprompt textinside the input box.

Built-in component input

Input box we will use the internal component

inputprovided by the mini program, the document can be seeninput

Then when we develop pages or components, we should pay attention to using a

viewtag as a container at each element level to wrap the elements, so that the elements can be controlled later in the layout. It will all be easier.

For example, if we write the above code in

pages/index/index.wxml, the page will look like the left side.

Here we use the built-in component

inputof the mini program and set the default prompt text for it through theplaceholderattribute.

Next, we need to use some style code to style the search box.

We added style attributes to the element tags

Then in

index.wxssCleared the original content and added our own style code.

Style Debugging

Here is a very practical development tip, as shown in the picture above, we can use theDebuggerprovided by the developer tools to view the page The actual rendered structure and style attributes, and we can directly modify the styles of page elements here and see the effects in real time. Even for color attributes, we can click on the current color to bring up the color selection panel and adjust the color of the element as shown above.

Then, when we adjust the page style to the best effect, directly select and copy the style code in the debugger, and then paste it into ourindex .wxss.

Icon introduction

Finally, we also need to display a search style icon on the leftmost side inside the input box, then First we need to find a search style picture from the Internet. It is recommended to useiconfontfor icon filtering on this website

After we select the icon, we can modify the color and size of the icon as shown below, and then download.

Next, we put the downloaded pictures into the mini program project folder. There are many ways to open the mini program project folder. For example, you can right-click any file in theExplorerin the developer tools, and then selectShowin the Explorer, or click the details panel in the upper right corner, and then clickLocal directoryOne item.

Then we create a newassetsfolder to store the static files of the mini program, such as pictures, public styles, etc.

We will put the search image we just downloaded into theimagesdirectory inassets, and change the image name to English Name (it is generally recommended to name files in English to avoid some program parsing errors)

Then we return to the developer tools and you can see the search you just copied The icon is ready. Then, we use the style code to display it in the input box

#First, we can use the method shown in the picture above and click the icon in the upper left corner of the debugger to Take a look at the current element structure of our page. The method is to first click the view icon in the upper left corner of the debugger, and then move the mouse to any position in the mini program preview on the left. You can see that the right panel will highlight the selected element according to the selected position on the left. The corresponding code area.

Through this method, we can intuitively understand the current code structure of our page, thereby deciding which container layer our newly added icon element should be placed in.

Position layout

After the above operation, we finally end up in the first row inside thesearch-barlayer container, which is the same asinputAnother built-in componentimageis added at the same level, and then the location of the image to be displayed is specified through thesrcattribute. Here, when you set thesrcattribute in theimagetag, the developer tools will automatically prompt you for the path you can choose. Since the location of our image is outside the directory where the current file is located, we only need to enter..at the beginning to go to the upper-level directory. Then the developer tool will prompt us that the upper-level directory is available. which files.

Finally, we used CSS syntax to write reasonable styles inindex.wxss, and the search icon was displayed to the vertical center position on the left side of the input box . For specific syntax, please refer toRelated Documentsfor learning

Real Machine Preview

So after the above development, our homepage has begun to take shape. Here we introduce another powerful function provided by developer tools-the real machine preview function.

As shown in the figure, click thePreviewbutton at the top of the panel. The developer tools will compile the current mini program project into a previewable state, and then log in to the mini program. By scanning the QR code on the developer's WeChat, you can see the effect of the current mini program on the real device

Summary

Okay, finally let’s summarize what we talked about today. Today we first introduced the concept of component development and why component splitting is necessary, and introduced some development techniques used in the process of developing components through an example, including

• Using built-in components
• Style debugging method
• Image resource introduction
• Real machine preview

Of course, this article has not actually carried outcomponent development, because we still develop elements directly in the page file, in the next article we will split the homepage according toSearch input box componentContent list component, so that Detailed introduction to the development methods of small program components.

For more programming related knowledge, please visit:Programming Video! !

The above is the detailed content of Teach you step by step how to develop a search input box component in a mini program. For more information, please follow other related articles on the PHP Chinese website!