Home > Article > WeChat Applet > 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 of components
this time. Since a mini program may be composed of many pages, and different pages may have similar
parts, we need to reasonably split the pages into different components, just like building 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]
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 a search input box
at the top and a content list in the main part that can be continuously scrolled up.
Then according to this idea, we start to develop our own small program home page.
First, we open the app.json
file, in which the first configured item in pages
is the mini program homepage.
Next, we open the index.wxml
file 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 reload Turn 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.
navigationBarTitleText field in
app.json to empty characters. Just skewer.
Search input box
Content list two components, because both elements may be
reused by other pages.
rounded corners input box. There is a
search icon on the far left side of the input box, and there is a line of default
prompt text inside the input box.
input provided by the mini program, the document can be seen
input
view tag 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.
pages/index/index.wxml, the page will look like the left side.
input of the mini program and set the default prompt text for it through the
placeholder attribute.
index.wxss Cleared the original content and added our own style code.
Here is a very practical development tip, as shown in the picture above, we can use the Debugger
provided 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 our index .wxss
.
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 use iconfont for 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 the Explorer
in the developer tools, and then select Show
in the Explorer, or click the details panel in the upper right corner, and then click Local directory
One item.
Then we create a new assets
folder 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 the images
directory in assets
, 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.
After the above operation, we finally end up in the first row inside the search-bar
layer container, which is the same as input
Another built-in component image
is added at the same level, and then the location of the image to be displayed is specified through the src
attribute. Here, when you set the src
attribute in the image
tag, 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 in index.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 to Related Documents for learning
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 the Preview
button 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
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
Of course, this article has not actually carried out component development
, because we still develop elements directly in the page file, in the next article we will split the homepage according to Search input box component
Content 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!