A brief analysis of how to develop a content list component in a mini program

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

We have developed a commonsearch input boxon the homepage, but its code is written directly in the homepage file, so it cannot be called is a component. In this article, we will introduce how to write a complete small program component. [Related learning recommendations:小program development tutorial]

Component composition

Component structure

First of all, components are similar to pages and have a separate folder for maintenance. We first create acomponentsdirectory in the mini program project to store our components, and then create a directory namedsearch-barto use as oursearch boxComponents.

As mentioned above, components are actually very similar to pages and are composed of a directory, so naturally the content to be displayed is also composed ofindex.wxmlTo write. So we directly paste the previous part aboutSearch box.

After pasting intocomponents/search-bar/index.wxml, the code format may not be very good , you can right-click a blank space in the file content, or select the code, and then clickFormat Documentto automatically format.

What needs to be noted here is that if there is a resource location reference in our structure file, after modifying the file location, we must confirm whether the modified location references the resource correctly. For example, here, we paste the original content underpages/index/index.wxmltocomponents/search-bar/index.wxml, where theimagetag references files underassets/images, you need to confirm that the image reference path in the new location is still valid.

Component style

Similarly, we paste the component style we wrote before

Component declaration

In this way, we have completed the structure and style definition of the component, but the developer tools do not think this is a component yet, so we need Createindex.jsonin the component directory to declare that this directory is a valid component. The method is as shown below.

First, we need to use"component": trueinindex.jsonto declare that this is a component

Secondly, we need to use the global methodComponent()to register the component inindex.js. The parameter of this method is an object, in which various pages similar to the page can be defined. For details, please refer toOfficial Document

Component usage

Then the basic definition of the component is completed , our component is ready for use. Just introduce the component where you need to use it. The introduction method is, for example, declaring the following in our homepage configuration file

Among them,"search-bar"defines the label name of the component, just like the built-in components of the mini programinputandimagewe use, and the following content corresponds to the component’s tag name for the current referrer. Relative position, the search method for this position is the same as the search for the image position in theimagetag.

After the above component reference declaration, we can use the component in the page structure file

During this process, if you encounter an error in the console in the lower right corner, you can recompile the project by clicking the compile button in the top center of the developer tools to rewrite and parse various files. If there are still errors after compilation, on the one hand, you can check whether there are indeed errors in the code, and on the other hand, you can try by restarting the developer tools (because the developer tools themselves also have certain bugs, and sometimes strange problems occur)

In addition, I have made some customized settings in the developer tool settings according to my personal development habits, such as automatic saving and code indentation, for reference.

Content list component

After introducing a complete custom component, we will continue to complete thecontent Development of list component.

The content list is obviously more complicated than the search input box above, but the development method of components is the same. We only need to develop components according to this rule.

First, we create the four core files that make up the component as follows, among whichindex.jsandindex.jsonare the same as those written before.

Next, we complete thelist componentby writingindex.wxmlandindex.wxsselement definition.

Since it is a list, theLoop traversalsyntax in the mini program will be used. For this part, you can refer to theOfficial Documentfor learning. The specific usage is as follows.

Then, we define the external incoming data received by the component inindex.jsas follows

In this way, usingwx:forinindex.wxmlto traverse is thepropertiesattribute inindex.jsList of external incoming data received. Then we immediately introduce this component to the homepage and pass it the real data list. The method of use is still to first declare a reference to the component inindex.json, and then use the tag name declared during the reference in the page file.

Here we declare theitemsattribute for thecontent list componentwe defined The data is passed in, and the data comes from thelistDatadefined internally on the homepage. This requires us to declare the data indataofindex.json the homepage. .

data and properties

Here we talk aboutdataandpropertiesWhat's the difference?datais used to define its own data inside the page or component, whilepropertiesis used to receive external incoming data, so only components have this property.

For example, for thecontent list component, it requires the real list data to be passed in externally, so inpropertiesit is equivalent to customizing the parameters of the component and then using it externally This component can pass data to it through the parameters declared by the component.

Data is passed in

Therefore, we need to understand what the data structure required for component parameters is, such as thelist component## we define here #A data list needs to be passed in, and each item in the data list contains text and pictures, so we define the following data on the homepagelistData

##As you can see, each item in the list must exactly conform to the data structure used by our component, that is, each data item has a

text

field to display the text content, and animage# The ## field is used to display images accompanying the text.Then back inside our component, we use theitem

field representing each item of data to access the data items of the list according to the syntax of

wx:forMake a presentation. Themodeparameter of the built-in tagimageis also used to declare the size style of the image display.

And written through a series of styles

The final effect of the page display is as shown in the figure below

Finally, we preview our development so far through a real machine The effect of the mini program and comparison with the homepage of the Zhihu mini program are as follows.

The left side is the homepage of the Zhihu mini program, and the right side is the mini program we developed ourselves. Isn’t the effect pretty good?

Summary

Finally, let’s summarize what we learned today. In fact, you can clearly see through the directory. Today we introduced acustom componentThe development process is as follows

• Component creation
• Component definition and declaration
• Component reference
• Incoming component data

Through the above method, combined with the previously mentionedPage developmentmethod, we have improved the mini program Develop core skills. After that, we can develop small program pages responsible for different functions according to our own design, and develop a series of custom components based on the functions and characteristics of each page to achieve the effect of flexible combination.

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of A brief analysis of how to develop a content list component in a mini program. For more information, please follow other related articles on the PHP Chinese website!